/* =====================================================================================
   SARE MODA — ürün ayrıntı sayfası (sayfalar/urun.php, assets/js/urun.js).
   Ölçüler referans tasarımdan: kenar 20/40, iki sütun ≥768 (aralık 56), görsel 9:16,
   solda 64px küçük görsel şeridi (aralık 12), sağ sütunda 24px ince başlık, 18px fiyat.
   Mobilde altta sabit "sepete ekle" çubuğu: WhatsApp düğmesi --wa-alt ile çubuğun üstüne çıkar.
   ===================================================================================== */

.urun{padding:32px var(--kenar) 0}
.urun-ust{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
@media (min-width:768px){
  .urun{padding-top:48px}
  .urun-ust{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
}

/* ------------------------------------------------------------------ galeri */
.urun-galeri{position:relative;margin:0 calc(var(--kenar) * -1)}
.urun-kucukler{display:none}
.urun-buyuk{position:relative;background:var(--gorsel-zemin)}
.urun-kaydir{display:flex;width:100%;aspect-ratio:9/16;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.urun-kaydir::-webkit-scrollbar{display:none}
.urun-slayt{position:relative;display:block;flex:0 0 100%;width:100%;height:100%;overflow:hidden;background:var(--gorsel-zemin);scroll-snap-align:start;scroll-snap-stop:always;cursor:zoom-in}
.urun-slayt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.urun-slayt:focus-visible{outline-offset:-3px}
.urun-ok{display:none}
.urun-ok svg{width:18px;height:18px}
.urun-nokta{position:absolute;left:50%;bottom:12px;z-index:2;display:flex;gap:6px;transform:translateX(-50%);pointer-events:none}
.urun-nokta span{width:6px;height:6px;border-radius:50%;background:rgba(26,26,26,.3);transition:background-color .15s}
.urun-nokta span.aktif{background:var(--yazi)}

@media (min-width:768px){
  .urun-galeri{margin:0;padding-left:76px}
  /* şerit görselin boyu kadar; fazlası kendi içinde kayar */
  .urun-kucukler{position:absolute;left:0;top:0;bottom:0;display:flex;flex-direction:column;gap:12px;width:64px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
  .urun-kucukler::-webkit-scrollbar{display:none}
  .urun-kucuk{position:relative;display:block;flex-shrink:0;width:100%;aspect-ratio:9/16;overflow:hidden;background:var(--gorsel-zemin);opacity:.6;transition:opacity .15s}
  .urun-kucuk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .urun-kucuk:hover,.urun-kucuk.aktif{opacity:1}
  .urun-kucuk.aktif::after{content:"";position:absolute;inset:0;border:1px solid var(--yazi);pointer-events:none}
  .urun-kucuk:focus-visible{outline-offset:-2px}
  .urun-ok{position:absolute;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-top:-18px;background:rgba(255,255,255,.8);color:var(--yazi);opacity:0;transition:opacity .15s,background-color .15s}
  .urun-ok:hover{background:#fff}
  .urun-buyuk:hover .urun-ok,.urun-ok:focus-visible{opacity:1}
  .urun-ok-sol{left:12px}
  .urun-ok-sag{right:12px}
  .urun-nokta{display:none}
}

/* ------------------------------------------------------------------ bilgi sütunu */
@media (min-width:768px){.urun-bilgi{padding-top:8px}}
.urun-kirinti{margin-bottom:8px}
.urun-ad{font-size:24px;line-height:1.375;font-weight:300;color:var(--yazi)}
.urun-sku{margin-top:4px;font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:.08em;color:var(--soluk);overflow-wrap:anywhere}
.urun-fiyat{margin-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.urun-fiyat .fiyat-eski{font-size:14px;line-height:20px}
.urun-fiyat .fiyat-yeni{font-size:18px;line-height:28px}
/* sitede görünen indirim oranı ("%50"): kartlardaki rozetle aynı görünüm, fiyat satırında ortalı */
.urun-fiyat .urun-indirim-rozet{align-self:center}
.urun-on{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12px;line-height:1.5;color:var(--soluk)}
.urun-on-etiket{padding:2px 6px;border:1px solid var(--yazi);color:var(--yazi);font-size:10px;line-height:15px;text-transform:uppercase;letter-spacing:var(--harf)}
.urun-kargo{margin-top:20px}
/* "3 Al 2 Öde": fiyatın yanında rozet, kargo kutusunun altında bilgi satırı (kampanya kapalıyken basılmaz) */
.urun-fiyat .urun-kampanya-rozet{align-self:center}
.urun-kampanya{margin-top:8px}

.urun-secim{margin-top:32px}
.urun-secim-beden{margin-top:28px}
.urun-etiket{font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:var(--harf);color:var(--soluk)}

/* renk: rengin kapak görseli (48×64) */
.urun-renkler{margin-top:10px;display:flex;flex-wrap:wrap;gap:10px}
.urun-renk{position:relative;display:block;width:48px;height:64px;overflow:hidden;border:1px solid var(--cizgi);background:var(--gorsel-zemin);transition:border-color .15s}
.urun-renk img{width:100%;height:100%;object-fit:cover}
.urun-renk:hover,.urun-renk.secili{border-color:var(--yazi)}
.urun-renk.tukendi img{opacity:.4}
.urun-renk.tukendi::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top right,transparent calc(50% - .75px),rgba(26,26,26,.55) calc(50% - .75px),rgba(26,26,26,.55) calc(50% + .75px),transparent calc(50% + .75px))}

/* beden */
.urun-bedenler{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.urun-beden{position:relative;min-width:46px;padding:10px 16px;border:1px solid var(--cizgi);background:#fff;color:var(--yazi);font-size:12px;line-height:18px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;transition:border-color .15s,background-color .15s,color .15s}
.urun-beden:hover{border-color:var(--yazi)}
.urun-beden[aria-pressed=true]{border-color:var(--yazi);background:var(--yazi);color:#fff}
.urun-beden.tukendi{border-color:var(--cizgi);background:var(--hafif-zemin);color:var(--soluk);text-decoration:line-through;cursor:not-allowed}
.urun-beden.tukendi:hover{border-color:var(--cizgi)}
.urun-beden-hata{margin-top:10px}
.urun-beden-hata:empty{display:none}
@keyframes urun-titre{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.urun-bedenler.titre{animation:urun-titre .4s ease-in-out}

/* adet + sepete ekle */
.urun-adet{display:flex;align-items:stretch;flex-shrink:0;border:1px solid var(--cizgi);background:#fff}
.urun-adet button{display:flex;align-items:center;justify-content:center;padding:0 15px;color:var(--soluk);transition:color .15s,opacity .15s}
.urun-adet button:hover:not(:disabled){color:var(--yazi)}
.urun-adet button:disabled{opacity:.35}
.urun-adet svg{width:12px;height:12px}
.urun-adet-deger{display:flex;align-items:center;justify-content:center;width:32px;font-size:14px;line-height:20px;font-variant-numeric:tabular-nums}
.urun-ekle-dugme{flex:1;min-width:0}
.urun-ekle{display:none}
@media (min-width:768px){
  .urun-ekle{display:flex;align-items:stretch;gap:12px;min-height:54px;margin-top:32px}
}
.urun-not{margin-top:12px;font-size:12px;line-height:1.5;color:var(--soluk)}

.urun-wa{margin-top:24px;display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:1.5;color:var(--soluk);text-decoration:underline;text-decoration-color:var(--cizgi);text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
.urun-wa:hover{color:var(--yazi);text-decoration-color:currentColor}
.urun-wa svg{width:14px;height:14px;flex-shrink:0;color:var(--wa)}
@media (min-width:768px){.urun-wa{margin-top:16px}}

/* açıklama + akordeonlar */
.urun-aciklama{margin-top:32px;border-top:1px solid var(--cizgi);padding-top:24px}
.urun-metin{margin-top:12px}
.urun-metin em{font-style:italic}
.urun-akordeon{margin-top:24px}
.urun-akordeon-ilk{margin-top:32px}
.urun-akordeon .akordeon-ic p+p{margin-top:8px}
.urun-akordeon .akordeon-ic a{color:var(--yazi);text-decoration:underline;text-underline-offset:2px}

/* ------------------------------------------------------------------ benzer ürünler */
.urun-benzer{margin-top:96px}
.urun-benzer-bas{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:32px;margin-bottom:20px}
.urun-benzer-oklar{display:flex;gap:8px}
.urun-benzer-ok{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--cizgi);color:var(--yazi);transition:border-color .15s,opacity .15s}
.urun-benzer-ok:hover:not(:disabled){border-color:var(--yazi)}
.urun-benzer-ok:disabled{opacity:.35}
.urun-benzer-ok svg{width:14px;height:14px}
.urun-benzer-serit{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.urun-benzer-serit::-webkit-scrollbar{display:none}
.urun-benzer-oge{flex:0 0 calc((100% - 12px) / 2);min-width:0;scroll-snap-align:start}
.urun-benzer-nokta{margin-top:20px;display:flex;justify-content:center;gap:6px}
.urun-benzer-nokta:empty{display:none}
.urun-benzer-nokta span{width:6px;height:6px;border-radius:999px;background:rgba(26,26,26,.3);transition:width .2s,background-color .2s}
.urun-benzer-nokta span.aktif{width:20px;background:var(--yazi)}
@media (max-width:767px){.urun-benzer-oklar{display:none}}
@media (min-width:640px){.urun-benzer-oge{flex-basis:calc((100% - 24px) / 3)}}
@media (min-width:768px){
  .urun-benzer{margin-top:136px}   /* referans: ızgara aralığı 56 + 80 */
  .urun-benzer-serit{gap:16px}
  .urun-benzer-oge{flex-basis:calc((100% - 64px) / 5)}
}

/* ------------------------------------------------------------------ mobil sabit çubuk */
.urun-cubuk{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;align-items:stretch;gap:8px;border-top:1px solid var(--cizgi);background:#fff;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.urun-cubuk .urun-adet button{padding:0 14px}
.urun-cubuk .urun-adet-deger{width:28px}
.urun-cubuk .urun-ekle-dugme{padding:16px 12px}
@media (min-width:768px){.urun-cubuk{display:none}}
@media (max-width:767px){
  /* çubuk yüksekliği: 12 + 50 + 12 + 1 çizgi */
  body.sayfa-urun{--cubuk-y:75px;--wa-alt:calc(var(--cubuk-y) + 16px);padding-bottom:calc(var(--cubuk-y) + env(safe-area-inset-bottom,0px))}
  body.sayfa-urun .cerez{bottom:calc(var(--cubuk-y) + 12px + env(safe-area-inset-bottom,0px))}
}

/* ------------------------------------------------------------------ tam ekran görüntüleyici */
.buyutec{position:fixed;inset:0;z-index:85;background:#fff;opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s}
.buyutec.acik{opacity:1;visibility:visible;transition:opacity .2s,visibility 0s}
.buyutec-kaydir{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.buyutec-kaydir::-webkit-scrollbar{display:none}
.buyutec-slayt{display:flex;align-items:center;justify-content:center;flex:0 0 100%;width:100%;height:100%;padding:64px 0 24px;scroll-snap-align:start;scroll-snap-stop:always}
.buyutec-slayt img{width:100%;height:100%;object-fit:contain}
.buyutec-sayac{position:absolute;left:20px;top:26px;z-index:2;font-size:11px;line-height:16px;letter-spacing:var(--harf);font-variant-numeric:tabular-nums;color:var(--yazi)}
.buyutec-kapat,.buyutec-ok{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:rgba(255,255,255,.85);color:var(--yazi);transition:background-color .15s,opacity .15s}
.buyutec-kapat:hover,.buyutec-ok:hover{background:#fff}
.buyutec-kapat{right:12px;top:12px}
.buyutec-kapat svg{width:22px;height:22px}
.buyutec-ok{top:50%;margin-top:-22px}
.buyutec-ok svg{width:20px;height:20px}
.buyutec-ok-sol{left:12px}
.buyutec-ok-sag{right:12px}
.buyutec.tek .buyutec-ok{display:none}
@media (min-width:768px){
  .buyutec-slayt{padding:24px 72px}
  .buyutec-sayac{left:28px}
  .buyutec-kapat{right:20px;top:16px}
  .buyutec-ok-sol{left:20px}
  .buyutec-ok-sag{right:20px}
}

@media print{
  .urun-cubuk,.buyutec,.urun-ok,.urun-benzer{display:none!important}
  body.sayfa-urun{padding-bottom:0}
}