:root{
  --pantra-bg:#faf6ee;
  --pantra-panel:#fff;
  --pantra-ink:#1c1c1c;
  --pantra-muted:#8a8378;
  --pantra-accent:#b5651d;
  --pantra-line:#e7e0d3;
}
/* Not: box-sizing ve font kuralları artık SADECE galeri alanıyla sınırlı —
   önceki sürümde bunlar "body" ve "*" seçicileriyle TÜM SİTEYE uygulanıyordu,
   bu da header menü gibi alanlarda font/renk değişkenlerinin (--line vb.)
   temanın kendi değerlerinin üzerine yazılmasına sebep oluyordu. */
.pantra-gallery, .pantra-gallery *,
.pantra-lightbox, .pantra-lightbox *{
  box-sizing:border-box;
}
.page{
  max-width:1000px;
  margin:60px auto;
  padding:0 24px;
  display:flex;
  gap:48px;
}
/* ------- Ürün sayfasındaki normal görsel alanı ------- */
.pantra-gallery{
  display:flex;
  gap:16px;
  flex:1;
}
.pantra-thumbs{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:72px;
  max-height:318px; /* tam 4 küçük resim (4*72px + 3*10px boşluk) */
  overflow-y:auto;
  overflow-x:hidden;
  scroll-behavior:smooth;
  padding-right:4px; /* kaydırma çubuğu görsellerin üzerine binmesin */
  flex-shrink:0;
}
.pantra-thumbs::-webkit-scrollbar{ width:4px; }
.pantra-thumbs::-webkit-scrollbar-thumb{ background:var(--pantra-line); border-radius:4px; }
.pantra-thumbs button{
  width:72px;
  height:72px;
  flex-shrink:0; /* butonlar kaydırma alanında sıkışıp küçülmesin */
  padding:0;
  border:2px solid transparent;
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  background:var(--pantra-panel);
}
.pantra-thumbs button.active{ border-color:var(--pantra-accent); }
.pantra-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }

.pantra-main-image{
  flex:1;
  background:var(--pantra-panel);
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  aspect-ratio:3/4; /* moda fotoğrafları için daha uygun, dikey oran */
}
.pantra-main-image img{
  width:100%; height:100%; object-fit:contain; display:block;
  /* object-fit:contain -> görsel HİÇBİR ZAMAN kırpılmaz, tamamı görünür */
}

.info{ flex:1; padding-top:8px; }
.info h1{ font-size:22px; margin:0 0 8px; }
.info p{ color:var(--pantra-muted); line-height:1.6; }

/* ------------------- LIGHTBOX ------------------- */
.pantra-lightbox{
  position:fixed; inset:0;
  background:var(--pantra-bg);
  display:none;
  z-index:999999;
}
.pantra-lightbox.open{ display:block; }

.pantra-lb-close{
  position:absolute; top:24px; right:32px;
  background:none; border:none;
  font-size:28px; line-height:1; cursor:pointer;
  color:var(--pantra-ink);
  z-index:5;
}

.pantra-lb-body{
  display:flex;
  align-items:center;
  height:100%;
  padding:40px 80px;
  gap:32px;
}

/* sol tarafta küçük resim şeridi, aşağı/yukarı okla kaydırılabilir */
.pantra-lb-thumbs-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:80px;
}
.pantra-lb-thumbs-col .pantra-nav-arrow{
  background:none; border:none; cursor:pointer; font-size:18px; color:var(--pantra-muted);
}
.pantra-lb-thumbs-track{
  display:flex; flex-direction:column; gap:12px;
  max-height:420px; overflow:hidden;
}
.pantra-lb-thumbs-track button{
  width:64px; height:64px; padding:0;
  border:2px solid transparent; border-radius:6px; overflow:hidden; cursor:pointer;
  background:var(--pantra-panel);
}
.pantra-lb-thumbs-track button.active{ border-color:var(--pantra-accent); }
.pantra-lb-thumbs-track img{ width:100%; height:100%; object-fit:cover; display:block; }

/* orta - ana slider (tüm slaytlar yan yana, transform ile kaydırılır) */
.pantra-lb-stage{
  flex:1; position:relative;
  display:flex; align-items:center; justify-content:center;
  height:100%;
  overflow:hidden;
}
.pantra-lb-track{
  display:flex;
  height:80%;
  transition:transform .4s ease;
  will-change:transform;
}
.pantra-lb-slide{
  flex:0 0 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pantra-lb-slide .pantra-img-wrap{
  position:relative;
  overflow:hidden;
  max-height:100%;
  border-radius:4px;
}
.pantra-lb-slide img{
  display:block;
  max-height:70vh;
  max-width:100%;
  object-fit:contain;
}

.pantra-lb-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:var(--pantra-panel); border:1px solid var(--pantra-line);
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px; color:var(--pantra-ink);
}
.pantra-lb-arrow.prev{ left:8px; }
.pantra-lb-arrow.next{ right:8px; }

.pantra-lb-counter{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  font-size:13px; color:var(--pantra-muted);
}

@media (max-width:720px){
  .page{ flex-direction:column; }
  .pantra-lb-body{ padding:20px; gap:12px; }
  .pantra-lb-thumbs-col{ display:none; }
}