/* Logo artık inline SVG wordmark (bkz. logoSvg.ts): font isteği yok, FOUT yok. */
:root{
  /* --muted, --soft zemin üstünde de WCAG AA (4.5:1) geçmek zorunda: #757575 orada 4.26'da kalıyordu */
  --bg:#fff; --ink:#121212; --body:#3f3f3f; --muted:#6e6e6e;
  --line:#e8e8e8; --soft:#f6f6f5; --accent:#18181b; --accent-2:#000; --accent-3:#18181b;
  --accent-soft:#e4e4e7;
  --pink:#f5b800; --pink-2:#e3aa00; --pink-soft:#ffe6a3;
  --sun:#f5b800; --sun-2:#e3aa00; --sun-ink:#231a02; --sun-soft:#ffe6a3;
  --ok:#177245; --err:#c92a2a; --warn:#b45309;
  --radius:10px;
  /* Çentik/yuvarlak köşe güvenli alanları (viewport-fit=cover ile birlikte):
     yatay iPhone'da içerik çentiğin altına girmesin */
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --sab:env(safe-area-inset-bottom,0px);
  /* Akordeon animasyonu: block-size 0 -> auto geçişi interpolasyon ister */
  interpolate-size:allow-keywords;
}
*,*::before,*::after{box-sizing:border-box}
/* Sayfalar arası yumuşak geçiş (MPA View Transitions): destekleyen tarayıcı
   çapraz soldurur; karttan ürüne tıklanan görsel ana görsele morph'lanır
   (hero adı tıklama anında vtNameScript ile atanır). Desteklemeyende etkisiz. */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* Kaydırma çubuğu yeri her sayfada ayrılır: kısa sayfa <-> uzun sayfa
   geçişlerinde içerik yatay zıplamaz. Modern yol scrollbar-gutter;
   desteklemeyen tarayıcıya overflow-y:scroll yedeği. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;overflow-y:scroll}
@supports (scrollbar-gutter:stable){html{overflow-y:auto;scrollbar-gutter:stable}}
/* Hareket azaltma tercihi: kayan/animasyonlu her şey anında biter */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* .bleed/grid kaynaklı piksel taşmaları asla yatay kaydırma üretmesin
     (clip, hidden'ın aksine scroll konteyneri oluşturmaz — sticky bozulmaz) */
  overflow-x:clip}
/* Mobil dokunuşta gri flaş yerine öğenin kendi :active geri bildirimi */
a,button{-webkit-tap-highlight-color:transparent}
/* Klavye gezinmesi: odaklanan her öğede görünür halka (fare tıklaması tetiklemez).
   Form alanlarının kendi :focus stilleri daha özgül olduğundan onlar bozulmaz. */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* İçeriğe atla: yalnız klavye odağında görünür, ekran okuyucu ve tab kullanıcısı
   için header/nav yığınını atlar */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--radius) 0;text-decoration:none;font-weight:600}
