/* V17 — Ürün görseli büyütme (lightbox). Ana görsele tıklanınca tam ekran
 * bir görüntüleyici açılır; görsel kırpılmadan, oranı korunarak (contain)
 * ekrana sığdırılır. */

/* Ana görsel: tıklanabilir olduğunu belli eden imleç + hover ipucu simgesi */
.product-main-image{position:relative}
.product-main-image img.zoomable{cursor:zoom-in}
.product-main-image:after{
  content:'⤢';
  position:absolute;
  right:16px;
  bottom:16px;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f6f3edee;
  color:var(--forest);
  font-size:17px;
  box-shadow:0 8px 20px #0002;
  opacity:0;
  transform:translateY(6px);
  transition:.25s;
  pointer-events:none;
}
.product-main-image:hover:after{opacity:1;transform:none}

.image-lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  transition:.25s;
}
.image-lightbox.open{opacity:1;visibility:visible}
.image-lightbox .modal-backdrop{position:absolute;inset:0;background:#07120ed9;backdrop-filter:blur(5px)}
.image-lightbox .lightbox-close{position:fixed;right:22px;top:22px;z-index:2}
.lightbox-nav.pointer-glow,.lightbox-close.pointer-glow{position:fixed;transform:none}

.lightbox-stage{
  position:relative;
  z-index:1;
  width:min(1200px,92vw);
  height:88vh;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.lightbox-stage img{
  max-width:100%;
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 30px 80px #0007;
}

.lightbox-nav{
  position:fixed;
  top:calc(50% - 26px);
  z-index:2;
  width:52px;
  height:52px;
  border-radius:50%;
  border:0;
  background:#f6f3edee;
  color:var(--forest);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:0 8px 20px #0003;
  transition:.2s;
}
.lightbox-nav:hover{background:#fff}
.lightbox-prev{left:22px}
.lightbox-next{right:22px}

.lightbox-counter{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:2;
  background:#07120eb3;
  color:#fff;
  font-size:12px;
  letter-spacing:.5px;
  padding:9px 16px;
  border-radius:20px;
}

@media(max-width:620px){
  .lightbox-stage{width:100vw;height:78vh}
  .lightbox-stage img{max-height:78vh}
  .lightbox-nav{width:44px;height:44px;font-size:22px;top:calc(50% - 22px)}
  .lightbox-prev{left:10px}
  .lightbox-next{right:10px}
  .product-main-image:after{width:38px;height:38px;font-size:15px;right:12px;bottom:12px}
}