/* ============================================================
   ÜRÜN SAYFASI ARAÇLARI (pdparac.js) + sepette öneriler + favori alarmı
   ============================================================ */

/* ---------- galeri: dokunulabilir olduğu belli olsun ---------- */
#galeri > .gorsel{ cursor:zoom-in; }

/* ---------- tam ekran galeri ---------- */
.tg{
  position:fixed; inset:0; z-index:130; display:flex; flex-direction:column;
  background:#fff; animation:tgGir 180ms ease-out; outline:none;
  /* çift dokunma/tık yazı ve görsel seçmesin */
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
}
@keyframes tgGir{ from{ opacity:0; } }
.tg-ust{ display:flex; align-items:center; justify-content:space-between; height:52px; padding:0 8px 0 16px; border-bottom:1px solid var(--hat); }
.tg-sayac{ font-size:14px; font-weight:600; color:var(--metin); }
.tg-eyl{ display:flex; gap:4px; }
.tg-eyl button{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%; color:var(--metin); }
.tg-eyl .ikn{ width:22px; height:22px; }
.tg-ray{
  flex:1; min-height:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; overscroll-behavior:contain; touch-action:pan-x;
}
.tg-ray::-webkit-scrollbar{ display:none; }
/* yakınken kaydırma kapanır, parmak görseli gezdirir */
.tg-yakin .tg-ray{ overflow:hidden; touch-action:none; }
/* kare = ekranın görsel alanı; fotoğraf buna sığdırılır (contain). Izgara
   yerleşimi fotoğrafın doğal boyuna uzuyordu: masaüstünde 1547 px, alt
   yarısı ekran dışında. Mutlak konum kareyi alana kilitler. */