.skip-link:focus{left:0}
.btn:active,.card-add:active{transform:scale(.98)}
::selection{background:var(--accent);color:#fff}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:600;letter-spacing:-.02em}
h1{font-size:1.75rem}h2{font-size:1.3rem}h3{font-size:1.05rem}
.wrap{max-width:1320px;margin:0 auto;padding:0 max(24px,var(--sar)) 0 max(24px,var(--sal))}
/* Dar ekranda 24px kenar boşluğu içerikten çalar */
@media(max-width:479px){
  .wrap{padding:0 max(16px,var(--sar)) 0 max(16px,var(--sal))}
  .cat-nav{padding:0 max(16px,var(--sar)) 0 max(16px,var(--sal))}
}
.bleed{margin-left:calc(50% - 50vw);width:100vw}

.pre-tag{color:#b45309;font-weight:600}
.card-pre{color:#b45309}
.preorder-box{border:1px solid #f5b800;background:#fffbeb;border-radius:12px;
  padding:12px 14px;margin:14px 0;font-size:.92rem;line-height:1.55}
.preorder-box strong{display:block;margin-bottom:4px}
.preorder-box p{margin:0;color:var(--body)}
.preorder-box .preorder-eta{margin-top:8px;padding-top:8px;border-top:1px dashed #f5b800}

/* Duyuru + başlık */
/* Duyuru şeridi: solda dönüşümlü vaatler (saf CSS, JS yok), sağda yardım linkleri */
.announce{background:var(--accent-3);color:#fff;font-weight:600;font-size:.75rem;
  letter-spacing:.02em;padding:6px 0}
.announce-in{display:flex;justify-content:space-between;align-items:center;gap:16px}
.announce span{white-space:nowrap}
/* Vaatler üst üste durur, sırayla sahne alır: 12s döngü, her biri ~4s görünür,
   alttan girip üstten çıkar. Gecikme bekleyenleri gizli tutar (fill yok, taban opacity:0). */
.announce-msgs{position:relative;flex:1;min-width:0;height:1.2rem}
.announce-msgs span{position:absolute;inset:0;display:flex;align-items:center;opacity:0;
  animation:announce-rot 12s infinite}
.announce-msgs span:nth-child(2){animation-delay:4s}
.announce-msgs span:nth-child(3){animation-delay:8s}
/* Soluklaşma .55-1 aralığında kalır: ara opaklıkta bile beyaz metnin
   zeminle harmanı 4.5:1 üstünde (denetim araçları animasyon ortasında
   yakalarsa kontrast hatası saymasın). 0<->.55 sıçraması ~12ms, görünmez. */
@keyframes announce-rot{
  0%{opacity:0;transform:translateY(7px)}
  .1%{opacity:.55}
  4%,30%{opacity:1;transform:none}
  33.9%{opacity:.55}
  34%,100%{opacity:0;transform:translateY(-7px)}
}
/* Hareket azaltma tercihi: dönüşüm yok, ilk vaat sabit görünür */
@media(prefers-reduced-motion:reduce){
  .announce-msgs span{animation:none}
  .announce-msgs span:first-child{opacity:1}
}
.announce-links{display:flex;gap:16px;flex-shrink:0}
.announce-links a{color:rgba(255,255,255,.85);text-decoration:none;white-space:nowrap}
.announce-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* Linkler mobilde gizlenir (footer'daki Yardım bloğunda zaten varlar), vaat ortalanır */
@media(max-width:679px){
  .announce-links{display:none}
  .announce-msgs span{justify-content:center}
}
/* En dar ekranda uzun vaat cümleleri tek satıra sığsın */
@media(max-width:379px){.announce{font-size:.68rem}}
/* Beyaz header, siyah-sarı vurgular: arcade kimliği logoda, butonlarda ve
   koyu bantta yaşar; üst blok sakinleşir (duyuru şeridiyle yarışmaz) */
.site-header{position:sticky;top:0;z-index:30;color:var(--ink);background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px rgba(18,18,18,.05);transition:transform .22s ease}
/* Mobilde header ~150px: aşağı kaydırırken gizlenir (içerik kazanır),
   yukarı ilk harekette geri gelir — arama/sepete erişim bir kaydırma uzakta. */
@media(max-width:899px){.site-header.hdr-hide{transform:translateY(-100%)}}
/* nitatoys düzeni: 1. satır logo + ortada arama + aksiyonlar, 2. satır ortalanmış ikonlu kategori menüsü */
.header-in{display:flex;align-items:center;gap:18px;height:64px}
/* SVG wordmark (logoSvg.ts): Luckiest Guy gliflerinden üretildi. Sticker düzeni,
   iki ton (GAME mor / ZON fuşya), O yerine D-pad damgalı jeton, harf başına minik
   dönme/oturma farkı SVG'nin içinde; renkler buradaki .lg-* sınıflarından gelir.
   Kalıcı -2° eğim tabela hissi verir, hover eğimi artırır. */
.logo{display:flex;align-items:center;flex-shrink:0;transition:transform .18s;
  transform:rotate(-2deg)}
.logo svg{height:38px;width:auto;display:block;overflow:visible}
.logo:hover{transform:rotate(-3.5deg) scale(1.05)}
.lg-sh-a{fill:var(--accent-soft);stroke:var(--accent-soft)}
.lg-sh-p{fill:var(--pink-soft);stroke:var(--pink-soft)}
.lg-sh-s{fill:var(--sun-soft);stroke:var(--sun-soft)}
.lg-sh-a,.lg-sh-p,.lg-sh-s{stroke-width:11;stroke-linejoin:round}
.lg-out{fill:var(--accent-3);stroke:var(--accent-3);stroke-width:11;stroke-linejoin:round}
.lg-wht{fill:#fff;stroke:#fff;stroke-width:7;stroke-linejoin:round}
.lg-a{fill:var(--accent)}
.lg-p{fill:var(--pink)}
.lg-coin{fill:var(--sun)}
.lg-rim{fill:none;stroke:var(--sun-2);stroke-width:3}
.lg-pad{fill:var(--sun-ink)}
.lg-ball{fill:var(--sun)}
.lg-ball2{fill:var(--sun-2)}
.lg-stick{fill:var(--accent-3)}
.lg-base{fill:var(--pink)}
.lg-glint{fill:#fff}
.lg-shine{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round}
.search-form{flex:1 1 auto;min-width:0;max-width:600px;margin:0 auto;display:flex;height:40px;align-self:center;
  border-radius:999px}
.search-form:focus-within{box-shadow:0 0 0 3px var(--accent-soft)}
.search-form input{flex:1;height:40px;-webkit-appearance:none;appearance:none;box-sizing:border-box;
  padding:0 18px;border:1px solid var(--line);border-right:0;border-radius:999px 0 0 999px;
  font:inherit;font-size:.92rem;background:var(--soft);color:var(--ink);min-width:0;margin:0}
.search-form input:focus{outline:none;background:#fff}
.search-form input::-webkit-search-decoration,
.search-form input::-webkit-search-cancel-button{-webkit-appearance:none}
/* Siyah arama butonu: beyaz header'da tek doygun vurgu */
.search-form button{height:40px;box-sizing:border-box;display:flex;align-items:center;gap:7px;
  border:0;background:var(--accent);color:#fff;
  border-radius:0 999px 999px 0;padding:0 20px;cursor:pointer;font:inherit;font-size:.92rem;font-weight:700;margin:0;flex-shrink:0}
.search-form button:hover{background:var(--accent-2)}
.search-form button svg{width:16px;height:16px;stroke:#fff;flex-shrink:0}
/* Sağ aksiyonlar: ikonlu Destek + rozetli Sepet hapı */
.hdr-links{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
.hdr-link{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;
  font-size:.92rem;font-weight:600;padding:9px 14px;border-radius:999px;white-space:nowrap}
.hdr-link:hover{background:var(--soft)}
.hdr-link svg{width:21px;height:21px;stroke:currentColor;flex-shrink:0;transition:transform .18s}
.hdr-link:hover svg{transform:rotate(-8deg) scale(1.05)}
/* Mobilde WhatsApp balonu zaten var; Destek yalnız geniş ekranda */
.hdr-help{display:none}
@media(min-width:900px){.hdr-help{display:flex}}
/* Telefon: header TEK satır — hamburger + logo + favori/sepet ikonları.
   Arama ve kategori şeridi çekmecededir (.mnav); sarma (flex-wrap) yok,
   ikonlar asla alt satıra düşmez. Sepet'in yazısı gizlenir, ikon kalır.
   (İkinci satır arama çubuğu denendi ve geri alındı: header'ı büyütüyor,
   .wrap'in yatay padding'ini ezmemek için ayrı bir kural katmanı istiyordu.) */
@media(max-width:679px){
  .header-in{height:56px;gap:10px}
  .logo svg{height:30px}
  .header-in>.search-form{display:none}
  .hdr-label{display:none}
  /* Yazısız ikon butonları sabit KARE: padding'li hap 43x39 kalıp çerçeveli
     sepette elips gibi görünüyordu — kare kutu + 999px yarıçap tam daire verir
     (44px dokunma hedefi) */
  .hdr-link{width:44px;height:44px;padding:0;justify-content:center;flex-shrink:0}
  .hdr-links{gap:4px}
}
/* Mobil/dokunmatik: input fontu 16px altında kalırsa iOS odakta sayfayı yakınlaştırır;
   arama çubuğu 44px dokunma hedefine çıkarılır. */
@media(max-width:899px),(pointer:coarse){
  .search-form{height:44px}
  .search-form input,.search-form button{height:44px;font-size:16px}
  .fsearch{font-size:16px}
}
/* Kategori menüsü: beyaz header altında ince çizgiyle ayrılan şerit — ana gezinme omurgası */
.cat-nav{display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;
  border-top:1px solid var(--line);padding:0 max(24px,var(--sar)) 0 max(24px,var(--sal));
  scrollbar-width:none}
.cat-nav::-webkit-scrollbar{display:none}
/* Telefonda kategori şeridi yok: aynı linkler çekmecede (.mnav-cats).
   Kural taban tanımından SONRA durmalı (aynı özgüllük, kaynak sırası kazanır). */
@media(max-width:679px){.cat-nav{display:none}}
/* Güvenli ortalama: justify-content:center taşmada baştaki öğeleri kırpar;
   auto margin'ler dar ekranda kaydırmayı bozmadan genişte ortalar.
   Not: son öğe <details> olabildiği için etiketten bağımsız seçici kullanılır. */
.cat-nav > :first-child{margin-left:auto}
.cat-nav > :last-child{margin-right:auto}
@media(min-width:680px){.cat-nav{gap:10px}}
/* Üst seviye linkler doğrudan-çocuk seçiciyle: .nav-drop içindeki linklere
   alt kenarlık ve ikon animasyonu sızmasın */
.cat-nav > a,.nav-item > a{display:flex;align-items:center;gap:8px;padding:13px 15px;text-decoration:none;
  font-size:.98rem;font-weight:600;white-space:nowrap;border-bottom:2.5px solid transparent;
  color:var(--ink);letter-spacing:.01em}
.cat-nav > a:hover,.nav-item > a:hover{border-bottom-color:var(--accent)}
.cat-nav > a svg,.nav-item > a svg{width:18px;height:18px;stroke:var(--ink);flex-shrink:0;transition:transform .18s}
/* Oyuncu göz kırpması: üzerine gelince ikon minik zıplar */
.cat-nav > a:hover svg,.nav-item > a:hover svg{transform:translateY(-2px) rotate(-8deg)}
/* "Diğerleri" açılır menüsü (details tabanlı — JS'siz de çalışır) */
/* Kategori alt menüsü: yalnız masaüstünde, hover/klavye odakla açılır.
   margin yerine bitişik panel: imleç link ile panel arasında boşluğa düşmesin. */
.nav-item{position:relative;flex-shrink:0}
.nav-item .chev{width:9px;height:6px;stroke:var(--muted);flex-shrink:0}
.nav-item > .nav-drop{display:none;left:0;right:auto;margin-top:0}
@media(min-width:900px){
  .nav-item:hover > .nav-drop,.nav-item:focus-within > .nav-drop{display:block}
  .nav-item:hover .chev{transform:rotate(180deg)}
  /* Panel açıkken tetikleyicinin alt çizgisi kalsın (iki menü türünde de) */
  .nav-item:hover > a,.nav-more[open] summary{border-bottom-color:var(--accent)}
  /* Hover ile açılan "Diğerleri": panel bitişik olsun ki imleç boşluğa düşmesin */
  .nav-more > .nav-drop{margin-top:0}
}
/* Mobilde alt menü yok: ok işareti yanlış beklenti yaratmasın */
@media(max-width:899px){.nav-item .chev{display:none}}
.nav-drop .drop-all{margin-top:4px;border-top:1px solid var(--line);border-radius:0;
  color:var(--muted);font-weight:600}
.nav-drop .drop-all:hover{color:#fff;border-radius:8px}
.nav-more{position:relative;flex-shrink:0}
.nav-more summary{display:flex;align-items:center;gap:7px;padding:13px 15px;cursor:pointer;
  list-style:none;font-size:.98rem;font-weight:600;color:var(--ink);white-space:nowrap;
  border-bottom:2.5px solid transparent}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more summary:hover{border-bottom-color:var(--accent)}
.nav-more summary svg{width:9px;height:6px;stroke:var(--ink);transition:transform .15s}
.nav-more[open] summary svg{transform:rotate(180deg)}
.nav-drop{position:absolute;top:100%;right:0;z-index:50;min-width:210px;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:6px;margin-top:6px;
  box-shadow:0 8px 28px rgba(18,18,18,.14)}
.nav-drop a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  text-decoration:none;font-size:.9rem;font-weight:500;color:var(--ink);white-space:nowrap;
  transition:background .1s,color .1s}
/* Hover: siyah yastık, beyaz metin ("Sepete Ekle" hover'ıyla aynı dil) */
.nav-drop a:hover{background:var(--ink);color:#fff}
.nav-drop svg{width:16px;height:16px;stroke:var(--ink);flex-shrink:0}
.nav-drop a:hover svg{stroke:#fff}
/* Kırpma düzeltmesi: scroll konteyneri absolute paneli hapseder.
   Masaüstünde nav'a overflow:visible (öğeler sığıyor); mobilde .nav-more
   static yapılır — panelin konum atası sticky .site-header olur, böylece
   panel scroll konteynerinden KAÇAR ve header altında tam genişlik açılır. */
@media(min-width:900px){.cat-nav{overflow:visible}}
@media(max-width:899px){
  .nav-more{position:static}
  .nav-drop{position:absolute;left:0;right:0;top:100%;min-width:0;margin:0;
    padding:8px 12px 14px;background:#fff;border:0;
    border-top:1px solid var(--line);border-radius:0 0 16px 16px;
    box-shadow:0 18px 30px rgba(18,18,18,.18);
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}
  .nav-drop a{padding:12px 10px}
  /* Kaydırılabilirlik ipucu: kenar solmaları (JS data-fade atar; panel açıkken kapalı) */
  .cat-nav[data-fade=r]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .cat-nav[data-fade=l]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);
    mask-image:linear-gradient(90deg,transparent,#000 36px)}
  .cat-nav[data-fade=lr]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
  .cat-nav:has(.nav-more[open]){-webkit-mask-image:none;mask-image:none}
}
.cart-link{border:1.5px solid var(--line)}
.cart-link:hover{border-color:var(--ink)}
.cart-ico{position:relative;display:flex;flex-shrink:0}
.cart-badge{position:absolute;top:-7px;right:-9px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:var(--pink);color:var(--sun-ink);font-size:.68rem;font-weight:700;line-height:1;
  display:none;align-items:center;justify-content:center}
.cart-badge.show{display:inline-flex}
/* ── Mobil çekmece menü (hamburger) ──────────────────────────────────────
   details tabanlı: JS kapalıyken de açılır/kapanır. Panel fixed konumlu;
   çekmece açıkken .site-header'ın transform'u sıfırlanır (transform'lu ata
   fixed'i kendine bağlar, hdr-hide ile panel kayardı) ve z-index yükselir
   (buybar 40 / WhatsApp 50'nin üstüne çıksın). Kaydırma kilidi (.no-scroll)
   yalnız telefon genişliğinde: ekran büyürse kilit kendiliğinden kalkar. */
.mnav{display:none}
@media(max-width:679px){
  .mnav{display:block;flex-shrink:0}
  .site-header:has(.mnav[open]){z-index:80;transform:none}
  .no-scroll{overflow:hidden}
}
.mnav summary{list-style:none;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-left:-9px;border-radius:10px;cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary:active{background:var(--soft)}
.mnav summary svg{width:24px;height:24px;stroke:var(--ink)}
.mnav-back{position:fixed;inset:0;z-index:79;background:rgba(18,18,18,.45);transition:opacity .22s}
@starting-style{.mnav[open] .mnav-back{opacity:0}}
.mnav-panel{position:fixed;top:0;bottom:0;left:0;z-index:80;width:min(330px,88vw);
  background:#fff;overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;
  display:flex;flex-direction:column;
  padding:12px 18px calc(18px + var(--sab)) max(18px,var(--sal));
  box-shadow:8px 0 30px rgba(18,18,18,.18);transition:transform .22s ease}
@starting-style{.mnav[open] .mnav-panel{transform:translateX(-100%)}}
.mnav-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.mnav-title{font-weight:700;font-size:1.02rem}
.mnav-close{width:38px;height:38px;border:0;background:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;margin-right:-8px}
.mnav-close:active{background:var(--soft)}
.mnav-close svg{width:20px;height:20px;stroke:var(--ink)}
/* flex:0 0 auto: tabandaki flex:1 kolon düzeninde formu dikeyde büyütüyordu.
   align-self:stretch: tabandaki align-self:center kolon ekseninde formu
   max-content'te (input'un ~20ch doğal genişliği + buton) bırakıp ortalıyor,
   form panelin yatay padding'inin dışına taşıyordu. */
.mnav-panel .search-form{max-width:none;margin:0 0 8px;flex:0 0 auto;align-self:stretch}
.mnav-cats{display:flex;flex-direction:column;margin-top:6px}
.mnav-cats>a{display:flex;align-items:center;gap:12px;padding:13px 4px;text-decoration:none;
  font-weight:600;font-size:1rem;color:var(--ink);border-bottom:1px solid var(--soft)}
.mnav-cats>a svg{width:20px;height:20px;stroke:var(--ink);flex-shrink:0}
/* Alt kategori çipleri: üst satırın çizgisi çip bloğunun altına iner (çift çizgi olmasın) */
.mnav-cats>a:has(+.mnav-sub){border-bottom:0}
.mnav-sub{display:flex;flex-wrap:wrap;gap:8px;padding:2px 4px 14px 36px;border-bottom:1px solid var(--soft)}
.mnav-sub a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;
  font-size:.85rem;font-weight:500;color:var(--body);white-space:nowrap}
.mnav-help{margin-top:auto;padding-top:18px;display:flex;flex-direction:column}
.mnav-help a{padding:9px 4px;font-size:.92rem;color:var(--body);text-decoration:none}
/* Gri tonlu marka şeridi: sakin, tek tip; üzerine gelince marka orijinal renklerine döner */
.brand-strip{display:flex;gap:12px 38px;flex-wrap:wrap;justify-content:center;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.brand-strip a{display:flex;align-items:center;opacity:.45;filter:grayscale(1);
  transition:opacity .15s,filter .15s}
.brand-strip a:hover{opacity:1;filter:grayscale(0)}
.brand-strip img{width:auto;display:block}
/* Mobil: tek satır parmakla kayar şerit */
@media(max-width:679px){
  .brand-strip{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    justify-content:flex-start;gap:28px;padding:14px 16px;scrollbar-width:none}
  .brand-strip::-webkit-scrollbar{display:none}
  .brand-strip a{flex-shrink:0}
}

/* Hero: 3 sabit banner kutusu (salt görsel). Masaüstünde solda büyük kutu iki
   satırı kaplar, sağda iki kutu alt alta; aynı köşe yarıçapı ve dar gap ile tek
   parça gibi okunur. Yükseklik ana kutunun 16/9 oranından gelir; yan kutular
   satırlara yayılıp görseli cover ile doldurur (banner dekoratiftir, kırpılabilir).
   Mobilde ana kutu tam genişlik, iki yan kutu altında yan yana. */
.hero-trio{display:grid;gap:12px;margin-top:16px;grid-template-columns:1fr 1fr}
.hero-box{display:block;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;
  text-decoration:none;color:inherit;cursor:pointer}
.hero-box.main{grid-column:1/3}
/* Görsel kutuyu mutlak konumla doldurur: yüksekliğe katkısı olmaz, böylece
   satır yüksekliği yalnız ana kutunun oranından çözülür ve yan kutuların alt
   kenarı her genişlikte ana kutuyla aynı hizada biter. */
.hero-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Dönüşümlü 3. kutu: kayıtlar üst üste mutlak durur, .on olan görünür (sürüş
   HERO_ROT_SCRIPT'te). Kapsayıcı gridde normal kutu gibi yer kaplar. */
.hero-rot{position:relative;aspect-ratio:16/9}
.hero-rot .hero-box{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .7s ease}
.hero-rot .hero-box.on{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.hero-rot .hero-box{transition:none}}
@media(min-width:860px){
  .hero-trio{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:1fr 1fr}
  .hero-box.main{grid-column:1;grid-row:1/3}
  .hero-box{aspect-ratio:auto}
  .hero-box.main{aspect-ratio:16/9}
  .hero-rot{aspect-ratio:auto}
}
.hero-box-in{padding:24px 20px 28px}
@media(min-width:860px){
  .hero-box.main .hero-box-in{padding:64px 48px 76px}
  .hero-box-in{padding:26px 28px}
}
.hero-eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  color:var(--muted);margin-bottom:10px}
.hero-box h2{font-size:1.15rem;letter-spacing:-.02em;margin:0 0 10px;max-width:22ch}
.hero-box.main h2{font-size:clamp(1.9rem,4.2vw,2.8rem);letter-spacing:-.035em;margin:0 0 12px}
.hero-box p{color:var(--muted);font-size:1.05rem;margin:0 0 26px;max-width:52ch}
/* Yan kutu CTA'sı: buton yerine altı çizili kompakt link görünümü */
.hero-box-cta{font-size:.88rem;font-weight:600;color:var(--ink);
  text-decoration:underline;text-underline-offset:4px}
.hero-box:hover .hero-box-cta{color:var(--accent)}
.hero-box.dark,.hero-box.dark h2{color:#fff}
.hero-box.dark p,.hero-box.dark .hero-eyebrow{color:rgba(255,255,255,.75)}
.hero-box.dark .btn-primary{background:#fff;color:var(--accent)}
.hero-box.dark .hero-box-cta{color:#fff}

/* Promo kartları: 640px'ten sonra 3 yan yana. Mobilde alt alta üç kare afiş
   ~1000px kaydırma yiyordu — parmakla kayan snap şerit (bir buçuk kart
   görünür, kalanı kenardan sızar: kaydırılabilirlik kendini anlatır). */
.promo-row{display:grid;grid-template-columns:1fr;gap:12px;padding:8px 0}
@media(min-width:640px){.promo-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:639px){
  .promo-row{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;scrollbar-width:none}
  .promo-row::-webkit-scrollbar{display:none}
  /* min-width:0: bare <img> çocukta width:100% kuralı min-width:auto önerisine
     dönüşüp flex-basis'i eziyordu (kart 76% yerine tam genişlik kalıyordu) */
  .promo-row>*{flex:0 0 76%;min-width:0;scroll-snap-align:center}
}
.promo-row img{width:100%;height:auto;border-radius:16px;display:block}

/* Güven ikonları */
.trust-row{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 14px;padding:30px 0;
  border-bottom:1px solid var(--line);margin-bottom:8px}
@media(min-width:860px){.trust-row{grid-template-columns:repeat(4,1fr)}}
.trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.trust-item svg{width:26px;height:26px;stroke:var(--ink)}
.trust-item strong{font-size:.92rem}
.trust-item span{font-size:.8rem;color:var(--muted)}

/* Yorumlar */
.reviews{display:grid;gap:14px;margin:20px 0 48px;grid-template-columns:1fr}
@media(min-width:760px){.reviews{grid-template-columns:repeat(3,1fr);gap:18px}}
.review{border:1px solid var(--line);border-radius:14px;padding:20px}
.review .stars{color:#eab308;letter-spacing:2px;font-size:.9rem}
.review p{color:var(--body);font-size:.93rem;margin:10px 0 12px}
.review strong{font-size:.85rem}

/* Instagram vitrini */
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0 48px}
@media(min-width:640px){.ig-grid{grid-template-columns:repeat(4,1fr);gap:14px}}
.ig-grid a{display:block;border-radius:12px;overflow:hidden;background:var(--soft);aspect-ratio:1}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.ig-grid a:hover img{transform:scale(1.05)}

/* Video */
.video-wrap{margin:20px 0 48px}
.video-link{display:block;position:relative;border-radius:14px;overflow:hidden;background:#000}
.video-link img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.85}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;
  background:rgba(18,18,18,.85);border-radius:12px;display:flex;align-items:center;justify-content:center}
.video-play::after{content:'';border-style:solid;border-width:10px 0 10px 18px;
  border-color:transparent transparent transparent #fff;margin-left:4px}

/* E-bülten (footer içinde — nitatoys düzeni) */
.foot-news p{color:var(--muted);font-size:.88rem;margin:0 0 12px}
.newsletter-form{display:flex;flex-wrap:wrap;max-width:440px}
/* Turnstile kutusu (yalnız etkileşim gerektiğinde görünür): kendi satırında tam genişlik */
.cf-turnstile{flex-basis:100%;margin-top:10px}
.newsletter-form input{flex:1;padding:13px 16px;border:1px solid var(--line);border-right:0;
  border-radius:10px 0 0 10px;font:inherit;min-width:0;background:#fff}
.newsletter-form input:focus{outline:none;border-color:var(--ink)}
.newsletter-form button{border:1px solid var(--accent);background:var(--accent);color:#fff;
  border-radius:0 10px 10px 0;padding:0 22px;font:inherit;font-weight:600;cursor:pointer}
.newsletter-form button:hover{background:var(--accent-2)}

/* WhatsApp */
.wa-float{position:fixed;right:calc(18px + var(--sar));bottom:calc(18px + var(--sab));
  z-index:50;width:54px;height:54px;border-radius:50%;
  background:#25d366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.22);transition:transform .15s}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* Sosyal ikonlar */
.socials{display:flex;gap:12px;margin-top:14px}
.socials a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--line);border-radius:50%;text-decoration:none;font-size:.8rem;font-weight:700}
.socials a:hover{border-color:var(--ink)}
.socials svg{width:18px;height:18px;stroke:currentColor;fill:currentColor}

/* Kategori kartları */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:28px 0 8px}
@media(min-width:640px){.cats{grid-template-columns:repeat(4,1fr);gap:16px}}
.cat-card{display:flex;align-items:center;justify-content:center;padding:20px 12px;
  border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;
  font-weight:600;font-size:.98rem;background:#fff;transition:border-color .15s}
.cat-card:hover{border-color:var(--ink)}

/* Bölüm başlığı */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:12px;margin:40px 0 4px}
/* Mobilde bölümler arası nefes payı bir tık dar: kaydırma mesafesi kısalır */
@media(max-width:679px){.section-head{margin:30px 0 4px}}
.section-head h2{margin:0;font-size:1.55rem;letter-spacing:-.025em}
/* Başlık altı pixel bar: aralıklı 8-bit bloklar (siyah/sarı/açık sarı), retro vurgu */
.section-head h2::after{content:'';display:block;width:42px;height:6px;margin-top:7px;
  background:linear-gradient(90deg,var(--accent) 0 14px,transparent 14px 16px,
    var(--pink) 16px 30px,transparent 30px 32px,var(--pink-soft) 32px 42px)}
.section-head .cta{font-size:.9rem;font-weight:500;color:var(--ink);white-space:nowrap;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;flex-shrink:0}
.section-head .cta:hover{color:var(--accent)}
/* Ok, linkin parçası gibi: üzerine gelince minik ileri kayar */
.section-head .cta::after{content:'→';display:inline-block;margin-left:6px;transition:transform .18s}
.section-head .cta:hover::after{transform:translateX(3px)}

/* Liste düzeni: solda filtre paneli, sağda sıralama çubuğu + ürünler (klasik e-ticaret) */
/* Tek kolonda da minmax(0,1fr): kolon genişliği içerikten türemesin —
   kaydırmalı çip şeridi gibi geniş min-content'li çocuklar sayfayı yatay taşırmasın */
.listing{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:10px 0 56px;align-items:start}
@media(min-width:900px){.listing{grid-template-columns:232px minmax(0,1fr);gap:32px}}
/* Masaüstünde panel sayfayla akar (sticky değil): içerik ekrandan uzun
   olabildiğinden yapışık panel alt grupları erişilmez kılıyordu. */
.fside{border:0;padding:0;background:transparent}
/* Mobil tetik: hızlı filtre çipleriyle aynı hap dili (lhead-links a) + nav'daki
   ok deseni (nav-more). Açık panel, summary'nin altında ayrı kart olarak açılır. */
/* > zorunlu: içerideki .fgroup summary'leri hap stilini almasın */
.fside>summary{cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  padding:9px 15px;font-size:.88rem;font-weight:500;color:var(--ink);list-style:none}
.fside>summary:active{background:var(--soft)}
.fside>summary svg{width:9px;height:6px;stroke:var(--ink);transition:transform .15s}
.fside[open]>summary svg{transform:rotate(180deg)}
/* Kapalı çekmecede aktif filtre sayısı görünür kalsın */
.fcount{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  border-radius:10px;background:var(--accent);color:#fff;font-size:.75rem;font-weight:600;
  padding:0 6px}
.fside>summary::-webkit-details-marker{display:none}
@media(min-width:900px){.fside>summary{display:none}}
@media(max-width:899px){.fside[open]::details-content{border:1px solid var(--line);
  border-radius:12px;background:#fff;padding:2px 16px 14px;margin-top:10px}}
/* Filtre grupları: mobilde daraltılabilir <details> (sunucuda kapalı; seçili
   grubu FilterGroup açık basar), masaüstünde içerik ::details-content override'ı
   ile hep görünür ve summary tıklanamaz. ::details-content'e transition YOK
   (Chrome takılma bug'ı — akordeon bloğundaki nota bak). */
.fgroup{border-top:1px solid var(--line)}
.fgroup:first-of-type{border-top:0}
.fgroup[open]{padding-bottom:12px}
.fgroup summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 0}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup summary svg{width:9px;height:6px;stroke:var(--muted);margin-left:auto;flex-shrink:0;
  transition:transform .15s}
.fgroup[open] summary svg{transform:rotate(180deg)}
.fgroup h4{margin:0;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:600}
@media(min-width:900px){
  .fgroup::details-content{content-visibility:visible}
  .fgroup{padding-bottom:12px}
  .fgroup summary{pointer-events:none;padding:16px 0 10px}
  .fgroup:first-of-type summary{padding-top:2px}
  .fgroup summary svg{display:none}
}
/* Uzun listeler grup içinde kayar; ince kaydırma çubuğu */
.flist{display:flex;flex-direction:column;gap:2px;margin:0;max-height:252px;overflow-y:auto;
  padding-right:6px;scrollbar-width:thin;scrollbar-color:#cfcfcc transparent}
.flist::-webkit-scrollbar{width:5px}
.flist::-webkit-scrollbar-thumb{background:#cfcfcc;border-radius:3px}
.flist::-webkit-scrollbar-track{background:transparent}
.fsearch{width:100%;margin:0 0 8px;padding:7px 11px;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:.85rem;background:var(--soft);color:var(--ink);
  -webkit-appearance:none;appearance:none}
.fsearch:focus{outline:none;border-color:var(--accent);background:#fff}
.fsearch::-webkit-search-decoration,.fsearch::-webkit-search-cancel-button{-webkit-appearance:none}
/* Checkbox desenli satır: seçiliye tekrar tıklamak filtreyi kaldırır */
.frow{display:flex;align-items:center;gap:9px;padding:5px 0;text-decoration:none;
  font-size:.92rem;color:var(--body)}
.frow:hover{color:var(--ink)}
.frow:hover .fbox{border-color:var(--ink)}
.fbox{width:16px;height:16px;border:1.5px solid #c9c9c6;border-radius:4px;flex-shrink:0;
  position:relative;background:#fff;transition:border-color .12s,background .12s}
.frow.active{color:var(--ink);font-weight:600}
.frow.active .fbox{background:var(--accent);border-color:var(--accent)}
.frow.active .fbox::after{content:'';position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ftext{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .cnt{font-size:.8rem;color:var(--muted)}
.clear-filters{display:inline-block;margin-top:12px;font-size:.85rem;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px}
.clear-filters:hover{color:var(--ink)}
/* Mobil biriktirmeli filtre çubuğu: panel kartının altına yapışır, kartın
   kenarlarına taşar (negatif margin = kart padding'i). [hidden] display'i
   ezmesin diye ayrıca söndürülür. */
.fapply{position:sticky;bottom:0;display:flex;gap:16px;align-items:center;
  background:#fff;border-top:1px solid var(--line);border-radius:0 0 12px 12px;
  margin:12px -16px -14px;padding:12px 16px calc(12px + var(--sab))}
.fapply[hidden]{display:none}
.fapply .btn-primary{flex:1;text-align:center}
.fapply-clear{flex-shrink:0;font-size:.85rem;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px}
@media(min-width:900px){.fapply{display:none}}
/* Grid üstü seçili filtre çipleri: çipe tıklamak o filtreyi kaldırır */
.applied{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.apchip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--line);
  border-radius:999px;background:var(--soft);font-size:.84rem;font-weight:500;color:var(--ink);
  text-decoration:none;transition:border-color .15s}
.apchip .x{font-size:.72rem;color:var(--muted)}
.apchip:hover{border-color:var(--ink)}
.apchip:hover .x{color:var(--ink)}
.apclear{font-size:.84rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.apclear:hover{color:var(--ink)}
/* Liste başlığı: seçime duyarlı başlık + alt metin + sağda logo/ikon */
.lhead{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  padding:6px 0 16px;margin:0 0 14px;border-bottom:1px solid var(--line)}
.lhead h1{margin:0;font-size:1.9rem;letter-spacing:-.03em}
.lhead-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.lhead-count{display:none;color:var(--muted);font-size:.9rem;white-space:nowrap}
.lhead-main{min-width:0}
.lhead-sub{margin:4px 0 0;color:var(--muted);font-size:.92rem;max-width:62ch}
.lhead-meta{margin-top:9px;font-size:.82rem;color:var(--muted);letter-spacing:.01em}
.lhead-links{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px 8px;align-items:center;font-size:.84rem}
.lhead-links .llabel{color:var(--muted);margin-right:2px}
.lhead-links a{border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:5px 13px;text-decoration:none;color:var(--ink);font-weight:500;transition:border-color .15s}
.lhead-links a:hover{border-color:var(--accent);color:var(--accent)}
.lhead-logo{height:30px;width:auto;max-width:150px;flex-shrink:0;margin-top:8px;
  opacity:.55;filter:grayscale(1)}
.lhead-icon svg{width:42px;height:42px;stroke:var(--ink);opacity:.45;flex-shrink:0}
/* Mobil liste düzeni: sağ kolon sarmalayıcıları display:contents ile çözülür,
   parçalar .listing grid'ine doğrudan katılır — sıra order ile kurulur:
   başlık üstte (sayaçla), filtre çekmecesi + sıralama TEK kontrol satırında,
   çipler altta kayar şerit, tanıtım/istatistik metinleri gizli. */
@media(max-width:899px){
  .listing{grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
  .listing>div,.listing .lhead,.listing .lhead-main{display:contents}
  .listing>div>*,.listing .lhead-title,.listing .lhead-links{grid-column:1/-1}
  .listing .lhead-title{order:-2}
  .listing>.fside{grid-column:1;order:-1}
  .listing>.fside[open]{grid-column:1/-1}
  .listing .sortbar{grid-column:2;order:-1;margin:0;justify-content:flex-end}
  .sort-count,.lhead-sub,.lhead-meta,.lhead-logo,.lhead-icon{display:none}
  .lhead-count{display:inline}
  .sort-chips{gap:12px}
  .lhead-links{margin:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .lhead-links::-webkit-scrollbar{display:none}
  .lhead-links a,.lhead-links .llabel{flex-shrink:0}
  .listing .grid{margin:8px 0 48px}
  .applied{margin:0}
  /* Kırıntı liste sayfasında başlığın kopyası — mobilde gizli (JSON-LD'deki
     breadcrumb SEO için markup'ta durur; ürün sayfası kırıntısı etkilenmez) */
  .breadcrumb:has(+.listing){display:none}
  /* Filtre seçiliyken hızlı çipler ✕'li uygulanan çiplerle tekrarlanıyor —
     yalnız uygulananlar kalır */
  .listing:has(.applied) .lhead-links{display:none}
}
/* Telefonda başlık küçülür */
@media(max-width:560px){.lhead h1{font-size:1.5rem}}

.sortbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:10px;margin:0 0 14px}
.sort-count{color:var(--muted);font-size:.9rem}
.sort-chips{display:flex;gap:16px}
.fchip{flex-shrink:0;padding:4px 2px;font-size:.88rem;font-weight:500;text-decoration:none;
  color:var(--muted);white-space:nowrap;border-bottom:1.5px solid transparent}
.fchip:hover{color:var(--ink)}
.fchip.active{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}

/* Ürün ızgarası */
/* minmax(0,…): düz 1fr = minmax(auto,1fr) — nowrap künye gibi geniş min-content'li
   içerik kolonları eşitsizleştiriyordu (kart daralamıyordu) */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;margin:20px 0 56px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{display:flex;flex-direction:column}
/* Ürün görseli yüzeyleri BEYAZ: tedarikçi fotoğrafları beyaz fonlu, gri zemin
   (--soft) görselin etrafında çerçeve gibi görünüp görüntüyü bozuyordu. */
.card-media{display:block;background:#fff;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:1;position:relative}
/* Sticker eğimi logodakiyle aynı ruh: sarı çip hafif yamuk yapışmış etiket gibi */
.card-disc{position:absolute;top:10px;left:10px;z-index:1;background:var(--sun);color:var(--sun-ink);
  font-size:.7rem;font-weight:700;border-radius:5px;padding:2px 6px;transform:rotate(-3deg)}
/* contain: tedarikçi görselleri dikeyse (oyun kutusu vb.) kartta KIRPILMASIN */
.card-media img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease,opacity .2s ease}
/* Yüklenene dek hafif zemin + parıltı (imgFadeScript .ldg atar), gelince fade */
.card-media.ldg{background:var(--soft)}
.card-media.ldg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  animation:shimmer 1.1s infinite}
.card-media.ldg img{opacity:0}
.card:hover .card-media img{transform:scale(1.045)}
.card-body{padding:10px 2px 0;display:flex;flex-direction:column;flex:1}
.card-info{text-decoration:none;display:block;flex:1}
.card:hover .card-title{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* Tek satır: uzun marka adı (FRONTIER DEVELOPMENTS) sarınca kart yükseklikleri dalgalanıyordu */
.card-eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* İkinci el: bağırmayan vurgu — aynı satırda bir ton koyu */
.card-cond{color:var(--ink)}
.card-title{font-size:.95rem;font-weight:500;color:var(--ink);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.card-price{margin-top:6px;font-size:1rem;font-weight:600;color:var(--ink);
  display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.card-price.sale{color:var(--accent)}
.card-old{color:var(--muted);text-decoration:line-through;font-weight:400;font-size:.85rem}
.card-ship{font-size:.76rem;color:var(--ok);font-weight:500;margin-top:3px}
.card-add{width:100%;margin-top:10px;padding:9px 0;border:1px solid #d6d6d3;border-radius:8px;
  background:#fff;color:var(--ink);font:inherit;font-size:.87rem;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.card-add:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* Ürün detay */
.breadcrumb{font-size:.84rem;color:var(--muted);margin:18px 0 6px;display:flex;
  flex-wrap:wrap;gap:6px;align-items:center}
/* Mobil: kırıntı tek satırda parmakla kayar — uzun ürün adı 2-3 satırı
   yiyip içeriği aşağı itiyordu */
@media(max-width:679px){
  .breadcrumb{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;margin:14px 0 6px;
    overscroll-behavior-x:contain;scrollbar-width:none}
  .breadcrumb::-webkit-scrollbar{display:none}
  .breadcrumb a{padding:5px 0}
}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--ink);text-decoration:underline}
.breadcrumb .sep{opacity:.5}
/* minmax(0,…): düz 1fr'nin min-content kilidi geniş içeriği (taksit tablosu
   gibi) mobilde viewport dışına taşırıp sayfayı sağdan kestiriyordu */
.product{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin:8px 0 56px}
.pcontent{min-width:0}
/* Masaüstü: sol kolon = galeri (1. satır) + içerik bölümleri (2. satır),
   sağ kolon = iki satırı kaplayan sticky satın alma kartı. */
@media(min-width:860px){
  .product{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 52px;align-items:start}
  .product-gallery{grid-column:1;grid-row:1}
  /* top ≥ header yüksekliği (~120px): daha küçük değerde kolonun üst
     etiketi (kategori · durum) scroll'da header'ın altında kaybolur */
  .product-info{grid-column:2;grid-row:1/3;position:sticky;top:132px}
  .pcontent{grid-column:1;grid-row:2;min-width:0}
}
/* Galeri: mobilde yatay snap karuseli (native swipe) + yatay thumb şeridi;
   masaüstünde Trendyol düzeni — solda dikey thumb kolonu, sağda büyük görsel.
   Not: scroll-behavior:smooth bilerek YOK — Chrome, zorunlu snap konteynerinde
   programatik yumuşak kaydırmayı iptal edip 0'a döndürebiliyor. */
.product-gallery{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.product-gallery{grid-template-columns:64px minmax(0,1fr);align-items:start}}
/* overscroll-behavior-x: uçlarda kaydırma sayfaya/tarayıcı geri hareketine
   zincirlenmesin — swipe galeride başlar galeride biter */
.gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  border-radius:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;
  aspect-ratio:1;background:#fff}
/* contain: tedarikçi görselleri kare değilse ürün KIRPILMAZ (satın alma kararı
   verilen görsel bu). Kart ızgarası da aynı sebeple contain kullanır. */
/* user-drag/select kapalı: swipe sırasında görsel sürükleme hayaleti ve
   uzun basışta seçim vurgusu kaydırmayı bozmasın */
.gallery-slide img{width:100%;height:100%;object-fit:contain;cursor:zoom-in;
  user-select:none;-webkit-user-drag:none}
/* Galeri okları: mobilde swipe varken gereksiz, masaüstünde görünür */
.gnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:none;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.95);cursor:pointer;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(18,18,18,.12)}
.gnav svg{width:18px;height:18px;stroke:var(--ink)}
.gnav:hover{border-color:var(--accent)}
.gnav:hover svg{stroke:var(--accent)}
.gprev{left:10px}
.gnext{right:10px}
@media(min-width:860px){.gnav{display:flex}}
.thumbs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
  overscroll-behavior-x:contain}
.thumbs::-webkit-scrollbar{display:none}
/* Tek görselli üründe thumb şeridi mobilde gereksiz yer kaplar (masaüstünde
   kalır: 64px grid kolonu şeride güvenir, yoksa ana görsel o kolona düşer) */
@media(max-width:859px){.thumbs:has(> .thumb:only-child){display:none}}
/* 6'dan fazla görsel: fazlası "+N" kutusuna katlanır, tıklayınca açılır */
.thumbs:not(.open) .thumb-extra{display:none}
.thumb-more{position:relative}
.thumb-more img{opacity:.35}
.thumb-more span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.88rem;color:var(--ink)}
/* Lightbox: tam ekran büyük görünüm */
/* Konum ve ortalama TABAN seçicide: kapanış animasyonu boyunca [open] ve :modal
   stilleri düştüğünden, burada olmazlarsa solarken görsel belge sol üstüne zıplar. */
.lightbox{border:0;margin:0;padding:0;width:100vw;height:100vh;max-width:100vw;max-height:100vh;
  background:transparent;position:fixed;inset:0;align-items:center;justify-content:center}
/* Mobil adres çubuğu payı: 100vh görünür alandan uzun kalıp merkezi aşağı
   kaydırıyordu — dvh destekleyen tarayıcıda GÖRÜNÜR alana ortala */
@supports(height:100dvh){
  .lightbox{height:100dvh;max-height:100dvh}
  .lightbox img{max-height:88dvh}
}
/* Kapalı halde saydam: açılış/kapanışta arka plan yumuşak kararır (bkz. mikro blok) */
.lightbox::backdrop{background:rgba(14,8,26,0);
  transition:background .18s,display .18s allow-discrete,overlay .18s allow-discrete}
.lightbox[open]{display:flex}
.lightbox img{max-width:min(1100px,94vw);max-height:88vh;object-fit:contain;border-radius:10px;background:#fff}
.lb-close,.lb-nav{position:fixed;z-index:2;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);cursor:pointer}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.3)}
.lb-close{top:max(14px,env(safe-area-inset-top,0px));right:max(14px,var(--sar));width:42px;height:42px}
.lb-nav{top:50%;transform:translateY(-50%);width:46px;height:46px}
.lb-prev{left:max(12px,var(--sal))}
.lb-next{right:max(12px,var(--sar))}
.lb-close svg,.lb-nav svg{width:22px;height:22px;stroke:#fff}
.lb-count{position:fixed;bottom:max(16px,var(--sab));left:50%;transform:translateX(-50%);color:#fff;
  font-size:.85rem;font-weight:600;background:rgba(255,255,255,.16);border-radius:999px;padding:4px 12px}
@media(min-width:860px){.thumbs{flex-direction:column;order:-1;overflow:visible}}
.thumb{border:1.5px solid var(--line);border-radius:8px;overflow:hidden;padding:0;
  background:#fff;cursor:pointer;aspect-ratio:1;transition:border-color .15s;
  flex:0 0 64px;width:64px}
.thumb:hover{border-color:#b5b5b5}
.thumb.active{border-color:var(--accent)}
.thumb img{width:100%;height:100%;object-fit:contain;display:block}
/* sticky yalnız masaüstünde (aşağıdaki media bloğunda): mobilde bölümler
   info'dan sonra aktığından yapışkan kart içeriğin üstüne binerdi */
.product-eyebrow{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.product-eyebrow a{color:inherit;text-decoration:none}
.product-eyebrow a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* İkinci el: çipsiz vurgu — yalnız durum kelimesi mürekkep tonunda */
.product-eyebrow .cond-used{color:var(--ink);font-weight:600}
.product-info h1{font-size:1.55rem;line-height:1.3;margin:5px 0 8px;font-weight:500}
.product-info h1 .brand-link{font-weight:700;color:inherit;text-decoration:none}
.product-info h1 .brand-link:hover{text-decoration:underline}
.kunye{margin:0 0 10px;font-size:.9rem;color:var(--body);font-weight:500}
/* EFT talimat kutusu: IBAN uzun — dt/dd alt alta rahat kırılır, kopyala düğmesi sessiz */
.copy-btn{appearance:none;border:1px solid var(--line);background:#fff;border-radius:6px;
  padding:2px 8px;font:inherit;font-size:.76rem;color:var(--body);cursor:pointer;margin-left:6px}
.copy-btn:hover{border-color:var(--ink);color:var(--ink)}
.installment{color:var(--muted);font-size:.88rem;margin:2px 0 16px}
/* Ana CTA: kolonun tek doygun vurgusu — kartlardaki butonlardan bir tık iri */
.product-info .btn-block{padding:15px 30px;font-size:1rem}
/* Kıtlık notu: fiyat satırında soluk "Son 1 ürün" (hap ve ayrı satır reddedildi) */
.scarcity{color:var(--muted);font-size:.88rem;font-weight:500}
/* Satılmış ürün: uyarı + "tekrar bulursak haber ver" formu TEK kartta */
.sold-box{background:#fdf8ee;border:1px solid #f3e3c2;border-radius:12px;padding:14px 16px;margin:0 0 12px}
.sold-msg{color:var(--warn);font-weight:500;font-size:.93rem;margin:0}
.restock{margin:12px 0 2px}
.restock label{display:block;font-size:.88rem;font-weight:500;margin-bottom:8px}
.restock-row{display:flex;gap:8px}
.restock-row input{flex:1;min-width:0;padding:12px 14px;border:1px solid #ecdcb6;
  border-radius:var(--radius);font:inherit;background:#fff;color:var(--ink)}
.restock-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.restock-row .btn{width:auto;min-width:0;flex-shrink:0;padding:12px 18px}
/* WhatsApp'tan soru sor */
.ask-wa{display:inline-flex;align-items:center;gap:9px;margin-top:14px;font-size:.9rem;
  font-weight:600;color:#177245;text-decoration:none;border:1px solid #bfe6cf;
  border-radius:999px;padding:10px 16px}
.ask-wa svg{width:17px;height:17px;fill:currentColor;flex-shrink:0}
.ask-wa:hover{background:#f2faf5}
/* Mobil galeri sayacı (1/4) */
.gwrap{position:relative}
.gcount{position:absolute;right:10px;bottom:10px;background:rgba(18,18,18,.6);color:#fff;
  font-size:.75rem;font-weight:600;border-radius:999px;padding:3px 10px;pointer-events:none}
@media(min-width:860px){.gcount{display:none}}
/* SSS akordeonları: tam sayfa genişliğine yayılmaz — soru ile "+" yan yana
   kalsın; son satırın çizgisi alttaki bölüm ayırıcısıyla üst üste binmesin. */
.faq{border-bottom:1px solid var(--line);max-width:720px}
.faq:last-of-type{border-bottom:0}
.faq summary{cursor:pointer;font-weight:500;font-size:.95rem;padding:13px 0;list-style:none;
  display:flex;justify-content:space-between;gap:10px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--muted);font-size:1.1rem;flex-shrink:0}
.faq[open] summary::after{content:'−'}
.faq p{margin:0 0 14px;color:var(--body);font-size:.93rem;max-width:70ch}
/* Son İncelediklerin kartları (JS ile kurulur) */
.rv-card{display:block;text-decoration:none}
.rv-card img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:var(--radius);
  background:#fff;display:block}
.rv-title{margin-top:8px;font-size:.9rem;color:var(--ink);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rv-price{margin-top:4px;font-weight:600;font-size:.95rem;color:var(--ink)}
/* Sepette tek adet ürünün adet kutusu yerine geçen etiket */
.qty-single{display:inline-flex;align-items:center;margin-top:10px;font-size:.85rem;
  color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:8px 12px}

/* Fiyat bloğu: indirimde üstü çizili liste fiyatı + turuncu yüzde rozeti */
.price-block{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0 2px}
.price-now{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.price-old{font-size:1rem;color:var(--muted);text-decoration:line-through}
.disc-badge{background:var(--sun);color:var(--sun-ink);font-size:.82rem;font-weight:700;
  border-radius:7px;padding:3px 9px;align-self:center;transform:rotate(-3deg)}

/* Teslimat / güven satırları: yumuşak panel — kolonda dağınık duran üç
   satırı tek blokta toplar, CTA'dan sonra gözün dinlendiği yer */
.info-box{margin:16px 0 0;display:flex;flex-direction:column;gap:11px;font-size:.88rem;
  background:var(--soft);border-radius:12px;padding:14px 16px}
.info-line{display:flex;gap:10px;align-items:center;color:var(--body)}
.info-line svg{width:18px;height:18px;stroke:var(--ink);flex-shrink:0}
.info-line strong{color:var(--ink)}

/* Ürün bilgi bölümleri: yığın akış, her bölüm ince çizgiyle ayrılır */
.psection{padding:26px 0 10px;scroll-margin-top:120px;border-top:1px solid var(--line);margin-top:14px}
/* Sekmeler: çubuk yalnız JS aktifken (.tabbed) görünür; alt çizgi inset gölge,
   aktif sekmenin 2px ink çizgisi üstüne biner. Vurgu ton farkıyla, yastık yok. */
.ptabs{display:none;gap:2px;margin-top:18px;overflow-x:auto;scrollbar-width:none;
  overscroll-behavior-x:contain;box-shadow:inset 0 -1px var(--line)}
.ptabs::-webkit-scrollbar{display:none}
/* Kaydırılabilir sekme şeritlerinde kenar solması taşan yönü işaret eder
   (data-fade'i cat-nav ile ortak script atar; yalnız gerçek taşmada görünür) */
.ptabs[data-fade=r],.vtabs[data-fade=r]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.ptabs[data-fade=l],.vtabs[data-fade=l]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);
  mask-image:linear-gradient(90deg,transparent,#000 36px)}
.ptabs[data-fade=lr],.vtabs[data-fade=lr]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.tabbed .ptabs{display:flex}
.ptabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:10px 14px;font:inherit;font-size:.92rem;font-weight:600;color:var(--muted);
  cursor:pointer;white-space:nowrap}
.ptabs button:hover{color:var(--ink)}
.ptabs button[aria-selected='true']{color:var(--ink);border-bottom-color:var(--ink)}
.tabbed>.psection[role='tabpanel']{border-top:0;margin-top:0;padding-top:18px}
/* Panel h2'si sekmede görsel olarak gizlenir ama erişilebilirlik ağacında kalır:
   display:none başlık hiyerarşisini h1->h3'e düşürüyordu (heading-order ihlali),
   ekran okuyucu da panel başlığını kaybediyordu */
.tabbed>.psection[role='tabpanel']>h2{position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Geniş taksit tablosu KENDİ kutusunda yatay kayar — sayfa asla yana taşmaz */
.rate-scroll{overflow-x:auto;max-width:760px}
.rate-table{width:100%;border-collapse:collapse}
.rate-table th,.rate-table td{padding:8px 10px;border-bottom:1px solid var(--line);
  text-align:left;font-size:.88rem;white-space:nowrap}
.rate-table th{color:var(--muted);font-weight:600}
.rate-table th:nth-child(n+2),.rate-table td:nth-child(n+2){text-align:right}
@media(max-width:899px){.psection{scroll-margin-top:64px}}
.psection h2{font-size:1.15rem;margin-bottom:14px}
.psection h3{font-size:1rem;margin:24px 0 10px}
.sim-sect{padding-top:24px}
/* p'nin varsayılan 1em marginleri panelde fazladan boşluk yapar */
.product-desc{color:var(--body);white-space:pre-line;font-size:.97rem;max-width:76ch;margin:0;
  overflow-wrap:break-word}
/* Nostalji girişi: açıklamanın üstünde kısa duygu satırı, sol mor çizgiyle ayrılır */
.desc-mood{color:var(--body);font-style:italic;font-size:.97rem;max-width:66ch;
  margin:0 0 14px;padding-left:14px;border-left:3px solid var(--accent-soft)}

/* Ürün özellikleri (Trendyol özellik kutuları) */
.specs{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;max-width:760px;margin:0}
@media(min-width:640px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spec{display:flex;justify-content:space-between;gap:12px;background:var(--soft);
  border-radius:9px;padding:11px 14px;font-size:.9rem}
.spec dt{color:var(--muted);margin:0}
.spec dd{margin:0;font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.spec dd a{color:inherit}

/* Butonlar */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:var(--radius);
  font-weight:600;font-size:.98rem;text-decoration:none;padding:14px 30px;width:100%;
  transition:background .15s,color .15s;font-family:inherit}
.btn:hover{background:var(--soft)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent-2)}
.btn-primary:hover{background:var(--accent-2);color:#fff}
.btn-sm{padding:8px 14px;font-size:.85rem;width:auto;border-radius:8px}
@media(min-width:640px){.btn{width:auto;min-width:240px}}
.btn-block{width:100%!important}

/* Sepet */
.cart-grid{display:grid;gap:24px;margin:20px 0 56px}
@media(min-width:900px){.cart-grid{grid-template-columns:minmax(0,1fr) 360px;align-items:start}}
.cart-list{display:flex;flex-direction:column}
.cart-item{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line)}
.cart-item:first-child{border-top:1px solid var(--line)}
.cart-item img{width:88px;height:88px;object-fit:contain;border-radius:8px;background:#fff}
.cart-item-title{font-weight:500;font-size:.95rem;color:var(--ink)}
.qty-form{display:inline-flex;align-items:center;gap:2px;margin-top:10px;
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.qty-btn{width:34px;height:34px;border:0;background:#fff;font-size:1rem;cursor:pointer;
  color:var(--ink);line-height:1}
.qty-btn:hover,.qty-btn:active{background:var(--soft)}
/* Mobil dokunma hedefleri: Apple/Google önerisi ~44px */
@media(max-width:899px){
  .qty-btn{width:44px;height:44px}
  .remove-btn{padding:12px 0;margin:0 0 0 18px}
  .card-add{padding:12px 0}
  .fchip{padding:10px 2px}
  .frow{padding:8px 0}
}
/* Dokunmatik cihazlarda kalan küçük hedefler de büyür (fare hassasiyeti olan
   cihazlarda sıkı görünüm korunur). Genişlikten bağımsız: tabletler de dahil. */
@media(pointer:coarse){
  .mnav-sub a{padding:9px 14px}
  .mnav-help a{padding:12px 4px}
  .vtab{padding:10px 18px}
  .lhead-links a{padding:8px 14px}
  .apchip{padding:8px 13px}
  .apclear,.clear-filters{padding:8px 0;display:inline-block}
  .fav-remove{width:34px;height:34px}
  .copy-btn{padding:6px 10px}
  .suggest-item{padding:12px}
  .installments-link{padding:5px 0}
  .site-footer nav{gap:0}
  .site-footer nav a{padding:8px 0}
  /* Hover geri bildirimi yok: dokunuşta kısa :active vurgusu onun yerine geçer */
  .vtab:active,.apchip:active,.lhead-links a:active,.mnav-sub a:active{background:var(--soft)}
  .thumb:active{border-color:#b5b5b5}
}
.qty-form span{min-width:28px;text-align:center;font-size:.92rem;font-weight:500}
.remove-btn{background:none;border:0;color:var(--muted);font-size:.8rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:0;margin:10px 0 0 14px;font-family:inherit}
.remove-btn:hover{color:var(--ink)}
.summary{border:1px solid var(--line);border-radius:14px;padding:22px}
@media(min-width:900px){.summary{position:sticky;top:132px}}
.summary h3{margin:0 0 14px;font-size:1.05rem}
.summary-line{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
  font-size:.93rem;color:var(--body)}
/* Ödeme özeti: ürün satırı küçük görselle */
.summary-item{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;
  padding:6px 0;font-size:.93rem;color:var(--body)}
.summary-item img{width:48px;height:48px;object-fit:contain;border-radius:8px;background:#fff}
.summary-total{display:flex;justify-content:space-between;margin-top:12px;padding-top:14px;
  border-top:1px solid var(--line);font-weight:600;font-size:1.08rem;color:var(--ink)}
.summary-note{color:var(--muted);font-size:.82rem;margin:10px 0 16px}
.summary-trust{margin:12px 0 0;text-align:center;font-size:.78rem;color:var(--muted)}
/* Sepet: alışverişe dönüş + başlıktaki adet */
.continue-link{display:inline-block;margin-top:16px;font-size:.9rem;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px}
.continue-link:hover{color:var(--ink)}
.count-sub{color:var(--muted);font-weight:400;font-size:1.05rem}

/* Ödeme */
.checkout-grid{display:grid;gap:28px;margin:20px 0 56px}
/* Form kolonu 680px'te kapanır: 850px+ genişlikte input satırları hem çirkin
   hem zor taranır; özet sağ kenarda kalır. */
@media(min-width:900px){.checkout-grid{grid-template-columns:minmax(0,680px) 380px;
  justify-content:space-between;align-items:start}}
@media(max-width:899px){.checkout-grid .summary{order:-1}}

/* Formlar */
.form{display:flex;flex-direction:column;gap:16px}
.form-row{display:grid;gap:16px}
@media(min-width:560px){.form-row{grid-template-columns:1fr 1fr}}
.field label{display:block;font-weight:500;font-size:.88rem;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1px solid #d6d6d6;
  border-radius:var(--radius);font:inherit;background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent)}
.field .hint{font-size:.8rem;color:var(--muted);margin-top:5px}
.form-legal{color:var(--muted);font-size:.82rem;margin:2px 0 0;line-height:1.55}
.form-legal a{color:var(--ink)}
/* Ödeme yöntemi seçenekleri: input'larla aynı dil — çerçeve var, dolgu yok.
   ".field label" bloğunun display:block ve küçük fontunu ezmek için seçici
   ".field label.payopt" (yoksa radyo ile metin alt alta düşüyor). */
.payopt{gap:11px;align-items:flex-start;border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;cursor:pointer}
.field label.payopt{display:flex;font-weight:400;font-size:1rem;margin-bottom:8px}
.payopt input{width:17px;height:17px;margin:2px 0 0;flex-shrink:0;accent-color:var(--accent)}
.payopt:hover{border-color:#c9c9c9}
.payopt:has(input:checked){border-color:var(--ink)}
.pay-title{display:block;font-weight:600;color:var(--ink);font-size:.94rem}
.pay-desc{display:block;color:var(--muted);font-size:.86rem;margin-top:2px}
.checkline{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--body);
  line-height:1.5;cursor:pointer}
.checkline input{width:17px;height:17px;margin:2px 0 0;flex-shrink:0;accent-color:var(--accent)}
.checkline a{color:var(--ink)}
.checkline em{color:var(--muted);font-style:normal;font-size:.8rem}

/* Uyarılar ve sipariş kutusu */
.alert{padding:13px 16px;border-radius:var(--radius);font-weight:500;font-size:.93rem;margin:16px 0}
.alert-ok{background:#f2faf5;color:var(--ok);border:1px solid #cdeeda}
.alert-err{background:#fdf3f3;color:var(--err);border:1px solid #f5cfcf}
.alert-warn{background:#fdf8ee;color:var(--warn);border:1px solid #f3e3c2}
/* Sipariş/success sayfası: tam genişlik yayılmasın, dar ortalanmış kolon */
.order-page{max-width:640px;margin:0 auto}
.order-box{border:1px solid var(--line);border-radius:14px;padding:24px;margin:16px 0}
.order-box dl{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:0;font-size:.94rem}
.order-box dt{color:var(--muted)}
/* Uzun adres/e-posta dar ekranda kutudan taşmasın */
.order-box dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.order-line span{min-width:0}
.order-lines{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.order-line{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:.94rem}

/* Yapışkan satın alma çubuğu (yalnız mobil): reklamdan gelen kullanıcı
   sayfanın neresinde olursa olsun fiyat + CTA hep görünür. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;gap:12px;
  padding:10px max(14px,var(--sar)) calc(10px + var(--sab)) max(14px,var(--sal));
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(18,18,18,.07)}
.buybar-price{display:flex;flex-direction:column;line-height:1.2;flex-shrink:0;min-width:0}
.buybar-label{font-size:.72rem;color:var(--muted)}
.buybar-now{font-weight:700;font-size:1.15rem;color:var(--accent);letter-spacing:-.01em;white-space:nowrap}
.buybar-old{font-size:.78rem;color:var(--muted);text-decoration:line-through}
.buybar form{flex:1;min-width:0}
.buybar .btn{width:100%;min-width:0;padding:13px 10px;flex:1}
@media(max-width:859px){
  .buybar{display:flex}
  /* Çubuk footer'ın son satırını ve WhatsApp balonunu örtmesin */
  body:has(.buybar){padding-bottom:calc(72px + var(--sab))}
  body:has(.buybar) .wa-float{bottom:calc(88px + var(--sab))}
}
@media(max-width:359px){.buybar-now{font-size:1rem}}

/* Metin sayfaları */
/* Sabit metin sayfaları: sütun sayfada ortalanır, breadcrumb aynı hizada kalır.
   Üst boşluk liste sayfalarından bilinçli olarak geniş: içerik tek sütun olduğundan
   nefes alanı başlığı taşır. */
.prose-page{max-width:66ch;margin:0 auto;padding-top:26px}
.prose{margin:14px 0 72px}
.prose h1{margin-bottom:.7em}
.prose h2{margin-top:1.7em;font-size:1.15rem}
.prose p,.prose li{color:var(--body);font-size:.96rem}
/* Uzun sözleşme metinlerinde link gövdeden ayrışsın */
.prose a{color:var(--ink);font-weight:500;text-decoration:underline;
  text-decoration-color:var(--muted);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--ink)}
/* İletişim formu: prose sütunu içinde alan aralıkları */
.contact-form{margin:20px 0 4px}
.contact-form .field{margin-bottom:14px}

/* Footer */
.site-footer{border-top:1px solid var(--line);margin-top:24px;background:#fff}
/* minmax(0,…): 1fr'nin min-content kilidi dar ekranda grid'i taşırıp
   yatay kaydırma yaratıyordu (ör. e-bülten formu) */
.foot-grid{display:grid;gap:28px;grid-template-columns:repeat(2,minmax(0,1fr));
  padding:44px max(20px,var(--sar)) 8px max(20px,var(--sal))}
@media(min-width:800px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1.4fr;gap:36px}}
/* E-bülten formu yarım kolona sığmaz; dar ekranda tam satır kaplar */
@media(max-width:799px){.foot-news{grid-column:1/-1}}
.foot-grid>div:first-child{grid-column:1/-1}
@media(min-width:800px){.foot-grid>div:first-child{grid-column:auto}}
.foot-title{font-weight:600;font-size:.92rem;margin-bottom:12px}
.foot-about{color:var(--muted);font-size:.88rem;max-width:38ch;margin:0}
.site-footer nav{display:flex;flex-direction:column;gap:9px}
.site-footer nav a{color:var(--muted);text-decoration:none;font-size:.88rem}
.site-footer nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  align-items:center;border-top:1px solid var(--line);margin-top:32px;
  padding:20px max(20px,var(--sar)) calc(20px + var(--sab)) max(20px,var(--sal));
  color:var(--muted);font-size:.8rem}
/* iyzico logo bandı (iyzico ile Öde + kart şemaları) */
.foot-pay{width:100%;max-width:340px;height:auto;display:block}

/* Kategori altı SEO/açıklama bloğu */
.cat-desc{margin:36px 0 8px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.9rem;line-height:1.7;max-width:80ch}

.approx-note{color:var(--warn);font-size:.9rem;margin:8px 0 0}
/* Sonsuz kaydırma nöbetçisi / JS'siz "daha fazla" */
.pager{display:flex;justify-content:center;margin:4px 0 48px}
.pager .btn{min-width:220px}
.pager.loading .btn{opacity:.5;pointer-events:none}
.empty{text-align:center;padding:72px 16px;color:var(--muted)}
.empty h1{color:var(--ink)}
.empty .btn{margin-top:18px}

/* ── Ana sayfa bölüm temaları ─────────────────────────────────────────────
   plain: beyaz akış (ayrımı başlık + dikey boşluk yapar);
   soft/dark/accent: wrap genişliğinde yuvarlatılmış renk paneli.
   Başlık, alt başlık, gösterim (grid/carousel) config'ten gelir. */
.sect{padding:30px 0 20px}
/* Full-bleed bant: kenarlar viewport'a dayanır, içerik kolon hizasında kalır
   (başlık ve kartlar beyaz bölümlerle aynı sol çizgide, aynı genişlikte).
   margin kısaltması kullanma: .bleed'in negatif margin-left'i ezilir */
.sect-band{padding:44px 0 50px;margin-top:30px;margin-bottom:30px}
@media(max-width:679px){.sect-band{padding:30px 0 34px}}
.sect-soft{background:var(--soft)}
.sect-dark{background:var(--accent-3)}
.sect-accent{background:var(--accent)}
/* Arcade tabela kenarı: koyu bandın üst/alt sınırında ağır ağır kayan sarı kesik
   şerit (üst ileri, alt geri). Hareket azaltma tercihinde global kural durdurur. */
.sect-dark{position:relative}
.sect-dark::before,.sect-dark::after{content:'';position:absolute;left:0;right:0;height:5px;
  background:repeating-linear-gradient(90deg,var(--sun) 0 12px,transparent 12px 24px);
  animation:marquee-slide 1.8s linear infinite}
.sect-dark::before{top:0}
.sect-dark::after{bottom:0;animation-direction:reverse}
@keyframes marquee-slide{to{background-position-x:24px}}
.sect-sub{margin:3px 0 0;color:var(--muted);font-size:.94rem}
.sect .section-head,.sect-band .section-head{margin:6px 0 4px;align-items:flex-end}
.sect-band .section-head{margin-top:0}
/* Koyu bantlarda metin/kart uyarlaması */
.sect-dark .section-head h2,.sect-accent .section-head h2{color:#fff}
/* Pixel bar'ın siyah bloğu siyah zeminde kaybolur: koyu bantta beyaza döner */
.sect-dark .section-head h2::after{background:linear-gradient(90deg,#fff 0 14px,transparent 14px 16px,
  var(--pink) 16px 30px,transparent 30px 32px,var(--pink-soft) 32px 42px)}
.sect-dark .sect-sub{color:rgba(255,255,255,.65)}
.sect-accent .sect-sub{color:rgba(255,255,255,.85)}
.sect-dark .section-head .cta,.sect-accent .section-head .cta{color:#fff;border-color:rgba(255,255,255,.35)}
.sect-dark .section-head .cta:hover,.sect-accent .section-head .cta:hover{border-color:#fff}
.sect-dark .card-add{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.sect-dark .card-add:hover{background:#fff;border-color:#fff;color:var(--ink)}
.sect-accent .card-add{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.sect-accent .card-add:hover{background:#fff;border-color:#fff;color:var(--accent)}
.sect-dark .card-ship{color:#7ee2a8}
.sect-accent .card-ship{color:#fff}
.sect-soft .card-add{background:#fff}
.sect-soft .card-add:hover{background:var(--ink)}
.sect-band .trust-row{border-bottom:0;padding:6px 0;margin:0}
.sect-dark .card-title,.sect-accent .card-title{color:#fff}
.sect-dark .card-price,.sect-accent .card-price{color:#fff}
.sect-dark .card-eyebrow{color:rgba(255,255,255,.55)}
.sect-accent .card-eyebrow{color:rgba(255,255,255,.8)}
/* Eyebrow içindeki vurgu tonları koyu zeminde kayboluyordu (ink ~ bant rengi) */
.sect-dark .card-cond,.sect-accent .card-cond{color:#fff}
.sect-dark .card-pre,.sect-accent .card-pre{color:var(--sun)}
.sect-dark .card-old{color:rgba(255,255,255,.5)}
.sect-accent .card-old{color:rgba(255,255,255,.75)}
.sect-accent .card-disc{background:var(--sun);color:var(--sun-ink)}
.sect-dark .trust-item strong,.sect-accent .trust-item strong{color:#fff}
.sect-dark .trust-item span,.sect-accent .trust-item span{color:rgba(255,255,255,.65)}
.sect-dark .trust-item svg,.sect-accent .trust-item svg{stroke:#fff}
.sect-dark .trust-row,.sect-accent .trust-row{border-bottom:0;padding:6px 0;margin:0}
.sect-dark .review,.sect-accent .review{border-color:rgba(255,255,255,.25)}
.sect-dark .review p,.sect-accent .review p{color:rgba(255,255,255,.8)}
.sect-dark .review strong,.sect-accent .review strong{color:#fff}

/* Yatay vitrin (carousel): mobilde parmakla, masaüstünde ~4,3 kart görünür */
.hscroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;margin:14px 0 8px;padding-bottom:6px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>.card{flex:0 0 62%;scroll-snap-align:start}
@media(min-width:640px){.hscroll>.card{flex:0 0 31%}}
@media(min-width:1000px){.hscroll>.card{flex:0 0 23%}}

/* Sekmeli vitrin: pill sekmeler mobilde yatay kayar (kaydırma çubuğu gizli).
   Aktif ve hover aynı dille: siyah yastık + beyaz metin (bkz. nav-drop) */
.vtabs{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
  margin:14px 0 4px;padding:2px;scrollbar-width:none}
.vtabs::-webkit-scrollbar{display:none}
.vtab{flex:0 0 auto;padding:7px 16px;border:1px solid var(--line);border-radius:999px;
  text-decoration:none;font-size:.88rem;font-weight:600;color:var(--ink);white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s}
.vtab:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.vtab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.vpanel[hidden]{display:none}

/* Arama önerileri: header kutusunun altında dropdown */
.search-form{position:relative}
.suggest-box{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);
  overflow:hidden;z-index:60}
.suggest-item{display:flex;gap:10px;align-items:center;padding:9px 12px;text-decoration:none;color:inherit}
.suggest-item:hover{background:var(--accent-soft)}
.suggest-item img{width:40px;height:40px;object-fit:cover;border-radius:6px;flex-shrink:0;background:#fff}
.suggest-title{font-size:.9rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.suggest-price{font-size:.82rem;color:var(--muted);margin-top:2px}
.suggest-all{display:block;padding:10px 12px;text-align:center;font-size:.88rem;
  color:var(--accent);text-decoration:none;border-top:1px solid var(--line);font-weight:600}
.suggest-all:hover{background:var(--accent-soft)}

/* Favoriler: başlık yanında sessiz yıldız + /favoriler gridi */
.title-row{display:flex;align-items:flex-start;gap:8px}
.title-row h1{flex:1;min-width:0}
.fav-btn{background:none;border:0;padding:4px;margin-top:6px;cursor:pointer;
  color:var(--muted);line-height:0;flex-shrink:0}
.fav-btn svg{width:22px;height:22px}
.fav-btn:hover{color:var(--accent)}
.fav-btn.active{color:var(--accent)}
.fav-btn.active svg{fill:currentColor}
.fav-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:16px 0 8px}
@media(min-width:640px){.fav-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.fav-grid{grid-template-columns:repeat(4,1fr)}}
.fav-grid .rv-card{position:relative}
.fav-remove{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line);background:#fff;cursor:pointer;font-size:13px;line-height:1;color:var(--muted)}
.fav-remove:hover{color:#dc2626;border-color:#dc2626}

/* Taksit tablosu: fiyat altında açılır blok */
/* Taksit satırı: yerinde açılan details değil, Taksit ve Oranlar sekmesine
   götüren çapa (tabsScript tıklamayı sekmeye çevirir) */
.installments-link{display:inline-flex;align-items:center;gap:6px;margin:4px 0 16px;
  font-size:.88rem;color:var(--muted);text-decoration:none}
.installments-link strong{color:var(--ink);font-weight:600}
.installments-link::after{content:'›';font-weight:600}
.installments-link:hover{color:var(--ink)}
.inst-note{color:var(--muted);font-size:.8rem;margin-top:6px}
.inst-single{font-size:.92rem;margin:0 0 10px}
.inst-total{display:block;color:var(--muted);font-size:.76rem}

/* Basit form sayfaları: sipariş sorgula, iade talebi */
.form-page{max-width:480px;margin:28px auto 8px}
.form-page h1{margin:0 0 8px}
.form-sub{color:var(--muted);font-size:.92rem;margin:0 0 16px}
.form-page .field{margin-bottom:14px}

/* ── Mikro etkileşimler ──────────────────────────────────────────────────
   Hepsi aşamalı iyileştirme: desteklemeyen tarayıcı kuralı yok sayar,
   prefers-reduced-motion üstteki global kuralla animasyonları söndürür. */

/* Sayfalar arası cross-fade (MPA view transition) */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Klavye odağı: tutarlı mor halka (fare tıklamasında görünmez) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sect-dark :focus-visible,.sect-accent :focus-visible,.lightbox :focus-visible{outline-color:#fff}

/* Form gönderimi: buton kilitlenir, sönükleşir, spinner döner (çift gönderim önlenir) */
.busy{opacity:.6;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.busy::after,.card-add.busy::after,.search-form button.busy::after,
.newsletter-form button.busy::after{content:'';width:13px;height:13px;flex-shrink:0;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  display:inline-block;margin-left:8px;vertical-align:-2px;animation:spin .7s linear infinite}

/* Alan doğrulaması: kullanıcı dokunduktan sonra geçersiz kalan alan kırmızı */
input:user-invalid,textarea:user-invalid{border-color:var(--err)}

/* Kart Sepete Ekle: AJAX sonrası kısa onay hali */
.card-add.added{background:var(--ok);border-color:var(--ok);color:#fff}

/* Rozet ve favori tepkileri */
@keyframes badgepop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}}
.cart-badge.pop{animation:badgepop .35s ease}
@keyframes favpop{0%{transform:scale(.5)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.fav-btn.pop svg{animation:favpop .3s ease}

/* Akordeonlar (SSS, mobil filtre çekmecesi) ANINDA açılır. ::details-content
   üzerine transition KOYMA: Chrome'da geçiş takılı kalıyor ve panel bir daha
   hiç açılmıyor (content-visibility:hidden pseudo'da animasyon ilerlemiyor;
   Tem 2026'da canlıda doğrulandı — görünür SSS akordeonları da bundan kırıktı). */
.faq::details-content,.fside::details-content{
  block-size:0;overflow-y:clip;opacity:0}
.faq[open]::details-content,.fside[open]::details-content{
  block-size:auto;opacity:1}
/* Masaüstünde filtre paneli open'dan BAĞIMSIZ hep görünür: çekmece sunucuda
   kapalı basılır (mobil FOUC'a karşı), bu kural UA'nın content-visibility:hidden
   gizlemesini ezer. ::details-content bilmeyen eski motorlar için küçük script
   (ListControls) masaüstünde open niteliğini ekler. */
@media(min-width:900px){.fside::details-content{content-visibility:visible;block-size:auto;opacity:1}}

/* Lightbox: yumuşak açılış/kapanış, görsel değişiminde kısa fade (JS onload ile açar) */
.lightbox{opacity:0;transform:scale(.97);
  transition:opacity .18s,transform .18s,display .18s allow-discrete,overlay .18s allow-discrete}
.lightbox[open]{opacity:1;transform:none}
@starting-style{.lightbox[open]{opacity:0;transform:scale(.97)}}
.lightbox[open]::backdrop{background:rgba(14,8,26,.9)}
@starting-style{.lightbox[open]::backdrop{background:rgba(14,8,26,0)}}
.lightbox img{transition:opacity .15s}
/* Lightbox açıkken sayfa kaydırması kilitli (gutter stable: zıplama olmaz);
   dialog içi taşma sayfaya zincirlenmez */
html:has(.lightbox[open]){overflow:hidden}
/* WebKit, view-transition-name'li öğeyi dialog ::backdrop'unun ÜSTÜNE boyuyor:
   hero görseli lightbox açıkken kararmayıp büyük görsele biniyordu (iOS Safari).
   Ad lightbox süresince düşürülür; !important inline stili ezmek için şart. */
html:has(.lightbox[open]) .gallery-slide img{view-transition-name:none!important}
.lightbox{overscroll-behavior:contain}
/* Mobil lightbox: ok daireleri gizli — swipe gezinir, yarı saydam beyaz
   butonlar görselin kenarına biniyordu. Fon tama yakın koyu: arkadaki sayfa
   hayalet gibi görünüp "üst üste binme" hissi vermesin. */
@media(max-width:859px){
  .lb-nav{display:none}
  .lightbox[open]::backdrop{background:rgba(11,9,16,.97)}
}

/* Arama önerileri: aşağı süzülerek gelir; klavye seçimi hover ile aynı görünür */
.suggest-box{transition:opacity .15s,transform .15s}
@starting-style{.suggest-box:not([hidden]){opacity:0;transform:translateY(-5px)}}
.suggest-item.sel,.suggest-all.sel{background:var(--accent-soft)}
.suggest-empty{padding:12px;font-size:.9rem;color:var(--muted)}

/* Mobil satın alma çubuğu: asıl CTA ekrandayken kenara çekilir (IntersectionObserver) */
.buybar{transition:transform .25s ease}
.buybar.away{transform:translateY(115%)}

/* Sepet satırı kaldırılırken yumuşak kapanır (yükseklik JS'te inline sabitlenir) */
.cart-item.out{opacity:0;height:0!important;padding-top:0!important;padding-bottom:0!important;
  border-width:0!important;overflow:hidden;
  transition:opacity .18s ease,height .25s ease,padding .25s ease,border-width .25s ease}

/* Sonsuz kaydırma: yeni dilim gelene dek iskelet kartlar */
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.skel-media{aspect-ratio:1;border-radius:var(--radius);background:var(--soft);position:relative;overflow:hidden}
.skel-line{height:13px;border-radius:6px;background:var(--soft);margin-top:10px;position:relative;overflow:hidden}
.skel-line.short{width:55%}
.skel-media::after,.skel-line::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  animation:shimmer 1.1s infinite}

/* Vitrin okları: yalnız masaüstü, uçlarda ilgili ok kaybolur */
.hswrap{position:relative}
.hnav{position:absolute;z-index:2;top:31%;transform:translateY(-50%);width:40px;height:40px;
  border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.95);cursor:pointer;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(18,18,18,.12);transition:opacity .15s}
.hnav svg{width:18px;height:18px;stroke:var(--ink)}
.hnav:hover{border-color:var(--accent)}
.hnav:hover svg{stroke:var(--accent)}
.hnav[disabled]{opacity:0;pointer-events:none}
.hprev{left:-14px}
.hnext{right:-14px}
@media(min-width:1000px){.hnav{display:flex}}

/* ── Yıldızlar (gösterim): gri katman üstünde genişliği puana göre kırpılmış
   sarı katman — yarım yıldızlar da doğru görünür */
.stars{position:relative;display:inline-block;color:var(--line);font-size:1rem;line-height:1;letter-spacing:1px;white-space:nowrap}
.stars-on{position:absolute;top:0;left:0;bottom:0;overflow:hidden;white-space:nowrap;color:var(--sun)}
.stars-sm{font-size:.85rem}
.rating-line{display:inline-flex;align-items:center;gap:8px;margin:2px 0 8px;
  font-size:.9rem;color:var(--body);text-decoration:none}
.rating-line:hover{color:var(--ink)}

/* Ürün sayfası değerlendirme listesi */
.review-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.92rem;color:var(--body)}
.review-row{border-top:1px solid var(--line);padding:12px 0;max-width:720px}
.review-row:first-of-type{border-top:0}
.review-head{display:flex;align-items:center;gap:10px;font-size:.88rem}
.review-name{font-weight:600;color:var(--ink)}
.review-date{color:var(--muted)}
.review-body{margin:6px 0 0;color:var(--body);font-size:.93rem;max-width:70ch}

/* ── Yorum sayfası (/yorum/:token) ── */
.review-page{max-width:560px;margin:28px auto 40px}
.review-page h1{text-align:center}
.review-sub{text-align:center;color:var(--body);font-size:.95rem;margin:0 0 20px}
.rev-item{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
.rev-title{font-weight:600;font-size:.95rem;margin-bottom:8px}
.rev-item textarea{width:100%;margin-top:10px;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:.92rem;resize:vertical}
.rev-item textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}

/* Yıldız girişi: row-reverse + sonraki kardeş seçicisiyle salt-CSS doldurma */
.rate{display:inline-flex;flex-direction:row-reverse;gap:2px}
.rate input{position:absolute;opacity:0;width:1px;height:1px}
.rate label{font-size:1.8rem;line-height:1;color:var(--line);cursor:pointer;transition:color .1s;padding:0 1px}
.rate input:checked ~ label,.rate label:hover,.rate label:hover ~ label{color:var(--sun)}
.rate input:focus-visible + label{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}

/* ── Hediye çarkı: dilimler conic-gradient, dönüş CSS animasyonu (JS yok).
   --wheel-final sunucuda hesaplanır; sonuç kartı animasyon bitince belirir */
.wheel-wrap{position:relative;width:min(320px,82vw);margin:24px auto}
.wheel{position:relative;width:100%;aspect-ratio:1;border-radius:50%;border:6px solid var(--ink);
  box-shadow:0 10px 30px rgba(18,18,18,.18)}
.wseg{position:absolute;inset:0;display:flex;justify-content:center;pointer-events:none}
.wseg>span{margin-top:18px;max-width:100px;text-align:center;font-size:.78rem;font-weight:700;
  color:var(--sun-ink);line-height:1.25}
.wseg-dark>span{color:#fff}
.wheel-pin{position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:2;width:0;height:0;
  border-left:11px solid transparent;border-right:11px solid transparent;border-top:18px solid var(--ink);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.wheel-cap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;
  border-radius:50%;background:var(--ink);border:4px solid #fff;z-index:1}
.wheel-spin{animation:wheelspin 4.2s cubic-bezier(.12,.65,.1,1) forwards}
@keyframes wheelspin{to{transform:rotate(var(--wheel-final))}}
.reward-reveal{opacity:0;animation:rewardin .5s ease 4.4s forwards}
@keyframes rewardin{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .wheel-spin{animation-duration:.5s;animation-timing-function:ease-out}
  .reward-reveal{animation-delay:.6s}
}
.reward-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center;margin-top:6px}
.reward-label{font-size:1.05rem;font-weight:700;color:var(--ink);margin:0 0 10px}
.reward-code{display:inline-block;background:var(--soft);border-radius:8px;padding:10px 18px;
  font-size:1.5rem;font-weight:800;letter-spacing:2px;color:var(--ink);margin:0 0 10px}
.reward-note{font-size:.9rem;color:var(--body);margin:0 0 16px}

/* ── Ödeme: indirim kodu kutusu (özet kolonunda, ayrı form) ── */
.kupon-form{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.kupon-row{display:flex;gap:8px}
.kupon-row input{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:.92rem;text-transform:uppercase}
.kupon-row .btn{width:auto;min-width:0;flex-shrink:0;padding:9px 16px;font-size:.92rem;border-radius:8px}
.kupon-row input::placeholder{text-transform:none}
.kupon-row input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.kupon-err{margin-top:8px;font-size:.85rem;color:var(--err)}
.kupon-remove{background:none;border:0;padding:0;font:inherit;font-size:.85rem;color:var(--muted);
  text-decoration:underline;cursor:pointer}
.kupon-remove:hover{color:var(--ink)}