:root{
  --lb-max-w: 1200px;
  --lb-padding: 24px;
  --lb-bar-h: 56px;           /* üst/alt beyaz şerit yüksekliği */
background: rgba(0,0,0,.98);
}

/* Sayfadaki küçük görseller */
.page-wrap img{
  max-width:100%; height:auto; display:block;
  margin:1rem auto; border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  cursor:zoom-in;
}

/* Overlay kayabilir kalsın */
.vt-lightbox{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.88);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--lb-padding);
  overflow: auto;                         /* fare tekeriyle kaydırma */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.vt-lightbox.open{ display:flex; }

/* ÇERÇEVE (stage) — üst/alt boşluğu barlar için açtık */
.vt-lb-stage{
  position: relative;
  width: min(var(--lb-max-w), 94vw);
  margin: auto;
background: linear-gradient(#fff 0 var(--lb-bar), #111 var(--lb-bar) 100%);
  padding-top: var(--lb-bar-h);
  padding-bottom: var(--lb-bar-h);
box-shadow:0 18px 60px rgba(0,0,0,.55);
}



/* Üst şeritte ortalanmış sayfa/sayaç */
.vt-lb-count{
  position:absolute;
  top: 8px;                          /* üst beyaz bar içinde */
  left: 50%;
  transform: translateX(-50%);
  height: calc(var(--lb-bar-h) - 16px);
  padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
  color: #222;                       /* beyaz bar üstünde okunaklı */
  font: 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  background: transparent;           /* barın kendisi beyaz */
  pointer-events: none;              /* tıklamayı engellemesin */
  z-index: 6;
}




/* ÜST ve ALT beyaz şeritler */
.vt-lb-stage::before,
.vt-lb-stage::after{
  content:"";
  position:absolute; left:0; right:0;
  height: var(--lb-bar-h);
  background:#fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.vt-lb-stage::before{ top:0; border-radius:10px 10px 0 0; }
.vt-lb-stage::after { bottom:0; border-radius:0 0 10px 10px; }

/* Görsel */
.vt-lb-img{
  display:block;
  width:auto; height:auto;
  max-width:100%;
  max-height:calc(90vh - (var(--lb-bar-h) + var(--lb-padding)));
  object-fit:contain;
  background: #000;
  border-radius:10;
  box-shadow:none;
  margin-top: 20px;
margin-left: auto;
margin-right: auto;
}

/* Alt yazıyı alt beyaz şeridin içinde merkezde göster */
.vt-lb-cap{
  position:absolute;
  left:16px; right:16px; bottom: calc(8px + 0px); /* bar içinde küçük boşluk */
  color:#222;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align:center;
  pointer-events:none; /* tıklamayı engellemesin */
}

/* Kapat düğmesi — üst beyaz şeridin içinde */
.vt-lb-close{
  position:absolute;
  top: 8px; right: 8px;
  width:40px; height:40px; line-height:40px;
  border:0; border-radius:50%;
  background: transparent;
  color:#333; font-size:22px; cursor:pointer;
}
.vt-lb-close:hover{ background: rgba(0,0,0,.06); }

/* NAV butonları çerçevenin içinde kalsın */
.vt-lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5;
  width:46px; height:46px; line-height:46px;
  border:0; border-radius:50%;
  color:#fff; background:rgba(0,0,0,.45);
  cursor:pointer; font-size:20px; user-select:none;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.vt-lb-btn:hover{ background:rgba(0,0,0,.65); }
.vt-lb-prev{ left:10px; }
.vt-lb-next{ right:10px; }

@media (max-width:640px){
  .vt-lb-btn{ width:42px; height:42px; line-height:42px; }
  .vt-lb-prev{ left:6px; } .vt-lb-next{ right:6px; }
  .vt-lb-cap{ font-size:13px; }
}