.tg-kare{ position:relative; flex:0 0 100%; scroll-snap-align:center; overflow:hidden; }
.tg-zoom{ position:absolute; inset:0; transition:transform 160ms ease-out; will-change:transform; }
.tg-yakin .tg-zoom{ transition:none; cursor:grab; }
/* ortak .gorsel ızgara yerleşimli: img height:100% çözülmüyor, blok yap */
.tg-zoom .gorsel{ display:block; width:100%; height:100%; aspect-ratio:auto; background:#fff; }
.tg-zoom .gorsel img{ width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.tg-ok{
  position:absolute; top:50%; width:40px; height:40px; display:grid; place-items:center; transform:translateY(-50%);
  border-radius:50%; background:var(--zemin); box-shadow:0 0 0 1.5px var(--metin) inset; color:var(--metin);
}
.tg-ok .ikn{ width:18px; height:18px; }
.tg-sol{ left:10px; } .tg-sag{ right:10px; }
.tg-yakin .tg-ok{ display:none; }
.tg-kucukler{ display:flex; justify-content:center; gap:8px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); overflow-x:auto; }
.tg-kucukler button{ flex:0 0 48px; height:64px; padding:0; border:1px solid var(--hat); border-radius:var(--r2); overflow:hidden; opacity:.6; }
.tg-kucukler button[aria-current="true"]{ border:2px solid var(--mnd); opacity:1; }
.tg-kucukler .gorsel{ width:100%; height:100%; aspect-ratio:auto; }
.tg-kucukler .gorsel img{ object-fit:cover; }
.tg-kucukler .yt b, .tg-kucukler .yt small{ display:none; }
.tg-kucukler .gorsel-renk-yt .yt i{ width:20px; height:20px; }
/* küçük harita + kademe göstergesi — yalnız yakınken */
.tg-harita{
  position:absolute; left:12px; bottom:96px; z-index:2; display:none; align-items:flex-end; gap:6px; pointer-events:none;
}
.tg-yakin .tg-harita{ display:flex; }
.tg-harita-ic{
  position:relative; width:60px; height:80px; border-radius:var(--r2); overflow:hidden;
  background:#fff; border:1.5px solid var(--metin);
}
.tg-harita-ic img{ width:100%; height:100%; object-fit:cover; }
.tg-harita-ic i{ position:absolute; border:2px solid var(--mnd); border-radius:var(--r); background:rgba(15,27,61,.10); }
.tg-harita-yt .tg-harita-ic{ display:none; }
.tg-harita b{
  padding:3px 8px; border-radius:var(--r2); background:rgba(0,0,0,.65); color:#fff; font-size:12px; font-weight:600;
}
.tg-yakin .tg-ipucu{ display:none; }
.tg-ipucu{ position:absolute; left:50%; bottom:96px; transform:translateX(-50%); margin:0; padding:5px 12px; border-radius:var(--r3);
  background:rgba(0,0,0,.6); color:#fff; font-size:12px; white-space:nowrap; pointer-events:none; animation:tgIpucu 2.6s forwards; }
@keyframes tgIpucu{ 0%, 70%{ opacity:1; } 100%{ opacity:0; } }

/* ---------- beden satırı ---------- */
.pd-varyant-ust{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pd-varyant-ust .pd-varyant-bas{ margin-bottom:0; }
.pd-varyant-ust + .pd-bedenler{ margin-top:10px; }
.pa-tablo-ac{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--mnd-koyu); white-space:nowrap; }
.pa-tablo-ac .ikn{ width:15px; height:15px; }
.pd-tukendi{ position:relative; color:var(--hat2); text-decoration:line-through; background:var(--panel); }
.pd-tukendi .ikn{ position:absolute; top:-6px; right:-6px; width:16px; height:16px; padding:2px; border-radius:50%;
  background:var(--zemin); border:1px solid var(--hat); color:var(--metin3); }
.pd-alarmli .ikn{ color:#fff; background:var(--mnd); border-color:var(--mnd); }
.pa-oneri{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding:8px 10px;
  border-radius:var(--r2); background:var(--bilgi-acik); font-size:12px; color:var(--metin); text-align:left;
}
button.pa-oneri{ width:100%; font-weight:600; color:var(--bilgi); }
.pa-oneri .ikn{ width:15px; height:15px; color:var(--bilgi); }
button.pa-oneri .ikn:last-child{ width:11px; height:11px; margin-left:auto; }
.pa-oneri b{ font-size:14px; }
.pa-oneri em{ font-style:normal; color:var(--kirmizi); font-weight:600; }
.pa-oneri button{ padding:3px 10px; border-radius:var(--r-tam); background:var(--mnd); color:#fff; font-size:12px; font-weight:600; }
.pa-oneri .pa-oneri-duzen{ margin-left:auto; background:none; color:var(--bilgi); padding:0; }

/* ---------- beden penceresi ---------- */
.pa-sekme{ margin-bottom:14px; }
.pa-tablo{ width:100%; border-collapse:collapse; font-size:13px; margin-bottom:12px; }
.pa-tablo th, .pa-tablo td{ padding:9px 6px; text-align:center; border-bottom:1px solid var(--hat); }
.pa-tablo th{ font-size:12px; font-weight:600; color:var(--metin2); background:var(--panel); }
.pa-tablo td:first-child{ font-weight:700; color:var(--metin); }
.pa-sonuc{
  display:flex; flex-direction:column; align-items:center; gap:4px; margin:14px 0 12px; padding:16px;
  border-radius:var(--r2); background:var(--mnd-acik); text-align:center;
}
.pa-sonuc span{ font-size:12px; color:var(--metin2); }
.pa-sonuc > b{ font-size:32px; font-weight:700; line-height:1.1; color:var(--mnd-koyu); }
.pa-sonuc small{ font-size:12px; color:var(--metin2); margin-bottom:8px; }

/* ---------- stok alarmı penceresi ---------- */
.pa-alarm{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:6px 0; }
.pa-alarm p{ margin:0; font-size:14px; color:var(--metin); }
.pa-alarm .hx-not{ justify-content:center; }
.pa-alarm-ikon{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--mnd-acik); color:var(--mnd); }
.pa-alarm-ikon .ikn{ width:28px; height:28px; }

/* ---------- favori kartı: sepete ekle + alarm ---------- */
.fv-eyl{ display:flex; gap:6px; }
.fv-eyl .fv-sepete{ flex:1; min-width:0; }
.fv-alarm{
  flex:0 0 34px; height:34px; display:grid; place-items:center; border:1px solid var(--hat); border-radius:var(--r-tam);
  background:var(--zemin); color:var(--metin2);
}
.fv-alarm .ikn{ width:17px; height:17px; }
.fv-alarm[aria-pressed="true"]{ background:var(--mnd); border-color:var(--mnd); color:#fff; }

/* ---------- sepette öneri rayları ---------- */
.sy-oneri{ padding:14px 0 6px; background:var(--zemin); border-block:1px solid var(--hat); }
.sy-oneri h2{ margin:0 16px 10px; font-size:15px; font-weight:600; color:var(--metin); }
.sy-oneri .ray{ margin:0; padding-inline:16px; scroll-padding-inline:16px; gap:10px; }
.sy-oneri .fv-kart{ flex:0 0 min(calc((100vw - 42px) / 2.25), 170px); }
.sy-oneri .fv-kart .tk{ width:auto; }
.sy-oneriler{ display:flex; flex-direction:column; gap:8px; }

/* ---------- paylaş penceresi ---------- */
.ps-urun{ display:flex; align-items:center; gap:10px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--hat); }
.ps-gorsel{ flex:0 0 44px; border-radius:var(--r2); overflow:hidden; }
.ps-gorsel .gorsel{ aspect-ratio:3 / 4; }
.ps-urun > span:last-child{ min-width:0; font-size:13px; line-height:1.35; color:var(--metin);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ps-urun small{ display:block; margin-top:2px; font-size:13px; font-weight:600; color:var(--mnd); }
.ps-izgara{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px 8px; margin-bottom:18px; }
.ps-uyg{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; color:var(--metin); text-align:center; }
.ps-uyg > span{ width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:var(--renk); color:#fff; }
.ps-uyg .ikn{ width:26px; height:26px; }
.ps-baglanti{ display:flex; gap:8px; }
.ps-baglanti input{
  flex:1; min-width:0; height:40px; padding:0 12px; border:1px solid var(--hat); border-radius:var(--r2);
  background:var(--panel); font-size:12px; color:var(--metin2);
}
.ps-baglanti .btn{ flex:0 0 auto; height:40px; padding:0 16px; }

@media (hover:hover){
  .ps-uyg:hover > span{ filter:brightness(1.08); transform:translateY(-1px); }
  .tg-eyl button:hover, .tg-ok:hover{ background:var(--panel); }
  .pa-tablo-ac:hover{ text-decoration:underline; }
}
@media (min-width:900px){
  .tg-ray{ margin:0 60px; }
  .tg-sol{ left:16px; } .tg-sag{ right:16px; }
  .sy-oneri{ border:1px solid var(--hat); border-radius:var(--r2); }
  .sy-oneri .fv-kart{ flex-basis:184px; }
  .sy-oneriler{ max-width:var(--maks); margin:0 auto 32px; padding-inline:var(--pad); }
}
@media (prefers-reduced-motion:reduce){ .tg, .tg-zoom{ animation:none; transition:none; } }