/* grossengross.com ürün sayfası (/p/<id>/) — 2026-10-13, Karaca örneği: solda kaydırmalı galeri + büyüteç, sağda ad/fiyat/sepet, altta açıklama ve
   özellikler, en altta benzer ürünler. Üretim: scripts/website_urun.py (kaynak scripts/site_urun/urun.css). Telefon ≤720, Z Fold 344 / 750-890, masaüstü ≥900. */
.urun-detay .kap { max-width: 1180px; }
.iz .iz-son { color: var(--murekkep); }
.urun-ust { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 40px; align-items: start; }
/* 2026-10-15, Burak: "arka plan griden beyaza çevir" (ürün sayfası) */
body.urun-sayfa, body.urun-sayfa .urun-detay { background: #fff; }
@media (max-width: 899px) { .urun-ust { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.urun-ust > *, .urun-alt { min-width: 0; }
/* 2026-10-15, Burak: önce galeri kaydırırken yapışık kalıyordu (sticky); "yukarı aşağı giderken resim hareket halinde ama açıklamalar sabit güzel olmuyor, hepsi beraber hareket etsin" → yapışıklık KALDIRILDI, sütunlar birlikte kayar.
   --ust-yuk (üst çubuğun ölçülen yüksekliği, urun.js) yalnız galeri kutusunun ekrana sığması için kullanılır. */

/* ---- galeri ---- */
/* 2026-10-15, Burak: "görsel kutusu standart bi boyutta olacak, eklediğimiz resimlerde o kutuya sığacak" + ekran görüntüsü (resim ekrana sığmıyordu):
   kutu sabit kare, genişliği 470 px'i ve ekran yüksekliğini aşmaz; resim kutuya "sığdırılır" (object-fit: contain). */
.galeri-ana { position: relative; background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid var(--cizgi); width: min(100%, 470px, max(280px, calc(100vh - var(--ust-yuk, 120px) - 150px))); }
.galeri-kaydir { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; outline: none; }
.galeri-kaydir::-webkit-scrollbar { display: none; }
.galeri-kaydir:focus-visible { box-shadow: inset 0 0 0 3px var(--kehribar); }
.galeri-kaydir li { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1; position: relative; overflow: hidden; }
/* 2026-10-15: resim kutuyu uzatmasın (uzun fotoğraf kutuyu ekrandan taşırıyordu) — mutlak konum, kutuya SIĞAR */
.galeri-kaydir img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; -webkit-user-drag: none; user-select: none; }
.galeri-kaydir { cursor: grab; } .galeri-kaydir.suruklenen { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.galeri-ok { position: absolute; border-radius: 50% !important; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92);
  box-shadow: 0 2px 10px rgba(0,0,0,.16); cursor: pointer; font-size: 26px; line-height: 1; color: var(--murekkep); display: grid; place-items: center; z-index: 2; }
.galeri-ok:hover { background: #fff; }
.galeri-ok-sol { left: 10px; } .galeri-ok-sag { right: 10px; }
.galeri-ok[hidden] { display: none; }
@media (hover: none) { .galeri-ok { display: none; } }
.galeri-buyut { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50% !important; border: 0; background: rgba(255,255,255,.92);
  box-shadow: 0 2px 10px rgba(0,0,0,.16); cursor: pointer; display: grid; place-items: center; z-index: 2; color: var(--murekkep); }
.galeri-buyut svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.galeri-kucuk { list-style: none; display: flex; gap: 8px; margin: 10px 0 0; max-width: min(100%, 470px); padding: 2px; overflow-x: auto; scrollbar-width: none; }
.galeri-kucuk::-webkit-scrollbar { display: none; }
.galeri-kucuk button { flex: 0 0 auto; width: 66px; height: 66px; border-radius: 10px; border: 2px solid transparent; background: #fff; padding: 0; cursor: pointer; overflow: hidden;
  box-shadow: 0 1px 3px rgba(27,29,32,.1); }
.galeri-kucuk button.etkin { border-color: var(--sise-derin); }
.galeri-kucuk img { width: 100%; height: 100%; object-fit: contain; }
.galeri-nokta { display: none; justify-content: center; gap: 6px; margin-top: 10px; }
.galeri-nokta button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: #b9bec4; cursor: pointer; }
.galeri-nokta button.etkin { background: var(--sise-derin); width: 20px; border-radius: 4px; }
@media (max-width: 899px) { .galeri-ana { width: 100%; max-width: 520px; margin-inline: auto; } }
@media (max-width: 720px) { .galeri-kucuk { display: none; } .galeri-nokta { display: flex; } .galeri-ana { border-radius: 10px; } }

/* ---- sağ sütun ---- */
.urun-bilgi h1 { font-size: 1.75rem; line-height: 1.2; margin: 4px 0 6px; }
.urun-marka { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 600; color: var(--soluk); margin: 0; }
.urun-kod { color: var(--soluk); font-size: .85rem; margin: 0 0 14px; }
.urun-fiyat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.urun-fiyat .fiyat { font: 700 2rem/1 var(--baslik); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.urun-fiyat s { color: var(--soluk); font-size: 1.05rem; }
.urun-indirim { background: #e3f5ea; color: #1f8f4e; padding: 3px 9px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.urun-stok { font-size: .9rem; margin: 0 0 18px; font-weight: 600; }
.urun-stok.stokta { color: #1f8f4e; } .urun-stok.stokta::before { content: "●"; margin-right: 6px; font-size: .7em; vertical-align: 2px; }
.urun-stok.tukendi { color: var(--kehribar-koyu); }
.urun-al { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.adet { display: inline-flex; border: 1px solid #cfd4da; border-radius: 10px; overflow: hidden; background: #fff; }
.adet button { width: 42px; height: 46px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--murekkep); }
.adet button:hover { background: #f1f3f5; }
.adet input { width: 54px; height: 46px; border: 0; text-align: center; font: 600 1rem var(--govde); color: var(--murekkep); -moz-appearance: textfield; appearance: textfield; }
.adet input::-webkit-outer-spin-button, .adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.urun-sepet { flex: 1 1 180px; min-height: 46px; font-size: 1rem; }
.urun-fav { width: 46px; height: 46px; border-radius: 50% !important; border: 1px solid #cfd4da; background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--murekkep); }
.urun-fav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.urun-fav[aria-pressed="true"] { color: var(--kehribar); border-color: var(--kehribar); }
.urun-fav[aria-pressed="true"] svg { fill: currentColor; }
.urun-wa { display: inline-flex; color: var(--kehribar-koyu); font-weight: 600; font-size: .88rem; text-decoration: underline; }
/* 2026-10-15, Burak: "bu ürünü whatsapp'tan sorun ve altındaki kısımları bir kutucuk haline getir, satırları yaklaştır" */
.urun-kutu { margin-top: 12px; border: 1px solid var(--cizgi); border-radius: 8px; padding: 8px 12px; background: #fff; }
.urun-notlar { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--cizgi); display: grid; gap: 2px; font-size: .85rem; line-height: 1.3; color: #3d444b; }
.urun-notlar li::before { content: "✓"; color: #1f8f4e; margin-right: 6px; font-weight: 700; }

/* ---- alt bölümler: sağ sütunda sekmeler (Ürün Açıklaması / Özellikler / Teslimat ve İade); tıklanan sekmenin içeriği altında açılır ---- */
/* 2026-10-15, Burak: "ürün açıklaması özellikleri olan alanı da diğerleri gibi simetri olarak çerçeveye al" — WhatsApp/notlar kutusuyla (.urun-kutu) aynı çerçeve, aynı aralık */
.urun-alt { margin-top: 12px; border: 1px solid var(--cizgi); border-radius: 8px; padding: 0 12px 6px; background: #fff; }
.urun-sekme { display: flex; gap: 0; border-bottom: 1px solid var(--cizgi); margin: 0 -12px 10px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.urun-sekme::-webkit-scrollbar { display: none; }
.urun-sekme button { padding: 8px 14px; border: 0; background: none; font: 600 .9rem var(--govde); color: var(--soluk); border-bottom: 3px solid transparent; white-space: nowrap; margin-bottom: -1px; cursor: pointer; }
.urun-sekme button:hover { color: var(--murekkep); }
.urun-sekme button.etkin { color: var(--murekkep); border-bottom-color: var(--kehribar); }
.urun-bolum { padding: 2px 0 10px; }
.urun-bolum[hidden] { display: none; }
.urun-bos { min-height: 120px; }
/* 2026-10-16, Burak: "ürüne girdiğimizde bazı ürünlerde açıklama uzun kalıyor, asimetrik bir görüntü oluyor, onu da ayarla": iki sütunlu düzende (≥900 px) sekme panelleri ortak sabit
   yükseklik alır (urun.js --bolum-yuk = sol sütun yüksekliği − panel dışı sağ sütun) → sağ sütunun altı sol sütunun (galeri + soru kutusu) altıyla hizalanır, sekme değişince sayfa kaymaz.
   Panelden uzun metin kırpılır, "Devamını göster" ile açılır (.urun-alt.acik = doğal yükseklik). Tek sütunda (≤899 px) ve JS yokken doğal yükseklik. */
.urun-sol { min-width: 0; }
.urun-devam { display: none; }
@media (min-width: 900px) {
  .urun-alt .urun-bolum { height: var(--bolum-yuk, auto); overflow: hidden; position: relative; }
  .urun-alt .urun-bolum.urun-bos { min-height: 0; }
  .urun-alt.acik .urun-bolum { height: auto; overflow: visible; }
  .urun-alt .urun-bolum.kirpik::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38px; background: linear-gradient(rgba(255,255,255,0), #fff 85%); pointer-events: none; }
  .urun-devam { display: block; visibility: hidden; width: 100%; min-height: 28px; margin: 0; padding: 2px 0 4px; border: 0; background: none; text-align: left; cursor: pointer;
    font: 600 .85rem var(--govde); color: var(--kehribar-koyu); text-decoration: underline; text-underline-offset: 2px; }
  .urun-devam.gorunur { visibility: visible; }
}
@media (max-width: 899px) { .urun-sol { display: contents; } .urun-ust .urun-soru { order: 3; margin-top: 0; } }
/* 2026-10-15, Burak: "bütün ürünlere uyarla": katalog ürünü sayfası — paket seçenekleri (kartlardaki "Seçenekleri gör" penceresinin sayfa karşılığı) + fiyatsız ürün */
.urun-secenek { margin: 0 0 12px; }
.urun-secenek-baslik { margin: 0 0 6px; font-size: .85rem; font-weight: 600; color: #3d444b; }
.urun-secenek-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.secenek { display: inline-grid; gap: 1px; text-align: left; padding: 7px 14px; border: 1px solid #cfd4da; border-radius: 8px; background: #fff; cursor: pointer; font: inherit; color: var(--murekkep); min-width: 92px; }
.secenek b { font-size: .95rem; font-weight: 700; } .secenek span { font-size: .82rem; color: var(--soluk); font-variant-numeric: tabular-nums; }
.secenek:hover { border-color: #9aa1aa; }
.secenek.etkin { border-color: var(--sise-derin); box-shadow: inset 0 0 0 1px var(--sise-derin); }
.fiyat-yok { font-size: .98rem; font-weight: 600; color: #3d444b; }
/* satıcıya soru sor kutusu (2026-10-15) — WhatsApp/notlar ve sekmelerle aynı çerçeve */
.urun-soru { margin-top: 12px; padding: 0 12px; }
.urun-soru-ac { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0; border: 0; background: none; cursor: pointer; font: 700 .95rem var(--govde); color: var(--murekkep); text-align: left; }
.urun-soru-ac svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; flex: none; }
.urun-soru-ac[aria-expanded="true"] svg { transform: rotate(180deg); }
.urun-soru-icerik { padding: 0 0 12px; }
.urun-soru-icerik[hidden] { display: none; }
.urun-soru-misafir { margin: 0; font-size: .9rem; color: #3d444b; }
.urun-soru-misafir a { color: var(--kehribar-koyu); font-weight: 600; }
.urun-soru-form { display: grid; gap: 6px; }
.urun-soru-form[hidden], .urun-soru-misafir[hidden] { display: none; }
.urun-soru-form label { display: grid; gap: 2px; font-size: .8rem; font-weight: 600; color: #3d444b; }
.urun-soru-form input, .urun-soru-form textarea { font: inherit; font-weight: 400; font-size: .9rem; color: var(--murekkep); width: 100%; padding: 5px 9px; border: 1px solid #cfd4da; border-radius: 6px; background: #fff; }
.urun-soru-form input { height: 32px; }
.urun-soru-form textarea { resize: vertical; min-height: 64px; line-height: 1.35; }
.urun-soru-form input:focus, .urun-soru-form textarea:focus { outline: 2px solid var(--kehribar); outline-offset: 1px; }
.urun-soru-not { margin: 0; min-height: 0; font-size: .82rem; color: #b42318; }
.urun-soru-not:empty { display: none; }
.urun-soru-not.iyi { color: #1f8f4e; }
.urun-soru-not a { color: inherit; text-decoration: underline; font-weight: 600; }
.urun-soru-gonder { justify-self: start; min-height: 34px; padding: 0 18px; font-size: .9rem; }
.urun-metin { max-width: 780px; font-size: .94rem; line-height: 1.5; }
.urun-metin p { margin: 0 0 8px; }
.urun-metin ul, .urun-metin ol { margin: 0 0 8px; padding-left: 22px; }
.urun-metin h3, .urun-metin h4, .urun-metin h5 { font-size: 1rem; margin: 12px 0 6px; }
.urun-ozellik { border-collapse: collapse; width: 100%; max-width: 780px; font-size: .9rem; background: #fff; border-radius: 6px; overflow: hidden; border: 1px solid var(--cizgi); margin-bottom: 4px; }
.urun-ozellik th { text-align: left; font-weight: 600; width: 38%; padding: 7px 12px; border-bottom: 1px solid var(--cizgi); background: #f6f7f8; color: #3d444b; }
.urun-ozellik td { padding: 7px 12px; border-bottom: 1px solid var(--cizgi); }
.urun-ozellik tr:last-child th, .urun-ozellik tr:last-child td { border-bottom: 0; }
.benzer { margin-top: 30px; }
/* 2026-10-16, Burak (ekran görüntüsüyle: "alt tarafı küçült tek sayfaya sığdır"; sonra "siyah bölüm kaydırmada kalsın, ürünü açtığımızda benzer ürünleri sığdır ekrana, siyaha gerek yok"):
   masaüstünde ürün açılınca İLK EKRANDA ürün + "Benzer ürünler" görünür; siyah altbilgi eskisi gibi kalır ama ilk ekranın altında başlar (kaydırınca gelir).
   - Benzer ürünler küçük kartlar (tek satır ad, düğmesiz, boş fiyat satırı yok; kart/ad/resim yine ürün sayfasına gider);
   - galeri boyu ekran yüksekliğine uyar (--galeri-en: yüksek ekranda 470 px, kısa ekranda en az 360 px → ürün + benzer ürünler bir ekrana sığar);
   - ana bölüm en az ekran yüksekliği kadar (altbilgi ilk ekrana girmesin).
   Yalnız ürün sayfası (body.urun-sayfa) ve ≥900 px; telefon/Z Fold düzeni değişmez. */
@media (min-width: 900px) {
  .urun-detay { --galeri-en: clamp(360px, calc(100vh - var(--ust-yuk, 136px) - 411px), 470px); }
  .urun-ust { grid-template-columns: minmax(0, var(--galeri-en, 470px)) minmax(0, 1fr); }
  body.urun-sayfa main.bolum { min-height: calc(100vh - var(--ust-yuk, 136px) + 2px); }     /* +2 px: ölçülen üst çubuk yüksekliği yukarı yuvarlanıyor, altbilgi ilk ekrana 1 px bile girmesin */
  body.urun-sayfa .iz { margin-bottom: 10px; }
  body.urun-sayfa .benzer { margin-top: 16px; }
  body.urun-sayfa .benzer .kat-serit-bas { margin-bottom: 8px; padding-bottom: 6px; }
  body.urun-sayfa .benzer .kat-serit-bas h3 { font-size: 1rem; }
  body.urun-sayfa .benzer .vitrin-kart { padding: 6px; }
  body.urun-sayfa .benzer .vitrin-resim img { max-height: 84px; }
  body.urun-sayfa .benzer .vitrin-kart h3 { min-height: 0; margin: 4px 0 2px; font-size: .78rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  body.urun-sayfa .benzer .vitrin-fiyat { margin: 0; font-size: .85rem; line-height: 1.3; }
  body.urun-sayfa .benzer .vitrin-kart .katalog-al, body.urun-sayfa .benzer .vitrin-kart .katalog-satinal { display: none; }
}

/* ---- telefonda yapışkan sepet çubuğu ---- */
.urun-sabit { display: none; }
@media (max-width: 720px) {
  .urun-sabit { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
    border-top: 1px solid var(--cizgi); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 12px; align-items: center; }
  .urun-sabit .fiyat { font: 700 1.2rem/1 var(--baslik); white-space: nowrap; }
  .urun-sabit .dugme { flex: 1; min-height: 44px; }
  body.urun-sayfa { padding-bottom: 76px; }
  .urun-bilgi h1 { font-size: 1.35rem; }
  .urun-fiyat .fiyat { font-size: 1.6rem; }
}
@media (max-width: 480px) {       /* adet + Sepete ekle + kalp tek satıra sığsın; çerez bandı yapışkan çubuğun üstünde dursun */
  .urun-al { gap: 8px; }
  .adet button { width: 36px; } .adet input { width: 44px; }
  .urun-sepet { flex: 1 1 130px; }
  body.urun-sayfa .cerez-bant { bottom: 84px; }
}

/* ---- büyüteç penceresi (2026-10-15, Burak, Trendyol örneği): ortada beyaz pencere, arkası karartılı; tıkla = görselin İÇİNDE 2,2 kat yakınlaş (kaydırma yok), fareyle gez ---- */
.galeri-buyutec { position: fixed; inset: 0; z-index: 200; background: rgba(20,22,24,.55); display: grid; place-items: center; padding: 12px; }
.galeri-buyutec[hidden] { display: none; }
.gb-kutu { background: #fff; border-radius: 6px; width: min(100%, 880px, calc(100vh - 150px)); max-height: calc(100vh - 24px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; box-shadow: 0 18px 60px rgba(0,0,0,.35); overflow: hidden; }
.gb-ust { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 0 14px; font-size: .85rem; color: var(--soluk); min-height: 34px; }
.gb-kapat { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: #444; font-size: 26px; line-height: 1; cursor: pointer; }
.gb-kapat:hover { background: #eee; }
.gb-kare { overflow: hidden; position: relative; aspect-ratio: 1; width: 100%; background: #fff; cursor: zoom-in; touch-action: pan-y; }
.gb-kare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; transition: transform .18s ease-out; transform-origin: 50% 50%; }
.gb-kare.zoom { cursor: zoom-out; touch-action: none; }
.gb-kare.zoom img { transform: scale(2.2); }
.gb-ok { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); color: #222; box-shadow: 0 1px 8px rgba(0,0,0,.25);
  font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 2; }
.gb-ok:hover { background: #fff; }
.gb-ok-sol { left: 10px; } .gb-ok-sag { right: 10px; }
.gb-ok[hidden], .gb-kare.zoom .gb-ok { display: none; }
.gb-kucuk { display: flex; gap: 6px; justify-content: center; padding: 8px; overflow-x: auto; scrollbar-width: none; }
.gb-kucuk:empty { padding: 4px; }
.gb-kucuk button { flex: 0 0 auto; width: 48px; height: 48px; border: 2px solid transparent; border-radius: 6px; background: #fff; padding: 0; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px #e3e6ea; }
.gb-kucuk button.etkin { border-color: var(--sise-derin); }
.gb-kucuk img { width: 100%; height: 100%; object-fit: contain; }
/* ana görselde 1 sn bekleyince: mercek (görselin üstünde) + büyütme paneli (görselin sağında) */
.galeri-kutu { position: relative; }
.galeri-mercek { position: absolute; z-index: 3; border: 1px solid #111; background: rgba(255,255,255,.08); pointer-events: none; }
.galeri-panel { position: absolute; z-index: 20; background-repeat: no-repeat; background-color: #fff; border: 1px solid var(--cizgi); box-shadow: 0 8px 30px rgba(0,0,0,.18); pointer-events: none; }
.galeri-mercek[hidden], .galeri-panel[hidden] { display: none; }
body.gb-acik { overflow: hidden; }