/* NESACREATIVE tarafından hazırlanmıştır. */
:root{
  /* --- mürekkep: başlık koyu, gövde yumuşak gri (Baz mimarisi) --- */
  --ink:var(--c-ink,#232323);      /* başlıklar */
  --ink-2:#4d4d4d;                 /* güçlü gövde */
  --ink-3:#767676;                 /* gövde — Baz #828282'nin erişilebilir karşılığı (4,6:1) */
  --ink-4:#6e6e6e;                 /* etiket, ikincil (5,1:1) */
  --faint:#a8a8a8;                 /* YALNIZ dekor: ayraç, nokta — metin değil */
  /* --- yüzeyler --- */
  --page:var(--c-bg,#f9fafb);
  --surface:var(--c-surface,#fff);
  --bg:#f7f7f7;                    /* yumuşak bant (Baz very-light-gray) */
  --surface-2:#fafafa;
  --tint:color-mix(in srgb,var(--primary) 8%,#fff);
  --line:#e4e4e4;                  /* Baz extra-medium-gray */
  --line-2:#eaeaeb;
  --line-soft:#f0f0f1;             /* kart içi yumuşak ayraç (raf satırları) */
  /* select oku: TEK kaynak — her select aynı oku kullanır */
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* --- marka ve durum --- */
  --primary:var(--c-primary,#fb7801);
  --primary-ink:var(--c-primary-ink,#232323);
  --primary-strong:var(--c-primary-strong,#9a4a00);
  --sale:#dc3131;                  /* Baz red */
  --ok:#2ebb79;                    /* Baz green */
  --ok-text:#1d7a4f;               /* yeşil metin olarak kullanılınca okunur ton */
  --warn:#8a5c00;--info:#2946f3;
  /* --- biçim: neredeyse kare (Baz'da baskın 4 px) --- */
  --r:4px;--r-sm:3px;--r-lg:6px;--r-pill:100px;
  /* --- tipografi --- */
  --font:var(--font-body,"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  --fh:var(--font-heading,"Outfit","Figtree",ui-sans-serif,system-ui,sans-serif);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --hs:var(--heading-scale,1);
  /* --- derinlik: Baz'da tek gölge vardır; kart hover'ında geniş yumuşak halka --- */
  --sh-1:none;
  --sh-2:0 5px 20px rgba(0,0,0,.10);
  --sh-3:0 0 50px rgba(0,0,0,.12);
  --sh:var(--sh-1);
  --ring:0 0 0 3px color-mix(in srgb,var(--primary) 32%,transparent);
  /* --- ritim --- */
  --section-y:clamp(38px,4.4vw,66px);
  --page-top:clamp(30px,3.4vw,46px);   /* standart içerik sayfalarında başlık altı nefes payı */
  --t:.3s ease;--ease:cubic-bezier(.165,.84,.44,1);
  /* Ölçülen gerçek değerler: yapışkan başlık 128 px (≥961), 61 px (≤960);
     duyuru bandı yapışkan DEĞİL, bu yüzden ayrı tutulur — hero yüksekliği ikisini
     birden çıkarır. 96 px varsayımı 33 px eksikti: yapışkan raflar ve `scroll-margin`
     başlığın altına giriyordu. */
  --header-h:128px;
  --announce-h:0px;
}
:root:has(.announce){--announce-h:40px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.72;font-weight:400;color:var(--ink-3);
  background:var(--page);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
/* ---------------------------------------------------------------- yerel denetimler
   Tarayıcı çizimi yerine tema çizimi. Chrome, turuncu `accent-color` üstüne kontrast
   için SİYAH tik basıyordu (Safari mavi kutu): kutu/daire burada çizilir, tik beyaz,
   dolgu marka rengi — her tarayıcıda aynı. Gizli girişler (.segmented, .star-input)
   kendi kurallarıyla 0×0 ve saydam kalır. */
:root{color-scheme:light} /* cihaz koyu kipteyken tarih seçici, select listesi, kaydırma çubuğu kararmasın */
input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;flex:none;
  border:1.5px solid color-mix(in srgb,var(--ink-4) 62%,#fff);border-radius:var(--r);
  background:var(--surface) center/100% 100% no-repeat;cursor:pointer;vertical-align:-4px;
  transition:background-color .12s,border-color .12s,box-shadow .12s}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--ink-3)}
input[type=checkbox]:checked,input[type=radio]:checked,input[type=checkbox]:indeterminate{background-color:var(--primary);border-color:var(--primary)}
input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.2 9.4l3.1 3.1 6.5-6.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
input[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9h8' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
input[type=radio]:checked{box-shadow:inset 0 0 0 3px var(--surface)} /* marka halkası + beyaz boşluk + marka nokta */
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:not-allowed}
/* Dokunmatik: Android/iOS'un gri-mavi dokunma parlaması ve çift dokunma yakınlaştırma beklemesi kapalı */
a,button,label,summary,input,select,textarea,[role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* iOS metin alanlarına iç gölge ve kendi köşe yuvarlağını basar; arama kutusuna çarpı düğmesi ekler */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=number],input[type=url],textarea{appearance:none;-webkit-appearance:none}
input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
::placeholder{color:var(--ink-4);opacity:1} /* Safari yer tutucuyu ayrıca soluklaştırır */
/* Otomatik doldurma: Chrome'un açık mavi/sarı zemini tema zeminine döner */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--bg) inset;transition:background-color 9999s}
.field input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 2px var(--ink),0 0 0 1000px #fff inset}
::selection{background:color-mix(in srgb,var(--primary) 26%,#fff);color:var(--ink)}
/* Her `select` tema okunu alır: yerel tarayıcı oku hiçbir yerde kalmasın.
   Ok `background-image` ile ayrı yazılır — `background:` kısayolu yazan bir kural
   (odak zemini gibi) oku sessizce silmesin diye. Kısayol kullanan kurallar
   `background-color` olarak düzeltildi. */
select{appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:var(--chev);background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
select[multiple],select[size]{appearance:auto;-webkit-appearance:auto;background-image:none;padding-right:12px}
select::-ms-expand{display:none}
/* Başlık rengi bir DEĞİŞKEN üzerinden gelir: koyu zeminli bloklar kendi içinde beyaza
   çevirir. Sabit `color:var(--ink)` verilirse bülten bandı, alt bilgi ve koyu banner
   başlıkları zemine karışıp görünmez olur (kontrast denetimi bunu yakaladı). */
h1,h2,h3,h4{font-family:var(--fh);font-weight:500;letter-spacing:-.03em;line-height:1.14;margin:0;
  color:var(--heading-color,var(--ink))}
.nlband__box,.footer,.pts-hero,.collection-head--banner,.bslot__item,
.hslide--full .hero__content,.ticket-msg--customer,.richtext--dark{--heading-color:#fff}
p{margin:0}
.container{width:min(var(--page-width,1400px),100% - 40px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:var(--r-sm);z-index:200}
.skip-link:focus{left:8px}
.muted{color:var(--ink-3)}.small{font-size:13px}
.text-ok{color:var(--ok-text)}.text-sale,.text-bad{color:var(--sale)}
.icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.social-btn__icon{width:18px;height:18px;flex:none;stroke:none}
.icon--sm{width:15px;height:15px}.icon--fill{fill:currentColor;stroke:none}
.link{text-decoration:underline;text-underline-offset:3px;font-weight:500}
.link--danger{color:var(--sale)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-strong)}
/* Bölüm etiketi nötr: marka rengi başlıkta tek yerde, raf çizgisinin vurgusunda durur. */
.section__eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------------------- düğmeler
   Birincil eylem MARKA RENGİ dolgudur (kullanıcı kararı): dolgu `--primary`,
   üstündeki her şey — yazı ve ikon — beyaz. İkonlar `stroke:currentColor` ile
   çizildiği için yazıyla aynı beyazı kendiliğinden alır.
   NOT: #fb7801 üzerinde beyaz 2,70:1 verir, WCAG AA (4,5:1) sınırının altındadır.
   Bilinçli marka tercihi; `tools/storefront-sweep.mjs` bunu bulgu olarak bildirir.
   Başka bir kiracı isterse yalnız `--btn-on-primary` değişkenini ezerek mürekkebi
   (örn. `var(--primary-ink)`) değiştirebilir; dolgu tanımına dokunmak gerekmez. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 22px;
  border-radius:var(--r);font-family:var(--fh);font-weight:500;font-size:14px;text-decoration:none;
  border:1px solid transparent;white-space:nowrap;
  transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t),transform var(--t)}
.btn--primary{background:var(--primary);color:var(--btn-on-primary,#fff)}
.btn--primary:hover{background:color-mix(in srgb,var(--primary) 88%,#000);box-shadow:var(--sh-2)}
.btn--primary:active{transform:translateY(1px)}
.btn--primary:disabled{background:var(--line);color:var(--ink-4);cursor:not-allowed;box-shadow:none;transform:none}
.btn--ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:#fff}
/* Çerçeveli marka düğmesi: dolu birincil düğmenin ikizi, ikincil ağırlıkta.
   Yazı `--primary` — beyaz üstünde 2,70:1, dolu düğmedekiyle AYNI bilinçli sapma
   (DESIGN.md). Kiracı isterse `--btn-outline-ink` ile ezebilir. */
.btn--outline{border-color:var(--primary);color:var(--btn-outline-ink,var(--primary));background:var(--surface)}
.btn--outline:hover{background:color-mix(in srgb,var(--primary) 9%,#fff);border-color:color-mix(in srgb,var(--primary) 80%,#000)}
.btn--soft{background:var(--bg);color:var(--ink);border-color:transparent}
.btn--soft:hover{background:var(--line-2)}
.btn--danger{background:var(--sale);color:#fff}
.btn--danger:hover{filter:brightness(.93)}
.btn--lg{min-height:46px;padding:0 28px;font-size:15px}
.btn--sm{min-height:32px;padding:0 14px;font-size:13px}
/* Düğme ikonu yazıdan bir tık büyük durur ve rengini `currentColor` üzerinden alır:
   marka dolgusunda beyaz, hayalet düğmede mürekkep. Zaten `icon--sm` işaretli
   ikonlar (onay, ok) kendi ölçüsünde bırakılır. */
.btn .icon:not(.icon--sm){width:18px;height:18px}
.btn--sm .icon:not(.icon--sm){width:15px;height:15px}
.btn--block{width:100%;justify-content:center}
.iconbtn{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  transition:background var(--t),color var(--t)}
.iconbtn:hover{background:var(--bg);color:var(--ink)}

/* ---------------------------------------------------------------------- alanlar */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.field{display:flex;flex-direction:column;gap:5px;grid-column:1 / -1}
.field--half{grid-column:span 1}
.field label,.field__label{font-size:13px;font-weight:600;color:var(--ink-2)}
/* Form alanları: çerçeve yerine dolgu */
.field input,.field select,.field textarea{height:44px;border:0;border-radius:var(--r);padding:0 14px;background-color:var(--bg);font-size:15px;outline:0;width:100%;transition:background-color var(--t),box-shadow var(--t)}
.field textarea{height:auto;padding:10px 12px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{background-color:#fff;box-shadow:0 0 0 2px var(--ink)}
.field input[readonly]{background:var(--bg);color:var(--ink-3)}
.field select{padding-right:36px;background-position:right 14px center}
.field__error,.kl-form__err{color:var(--sale);font-size:12px;font-weight:600}
.field:has(.field__error) input,.field:has(.field__error) select,.kl-form__field.has-error .kl-form__input{border-color:var(--sale)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-top:10px;cursor:pointer;grid-column:1 / -1}
.check input{margin-top:2px}
.check--agree{padding:12px 14px;background:var(--bg);border-radius:var(--r-sm)}
.check a{font-weight:600}
.form-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
input[type=file]{width:100%;font-size:14px;color:var(--ink-3);padding:9px 12px;border:1px dashed var(--line-2);
  border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
input[type=file]:hover{border-color:var(--ink-4);background:var(--bg)}
input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:0;border-radius:var(--r-sm);
  background:var(--bg);color:var(--ink);font:inherit;font-weight:600;font-size:13px;cursor:pointer}
.hp,.kl-form__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* E-posta önerisi ("Şunu mu demek istediniz?") — forms.js basar */
.field__hint{font-size:12px;color:var(--ink-2)}
.field__suggest{font-weight:700;color:var(--primary-strong);text-decoration:underline;text-underline-offset:2px}
.field__suggest:hover{color:var(--ink)}
.newsletter+.field__hint,.nlband__form+.field__hint,.newsletter+.field__error,.nlband__form+.field__error{display:block;margin-top:6px}
.nlband__box .field__hint{color:rgba(255,255,255,.8)}.nlband__box .field__suggest{color:#fff}
.footer .field__hint{color:var(--f-muted)}.footer .field__suggest{color:var(--f-ink)}
/* Telefon: ülke kodu seçici (intl-tel-input düzeni, bağımlılıksız) — forms.js kurar.
   Kap tek alan gibi görünür: dolgu ve odak halkası kapta, içteki input saydam. */
.tel{position:relative;display:flex;align-items:stretch;width:100%;border-radius:var(--r);background:var(--bg);transition:background-color var(--t),box-shadow var(--t)}
.tel:focus-within{background:#fff;box-shadow:0 0 0 2px var(--ink)}
.field .tel input[type=tel]{flex:1;min-width:0;background:transparent;box-shadow:none;border-radius:0 var(--r) var(--r) 0;padding-left:10px}
.tel__cc{display:flex;align-items:center;gap:6px;flex:none;padding:0 8px 0 12px;font-size:14px;font-weight:600;color:var(--ink-2);
  border-right:1px solid var(--line);border-radius:var(--r) 0 0 var(--r);white-space:nowrap;transition:color var(--t)}
.tel__cc:hover{color:var(--ink)}
.tel__cc:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.tel__cc svg{width:14px;height:14px;color:var(--ink-4)}
.tel__cc[aria-expanded=true] svg{transform:rotate(180deg)}
.tel__flag{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:18px;line-height:1}
.tel__menu{position:absolute;z-index:80;left:0;top:calc(100% + 4px);width:min(320px,100%);min-width:240px;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2)}
.field .tel__search{height:36px;font-size:14px;padding:0 10px;border-radius:var(--r-sm);background:var(--bg);box-shadow:none;margin-bottom:4px}
.field .tel__search:focus{background:var(--bg);box-shadow:0 0 0 2px var(--ink)}
.tel__list{list-style:none;margin:0;padding:0;max-height:240px;overflow:auto;overscroll-behavior:contain}
.tel__opt{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-sm);cursor:pointer;font-size:14px;color:var(--ink-2);line-height:1.3}
.tel__opt.is-active{background:var(--bg);color:var(--ink)}
.tel__opt[aria-selected=true] .tel__name{font-weight:600}
.tel__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tel__opt .tel__dial{color:var(--ink-4);font-variant-numeric:tabular-nums}
.tel__sep{height:1px;background:var(--line);margin:4px 6px}
.tel__empty{padding:10px;font-size:13px;color:var(--ink-4)}
/* Dinamik form (çerçeveli alan) içinde aynı düzen çerçeveli görünür */
.kl-form__field .tel{border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff}
.kl-form__field .tel:focus-within{border-color:var(--primary);box-shadow:var(--ring)}
.kl-form__field .tel .kl-form__input{border:0;box-shadow:none;border-radius:0;flex:1;min-width:0;padding-left:10px}
.kl-form__field .tel__search{height:34px;font-size:14px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--line-2);width:100%;margin-bottom:4px;font:inherit}

/* ==================================================================== ÜST BİLGİ */
.announce{position:relative;z-index:60;background:var(--announce-bg,var(--bg));color:var(--announce-ink,var(--ink-2));border-bottom:1px solid var(--line);font-size:12px;font-weight:500}  /* z: mega menü perdesinin (59) üstünde */
.announce__inner{display:flex;justify-content:center;align-items:center;gap:16px;padding:7px 0}
.announce--split .announce__inner{justify-content:space-between}
.announce__msg{display:flex;align-items:center;gap:8px;margin:0;min-width:0}
.announce a{color:var(--announce-ink,var(--ink));text-decoration:underline;text-underline-offset:3px;font-weight:600}
.announce__contact{display:flex;align-items:center;gap:4px;flex:none}
.announce__link{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:2px 8px;border-radius:var(--r-sm);
  color:var(--announce-ink,var(--ink));font-weight:600;white-space:nowrap;text-decoration:none;transition:background var(--t)}
.announce__link svg{width:15px;height:15px;flex:none}
.announce__link:hover{background:color-mix(in srgb,currentColor 9%,transparent);text-decoration:underline;text-underline-offset:3px}
.announce__link--wa svg{color:inherit}
.announce__sep{width:1px;height:14px;margin:0 6px;background:currentColor;opacity:.35}
@media (max-width:900px){.announce__contact{display:none}.announce--split .announce__inner{justify-content:center}}

/* Başlık: logo — büyük arama — eylemler. Altında kategori şeridi.
   Zemin `--header-bg` üzerinden: stil varyantları (aşağıda) ve kaydırınca camlaşma aynı kaynağı okur. */
.header{--header-bg:var(--surface);--header-line:var(--line);background:var(--header-bg);z-index:60;position:relative;
  /* Alt kenar: çizgi yerine yumuşak gölge (kullanıcı isteği, 13 Eyl 2026). 1 px saydam kenarlık 128 px'i korur. */
  border-bottom:1px solid transparent;box-shadow:0 6px 20px -10px rgba(16,24,40,.18)}
/* Yapışkan üst bilgi: bölüm sarmalayıcısı (`.kl-section`) araya girdiği için `position:sticky`
   yalnız üst bilginin kendisine verilince tutmuyordu — yapışkanlık sarmalayıcının 128 px'lik
   kutusuyla sınırlı kalıyor, sayfa kayınca başlık yukarı çıkıyordu. Yapışkanlık sarmalayıcıya
   verilir; üst bilgi kendi konumunu korur. */
.header--sticky{position:relative;top:0}
/* Duyuru bandı üst bilgiyle aynı bölümün içindedir ve yapışkan DEĞİLDİR: sarmalayıcı
   bandın yüksekliği kadar yukarı kaydırılarak tutunur, band ekranı terk eder, üst bilgi
   tam tepeye oturur. */
.kl-section:has(>.header--sticky){position:sticky;top:calc(0px - var(--announce-h));z-index:60}
/* Logo satırı üst bilgide dikeyde ortalı: alt/üst boşluk eşit (18 px). Toplam 46 + 36 = 82 px;
   altındaki 45 px'lik kategori şeridi ve 1 px saydam kenarlıkla --header-h = 128 px. */
.header__inner{display:flex;align-items:center;flex-wrap:wrap;gap:14px;height:auto;padding:18px 0}
.header__burger{order:0}.header__logo{order:1}.header__search{order:2}.header__actions{order:3}
.header__burger{display:none}
.header__logo{display:flex;align-items:center;text-decoration:none;flex:none;margin-right:6px}
/* Yükseklik özelleştiriciden `--logo-h` ile gelir (header.liquid); telefonda %75'e iner. */
.header__logo img{height:var(--logo-h,36px);width:auto;display:block}
.header__wordmark{font-family:var(--fh);font-weight:800;font-size:23px;letter-spacing:-.04em}
.header__wordmark::after{content:".";color:var(--primary)}
/* Arama: çerçeve yerine dolgu (Baz dili). Satırı doldurmaz; logo ile eylemler arasında
   ortalanmış, en çok 600 px (pazaryeri oranı — kullanıcı isteği, 13 Eyl 2026). */
.header__search{flex:1 1 300px;max-width:600px;margin-inline:auto;display:flex;align-items:center;height:46px;padding:0 5px 0 18px;border:0;border-radius:var(--r-pill);background:var(--bg);transition:background var(--t),box-shadow var(--t)}
.header__search:focus-within{background:#fff;box-shadow:0 0 0 2px var(--primary)}
.header__search input,.search__input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:15px}
/* Yalnız formun doğrudan çocuğu olan gönder düğmesi: öneri paneli de formun içinde, oradaki
   "Temizle" düğmesi (.suggest__clear) turuncu yuvarlak olmamalı. */
.header__search>button{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--primary);flex:none;transition:background var(--t),color var(--t)}
.header__search>button:hover{background:var(--ink);color:#fff}
.header__actions{display:flex;align-items:center;gap:2px;flex:none}
.header__search-toggle{display:none}
/* Anlık arama paneli: kutunun hemen altında, kutuyla aynı genişlikte. Tek gölge (Baz),
   köşe 6 px; satırlar 44 px hedef. `mark` vurgusu arka plansız, marka renginde kalın —
   sarı şerit pazaryeri sadeliğini bozuyordu. Ok tuşuyla seçili satır zemin alır. */
form[data-search]{position:relative}
.suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:80;max-height:min(72vh,640px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:6px 0;text-align:left;font-size:14px;color:var(--ink)}
.suggest__group{padding:4px 0}
.suggest__group+.suggest__group{border-top:1px solid var(--line-2)}
.suggest__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 16px 4px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.suggest__clear{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-4);text-decoration:underline;text-underline-offset:2px}
.suggest__clear:hover{color:var(--ink)}
.suggest__row{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 16px;text-decoration:none;color:var(--ink);transition:background .12s}
.suggest__row:hover,.suggest__row.is-active,.suggest__chip.is-active,.suggest__all.is-active,.suggest__note a.is-active{background:var(--bg)}
.suggest__ico{display:grid;place-items:center;width:20px;height:20px;flex:none;color:var(--ink-4)}
.suggest__ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.suggest__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest__kind{flex:none;font-size:11px;font-weight:600;color:var(--ink-4);text-transform:uppercase;letter-spacing:.08em}
.suggest__thumb{flex:none;width:48px;height:48px;border-radius:var(--r);background:var(--bg);overflow:hidden;display:grid;place-items:center}
.suggest__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.suggest__body{flex:1;min-width:0;display:grid;gap:2px}
.suggest__title{font-size:13.5px;line-height:1.3;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.suggest__title b{font-weight:700;color:var(--ink)}
.suggest__price{font-family:var(--fh);font-weight:600;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.suggest__price--sale{color:var(--sale)}
.suggest__price s{margin-left:6px;font-weight:400;font-size:.86em;color:var(--ink-4)}
.suggest__row.is-out .suggest__thumb{opacity:.55}
.suggest mark,.grid--products .card__title mark{background:none;color:var(--primary-strong);font-weight:700}
.suggest__note{padding:10px 16px;font-size:13.5px;color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.suggest__note a{color:var(--ink);text-decoration:none;padding:2px 6px;margin:-2px -6px;border-radius:var(--r-sm)}
.suggest__note a strong{color:var(--primary-strong)}
.suggest__chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 10px}
.suggest__chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:var(--r-pill);background:var(--bg);font-size:13px;font-weight:500;color:var(--ink);text-decoration:none;transition:background var(--t),color var(--t)}
.suggest__chip:hover,.suggest__chip.is-active{background:var(--ink);color:#fff}
.suggest__all{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;margin:4px 0 -6px;border-top:1px solid var(--line-2);font-weight:600;font-size:13.5px;color:var(--primary-strong);text-decoration:none}
.suggest__all:hover{background:var(--bg)}
.suggest__empty{padding:14px 16px;font-size:13.5px;color:var(--ink-3)}
.suggest--mobile{top:calc(100% + 6px);left:0;right:0;max-height:min(64vh,560px)}
.header__mobile-search form{position:relative}
/* Eylem = ikon kutusu (+ rozet) + etiket. Etiket yalnız geniş ekranda; rozet ikonun sağ üst
   köşesine bağlı olduğundan düğme genişlese de yerinden oynamaz. */
.iconbtn__ico{position:relative;display:grid;place-items:center;width:24px;height:24px}
.iconbtn__label{display:none}
@media (min-width:961px){
  .header__actions{gap:4px}
  .iconbtn--labeled{width:auto;height:40px;padding:0 12px 0 10px;border-radius:var(--r-pill);display:flex;align-items:center;gap:7px;
    text-decoration:none;color:var(--ink-2)}
  .iconbtn--labeled .iconbtn__label{display:inline;font-size:13px;font-weight:600;line-height:1;white-space:nowrap}
  .iconbtn--labeled:hover{color:var(--ink);background:var(--bg)}
}
.header__count{position:absolute;top:-6px;right:-9px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--sale);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1}
.header__mobile-search{border-top:1px solid var(--line);padding:8px 0}
.header__mobile-search form{display:flex;gap:8px}
.header__mobile-search input{flex:1;height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 14px;background:var(--surface)}
.header__mobile-search form>button{padding:0 16px;border-radius:var(--r-sm);background:var(--primary);color:var(--primary-ink);font-weight:700}
/* Kategori şeridi: kendi satırında, tam genişlikte boyanabilir (brand/dark stilleri) */
.header__navbar{--navbar-bg:transparent;--navbar-ink:var(--ink-2);--navbar-hover:var(--bg);--navbar-mark:var(--primary);
  background:var(--navbar-bg);border-top:1px solid var(--header-line)}
.header__nav{min-width:0}
.nav{list-style:none;margin:0;padding:0;display:flex;gap:0;overflow:visible}
.nav__item{position:relative}
.nav__item--has-mega{position:static}
.nav__link{position:relative;display:flex;align-items:center;gap:5px;padding:0 14px;height:44px;white-space:nowrap;
  font-weight:600;font-size:14px;text-decoration:none;color:var(--navbar-ink);transition:color var(--t),background var(--t)}
/* Orta genişlikte (961–1180) menü tek satırda kalsın: bağlantılar ikiye katlanmak yerine sıkışır. */
@media (max-width:1180px){.nav__link{padding:0 10px;font-size:13px}.nav__link--blog{padding-inline:8px 2px}.nav__script{font-size:18px}}
@media (max-width:1100px){.nav__link{padding:0 7px;font-size:12.5px}.nav__link--blog{padding-inline:6px 2px}.nav__script{font-size:17px}}
.nav__link:hover,.nav__item:hover>.nav__link{color:var(--navbar-ink);background:var(--navbar-hover)}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--navbar-mark);
  transform:scaleX(0);transform-origin:center;transition:transform .18s var(--ease)}
.nav__item:hover>.nav__link::after,.nav__link[aria-expanded="true"]::after{transform:scaleX(1)}
.nav__link .icon{width:14px;height:14px;transition:transform var(--t)}
.nav__item--has-mega:hover>.nav__link .icon{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;width:auto;opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity var(--t),transform var(--t),visibility 0s var(--t);
  background:var(--surface);border-top:1px solid var(--line);box-shadow:var(--sh-2);z-index:70}
.nav__item--has-mega:hover .mega,.nav__item--has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mega__inner{padding:22px 0 20px}
.mega__cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px 26px}
.mega__title{font-weight:700;font-size:14px;text-decoration:none;display:block;margin-bottom:8px;color:var(--ink)}
.mega__title:hover{color:var(--primary-strong)}
.mega__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.mega__col ul a{text-decoration:none;color:var(--ink-3);font-size:14px;transition:color var(--t)}
.mega__col ul a:hover{color:var(--primary-strong)}
.mega__all{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding-top:14px;width:100%;
  border-top:1px solid var(--line);font-weight:600;font-size:14px;color:var(--primary-strong);text-decoration:none}
.mega__all:hover{gap:12px}
/* Zemin stilleri (özelleştirici › Üst bilgi › Zemin). Hepsi --primary'den türetilir.
   tint: bütün üst bilgi markanın %7'lik açık tonu; arama beyaz kutu olup zeminden ayrılır.
   brand/dark: logo satırı beyaz, kategori çubuğu tam genişlikte marka rengi / mürekkep. */
.header--tint{--header-bg:color-mix(in srgb,var(--primary) 7%,#fff);--header-line:color-mix(in srgb,var(--primary) 20%,#fff)}
.header--tint .header__search{background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 28%,#fff)}
.header--tint .header__search:focus-within{box-shadow:0 0 0 2px var(--primary)}
.header--tint .header__navbar{--navbar-hover:color-mix(in srgb,var(--primary) 14%,#fff)}
.header--tint .iconbtn:hover{background:color-mix(in srgb,var(--primary) 14%,#fff)}
.header--tint .header__mobile-search{border-top-color:var(--header-line)}
/* Çizgi rengi bant rengine eşitlenir: 1 px kenarlıklar bandın içinde erir, 128 px yükseklik değişmez. */
.header--brand{--header-line:var(--primary)}
.header--brand .header__navbar{--navbar-bg:var(--primary);--navbar-ink:var(--primary-ink);--navbar-hover:color-mix(in srgb,var(--primary-ink) 12%,transparent);--navbar-mark:var(--primary-ink)}
.header--dark{--header-line:var(--ink)}
.header--dark .header__navbar{--navbar-bg:var(--ink);--navbar-ink:#fff;--navbar-hover:rgba(255,255,255,.1);--navbar-mark:var(--primary)}
.header--brand .nav__link,.header--dark .nav__link{font-weight:500}

/* "Blog" vurgusu: Caveat el yazısı, marka rengi, hafif eğik; standart alt çizgi/hover zemini yok,
   yerine elle çizilmiş fırça çizgisi üstüne gelince soldan sağa çizilir (dashoffset). */
.nav__item--blog{margin-left:auto}  /* kategori çubuğunun sağına yaslı */
.nav__link--blog{color:var(--primary);padding-inline:12px 4px}
.nav__link--blog:hover,.nav__item:hover>.nav__link--blog{color:var(--primary);background:none}
.nav__link--blog::after{display:none}
/* İki satır ("Kaliteli Ürün ⏎ Rehberi #Blog") 44 px satıra sığar: 2 × 19 px. Sağa yaslı blok. */
.nav__script{font-family:"Caveat","Segoe Script","Bradley Hand",cursive;font-weight:700;font-size:19px;line-height:.98;letter-spacing:.01em;
  position:relative;display:inline-block;text-align:right;padding:1px 3px 0;transform:rotate(-2deg)}
/* "Kaliteli" mürekkep, "#Blog" marka rengi; fırça çizgisi yalnız etiketli parçanın altında */
.nav__script-lead{color:var(--ink)}
.nav__script-tag{position:relative;display:inline-block;color:var(--primary);margin-left:.22em}  /* Liquid boşluk kırptığı için aralık CSS'ten */
.nav__hash{font-weight:500;opacity:.72;margin-right:1px}
.nav__swash{position:absolute;left:0;bottom:-4px;width:100%;height:8px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-dasharray:72;stroke-dashoffset:72;transition:stroke-dashoffset .4s var(--ease)}
.nav__link--blog:hover .nav__swash,.nav__link--blog:focus-visible .nav__swash{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.nav__swash{transition:none}}
.mobile-nav__link--blog{color:var(--primary)}
.mobile-nav__link--blog .nav__script{transform:none;font-size:22px;text-align:left}

/* Mega menü perdesi: üst bilginin hemen ardındaki sabit katman; menü açılınca (hover / klavye odağı)
   sayfayı bulanıklaştırıp hafif karartır, üst bilgi ve mega menü üstte kalır. Katman sırası: sarmalayıcı
   (.kl-section, z 60) sayfanın üstünde; içinde perde 59 < üst bilgi 60 < mega 70. Yapışkan olmayan üst
   bilgide de aynı: perde kök bağlamda 59, üst bilgi 60. `pointer-events:none` — fare menüden çıkınca
   hover biter, perde kendiliğinden kalkar. `backdrop-filter` desteklemeyen tarayıcıda yalnız karartır. */
.mega-veil{position:fixed;inset:0;z-index:59;background:rgba(16,24,40,.22);opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .mega-veil{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
}
.header:has(.nav__item--has-mega:hover)+.mega-veil,.header:has(.nav__item--has-mega:focus-within)+.mega-veil{opacity:1}
@media (max-width:960px){.mega-veil{display:none}}

/* ------------------------------------------------------------------- çekmece */
.drawer{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(16,24,40,.45);opacity:0;transition:opacity .2s}
.drawer__panel{position:absolute;top:0;bottom:0;width:min(420px,94vw);background:var(--surface);display:flex;
  flex-direction:column;transition:transform .24s var(--ease);box-shadow:var(--sh-3)}
.drawer--left .drawer__panel{left:0;transform:translateX(-100%)}
.drawer--right .drawer__panel{right:0;transform:translateX(100%)}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 14px 18px;
  border-bottom:1px solid var(--line);font-size:16px;font-weight:700}
.drawer__body{flex:1;overflow:auto;padding:16px 18px}
.drawer__foot{padding:16px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;background:var(--surface-2)}
.drawer__foot a{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:600}
.drawer__foot .cart-summary__row--total{font-size:18px;padding-top:0;border:0}
.mobile-nav{display:flex;flex-direction:column}
.mobile-nav__item{border-bottom:1px solid var(--line)}
.mobile-nav__item summary{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-weight:600;font-size:16px;list-style:none;cursor:pointer}
.mobile-nav__item summary::-webkit-details-marker{display:none}
.mobile-nav__item summary a{text-decoration:none;flex:1}
.mobile-nav__item[open] .mobile-nav__chev .icon{transform:rotate(180deg)}
.mobile-nav__item ul{list-style:none;margin:0;padding:0 0 12px 12px;display:flex;flex-direction:column;gap:10px}
.mobile-nav__item ul a{text-decoration:none;color:var(--ink-2)}
.mobile-nav__link{padding:14px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:16px;text-decoration:none}
.drawer__picks{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.drawer__picks-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.drawer__picks-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);width:100%;font-weight:700}
.drawer__pick{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);font-size:14px;font-weight:600;text-decoration:none;color:inherit}
.drawer__pick.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.drawer-lines{display:flex;flex-direction:column;gap:12px}
.drawer-line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:start;padding-bottom:12px;border-bottom:1px solid var(--line)}
.drawer-line:last-child{border-bottom:0;padding-bottom:0}
.drawer-line__img{width:64px;height:64px;border-radius:var(--r-sm);overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.drawer-line__img img{width:100%;height:100%;object-fit:cover}
.drawer-line__title{font-weight:600;font-size:14px;text-decoration:none;display:block;line-height:1.35}
.drawer-line__title:hover{color:var(--primary-strong)}
.drawer-line__row{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:8px}
.drawer-line__row strong{font-size:15px}
.drawer-line__remove{width:30px;height:30px;align-self:flex-start;color:var(--ink-4);border-radius:6px}
.drawer-line__remove:hover{color:var(--sale);background:var(--bg)}

/* ==================================================================== BÖLÜMLER */
.section{padding:var(--section-y) 0}
.section--tight{padding:10px 0 20px}
.section--flush-top{padding-top:0}
.section--tint{background:var(--surface)}
/* Bölüm başlığı — TEK mimari: ortalı başlık (+ üst etiket, alt başlık), altında 52 px'lik
   kısa turuncu vurgu. Kenardan kenara giden gri ayraç KALDIRILDI (kullanıcı: "kısa turuncu
   çizgi tamam, diğerini kaldır"). Sol yaslı "satır" varyantı da aynı mimariye çekildi:
   "tümünü gör" bağlantısı geniş ekranda sağ kenarda başlıkla aynı hizada, dar ekranda
   başlığın altında ortada. */
.section__head{margin-bottom:clamp(20px,2.4vw,34px);display:grid;gap:6px;justify-items:center;text-align:center;
  position:relative;padding-bottom:14px}
.section__head::before{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:52px;height:3px;background:var(--primary);z-index:1}
.section__head--row{display:grid;justify-items:center;text-align:center;gap:6px}
.section__head--row > .section__link{position:absolute;right:0;top:calc(50% - 7px);transform:translateY(-50%)}
.section__title{font-family:var(--fh);font-size:clamp(22px,calc(2.4vw * var(--hs)),30px);
  letter-spacing:-.035em;font-weight:500;line-height:1.12}
/* `heading` snippet'i geriye dönük olarak son kelimeyi .hl ile sarmalayabilir: artık nötr. */
.section__title .hl{font-weight:inherit}
.section__sub{color:var(--ink-3);font-size:14px;max-width:64ch}
.section__link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--ink);
  text-decoration:none;min-height:24px;transition:gap var(--t)}
.section__link:hover{gap:10px;color:var(--primary-strong);text-decoration:underline;text-underline-offset:3px}
.section__rule{display:none}

/* --------------------------------------------------------------------- hero
   Full-width kurgu — tek dil, iki düzen (ölçümle seçildi):

   ≥901 px  Görsel kenardan kenara zeminde; metin SOLDA ve sayfa ızgarasıyla hizalı
            (başlıktaki logoyla aynı dikey çizgi). Perde metin kolonuna göre ölçülür
            ve %64'te biter — ürün yıkanmadan açık kalır.
   ≤900 px  YIĞILMIŞ: metin beyaz zeminde (kontrast zemin renginden gelir, perdeye
            bağlı değil), görsel altında kadrajı korunan bant. Neden: hero plakası
            2,4:1; telefonda 390×500 kutuda `cover` ürünü tamamen kadraj dışında
            bırakıyordu, geriye boş krem alan kalıyordu (ölçüldü).

   Yükseklik gerçek üst bloktan hesaplanır (--header-h + --announce-h) ve --hero-max
   ile sınırlanır; böylece hero fold'u taşımaz ve altındaki bölümden iz kalır.
   Kırpma odağı --hero-focus ile mağazadan gelir (Görsel odağı ayarı).
   ------------------------------------------------------------------------ */
.hero{position:relative;background:var(--bg);overflow:hidden;--hero-max:520px;--hero-focus:50%}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--hero-focus) 50%;z-index:0}
/* Metin bölgesini örten perde: kolonun üstünde opak, ürünün başladığı yerde biter */
.hero--image::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.94) 34%,
    rgba(255,255,255,.62) 48%,rgba(255,255,255,0) 64%)}
.hero__inner{position:relative;z-index:2;display:flex;align-items:center;padding:40px 0;
  min-height:min(calc(100svh - var(--header-h) - var(--announce-h,0px)),var(--hero-max))}
/* %52: uzun bir başlık ürünün üstüne taşmasın; kısa metinde içerik zaten daralır */
.hero__content{display:flex;flex-direction:column;align-items:flex-start;max-width:min(640px,50%)}
/* Göz etiketi: rozet değil, arkasında bant olan düz metin */
/* Hero göz etiketi. Kelimenin arkasındaki kalın işaretleyici bant KALDIRILDI — bölüm
   başlıklarında elenen desenin aynısıydı. Yerine aynı dilden kısa marka vurgusu: etiketin
   altında 40×3 px'lik çizgi. */
.hero__eyebrow{display:inline-block;align-self:flex-start;position:relative;margin-bottom:16px;
  padding:0 0 8px;background:none;border:0;max-width:40ch;
  font-family:var(--fh);font-size:clamp(13px,1.05vw,15px);font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ink)}
.hero__eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:3px;background:var(--primary)}
.hero__eyebrow .hl{font-weight:inherit}
/* Gösterge başlığı: iki satır, iki ağırlık */
.hero__title{font-family:var(--fh);font-size:clamp(32px,calc(4vw * var(--hs)),54px);
  line-height:1.08;letter-spacing:-.035em;color:var(--ink);margin:0 0 14px;max-width:none;text-wrap:balance}
.hero__line{display:block;font-weight:500}
.hero__line--light{font-weight:300}
/* Ritim marjla kurulur; eski negatif marj yaması başlık marjı değişince kırılıyordu */
.hero__sub{margin:0 0 22px;font-size:clamp(14px,1.1vw,16px);line-height:1.6;max-width:46ch;color:var(--ink-2)}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.hero__title + .hero__actions{margin-top:16px}
.hero .btn--lg{min-height:46px;padding:0 26px;font-size:15px}
.hero__proof{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:26px;padding-top:16px;
  border-top:1px solid var(--line);color:var(--ink-2)}
.hero__proof span{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.hero__proof .icon{width:17px;height:17px;color:var(--ink)}
.hero__proof strong{font-weight:500}
/* ------------------------------------------------------------ hikâye şeridi
   Header altı: yuvarlak görsel + tek satır etiket (bkz. story-strip.liquid). Halka marka
   renginde, hover'da dolar. Geniş ekranda eşit aralıklı tek satır; dar ekranda snap kaydırma.
   ------------------------------------------------------------------------ */
/* Üst yığının dikey ritmi altın oran ölçeğinde: 16 → 26 → 42 px (--stack-*). Header→hikâyeler ve
   hikâyeler→hero→kartlar arası 26 px; kartlardan sonraki bölüm kendi --section-y payıyla 42'ye tamamlar. */
:root{--stack-1:16px;--stack-2:26px;--stack-3:42px}
.stories{--story-d:88px;padding-top:var(--stack-2)}
.stories--sm{--story-d:72px}
.stories--lg{--story-d:104px}
.stories__track{list-style:none;margin:0;padding:0 0 4px;display:flex;justify-content:center;gap:clamp(12px,1.6vw,26px);
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
/* Yeterince öğe varsa (≥7) ilk ve son yuvarlak kabın kenarlarına oturur; aralar eşit dağılır */
.stories__track--spread{justify-content:space-between;gap:8px;padding-top:10px}
.stories__track::-webkit-scrollbar{display:none}
.stories__item{flex:0 0 auto;scroll-snap-align:start;width:calc(var(--story-d) + 28px)}
.story{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--ink-2)}
/* Halka: konik turuncu degrade ::before'da durur (dönebilsin diye ayrı katman), içeride 3 px beyaz pay.
   Hover'da yuvarlak KALKMAZ: halka çok az kalınlaşır (2→2,5 px), degrade daha kontrastlı olur ve döner —
   dönüş açıkça görünür. Dışa ışıma/gölge YOK: bulanık ve kalın duruyordu. */
.story__ring{position:relative;display:block;width:var(--story-d);height:var(--story-d);padding:5px;border-radius:50%;
  background:#fff;isolation:isolate;transition:padding var(--t),box-shadow var(--t)}
.story__ring::before{content:"";position:absolute;inset:0;z-index:0;border-radius:50%;
  background:conic-gradient(from 0deg,var(--primary),color-mix(in srgb,var(--primary) 55%,#fff),var(--primary),color-mix(in srgb,var(--primary) 70%,#fff),var(--primary));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  transition:filter var(--t),-webkit-mask var(--t),mask var(--t)}
.story__ring img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--bg)}
a.story:hover .story__ring::before{
  background:conic-gradient(from 0deg,var(--primary) 0 8%,color-mix(in srgb,var(--primary) 18%,#fff) 25%,var(--primary) 42% 58%,color-mix(in srgb,var(--primary) 18%,#fff) 75%,var(--primary) 92% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px))}
@media (prefers-reduced-motion:no-preference){
  a.story:hover .story__ring::before{animation:story-spin 1.4s linear infinite}
}
@keyframes story-spin{to{transform:rotate(360deg)}}
.story__label{max-width:100%;font-size:12px;font-weight:500;line-height:1.25;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
a.story:hover .story__label{color:var(--primary-strong)}
a.story:focus-visible{outline:none}
a.story:focus-visible .story__ring{box-shadow:var(--ring)}
/* --------------------------------------------------------- üçlü hero kartları
   Hikâyelerin altında üç dik kart (bkz. hero-cards.liquid): görsel zemin, alttan koyu geçiş,
   beyaz başlık + açıklama + düğme metni. Hover'da görsel hafif büyür.
   ------------------------------------------------------------------------ */
.hcards{padding-top:var(--stack-2)}
.hcards__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.hcards__grid--1{grid-template-columns:1fr}
.hcards__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Yükseklik yalnız orandan gelir; max-height KONMAZ: ızgara satırı oran yüksekliğiyle ölçülür,
   kutu kırpılınca kartın altında boş şerit kalıyordu. Üst sınırı kap genişliği (--page-width) verir. */
.hcard{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;
  border-radius:var(--r-lg);background:#1f1d1a;color:#fff;text-decoration:none;isolation:isolate}
.hcards__grid--1 .hcard{aspect-ratio:21/9}
.hcards__grid--2 .hcard{aspect-ratio:3/2}
.hcard__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .6s var(--ease)}
.hcard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,24,40,0) 38%,rgba(16,24,40,calc(var(--hc-overlay,.35) + .15)) 72%,rgba(16,24,40,calc(var(--hc-overlay,.35) + .55)) 100%)}
.hcard__body{position:absolute;inset:auto 0 0 0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:clamp(16px,2vw,28px)}
.hcard__title{font-family:var(--fh);font-size:clamp(20px,1.7vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:#fff}
.hcard__sub{font-size:clamp(13px,.95vw,14px);line-height:1.5;color:rgba(255,255,255,.86);max-width:36ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hcard__cta{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;font-weight:600;color:#fff}
.hcard__cta .icon{width:16px;height:16px;transition:transform var(--t)}
a.hcard:hover .hcard__img{transform:scale(1.04)}
a.hcard:hover .hcard__cta{text-decoration:underline;text-underline-offset:3px}
a.hcard:hover .hcard__cta .icon{transform:translateX(3px)}
a.hcard:focus-visible{outline:none;box-shadow:var(--ring)}
/* --------------------------------------------------------- hero güvertesi
   Panel bannerları: kenardan kenara zemin değil, sayfa ızgarasına oturan tek kart.
   Hero görselleri kare geldiği için `cover` ile 2,4:1'e kırpmak ürünü kadraj dışına
   atıyordu. Kartta metin solda açık zeminde, görsel sağda kendi çerçevesinde (%54);
   iki taraf birbirini örtmez. Kontroller (ok + nokta) kartın sol altında, metinle hizalı.
   ------------------------------------------------------------------------ */
.hero-slider{padding-top:var(--stack-2)}
.hero-deck{--deck-px:clamp(24px,4vw,56px);--deck-py:clamp(28px,3.4vw,48px);--deck-h:clamp(360px,33vw,460px);
  position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.hero-slider .hero-slide{display:none}
.hero-slider .hero-slide.is-active{display:block}
.hero-slider .hslide.is-active{display:grid}
@media (prefers-reduced-motion:no-preference){
  .hero-slider .hero-slide.is-active{animation:hero-in .5s var(--ease)}
}
@keyframes hero-in{from{opacity:0}to{opacity:1}}
/* Hazır kreatif: görselin kendi oranı korunur, üstüne hiçbir şey binmez (CLS de olmaz) */
.hero--creative .hero__imagelink{display:block}
.hero--creative .hero__image{width:100%;height:auto;display:block}
/* Bölünmüş slayt: metin | görsel */
.hslide{grid-template-columns:minmax(0,46fr) minmax(0,54fr);min-height:var(--deck-h);
  background:var(--hero-bg,var(--surface));color:var(--hero-fg,var(--ink))}
.hslide .hero__inner{position:relative;z-index:2;display:flex;align-items:center;min-height:0;
  padding:var(--deck-py) var(--deck-px)}
.hero-deck--nav .hslide .hero__inner{padding-bottom:calc(var(--deck-py) + 48px)}
.hslide .hero__content{max-width:none;width:100%}
.hslide .hero__eyebrow{color:inherit;margin-bottom:14px;font-size:clamp(13px,1vw,14px)}
.hslide .hero__title{color:inherit;font-size:clamp(28px,calc(3.1vw * var(--hs)),44px);font-weight:500;margin:0 0 12px}
.hslide .hero__sub{color:inherit;opacity:.78;font-size:clamp(14px,1.05vw,16px);max-width:44ch;margin:0 0 22px}
/* Metin kolonunun zemini: aynı görselin bulanık kopyası + zemin rengiyle yıkama (bkz. hero.liquid) */
.hslide--split{position:relative;isolation:isolate}
.hslide__backdrop{position:absolute;inset:-10%;z-index:0;background-size:cover;background-position:center;
  filter:blur(40px) saturate(1.2);transform:scale(1.05);pointer-events:none}
.hslide--split::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:color-mix(in srgb,var(--hero-bg,var(--surface)) 76%,transparent)}
.hslide__media{position:relative;z-index:2;min-height:0;background:var(--bg)}
.hslide__media a{display:block;position:absolute;inset:0}
.hslide__media img,.hslide__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:var(--r-lg)}
/* Görselsiz: tek kolon, panelden gelen zemin/metin rengi */
.hslide--text{grid-template-columns:1fr}
/* Tam zemin (geniş kreatifler): görsel kartı kaplar, soldan koyu perde, beyaz metin */
.hslide--full{grid-template-columns:1fr;--hero-fg:#fff}
.hslide--full .hslide__media{position:absolute;inset:0;z-index:0}
.hslide--full::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,24,40,var(--hero-overlay,.42)) 0%,rgba(16,24,40,calc(var(--hero-overlay,.42) * .8)) 45%,rgba(16,24,40,0) 78%)}
.hslide--full .hero__content{max-width:56%}
.hslide--full .hero__sub{opacity:.9}
.hslide--full .hero__eyebrow::after{background:#fff}
/* Kontroller: metin kolonunun sol altı */
.hero-deck__nav{position:absolute;left:var(--deck-px);bottom:calc(var(--deck-py) - 8px);z-index:3;display:flex;align-items:center;gap:10px}
.hero-deck__arrow{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer;
  transition:border-color var(--t),background var(--t)}
.hero-deck__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-deck__arrow:hover{border-color:var(--ink)}
.hero-deck__arrow:focus-visible{outline:none;box-shadow:var(--ring)}
.hero-slider__dots{display:flex;align-items:center;gap:6px;padding:0 4px}
.hero-slider__dot{width:8px;height:8px;border-radius:999px;border:0;background:rgba(35,35,35,.24);padding:0;cursor:pointer;
  transition:width var(--t),background var(--t)}
.hero-slider__dot.is-active{background:var(--ink);width:24px}
.hero-deck:has(.hslide--full.is-active) .hero-slider__dot{background:rgba(255,255,255,.5)}
.hero-deck:has(.hslide--full.is-active) .hero-slider__dot.is-active{background:#fff}
.hero-deck:has(.hslide--full.is-active) .hero-deck__arrow{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.hero__inner--center{justify-content:center}
.hero__inner--center .hero__content{align-items:center;text-align:center}
.hero__inner--center .hero__eyebrow{align-self:center}
.hero__inner--right{justify-content:flex-end}
.hero__inner--right .hero__content{align-items:flex-end;text-align:right}
.hero__inner--right .hero__eyebrow{align-self:flex-end}
/* Eski kolaj kalıntıları: artık kullanılmıyor */
.hero__stage,.hero__cards,.hero__pcard,.hero__glow,.hero__orb,.hero__media,.hero__placeholder{display:none}
@media (max-width:900px){
  /* Yığılmış düzen: metin beyaz zeminde, görsel altında bant. Perde kapatılır —
     kontrast artık zemin renginden gelir, görselin rastgele bir bölgesinden değil. */
  .hero{display:flex;flex-direction:column;background:var(--page)}
  .hero--image::after{display:none}
  .hero__inner{order:1;min-height:0;padding:32px 0 30px;align-items:stretch}
  /* Yığılmış düzende içerik kabı tam genişlik olur: güven şeridinin çizgisi kapla
     hizalanır, aksi hâlde metin kadar kısa kalıp sağda çözülmemiş boşluk bırakır. */
  .hero__content{max-width:none;width:100%}
  .hero__proof{align-self:stretch}
  .hero__bg{position:relative;order:2;width:100%;height:clamp(190px,44vw,330px)}
  .hero__title{font-size:clamp(28px,7vw,40px);margin-bottom:12px}
  .hero__sub{margin:0 0 26px;font-size:15px;max-width:52ch}
  /* Güverte kartı yığılır: görsel üstte 16:10 bant, metin altında; kontroller sol altta */
  .hero-slider{padding-top:var(--stack-1)}
  .hero-deck{--deck-px:20px;--deck-py:22px}
  .hero-slider .hslide.is-active{display:grid}
  .hslide{grid-template-columns:1fr;min-height:0}
  .hslide__media{order:-1;aspect-ratio:16/10}
  .hslide .hero__title{font-size:clamp(26px,6.4vw,34px)}
  .hslide .hero__sub{font-size:15px;margin-bottom:18px}
  .hslide--full{min-height:340px}
  .hslide--full .hslide__media{order:0;aspect-ratio:auto}
  .hslide--full .hero__content{max-width:none}
  .hslide--full::before{background:linear-gradient(180deg,rgba(16,24,40,calc(var(--hero-overlay,.42) * .6)) 0%,rgba(16,24,40,calc(var(--hero-overlay,.42) + .25)) 100%)}
}
@media (max-width:640px){
  .hero__inner{padding:26px 0 28px}
  .hero__eyebrow{margin-bottom:14px;font-size:15px;padding-bottom:7px}
  .hero__eyebrow::after{width:34px}
  .hero .btn--lg{min-height:44px;padding:0 20px;font-size:15px;flex:1 1 auto;justify-content:center}
  .hero__proof{margin-top:22px;padding-top:16px;gap:8px 18px}
  .hero__proof span:nth-child(n+3){display:none}
}

/* ------------------------------------------------------------ kategori kartları */
.catgrid__grid,.catgrid__grid--cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(10px,1.2vw,16px)}
.catcard{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-decoration:none;transition:border-color var(--t),box-shadow var(--t)}
.catcard:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.catcard__media{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--bg)}
.catcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.catcard:hover .catcard__media img{transform:scale(1.04)}
.catcard::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 42%,rgba(35,35,35,.62))}
.catcard__body{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:14px 16px;color:#fff}
.catcard__title{font-family:var(--fh);font-size:16px;font-weight:500;letter-spacing:-.02em;color:#fff}
.catcard__count{font-size:12px;color:rgba(255,255,255,.78);white-space:nowrap;background:none;padding:0}
.catcard__initial{display:grid;place-items:center;width:100%;height:100%;font-family:var(--fh);font-size:40px;font-weight:500;color:#fff;background:var(--ink)}
.catgrid__grid--pills{display:flex;gap:10px;overflow:auto;padding-bottom:6px}
.catgrid__grid--pills .catcard{flex:0 0 180px}

/* ------------------------------------------------------------------- ürün kartı
   Pazaryeri ergonomisi (Trendyol/Hepsiburada): kart ÇERÇEVELİ beyaz bir kutudur,
   görsel kutunun içinde 4:5 kırpılır, altında MARKA (kalın) + ad tek paragrafta,
   sonra puan → kargo → fiyat. Favori düğmesi hep görünür (referansta da öyle):
   listede en sık kullanılan ikinci eylem hover'ın arkasında saklanmamalı.
   Kartta sepete ekleme yoktur: listede tek eylem ürüne gitmektir. */
.grid--products{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:clamp(8px,1vw,12px)}
/* Kategori listesinde kartların arası biraz daha açık; ana sayfa rafları sıkı kalır. */
.collection-layout__main .grid--products{gap:clamp(12px,1.25vw,16px)}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t)}
.card:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.card__mediawrap{position:relative;overflow:hidden;background:#fff}
.card__media{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#fff}
/* Fotoğraf kırpılmaz: ürün bütünüyle görünür, kutunun ortasında durur.
   Kenarlardan küçük bir pay bırakılır ki görsel kartın kenarına dayanmasın. */
.card__img{width:100%;height:100%;padding:10px;object-fit:contain;object-position:center;transition:transform .6s var(--ease),opacity .4s var(--ease)}
.card__img--hover{position:absolute;inset:0;opacity:0}
.card:hover .card__img--hover{opacity:1}
.card:hover .card__img{transform:scale(1.04)}
.card__media .placeholder{width:100%;height:100%}
.card__badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;z-index:3}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r);
  font-family:var(--fh);font-size:11px;font-weight:600;letter-spacing:.02em;background:var(--ink);color:#fff}
.badge--sale{background:var(--sale);color:#fff}
.badge--new{background:var(--ok-text);color:#fff}
.badge--soldout{background:rgba(35,35,35,.82);color:#fff}
.badge--flash{background:#111;color:#ffd166}
/* Ürün sayfası flash şeridi: başlık + sepette indirim + canlı geri sayım (theme.js data-countdown) */
.pdp-flash{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;padding:6px 10px;border-radius:var(--r);background:#111;color:#fff;font-size:12px;line-height:1.3}
.pdp-flash b{color:#ffd166;font-weight:600}
/* Gövde: sola yaslı — göz tek bir sol kenarı takip eder, tarama hızlanır */
.card__body{padding:10px 11px 12px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;flex:1;text-align:left}
/* Marka + ad TEK başlık: marka kalınlıkla ayrışır, ikisi birlikte iki satıra kırpılır */
.card__title{font-family:var(--fh);font-size:14px;font-weight:400;line-height:1.38;color:var(--ink-2);letter-spacing:-.005em}
.card__title a{text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.card__vendor{font-weight:700;color:var(--ink)}
.card__rating{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);--star-size:13px}

.card__rating-num{font-weight:600;color:var(--ink-2)}
.card__rating-count{color:var(--ink-4)}
/* Kargo satırı: gerçek kural (ürün tek başına ücretsiz kargo eşiğini geçiyor) */
.card__ship{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--ink-2)}
.card__ship .icon{width:14px;height:14px;color:var(--ink-4)}
.card__price{margin-top:auto;padding-top:4px}
.card__price .price{justify-content:flex-start;font-size:16px;font-weight:600}
/* Daire ikon düğmeleri: sağ üstte. Favori HEP görünür, karşılaştır hover'da iner. */
.card__fav,.card__cmp{position:absolute;right:8px;z-index:4;width:32px;height:32px;display:grid;place-items:center;
  border:0;border-radius:50%;background:#fff;color:var(--ink-3);cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.14);transition:opacity var(--t),transform var(--t),background var(--t),color var(--t)}
.card__fav{top:8px}
.card__cmp{top:46px;opacity:0;transform:translateY(-6px);transition-delay:.06s}
.card:hover .card__cmp,.card__cmp:focus-visible,.card__cmp.is-on{opacity:1;transform:none}
.card__fav:hover,.card__cmp:hover{background:var(--ink);color:#fff}
.card__fav.is-on{background:var(--sale);color:#fff}
.card__fav.is-on .icon{fill:currentColor;stroke:currentColor}
.card__cmp.is-on{background:var(--ink);color:#fff}
.card__fav .icon,.card__cmp .icon{width:15px;height:15px}
/* Dokunmatikte hover yok: eylemler kalıcı görünür */
@media (hover:none){
  .card__cmp{opacity:1;transform:none}
}
.card__swatches{display:flex;align-items:center;justify-content:flex-start;gap:4px;margin-top:4px}
.card__swatch{width:11px;height:11px;border-radius:50%;background:var(--swatch,#ccc);box-shadow:0 0 0 1px var(--line-2)}
.card__swatch-more{font-size:11px;font-weight:500;color:var(--ink-4);margin-left:2px}
/* Fiyat: marka renginin okunur tonunda, eski fiyat üstü çizili önde (Baz düzeni) */
.price{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap;font-family:var(--fh);
  font-weight:500;font-size:15px;letter-spacing:0;white-space:nowrap;color:var(--ink)}
.price--large{font-size:clamp(19px,1.7vw,22px);font-weight:600}
.price--large .price__compare{font-size:.78em}
.price--sale .price__current,.price--sale .price__now{color:var(--sale)}
.price__compare,.price__old{color:var(--ink-4);font-weight:400;font-size:.86em;text-decoration:line-through;order:-1}
.price__tax{color:var(--ink-4);font-size:12px;font-weight:400}
.price__excl{font-size:12px;color:var(--ink-3);font-weight:400}
.grid--carousel{overflow:visible}

/* ------------------------------------------------------------------ metin bandı */
.richtext{background:var(--surface);border-block:1px solid var(--line)}
.richtext__inner{max-width:58ch;margin-inline:auto;padding:clamp(30px,3.4vw,46px) 0;text-align:center}
.richtext__title{font-size:clamp(21px,2.4vw,30px);letter-spacing:-.03em;text-wrap:balance}
.richtext__text,.richtext__body{margin-top:12px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.richtext .btn{margin-top:20px}

/* ------------------------------------------------------------------ marka şeridi */
/* Kenardan kenara bembeyaz bant: başlık, çerçeve ve köşe yok; yükseklik bantın kendisinden gelir. */
.brandstrip{background:#fff;padding-block:clamp(16px,2vw,28px)}
/* Akan bant: iki eş parça uç uca, ilki -%100 kayınca döngü görünmez başa sarar.
   Parça genişliği sağ boşluğu (gap) da içerir; böylece dikiş yerinde aralık bozulmaz. */
.brandstrip__bar{--bs-h:112px;--bs-gap:clamp(44px,5.2vw,80px);position:relative;display:flex;height:var(--bs-h);overflow:hidden;background:#fff}
.brandstrip__bar::before,.brandstrip__bar::after{content:"";position:absolute;top:0;bottom:0;width:clamp(32px,6vw,96px);z-index:1;pointer-events:none}
.brandstrip__bar::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.brandstrip__bar::after{right:0;background:linear-gradient(270deg,#fff,transparent)}
.brandstrip__track{flex:0 0 auto;display:flex;align-items:center;gap:var(--bs-gap);height:100%;
  padding:0 0 0 var(--bs-gap);margin:0;list-style:none;animation:brandstrip-flow 40s linear infinite}
.brandstrip__track>li{flex:0 0 auto}
.brandstrip__bar:hover .brandstrip__track{animation-play-state:paused}
.brandstrip__item{display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;border-radius:0;text-decoration:none}
.brandstrip__item img{display:block;max-width:180px;max-height:52px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1) contrast(1.1);opacity:.7;mix-blend-mode:multiply;transition:filter var(--t),opacity var(--t)}
.brandstrip__word{font-family:var(--fh);font-weight:600;font-size:clamp(15px,1.5vw,18px);letter-spacing:-.02em;
  color:var(--ink-3);white-space:nowrap;transition:color var(--t)}
.brandstrip__item:hover img{filter:none;opacity:1}
.brandstrip__item:hover .brandstrip__word{color:var(--ink)}
@keyframes brandstrip-flow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .brandstrip__bar{overflow-x:auto}
  .brandstrip__bar::before,.brandstrip__bar::after{display:none}
  .brandstrip__track{animation:none}
  .brandstrip__track[aria-hidden="true"]{display:none}
}

/* ------------------------------------------------------------------ bülten bandı */
.nlband{padding-block:clamp(24px,3vw,40px)}
.nlband__box{position:relative;display:grid;gap:14px;padding:clamp(20px,2.6vw,32px);border-radius:var(--r-lg);
  background:var(--ink);color:#fff}
.nlband__box::after{content:none}
.nlband__text{max-width:54ch}
.nlband__eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--primary);margin-bottom:6px}
.nlband__title{font-weight:700;font-size:clamp(19px,2.4vw,27px);line-height:1.2;letter-spacing:-.025em;margin:0;text-wrap:balance}
.nlband__sub{margin:6px 0 0;color:rgba(255,255,255,.74);font-size:14px}
.nlband__form{display:flex;gap:8px;flex-wrap:wrap;max-width:520px}
.nlband__form input[type=email]{flex:1 1 230px;min-width:0;height:46px;padding:0 14px;border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-sm);background:rgba(255,255,255,.08);color:#fff;font:inherit}
.nlband__form input[type=email]::placeholder{color:rgba(255,255,255,.5)}
.nlband__form input[type=email]:focus{outline:0;border-color:var(--primary);box-shadow:var(--ring)}
.nlband__form .btn{height:46px;min-height:46px;flex:0 0 auto}
.nlband__note{margin:0;font-size:12px;color:rgba(255,255,255,.55)}
@media (min-width:900px){
  .nlband__box{grid-template-columns:1.1fr .9fr;align-items:center;column-gap:32px}
  .nlband__text{grid-row:1 / span 2}.nlband__form{align-self:end}.nlband__note{align-self:start;margin-top:-4px}
}
.newsletter{display:flex;gap:8px;margin-top:10px}
.newsletter input{flex:1;height:44px;border-radius:var(--r-sm);border:1px solid var(--f-field-line);
  background:var(--f-field);padding:0 14px;color:var(--f-ink);outline:0}
.newsletter input::placeholder{color:var(--f-ph)}

/* --------------------------------------------------------------------- alt bilgi */
/* Renkler değişkende: panelden "Açık" seçilince aynı iskelet açık gri zemine geçer */
.footer{--f-bg:#17191d;--f-ink:#fff;--f-muted:rgba(255,255,255,.58);--f-label:rgba(255,255,255,.5);--f-line:rgba(255,255,255,.08);
  --f-chip:rgba(255,255,255,.08);--f-field:rgba(255,255,255,.07);--f-field-line:rgba(255,255,255,.2);--f-ph:rgba(255,255,255,.5);
  margin-top:32px;background:var(--f-bg);color:var(--f-ink)}
.footer--light{--f-bg:#f1f2f4;--f-ink:var(--ink);--f-muted:var(--ink-3);--f-label:var(--ink-4);--f-line:rgba(0,0,0,.08);
  --f-chip:#fff;--f-field:#fff;--f-field-line:var(--line);--f-ph:var(--ink-4);--heading-color:var(--ink);border-top:1px solid var(--line)}
.footer--light .footer__logo{filter:none}
/* Güven şeridi: alt bilginin üst katı, her sayfada. Beş eşit sütun konteyneri sağdan sola
   doldurur, içerik sola yaslı (altındaki kategori bandıyla aynı hiza); çıplak ikon, kalın
   başlık, başlık genişliğinde turuncu fırça vurgusu, gri açıklama. */
.trust{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 24px;padding-block:clamp(30px,3.4vw,44px) clamp(28px,3vw,40px);border-bottom:1px solid var(--f-line)}
.trust__item,.trust__item>div{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0}
.trust__icon{display:grid;place-items:center;height:30px;margin-bottom:14px;color:var(--f-ink)}
.trust__icon .icon{width:28px;height:28px;stroke-width:1.5}
.trust__item strong{display:block;font-family:var(--fh);font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--f-ink)}
.trust__item strong::after{content:"";display:block;width:calc(100% - 6px);height:6px;margin:6px 0 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M2 4.4C30 2 68 1.6 98 3' fill='none' stroke='%23fb7801' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.trust__item p{margin-top:9px;font-size:14px;line-height:1.5;color:var(--f-muted)}
/* ETBİS karekodu: iletişim sütununun altında, beyaz zeminli küçük kart (koyu tonda da okunur) */
.footer__etbis{display:inline-block;margin-top:18px;padding:6px;border-radius:var(--r-sm);background:#fff;opacity:1;line-height:0}
.footer__etbis img{height:104px;width:auto}
.footer--light .footer__etbis{border:1px solid var(--line)}
/* Altyapı imzası: en altta, ortalı tek satır */
.footer__credit{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;padding-block:14px 18px;
  border-top:1px solid var(--f-line);font-size:12px;color:var(--f-muted);opacity:.85;text-decoration:none}
.footer__credit img{height:20px;width:auto;filter:brightness(0) invert(1);opacity:.85}
.footer--light .footer__credit img{filter:none;opacity:.7}
.footer__credit:hover{opacity:1;text-decoration:none}
.footer--light .footer__pay{filter:brightness(0);opacity:.6}
.footer--light .footer__social a{border:1px solid var(--line)}
.footer--light .footer__social a:hover{border-color:var(--primary)}
/* Izgaranın üst payı bu sarmalayıcıda: onsuz sütunlar koyu zeminin tepesine yapışıyordu */
.footer__top{padding-block:clamp(44px,4.6vw,64px) clamp(28px,3vw,38px)}
/* marka + bülten | kategoriler | müşteri hizmetleri | iletişim */
.footer__grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1.15fr;gap:30px 28px}
/* Sütun başlıkları: koyu, kalın, altında kısa turuncu çizgi; bağlantı listesinden ayrışsın */
.footer__col h2,.footer__cats h2,.footer__title{font-family:var(--font);font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--f-ink);margin-bottom:16px}
.footer__col h2::after,.footer__title::after{content:"";display:block;width:26px;height:2px;margin-top:8px;background:var(--primary);border-radius:1px}
.footer__logo{height:32px;width:auto;filter:brightness(0) invert(1);margin-bottom:12px}
.footer__wordmark{font-family:var(--fh);font-weight:800;font-size:24px;color:var(--f-ink);margin-bottom:10px;letter-spacing:-.035em}
.footer__text{color:var(--f-muted);font-size:14px;line-height:1.65;max-width:44ch}
/* Bülten bloğu tanıtım metninden ince bir ayraçla ayrılır */
.footer__nl{margin-top:20px;padding-top:18px;border-top:1px solid var(--f-line);max-width:340px}
.footer__nl-label{font-size:13px;line-height:1.55;color:var(--f-muted);margin-bottom:9px}
.footer__nl .newsletter{margin-top:0}
.footer__social{display:flex;gap:8px;margin-top:18px}
.footer__social a{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--f-chip);color:var(--f-ink);opacity:1}
.footer__social a:hover{background:var(--primary);color:var(--primary-ink)}
.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.footer__links li{display:flex}
.footer a{opacity:.72;text-decoration:none;transition:opacity var(--t)}
.footer a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.footer__contact li a,.footer__contact li span{display:flex;align-items:flex-start;gap:9px}
/* Katlanır sütun: geniş ekranda düz başlık gibi durur, dar ekranda açılır kapanır */
.footer__col--fold>summary{list-style:none;display:block;cursor:default}
.footer__col--fold>summary::-webkit-details-marker{display:none}
.footer__col--fold>summary h2{margin-bottom:14px}
.footer__contact .icon{flex:none;margin-top:3px}
/* Kategori bandı: kategori başlığı + alt kategoriler, kategori sayısı kadar sütun.
   Geniş ekranda başlığı (summary) yok; dar ekranda tek "Kategoriler" katlanır satırı. */
.footer__cats{border-bottom:1px solid var(--f-line);padding-block:clamp(26px,3vw,36px) clamp(30px,3.4vw,44px)}
.footer__cats>summary{display:none}
.footer__cats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px 20px}
.footer__cat-title{display:block;font-family:var(--fh);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--f-ink);margin-bottom:10px;opacity:1}
.footer__cat .footer__links{gap:7px;font-size:13px}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;
  border-top:1px solid var(--f-line);padding-block:24px;font-size:12px;opacity:.55}
.footer__cookies{appearance:none;background:none;border:0;padding:0;margin-left:8px;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.footer__company{margin-left:8px;opacity:.7}
.footer__payments{display:flex;align-items:center;gap:12px}
.footer__pay-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
/* Kart markaları beyaz-şeffaf tek görsel: koyu zeminde filtresiz, oranı öz nitelikleriyle sabit */
.footer__pay{height:24px;width:auto;opacity:.9}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;
  border-radius:var(--r-sm);font-weight:600;font-size:14px;box-shadow:var(--sh-3);z-index:120;display:flex;align-items:center;gap:8px}
.toast--error{background:var(--sale)}

/* ===================================================================== LİSTELER */
.crumbs{display:flex;flex-wrap:wrap;gap:5px;font-size:12px;color:var(--ink-4);padding:12px 0 4px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--primary-strong);text-decoration:underline;text-underline-offset:3px}
/* Telefonda sayfa yolu tek satırdır ve geçerli sayfanın adı basılmaz: uzun ürün adı üç
   satıra sarıp başlığın üstünde ikinci bir başlık gibi duruyordu; ad zaten hemen altta.
   Derin kategorilerde satır yatay kayar, kaydırma çubuğu gizli. */
@media (max-width:640px){
  .crumbs{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;padding:10px 0 6px;scrollbar-width:none;-ms-overflow-style:none}
  .crumbs::-webkit-scrollbar{display:none}
  .crumbs a,.crumbs__sep{flex:none}
  .crumbs [aria-current],.crumbs__sep:has(+[aria-current]){display:none}
}
.collection-page{padding-top:4px}
.collection-head{padding:8px 0 14px}
.collection-head__inner{display:grid;gap:6px}
.collection-head__title{font-size:clamp(22px,2.6vw,30px);line-height:1.15;letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.collection-head__count{font-family:var(--font);font-size:14px;font-weight:400;letter-spacing:0;color:var(--ink-4)}
.collection-head__desc{color:var(--ink-3);font-size:14px;line-height:1.55}
.collection-head__desc .rte{color:inherit;font-size:inherit;line-height:inherit}
.collection-head__desc .rte p:last-child{margin-bottom:0}
/* Kırpma: JS `is-clamped` verir, "Devamını gör" `is-open` ile açar. JS yoksa metin tam görünür. */
[data-clamp].is-clamped:not(.is-open) .clamp__body{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.clamp__toggle{display:inline-block;margin-top:4px;padding:0;border:0;background:none;font:inherit;font-weight:600;font-size:13px;
  color:var(--primary-strong);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.collection-head--banner .clamp__toggle{color:#fff}
.collection-head--banner{position:relative;overflow:hidden;background-size:cover;background-position:center;
  border-radius:var(--r-lg);padding:clamp(26px,3.4vw,48px) clamp(20px,3vw,36px);color:#fff;margin-bottom:14px}
.collection-head--banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,24,40,.72),rgba(16,24,40,.25))}
.collection-head--banner .collection-head__inner{position:relative}
.collection-head--banner .collection-head__desc{color:rgba(255,255,255,.86)}
.collection-head__logo{height:44px;width:auto;margin-bottom:10px}
/* Bağlantı hapı (arama boş durumundaki kısayollar). Kategori sayfasındaki yatay
   alt kategori şeridi kaldırıldı: o liste artık soldaki süzgeç rafının ilk bölümü. */
.subcat{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:38px;padding:0 14px;border:0;border-radius:var(--r-pill);background:var(--bg);text-decoration:none;font-size:13px;font-weight:500;color:var(--ink);transition:background var(--t),color var(--t)}
.subcat:hover{background:var(--ink);color:#fff}
/* Araç çubuğu: yalnız alt çizgi. Yapışkan DEĞİL — kaydırırken ekranın üstünü
   başlıkla birlikte iki şerit kaplıyordu; sıralama her zaman görünmesi gereken bir
   denetim değil. Sıralama tek başına kalınca sağda durur (margin-left:auto). */
/* Sıralama: ızgaranın SAĞ ÜSTÜNDE, çubuk değil.
   Eskiden kaba tam genişlikte bir satırdı (alt çizgisi rafın da üstünden geçiyordu) ve
   çoğu zaman içinde tek bir açılır liste olurdu. Artık `.collection-layout__main`
   içinde duruyor: sağ kenarı ızgarayla hizalı, ayrı bir bant açmıyor. */
.toolbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:0;margin-bottom:12px;border:0;flex-wrap:wrap}
.toolbar__count{font-size:14px;color:var(--ink-3);font-weight:600}
.toolbar__sort{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:14px;color:var(--ink-3)}
/* Yerel `select` her zaman EN UZUN seçeneği kadar geniştir: ok, seçili değerden kopup
   satırın ucunda kalıyordu. Seçili değeri metin olarak yazıp `select`'i saydam biçimde
   üstüne seriyoruz — genişlik görünen metne oturur, açılır liste yine yerel kalır.
   Değer sunucudan gelir (form değişince gönderiliyor), ayrıca JS gerekmez. */
/* Hızlı süzgeç çipleri: listenin üstünde, en sık kullanılan üç daraltma.
   Yalnız gerçekten uygulanan süzgeçlerden üretilir (bkz. ProductFilters::quick). */
.quickfilters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-right:auto;min-width:0}
/* Aramada solda sonuç sayısı var: çipler onun yanından başlar, sayacı itmez */
.toolbar__count + .quickfilters{margin-left:4px}
.quickfilter{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  transition:border-color var(--t),background var(--t),color var(--t)}
.quickfilter .icon{width:15px;height:15px;color:var(--ink-4);flex:none}
.quickfilter:hover{border-color:var(--ink-4);color:var(--ink)}
.quickfilter--on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,#fff);color:var(--primary-strong)}
.quickfilter--on .icon{color:var(--primary-strong)}
/* Sıralama: referanstaki gibi çerçeveli hap — çip satırının sağ ucundaki ikizi */
.toolbar__sort{border:1px solid var(--line);border-radius:999px;padding:0 13px;min-height:36px;background:var(--surface)}
.toolbar__select{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;padding-right:18px;border-radius:var(--r-sm)}
.toolbar__select::after{content:"";position:absolute;right:2px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center}
.toolbar__value{font-family:var(--fh);font-weight:500;font-size:14px;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.toolbar__select select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font:inherit;border:0;padding:0}
.toolbar__select:focus-within{box-shadow:var(--ring)}
.pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin:28px 0 8px}
.pagination__pages{display:flex;gap:4px}
.pagination__pages a,.pagination__pages span{min-width:38px;height:38px;display:grid;place-items:center;
  border-radius:var(--r-sm);text-decoration:none;font-weight:600;font-size:14px;border:1px solid transparent}
.pagination__pages a:hover{background:var(--surface);border-color:var(--line)}
.pagination__pages .is-current{background:var(--ink);color:#fff}
.pagination__btn{font-weight:600;text-decoration:none;padding:0 14px;min-height:38px;display:inline-flex;align-items:center;
  border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);font-size:14px}
.pagination__btn:hover{border-color:var(--ink)}
.empty-state{display:grid;justify-items:center;gap:10px;text-align:center;padding:clamp(28px,3.4vw,44px) 20px;
  border:0;background:none;color:var(--ink-3);font-size:14px}
.empty-state h2{font-size:20px;color:var(--ink)}
.empty-state .icon{width:26px;height:26px;color:var(--ink-4)}
.empty-state--sm{padding:26px 0;border:0;background:none}
.empty-state--sm .icon{width:30px;height:30px;margin:0 auto 8px}
.empty-state--404 .empty-state__code{font-size:88px;font-weight:500;line-height:1;color:var(--primary-strong);letter-spacing:-.05em}
.empty-state__links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
/* 404 önerileri: adresten türetilen aramanın ürün kartları + kategori/marka ve popüler arama çipleri */
.empty-state--404 .search-form{width:min(100%,520px)}
.chip--soft{border-style:dashed;color:var(--ink-3)}
.nf-suggest{margin-top:8px;padding-top:28px;border-top:1px solid var(--line)}
/* Ödeme adımı: hediye paketi seçeneği (onay kutusu + açılan not alanı) */
.ck-gift{display:grid;gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.ck-gift .field{margin:0}
/* Birim fiyat etiketi (₺/kg): fiyatın altında sönük, küçük */
.price__unit{display:block;flex-basis:100%;font-size:12px;font-weight:400;color:var(--ink-3);letter-spacing:0}
/* Süzgeç rafı: renk yongaları (nitelik tipi "swatch") — kutu gizli, seçili halka */
.filters__swatches{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0}
.filters__swatch{position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--ink-2)}
.filters__swatch input{position:absolute;opacity:0;width:1px;height:1px}
.filters__dot{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);box-shadow:inset 0 0 0 2px #fff;display:inline-grid;place-items:center;font-size:9px;font-weight:600;color:var(--ink-2);text-transform:uppercase;background:var(--surface-2)}
.filters__swatch input:checked + .filters__dot{outline:2px solid var(--ink);outline-offset:2px}
.filters__swatch input:focus-visible + .filters__dot{outline:2px solid var(--primary-strong);outline-offset:2px}
.filters__swatch-label{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .15s}
/* Sepet: hediye ürün ipucu (kampanya koşulu sağlandı, ürün sepette değil) */
.cart-gift{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;margin:8px 0;border:1px dashed var(--line-2);border-radius:var(--r-sm);font-size:13px;color:var(--ink-2)}
.cart-gift .icon{width:16px;height:16px;color:var(--ok,#2e8b57);flex:none;margin-top:2px}
.cart-gift a{text-decoration:underline}
/* Sepet: fiyat/stok değişim uyarısı (tazelemede bir kez görünür) */
.cart-notice{padding:10px 12px;margin:8px 0;border-radius:var(--r-sm);background:#fff7e6;border:1px solid #f2d9a6;font-size:13px;color:var(--ink-2)}
.cart-notice p{margin:0}.cart-notice p+p{margin-top:4px}
/* Ödeme özeti: rezervasyon geri sayımı */
.ck-hold{margin:0 0 10px;padding:8px 10px;border-radius:var(--r-sm);background:#eef6ee;color:#1e5c34;font-size:12px}
.ck-hold [data-hold-out]{font-variant-numeric:tabular-nums;font-weight:600}
.filters__swatch:hover .filters__swatch-label,.filters__swatch input:checked ~ .filters__swatch-label{max-width:120px}
.collection-bottom{margin-top:28px;max-width:80ch;color:var(--ink-2);font-size:14px}
/* Kategori alt SEO alanı: editör metni, veri özeti, bağlantı rafları (çip), SSS akordeonu.
   Izgaradan ince çizgiyle ayrılır; tam genişlik — başlık/açıklama alanıyla aynı kural. */
.cseo{margin-top:36px;padding-top:28px;border-top:1px solid var(--line);display:grid;gap:26px}
.cseo__text{color:var(--ink-2);font-size:14px}
.cseo__text h2{font-size:clamp(17px,1.8vw,21px);margin:1.2em 0 .4em}
.cseo__text h2:first-child,.cseo__text h3:first-child{margin-top:0}
.cseo__summary{margin:0;font-size:14px;line-height:1.65;color:var(--ink-3)}
.cseo__summary a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cseo__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px 28px;align-items:start}
.cseo__h{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0 0 10px;color:var(--ink)}
.cseo__h--lg{font-size:clamp(17px,1.8vw,21px);letter-spacing:-.02em;margin-bottom:14px}
.cseo__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.cseo__list a{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border:1px solid var(--line);border-radius:999px;
  font-size:13px;color:var(--ink-2);text-decoration:none;background:var(--surface)}
.cseo__list a:hover{border-color:var(--ink-4);color:var(--ink)}
.cseo__list--lines{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 24px}
.cseo__list--lines a{display:block;min-height:0;padding:5px 0;border:0;border-radius:0;background:none;font-size:14px;color:var(--ink-2)}
.cseo__list--lines a:hover{color:var(--primary-strong);text-decoration:underline;text-underline-offset:3px}
.cseo__faq .blk--faq{margin:0}
.search-page{padding-bottom:40px}
.search-head{padding:16px 0 10px;display:grid;gap:6px}
/* Düzeltme / öneri notu: başlığın altında tek satır, gövde tonunda; öneri bağlantısı marka renginde. */
.search-note{font-size:15px;color:var(--ink-3);margin:0}
.search-note__link{color:var(--primary-strong);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.search-note__link:hover{color:var(--ink)}
.empty-state__group{display:grid;justify-items:center;gap:8px;margin-top:6px}
.empty-state__links .subcat .icon{width:14px;height:14px;color:var(--ink-4)}
.empty-state__links .subcat:hover .icon{color:#fff}
.search-form{display:flex;gap:8px;margin-top:12px;max-width:640px}
.search-form input{flex:1;height:48px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 16px;
  background:var(--surface);font-size:16px;outline:0}
.search-form input:focus{border-color:var(--primary);box-shadow:var(--ring)}
.search-form .btn{padding:0 24px}
.empty-state .search-form{width:100%;justify-content:center}

/* --------------------------------------------------------------------- süzgeçler */
.collection-layout{display:block}
.collection-layout--filtered{display:grid;grid-template-columns:248px minmax(0,1fr);gap:16px;align-items:start}
/* Raf yapışmaz ve kendi içinde kaymaz: sayfayla birlikte akar, tamamı görünür. */
.collection-layout__rail{align-self:start;min-width:0}
.collection-layout__main{min-width:0}
.filters{display:block}
.filters__panel{background:none;border:0;border-radius:0;overflow:visible}
.filters__toggle{display:none;align-items:center;gap:8px;padding:12px 14px;font-weight:700;cursor:pointer;list-style:none;min-height:46px}
.filters__toggle::-webkit-details-marker{display:none}
.filters__toggle svg{width:18px;height:18px}
.filters__badge{margin-left:auto;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;background:var(--primary);color:#fff;font-size:12px;font-weight:700}
.filters__body{padding:2px 0}

/* --- başlık grubu: her bölüm kendi <details>'i, sağında dönen ok ---------- */
.filters__group{border:0;border-top:1px solid var(--line);margin:0;padding:0}
.filters__group:first-child{border-top:0}
.filters__legend{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 0 10px;font-family:var(--fh);font-size:14px;font-weight:600;color:var(--ink);
  cursor:pointer;list-style:none;user-select:none}
.filters__legend::-webkit-details-marker{display:none}
/* Ok CSS ile çizilir: her başlığa ikon basmak yerine tek kural, dönüşü de burada */
.filters__legend::after{content:"";width:9px;height:9px;flex:none;margin-right:2px;
  border-right:1.8px solid var(--ink-4);border-bottom:1.8px solid var(--ink-4);
  transform:rotate(-135deg) translate(-2px,-2px);transition:transform var(--t)}
.filters__group[open] > .filters__legend::after{transform:rotate(45deg) translate(-1px,-1px)}
.filters__legend:hover::after{border-color:var(--ink)}
.filters__groupbody{border:0;margin:0;padding:0 0 14px;min-width:0}

/* --- marka arama: listeyi yerinde süzer -------------------------------- */
.filters__search{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.filters__search .icon{width:15px;height:15px;color:var(--ink-4);flex:none}
.filters__search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:13px;color:var(--ink);outline:0}
.filters__search:focus-within{border-color:var(--primary);box-shadow:var(--ring)}
.filters__empty{margin:2px 0 0;font-size:13px;color:var(--ink-4)}

/* Grup listeleri kaydırılmaz: kategori/marka/nitelik seçenekleri tam uzunlukta görünür. */
.filters__scroll{display:block}

/* --- bulunulan kategori: işaretli ve koyu ------------------------------- */
.filters__current{display:flex;align-items:center;gap:8px;padding:4px 0 8px;font-size:14px;font-weight:600;color:var(--ink)}
.filters__current .icon{width:16px;height:16px;flex:none;color:var(--primary-strong)}
.filters__navlink{display:flex;align-items:center;gap:9px;min-height:32px;padding:2px 0;font-size:14px;color:var(--ink-2);text-decoration:none}
.filters__navlink:hover{color:var(--primary-strong)}
.filters__navlink .filters__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

/* --- onay kutuları: kare, seçilince marka rengi dolgu ------------------- */
.filters__check{display:flex;align-items:center;gap:9px;min-height:34px;padding:2px 0;cursor:pointer;font-size:14px;color:var(--ink-2)}
.filters__check input{margin:0}
.filters__check:hover{color:var(--ink)}
.filters__check:has(input:checked){color:var(--ink);font-weight:600}
.filters__label{flex:1;min-width:0;display:flex;align-items:center;gap:5px}
.filters__label .stars{--star-size:13px}
.filters__count{flex:none;font-size:12px;color:var(--ink-4)}
.filters__range{display:flex;align-items:center;gap:8px}
.filters__range input{width:100%;min-width:0;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font:inherit;font-size:13px;color:var(--ink)}
.filters__range input:focus{outline:0;border-color:var(--primary);box-shadow:var(--ring)}
.filters__hint{margin:8px 0 0;font-size:12px;color:var(--ink-4)}
.filters__actions{display:flex;align-items:center;gap:12px;padding:14px 0 0;border-top:1px solid var(--line)}
.filters__clear,.activefilters__clear{font-size:13px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;min-height:24px;display:inline-flex;align-items:center}
.filters__clear:hover,.activefilters__clear:hover{color:var(--ink)}
.activefilters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px}
.activefilters__label{font-size:12px;color:var(--ink-4)}
.activefilters__chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border:1px solid var(--line-2);
  border-radius:999px;background:var(--surface);font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none}
.activefilters__chip svg{width:12px;height:12px}
.activefilters__chip:hover{border-color:var(--ink);color:var(--ink)}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;
  font-size:13px;font-weight:600;text-decoration:none;color:var(--ink-2);background:var(--surface)}
.chip--on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip-tag{display:inline-flex;align-items:center;min-height:28px;padding:0 11px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);text-decoration:none;font-size:12px;font-weight:600}
.segmented{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:3px;background:var(--surface)}
.segmented label{cursor:pointer}
.segmented input{position:absolute;opacity:0;width:0;height:0}
.segmented span{display:inline-block;padding:7px 14px;border-radius:6px;font-size:13px;font-weight:600}
.segmented input:checked+span{background:var(--ink);color:#fff}
.segmented input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}

/* ================================================================= ÜRÜN SAYFASI */
.product-page{padding-top:6px}
.product-page__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3vw,44px);
  align-items:start;padding-bottom:24px}
.gallery{position:sticky;top:calc(var(--header-h) + 12px);min-width:0}
.gallery__main{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--r-lg);background:#f7f8fa;border:0}
.gallery__slide{margin:0;position:absolute;inset:0;opacity:0;transition:opacity .2s}
.gallery__slide.is-active{opacity:1;z-index:1}
.gallery__slide img{width:100%;height:100%;object-fit:contain;background:var(--surface)}
.gallery__slide--empty .placeholder{width:100%;height:100%}
.gallery__main .badge{position:absolute;top:12px;left:12px;z-index:2}
.gallery__thumbs{display:flex;gap:8px;margin-top:8px;overflow:auto;padding-bottom:4px}
.gallery__thumb{width:66px;height:66px;flex:none;overflow:hidden;border-radius:var(--r-sm);background:var(--surface);
  border:1px solid var(--line);transition:border-color var(--t)}
.gallery__thumb.is-active{border-color:var(--primary);box-shadow:var(--ring)}
.gallery__thumb img{width:100%;height:100%;object-fit:cover}
.product-info{display:flex;flex-direction:column;gap:11px}
.product-info__vendor{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-strong);text-decoration:none}
/* Marka satırı kapalıyken başlık aynı yükseklikte kalsın: satırın yerini boşluk tutar */
.product-info__title:first-child{margin-top:31px}
.product-info__title{font-size:clamp(19px,2vw,23px);line-height:1.32;letter-spacing:-.012em;font-weight:600;text-wrap:balance}
.product-info__meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;align-items:center;color:var(--ink-3)}
.product-info__price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:2px}
.product-info__short{font-size:15px;color:var(--ink-2);line-height:1.6}
.rating{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--ink-2)}
.rating .icon,.stars .icon{color:#f0a500}
.pdp-off{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:5px;background:var(--sale);
  color:#fff;font-size:12px;font-weight:700}
.pdp-fav{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface);font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;
  transition:border-color var(--t),color var(--t)}
.pdp-fav:hover{border-color:var(--ink-4);color:var(--ink)}
.pdp-fav.is-on{color:var(--sale);border-color:color-mix(in srgb,var(--sale) 40%,transparent)}
.pdp-fav.is-on .icon{fill:currentColor}
.pdp-fav .icon{width:16px;height:16px}
.pdp-fav[data-cmp]{margin-left:6px}
.pdp-fav[data-cmp].is-on{color:var(--primary-strong);border-color:color-mix(in srgb,var(--primary) 45%,transparent)}
/* Satın alma kutusu */
.product-form{display:flex;flex-direction:column;gap:14px;padding:0;background:none;border:0}
.opt{border:0;padding:0;margin:0}
.opt__label{font-weight:600;font-size:13px;margin-bottom:7px;padding:0;color:var(--ink-2)}
.opt__values{display:flex;flex-wrap:wrap;gap:7px}
.opt__value input{position:absolute;opacity:0;width:0;height:0}
.opt__value span{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:42px;padding:0 14px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);font-weight:600;font-size:14px;cursor:pointer;background:var(--surface);
  transition:border-color var(--t),background var(--t),color var(--t)}
.opt__value input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.opt__value input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
.opt__value--unavailable span{opacity:.45;text-decoration:line-through}
.opt__value--swatch span{width:38px;height:38px;min-width:0;padding:0;border-radius:50%;background:var(--swatch);
  border:2px solid #fff;box-shadow:0 0 0 1px var(--line-2)}
.opt__value--swatch input:checked+span{background:var(--swatch);border-color:#fff;box-shadow:0 0 0 2px var(--ink)}
.product-form__row{display:flex;gap:8px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);height:50px;
  overflow:hidden;background:var(--surface);flex:none}
.qty button{width:44px;height:100%;font-size:19px;color:var(--ink-2)}
.qty button:hover{background:var(--bg)}
.qty input{width:48px;height:100%;border:0;text-align:center;font-weight:700;font-size:15px;background:transparent;outline:0;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.qty--sm{height:34px}.qty--sm button{width:30px;font-size:15px}
.qty--sm span{width:30px;text-align:center;font-weight:700;font-size:14px}
.product-form__submit{flex:1;min-height:48px;font-size:16px}
.pdp-assure{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pdp-assure div{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;font-size:12px;
  color:var(--ink-3);line-height:1.35;padding:11px 6px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.pdp-assure .icon{width:18px;height:18px;color:var(--ink-2)}
.pdp-assure strong{color:var(--ink);font-size:12px;font-weight:700}
.accordion{margin-top:4px}
/* Yalnız üst düzey paneller (`>`): panel içindeki başka <details> (yorum formu) bu biçimi almaz */
.accordion>details{border-top:1px solid var(--line)}
.accordion>details:last-child{border-bottom:1px solid var(--line)}
.accordion>details>summary{padding:15px 0;font-weight:700;font-size:15px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;min-height:46px}
.accordion>details>summary::-webkit-details-marker{display:none}
.accordion>details>summary::after{content:"+";font-size:20px;color:var(--ink-3);transition:transform var(--t)}
.accordion>details[open]>summary::after{transform:rotate(45deg)}
.accordion .rte,.accordion .specs{padding:0 0 16px}
.rte{color:var(--ink-2);line-height:1.68;font-size:15px}
.rte p{margin:0 0 11px}
.rte ul,.rte ol{padding-left:20px;margin:0 0 11px}
.rte ul li,.rte ol li{margin:.3em 0}
.rte h2{font-size:clamp(19px,2vw,24px);letter-spacing:-.025em;margin:1.4em 0 .4em;color:var(--ink)}
.rte h3{font-size:17px;letter-spacing:-.02em;margin:1.2em 0 .4em;color:var(--ink)}
.rte img{border-radius:var(--r-sm)}
.rte table{border-collapse:collapse;width:100%}
.rte td,.rte th{border:1px solid var(--line);padding:8px 10px;text-align:left}
.rte th{background:var(--bg-2,#f6f4f0);font-weight:600}
.rte dt{font-weight:600;margin-top:.6em}.rte dd{margin:.15em 0 0 1.25em}
/* Zengin metin tabloları dar ekranda yatay kaydırılır; contain:inline-size tablo içeriğinin min-content genişliğini atalara
   (ve mobil düzen görünümüne) taşımasını engeller — aksi hâlde 5 sütunlu tablo sayfayı 390 px'in üstüne genişletiyordu. */
@media (max-width:900px){.rte table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;contain:inline-size}.rte td,.rte th{min-width:8.5em}.rte th{white-space:nowrap}}
.rte h4{font-size:15.5px;margin:1.1em 0 .35em;color:var(--ink)}
.rte blockquote{margin:14px 0;padding:6px 18px;border-left:3px solid var(--line);color:var(--ink-3)}
.rte hr{border:0;border-top:1px solid var(--line);margin:22px 0}
/* Editörden gelen görsel/video blokları: hizalama data-align, genişlik style ile gelir */
.rte figure{margin:18px 0;max-width:100%}
.rte figure[data-align=center]{margin-inline:auto}
.rte figure[data-align=left]{float:left;margin:4px 20px 10px 0;max-width:50%}
.rte figure[data-align=right]{float:right;margin:4px 0 10px 20px;max-width:50%}
.rte figure img{display:block;width:100%;height:auto}
.rte figure.is-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-sm);background:#000}
.rte figcaption{font-size:12.5px;color:var(--ink-3);text-align:center;padding:6px 4px 0}
.rte::after{content:"";display:block;clear:both}
@media (max-width:640px){.rte figure[data-align=left],.rte figure[data-align=right]{float:none;margin:14px auto;max-width:100%}}
.specs{width:100%;border-collapse:collapse;font-size:14px}
.specs th{text-align:left;font-weight:400;color:var(--ink-2);padding:9px 0;width:44%;vertical-align:top}
.specs td{padding:9px 0;border-bottom:1px solid var(--line);font-weight:500;color:var(--ink)}
.specs tr:last-child td,.specs tr:last-child th{border-bottom:0}
.inst__table{width:100%;border-collapse:collapse;font-size:14px}
.inst__table th,.inst__table td{padding:7px 0;text-align:right;border-top:1px solid var(--line)}
.inst__table thead th{padding-top:0;border-top:0;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4)}
.inst__table th:first-child,.inst__table td:first-child{text-align:left}
.inst__table tbody th{font-weight:700;color:var(--ink)}
.inst__extra{color:var(--ink-4);font-size:12px;white-space:nowrap}
.inst__free{color:var(--ok-text);font-size:12px;font-weight:600;white-space:nowrap}
.inst__note{margin:9px 0 0;font-size:12px;color:var(--ink-4)}
/* Kart ailesi logoları: assets/cards/*.png tek tuvale normalize (3:1, tools/card-logos/build.py) → her logo aynı
   kutuda, aynı görsel ağırlıkta. Sekmeler (ödeme adımı): eşit genişlikte düğmeler, seçili olan renkli + koyu çerçeve. */
.inst__brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin:0 0 14px}
.inst__brand{display:flex;align-items:center;justify-content:center;height:44px;padding:0 10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;color:var(--ink-3);font:inherit;font-size:13px;font-weight:600;filter:grayscale(1);opacity:.6;transition:border-color .12s,opacity .12s,filter .12s}
.inst__brand img{display:block;width:96px;height:32px;object-fit:contain}
.inst__brand:hover{opacity:.9}
.inst__brand.is-active{border-color:var(--ink);filter:none;opacity:1}
.inst__brand:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.inst__pane[hidden]{display:none}
.inst--tabs .inst__table tbody tr:first-child th,.inst--tabs .inst__table tbody tr:first-child td,
.inst--grid .inst__table tbody tr:first-child th,.inst--grid .inst__table tbody tr:first-child td{color:var(--ink-3)}
.inst--tabs .inst__table tbody tr:first-child th,.inst--grid .inst__table tbody tr:first-child th{font-weight:600}
/* Ürün sayfası: tüm aileler ızgarada, sekme yok — her kart logo başlığı + kendi tablosu (2 sütun, darda 1) */
.inst__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px}
.inst__card{min-width:0;padding:14px 16px 8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.inst__card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.inst__logo{display:block;width:111px;height:37px;flex:none}
.inst__logo img{display:block;width:100%;height:100%;object-fit:contain}
.inst__logo-text{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:37px;white-space:nowrap}
.inst__max{font-size:12px;color:var(--ink-4);white-space:nowrap}
.inst--grid .inst__table{max-width:none;font-size:13.5px}
.inst--grid .inst__table th,.inst--grid .inst__table td{padding:6px 0 6px 12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.inst--grid .inst__table th:first-child,.inst--grid .inst__table td:first-child{padding-left:0}
.inst--grid .inst__table thead th{font-size:11px}
.inst--grid .inst__table td:last-child{font-size:12.5px}
.inst--grid .inst__table td:last-child .inst__extra,.inst--grid .inst__table td:last-child .inst__free{font-size:inherit}
.inst--grid .inst__note{margin-top:14px}
/* PayTR hazır taksit tablosu: PayTR'nin yazdığı .taksit-* işaretlemesi .inst__card görünümüne getirilir */
.inst__paytr{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.inst__loading{grid-column:1/-1;margin:0;font-size:13px;color:var(--ink-4)}
.inst__paytr .taksit-tablosu-wrapper{min-width:0;padding:14px 16px 10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);font-size:13.5px}
.inst__paytr .taksit-logo{display:flex;align-items:center;height:37px;margin-bottom:10px;padding-bottom:12px;border-bottom:1px solid var(--line);box-sizing:content-box}
.inst__paytr .taksit-logo img{display:block;max-width:111px;max-height:30px;object-fit:contain}
.inst__paytr .taksit-baslik,.inst__paytr .taksit-tutar-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inst__paytr .taksit-tutari-text{padding-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4)}
.inst__paytr .taksit-tutari{padding:6px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.inst__paytr .taksit-tutari:first-child{font-weight:700;color:var(--ink)}
.inst__paytr .taksit-tutari-text:last-child,.inst__paytr .taksit-tutari:last-child{text-align:right}
.inst__paytr .taksit-tutari-bold{font-weight:700}
/* Ödeme adımı: seçili kart yönteminin altında sepet toplamına göre taksit */
.ck-inst{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ck-inst__title{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4)}
.ck-inst .inst__table{max-width:520px}
.option__detail .ck-inst p{display:block}
/* Kart formu (PayTR Direkt API): solda canlı kart görseli, sağda alanlar; altında taksit çipleri + radyo listesi */
.ck-card__top{display:grid;grid-template-columns:256px minmax(0,1fr);gap:16px 24px;align-items:center}
.ck-card__fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;min-width:0}
.ck-card__fields .field{margin:0}
.ck-card__fields .field:not(.field--half){grid-column:1 / -1}
.ck-card--page .ck-card__fields{max-width:520px}
/* Detay zemini gri (--bg): dolgulu alanlar kaybolur → kart alanları beyaz, ince çizgili */
.ck-card__fields .field input,.ck-card__fields .field select{background-color:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.ck-card__fields .field input:focus,.ck-card__fields .field select:focus{box-shadow:0 0 0 2px var(--ink)}
.ck-card__fields [data-cc=number]{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.ck-card__test{margin:8px 0 0;font-size:12px;color:var(--ink-4)}
/* Kart görseli: 1,586:1 (ISO 7810), mürekkep tonunda mat yüzey; CVV odağında Y ekseninde döner (is-flipped) */
.cc{width:100%;max-width:256px;aspect-ratio:1.586;perspective:1200px;flex:none;font-family:var(--fh);color:#fff}
.cc__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s var(--ease)}
.cc.is-flipped .cc__inner{transform:rotateY(180deg)}
.cc__face{position:absolute;inset:0;overflow:hidden;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(135deg,#3b3b3b 0%,#272727 52%,#1e1e1e 100%);box-shadow:0 14px 26px -16px rgba(16,24,40,.55),inset 0 0 0 1px rgba(255,255,255,.06)}
.cc__face::before{content:"";position:absolute;inset:0;background:radial-gradient(110% 90% at 100% 0%,rgba(255,255,255,.10),transparent 58%);pointer-events:none}
.cc__front{display:flex;flex-direction:column;justify-content:space-between;padding:17px 18px 15px}
.cc__row{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative}
.cc__row--foot{align-items:flex-end}
.cc__chip{width:34px;height:25px;border-radius:5px;flex:none;
  background:linear-gradient(135deg,#e9cf7d 0%,#c9a24a 45%,#e2c26a 100%);
  background-image:linear-gradient(#0000 0 44%,rgba(90,64,10,.35) 44% 48%,#0000 48% 62%,rgba(90,64,10,.35) 62% 66%,#0000 66%),linear-gradient(90deg,#0000 0 38%,rgba(90,64,10,.35) 38% 41%,#0000 41% 59%,rgba(90,64,10,.35) 59% 62%,#0000 62%),linear-gradient(135deg,#e9cf7d 0%,#c9a24a 45%,#e2c26a 100%)}
.cc__fam{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 7px;background:#fff;border-radius:5px}
.cc__fam img{display:block;width:66px;height:22px;object-fit:contain}
.cc__num{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:17px;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.cc__field{display:flex;flex-direction:column;gap:2px;min-width:0}
.cc__field--owner{flex:1}
.cc__label{font-size:8.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
.cc__val{font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Kart şeması: yazı/işaret CSS'le — logo dosyası yok. Boşken hiçbir şey basılmaz. */
.cc__scheme{flex:none;display:none;align-items:center;justify-content:flex-end;min-width:44px;height:26px;margin-left:6px}
.cc__scheme[data-cc-scheme=visa],.cc__scheme[data-cc-scheme=mastercard],.cc__scheme[data-cc-scheme=amex],.cc__scheme[data-cc-scheme=troy]{display:inline-flex}
.cc__scheme[data-cc-scheme=visa]::after{content:"VISA";font-family:var(--fh);font-weight:700;font-style:italic;font-size:17px;letter-spacing:-.02em;color:#fff}
.cc__scheme[data-cc-scheme=amex]::after{content:"AMEX";font-family:var(--fh);font-weight:700;font-size:13px;letter-spacing:.04em;color:#fff}
.cc__scheme[data-cc-scheme=troy]::after{content:"troy";font-family:var(--fh);font-weight:700;font-size:16px;letter-spacing:-.01em;color:#fff}
.cc__scheme[data-cc-scheme=mastercard]::before,.cc__scheme[data-cc-scheme=mastercard]::after{content:"";width:22px;height:22px;border-radius:50%}
.cc__scheme[data-cc-scheme=mastercard]::before{background:#eb001b}
.cc__scheme[data-cc-scheme=mastercard]::after{background:#f79e1b;margin-left:-8px;mix-blend-mode:screen;opacity:.95}
.cc__back{transform:rotateY(180deg);display:flex;flex-direction:column}
.cc__stripe{height:17%;margin-top:9%;background:#111}
.cc__sig{display:flex;align-items:center;justify-content:flex-end;height:30px;margin:9% 18px 0;padding:0 10px;border-radius:4px;
  background:repeating-linear-gradient(0deg,#f3f3f3 0 3px,#dedede 3px 4px)}
.cc__cvv{font-family:var(--mono);font-size:14px;font-style:italic;letter-spacing:.16em;color:#1a1a1a}
.cc__label--cvv{align-self:flex-end;margin:5px 28px 0;position:relative}
@media (prefers-reduced-motion:reduce){.cc__inner{transition:none}}
.ck-inst__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.ck-inst__head .ck-inst__title{margin:0}
/* Taksit çipleri: eşit kutular (logolar tek tuvalde), seçili renkli */
.ck-inst__brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;margin:0 0 10px}
.ck-inst__brand{display:flex;align-items:center;justify-content:center;height:36px;padding:0 8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;font:inherit;font-size:12px;color:var(--ink-3);filter:grayscale(1);opacity:.55;transition:opacity .12s,filter .12s,border-color .12s}
.ck-inst__brand img{display:block;width:72px;height:24px;object-fit:contain}
.ck-inst__brand:hover{opacity:.9}
.ck-inst__brand.is-active{filter:none;opacity:1;border-color:var(--ink)}
.ck-inst__list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.ck-inst__opt{display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;cursor:pointer;border-top:1px solid var(--line);font-size:14px}
.ck-inst__opt:first-child{border-top:0}
.ck-inst__opt.is-selected{background:var(--tint)}
.ck-inst__name{flex:1}
.ck-inst__name small{color:var(--ink-4);margin-left:6px}
.ck-inst__sum{font-variant-numeric:tabular-nums;font-weight:600}
.ck-card__note{margin-top:12px}
.ck-card--page{max-width:560px}
.ck-card--page .btn{margin-top:16px}
@media (max-width:640px){.ck-card__top{grid-template-columns:1fr}.cc{max-width:300px;margin:0 auto 4px}.ck-card__fields .field--half{grid-column:span 1}}
@media (max-width:640px){.inst__brands{grid-template-columns:repeat(3,1fr)}.inst__brand{height:42px;padding:0 8px}.inst__brand img{width:84px;height:28px}.inst__table{font-size:13px}.inst__extra,.inst__free{display:block;white-space:normal}.inst__grid{grid-template-columns:1fr}.inst__card{padding:12px 14px 6px}.inst--grid .inst__table{font-size:12.5px}.inst--grid .inst__table th,.inst--grid .inst__table td{padding-left:8px}.inst--grid .inst__extra,.inst--grid .inst__free{display:inline}}
/* Mobil yapışkan satın alma çubuğu */
.pdp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:12px;align-items:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -6px 20px -12px rgba(16,24,40,.35)}
.pdp-sticky__price{display:grid;line-height:1.2}
.pdp-sticky__price small{font-size:12px;color:var(--ink-3)}
.pdp-sticky .btn{flex:1;min-height:48px}
.reviews,.qa,.related{padding-block:clamp(24px,3vw,40px)}
.related .section__title,.reviews .section__title,.qa .section__title{font-size:clamp(19px,2.1vw,25px)}

/* ======================================================================== SEPET */
/* ---------- Sepet: bölünmüş düzen (ödeme sayfasıyla aynı aile) ----------
   Sol sütun beyaz satır listesi, sağ sütun sayfa zemininde (--page) yapışkan özet; ikisini tek
   dikey ayraç böler, özet zemini sağ kenara kadar uzar (.cart__summary::before). Kap ödemeyle
   aynı 1100 px: sepetten ödemeye geçerken özet yerinde kalır. Satırlar kutu değil, ayraçlı
   ("çerçeve yerine ayraç"); kupon katlanır satır; kart markası rozeti yok (logolar alt bilgide). */
body.template-cart,body.template-list-brands{background:var(--surface)}
.cart-page{overflow-x:clip} /* özet zemin uzantısı (50vw) yatay kaydırma yaratmasın; clip yapışkan özeti bozmaz */
body.template-cart .footer{margin-top:0}
.cart{width:min(1100px,100% - 40px);margin-inline:auto}
.cart__banner{padding-top:20px}
.cart__grid{display:grid;grid-template-columns:minmax(0,640px) minmax(320px,460px);align-items:stretch}
.cart__main{padding:28px 40px 56px 0;min-width:0}
.cart__summary{position:relative;background:var(--page);border-left:1px solid var(--line);padding:28px 0 56px 40px;min-width:0}
.cart__summary::before{content:"";position:absolute;top:0;bottom:0;left:100%;width:50vw;background:var(--page);pointer-events:none}
.cart-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}
.cart-head__title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:24px;letter-spacing:-.03em}
.cart-head__count{font-family:var(--font);font-size:14px;font-weight:400;letter-spacing:0;color:var(--ink-3)}
.cart-head__link{font-size:13px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;min-height:24px;display:inline-flex;align-items:center}
.cart-head__link:hover{color:var(--ink)}
.cart__curnote{font-size:12px;color:var(--ink-3);margin:0 0 8px}
.cart-lines{display:flex;flex-direction:column}
.cart-line{position:relative;display:grid;grid-template-columns:80px minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.cart-line:last-child{border-bottom:1px solid var(--line)}
.cart-line__img{width:80px;height:80px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.cart-line__img img{width:100%;height:100%;object-fit:cover}
.cart-line__title{font-size:15px;font-weight:500;line-height:1.4;color:var(--ink);text-decoration:none;display:block}
.cart-line__title:hover{text-decoration:underline;text-underline-offset:3px}
.cart-line__meta{color:var(--ink-3);font-size:13px;margin-top:2px}
.cart-line__meta--sku{font-size:12px;color:var(--ink-4)}
.cart-line__remove{display:inline-flex;align-items:center;gap:5px;margin-top:6px;min-height:24px;font-size:13px;color:var(--ink-3);transition:color var(--t)}
.cart-line__remove .icon{width:14px;height:14px}
.cart-line__remove:hover{color:var(--sale)}
.cart-line .qty{height:40px;border-color:var(--line)}
.cart-line .qty button{width:34px;font-size:17px}
.cart-line .qty input{width:38px;font-size:14px;font-weight:600}
.cart-line__price{font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--ink);text-align:right;min-width:96px;font-variant-numeric:tabular-nums}
.cart-line__unit{font-size:12px;font-weight:400;color:var(--ink-4);margin-top:2px}
/* Sipariş notu: katlanır ayraç satırı; açılınca alan --bg dolgulu (ödeme formu alanlarıyla aynı) */
.cart-note{border-bottom:1px solid var(--line)}
.cart-note summary{display:flex;align-items:center;gap:8px;min-height:48px;list-style:none;cursor:pointer;
  font-size:14px;font-weight:500;color:var(--ink-2);user-select:none}
.cart-note summary::-webkit-details-marker{display:none}
.cart-note summary .icon{width:14px;height:14px;color:var(--ink-4);transition:transform var(--t)}
.cart-note[open] summary .icon{transform:rotate(180deg)}
.cart-note textarea{display:block;width:100%;margin:0 0 16px;border:0;border-radius:var(--r);padding:10px 14px;
  background:var(--bg);resize:vertical;font:inherit;font-size:14px;outline:0;transition:background-color var(--t),box-shadow var(--t)}
.cart-note textarea:focus{background:#fff;box-shadow:0 0 0 2px var(--ink)}
/* Adet değişince satır kendiliğinden güncellenir; JS varken ayrıca düğme gerekmez */
.cart-actions{display:flex;justify-content:flex-end;margin-top:16px}
.js .cart-actions{display:none}
/* Dar ekranda alta yapışan toplam + "Ödemeye geç" (.pdp-sticky kabuğunu paylaşır) */
.cart-sticky__total strong{font-size:18px;font-weight:600;letter-spacing:-.025em;white-space:nowrap}
.cart-sticky .btn{flex:0 1 auto;min-width:56%;gap:6px}
.cart-sticky .btn .icon{width:16px;height:16px}
/* Özet: kutu değil; başlık → kargo çubuğu → kupon satırı → toplamlar → düğme → güven satırları, ayraçlı */
.cart-summary{position:sticky;top:calc(var(--header-h) + 16px)}
.cart-summary__title{font-size:20px;letter-spacing:-.03em;margin-bottom:14px}
.cart-summary .dealer-note{margin-bottom:12px}
.cart-summary .shipbar{padding:0 0 14px;background:none;border:0;border-radius:0;border-bottom:1px solid var(--line)}
.cart-summary .shipbar p{font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:8px}
.cart-summary .shipbar p .icon{color:var(--ink-4)}
.cart-summary .shipbar p.text-ok{color:var(--ok-text)}
.cart-summary .shipbar p.text-ok .icon{color:var(--ok)}
.cart-summary .shipbar__track{height:4px;background:var(--line)}
.cart-codes{border-bottom:1px solid var(--line)}
.cart-codes__head{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:46px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:500;color:var(--ink-2)}
.cart-codes__head::-webkit-details-marker{display:none}
.cart-codes__head .icon{width:16px;height:16px;color:var(--ink-4);transition:transform var(--t)}
.cart-codes[open] .cart-codes__head .icon{transform:rotate(180deg)}
.cart-codes__body{padding-bottom:16px}
.cart-codes .coupon{margin:0}
.cart-codes .coupon__form input{height:44px;background:var(--surface);border-color:var(--line);text-transform:none;font-size:14px}
.cart-codes .coupon__form input::placeholder{text-transform:none}
.cart-codes .coupon__form .btn{min-height:44px;padding:0 16px;font-size:14px}
.cart-codes .coupon__applied{background:transparent;padding:4px 0;border-radius:0}
.cart-totals{display:flex;flex-direction:column;gap:9px;padding-top:16px;font-size:14px;color:var(--ink-3)}
.cart-totals__row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.cart-totals__row>span:last-child,.cart-totals__row>strong{color:var(--ink);font-variant-numeric:tabular-nums}
.cart-totals__row.text-ok,.cart-totals__row.text-ok>span:last-child{color:var(--ok-text)}
.cart-totals__row--note>span:last-child{color:var(--ink-4);font-size:13px}
.cart-totals__row--total{font-size:15px;color:var(--ink);padding-top:12px;margin-top:4px;border-top:1px solid var(--line)}
.cart-totals__row--total strong{font-size:20px;font-weight:600;letter-spacing:-.03em}
.cart-summary__cta{margin-top:18px;min-height:52px;font-size:15px;gap:8px}
.cart-summary__cta .icon{width:18px;height:18px}
.cart-summary__assure{list-style:none;display:grid;gap:8px;margin:16px 0 0;padding:0;font-size:13px;color:var(--ink-3)}
.cart-summary__assure li{display:flex;align-items:center;gap:8px}
.cart-summary__assure .icon{width:16px;height:16px;color:var(--ink-4);flex:none}
.empty-state--cart{padding:64px 20px 72px}
.empty-state--cart h1{font-size:20px;color:var(--ink)}
/* ---------- Favoriler: sepetle aynı bölünmüş düzen ----------
   Satır: görsel · ad + not + kaldır · fiyat · eylem. Sepet satırından tek farkı adet seçicinin
   yerini "Sepete ekle"nin alması. İkinci satır tek bilgi taşır (stok yok / fiyat düştü), rozet
   yok. Özet: sayılar → tümünü ekle → misafir notu ya da paylaşım → güven satırları. */
body.template-wishlist{background:var(--surface)}
body.template-wishlist .footer{margin-top:0}
.wish-line--out .cart-line__img img{opacity:.5}
.wish-line--out .cart-line__title{color:var(--ink-3)}
.wish-line__note{display:flex;align-items:center;gap:5px;margin-top:3px}
.wish-line__note .icon{width:14px;height:14px;color:var(--ok)}
.wish-line__note--drop{color:var(--ok-text);font-weight:500}
.wish-line__price--sale{color:var(--sale)}
.wish-line__from{display:block;font-size:11px;font-weight:400;color:var(--ink-4);line-height:1.2}
.wish-line__act{display:flex;justify-content:flex-end;min-width:118px}
.wish-line__act .btn{min-height:38px;padding:0 16px}
.wish-totals{padding-top:0}
.wish-summary__note{font-size:12.5px;line-height:1.5;color:var(--ink-4);margin:10px 0 0}
.wish-summary__block{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.wish-summary__block p{font-size:13px;line-height:1.55;color:var(--ink-3);margin:0 0 12px}
.wish-share{margin-top:18px;border-top:1px solid var(--line)}
.wish-share .cart-codes__body{padding-top:0}
.wish-share .wish-summary__note{margin:0 0 10px}
.wish-share .coupon__form input{font-size:13px;color:var(--ink-3)}
.shipbar{padding:12px;border-radius:var(--r-sm);background:var(--tint);border:1px solid color-mix(in srgb,var(--primary) 22%,transparent)}
.shipbar p{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink-2)}
.shipbar p .icon{width:16px;height:16px;color:var(--primary-strong);flex:none}
.shipbar__track{height:6px;border-radius:999px;background:rgba(22,24,29,.1);overflow:hidden}
.shipbar__track span{display:block;height:100%;border-radius:999px;background:var(--primary);transition:width .4s}
.coupon{margin-bottom:10px}
.coupon__form{display:flex;gap:8px}
.coupon__form input{flex:1;min-width:0;height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 12px;
  background:var(--surface);font-size:14px;outline:0;text-transform:uppercase}
.coupon__form input:focus{border-color:var(--primary);box-shadow:var(--ring)}
.coupon__applied{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--ok) 9%,#fff);color:var(--ok-text);font-size:14px;font-weight:600}
.coupon__applied .icon{width:15px;height:15px}
.coupon .field__error{display:block;margin-top:6px}
.alert{padding:12px 14px;border-radius:var(--r-sm);font-weight:500;font-size:14px;margin:10px 0;display:flex;gap:10px;align-items:flex-start}
.alert svg{flex:none;margin-top:2px}
.alert--error{background:#fdecec;color:#9b1414;border:1px solid #f6cfcf}
.alert--info{background:var(--tint);color:var(--primary-strong);border:1px solid color-mix(in srgb,var(--primary) 24%,transparent)}
.alert--ok{background:#e8f6ee;color:#0f6b38;border:1px solid #c3e5d1}

/* ======================================================================= ÖDEME
   Bölünmüş düzen (hesap ekranlarıyla aynı aile): sol sütun beyaz form yüzeyi, sağ sütun
   sayfa zemininde (`--page`) yapışkan özet; ikisini tek dikey ayraç böler. Adımlar kutu
   değildir — ince ayraçla ayrılır; seçenek listeleri (adres/kargo/ödeme) tek çerçeveli grup
   içinde satır satır durur, seçili satır zemin alır, çerçeve değil ("çerçeve yerine ayraç").
   Üst bilgi: logo SOLDA, adım izi ortada, "Güvenli ödeme" SAĞDA; alt kenar gölge (mağaza
   başlığıyla aynı), en üstte 3 px marka çizgisi (duyuru şeridinin yankısı). */
body.template-checkout{background:var(--surface);display:flex;flex-direction:column;min-height:100vh}
.ck-wrap{width:min(1100px,100% - 32px);margin-inline:auto}
.ck-header{position:relative;z-index:5;background:var(--surface);border-top:3px solid var(--primary);box-shadow:0 6px 20px -10px rgba(16,24,40,.18)}
.ck-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.ck-header__logo{display:flex;align-items:center;flex:none;text-decoration:none}
.ck-header__logo img{height:32px;width:auto}
.ck-trail{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;font-size:13px;font-weight:500;color:var(--ink-4)}
.ck-trail li{display:flex;align-items:center;gap:6px}
.ck-trail li+li::before{content:"";width:5px;height:5px;border-top:1.5px solid var(--faint);border-right:1.5px solid var(--faint);transform:rotate(45deg);margin-right:4px}
.ck-trail a{color:var(--ink-2);text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.ck-trail a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ck-trail [aria-current]{color:var(--ink);font-weight:600}
.ck-header__secure{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.ck-header__secure .icon{width:20px;height:20px;color:var(--ok)}
.ck-main{flex:1;overflow-x:clip}
.ck-footer{border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.ck-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;min-height:56px;padding:12px 0}
.ck-footer__links{display:flex;gap:16px;flex-wrap:wrap}
.ck-footer__links a{color:inherit;text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.ck-footer__links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ck-footer__pay{height:20px;width:auto;filter:brightness(0);opacity:.55}
/* Izgara: 640 px form + 460 px özet = üst bilgiyle aynı 1100 px kap. Özet sütununun zemini
   ::before ile sağ kenara kadar uzar (`.ck-main` yatay taşmayı kırpar). */
.ck{width:min(1100px,100% - 32px);margin-inline:auto}
.ck__form,.ck--pay{display:grid;grid-template-columns:minmax(0,640px) minmax(320px,460px);align-items:stretch}
.ck__main{display:flex;flex-direction:column;padding:8px 48px 56px 0;min-width:0}
.ck__main>.alert,.ck__main>.dealer-note{margin:20px 0 0}
.ck-step{padding:28px 0;border-top:1px solid var(--line)}
.ck-step:first-of-type{border-top:0}
.ck-step__head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.ck-step__head h2{font-size:20px;flex:1;letter-spacing:-.03em;min-width:0}
.ck-step__no{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--fh);font-weight:500;font-size:13px;flex:none}
.ck-step__aside{font-size:13px;color:var(--ink-3)}
.ck-step__link{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;min-height:24px;display:inline-flex;align-items:center}
.ck-step__link:hover{color:var(--primary-strong)}
.ck-step .check{margin-top:12px}
.ck-sub{font-size:15px;font-weight:500;letter-spacing:-.02em;margin:0}
/* Seçenek grubu: tek çerçeve, satırlar ayraçla; seçili satır zemin alır. */
.options{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);overflow:hidden}
/* Boş durum kutu çizmez: grupta satır yoksa çerçeve kalkar (JS de düz <p> basar). */
.options:not(:has(.option)){border-color:transparent;border-radius:0}
.options__empty,.options>p{padding:0;font-size:14px;color:var(--ink-3);margin:0}
.option,.option__row{display:flex;gap:12px;align-items:center;padding:13px 16px;cursor:pointer;transition:background var(--t)}
.option{border-top:1px solid var(--line)}
.option:first-child{border-top:0}
.option:hover,.option__row:hover{background:var(--surface-2)}
.option:has(> input:checked),.option--stack.is-selected .option__row{background:var(--tint)}
.option input{margin:0}
.option__body{display:flex;flex-direction:column;gap:1px;font-size:14px;flex:1;min-width:0;color:var(--ink-3);line-height:1.45}
.option__body strong{font-weight:600;color:var(--ink)}
.option__tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-pill);background:var(--bg);color:var(--ink-4);font-size:11px;font-weight:600;vertical-align:1px}
.option__price{font-weight:600;color:var(--ink);white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;font-size:14px;line-height:1.3}
.option__price .text-ok{font-size:12px;font-weight:600}
.option--stack{flex-direction:column;align-items:stretch;padding:0;cursor:default}
.option--stack:hover{background:transparent}
.addr-option{align-items:flex-start}
.addr-option input{margin-top:2px}
.addr-list{margin-bottom:16px}
/* Yöntem ayrıntısı (IBAN, yönerge): kutu değil, seçili satırın altında yumuşak zemin. */
.option__detail{display:none;padding:14px 16px 16px 46px;font-size:14px;background:var(--bg);border-top:1px solid var(--line)}
.option--stack.is-selected .option__detail{display:block}
.option__detail:empty{display:none!important}
.option__detail>*+*{margin-top:10px}
.option__detail p{display:flex;gap:6px;align-items:flex-start}
.option__detail p .icon{width:15px;height:15px;margin-top:2px}
.accounts{display:flex;flex-direction:column}
.account{display:flex;flex-direction:column;gap:1px;padding:9px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3);line-height:1.45}
.account:first-child{border-top:0;padding-top:0}
.account strong{font-weight:600;color:var(--ink)}
.account code{margin-top:3px;font-family:var(--mono);font-size:13.5px;color:var(--ink-2);user-select:all}
.accounts>p{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.ck-invoice{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.ck-invoice__head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ck-invoice .fields{margin-bottom:4px}
.addr-billing{margin-top:16px}
.addr-billing__title{margin-bottom:10px}
.check--agree{padding:0;background:transparent;margin-top:16px}
.ck-submit{margin-top:18px;min-height:52px;gap:0;justify-content:space-between;padding:0 22px}
.ck-submit__total{font-family:var(--font);font-weight:600;font-variant-numeric:tabular-nums}
.ck-submit:disabled{justify-content:center}
.ck-legal{margin-top:12px;text-align:center;font-size:12px;color:var(--ink-3)}
.ck-legal a{color:inherit}
/* Özet sütunu: sayfa zemini, solda tek ayraç, içerik yapışkan. */
.ck__summary{position:relative;background:var(--page);border-left:1px solid var(--line);padding:32px 0 56px 40px;min-width:0}
.ck__summary::before{content:"";position:absolute;top:0;bottom:0;left:100%;width:50vw;background:var(--page);pointer-events:none}
.ck-summary{position:sticky;top:24px}
.ck-summary__head{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"title count total" "edit edit edit";align-items:center;column-gap:8px;list-style:none;cursor:default;pointer-events:none;margin-bottom:16px}
.ck-summary__head::-webkit-details-marker{display:none}
.ck-summary__head .icon{display:none}
.ck-summary__title{grid-area:title;font-family:var(--fh);font-size:20px;font-weight:500;letter-spacing:-.03em;color:var(--ink)}
.ck-summary__count{grid-area:count;color:var(--ink-3);font-size:13px}
.ck-summary__total{grid-area:total;display:none;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ck-summary__edit{grid-area:edit;justify-self:start;font-size:13px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;pointer-events:auto;min-height:24px;display:inline-flex;align-items:center}
.ck-summary__edit:hover{color:var(--ink)}
.ck-summary__edit--body{display:none}
.ck-lines{display:flex;flex-direction:column;max-height:380px;overflow:auto;padding-bottom:6px}
.ck-line{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;font-size:14px;padding:10px 0;border-top:1px solid var(--line)}
.ck-line:first-child{border-top:0;padding-top:0}
.ck-line__img{position:relative;width:56px;height:56px;border-radius:var(--r);overflow:visible;background:var(--surface);border:1px solid var(--line)}
.ck-line__img img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ck-line__qty{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--ink-4);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;z-index:1}
.ck-line__info{display:flex;flex-direction:column;gap:2px;min-width:0}
.ck-line__title{color:var(--ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ck-line__price{font-weight:600;color:var(--ink);white-space:nowrap}
/* Kod satırı: kupon + puan tek katlanır satırda. */
.ck-codes{border-top:1px solid var(--line)}
.ck-codes__head{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:46px;cursor:pointer;list-style:none;font-size:14px;font-weight:500;color:var(--ink-2)}
.ck-codes__head::-webkit-details-marker{display:none}
.ck-codes__head .icon{color:var(--ink-4);transition:transform var(--t)}
.ck-codes[open] .ck-codes__head .icon{transform:rotate(180deg)}
.ck-codes__body{display:flex;flex-direction:column;gap:10px;padding-bottom:16px}
.ck-codes .coupon{margin:0}
.ck-codes .coupon__form{gap:8px}
.ck-codes .coupon__form input{height:44px;background:var(--surface);border-color:var(--line-2);text-transform:none;font-size:14px}
.ck-codes .coupon__form input::placeholder{text-transform:none}
.ck-codes .coupon__form .btn{min-height:44px;padding:0 16px;font-size:14px}
.ck-codes .coupon__applied{background:transparent;padding:6px 0;border-radius:0}
.ck-codes .points__row{margin:0;color:var(--ink-3)}
.ck-totals{display:flex;flex-direction:column;gap:9px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.ck-totals__row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.ck-totals__row>span:last-child,.ck-totals__row>strong{color:var(--ink)}
.ck-totals__row .text-ok{color:var(--ok-text)}
.ck-totals__row--total{font-size:15px;color:var(--ink);padding-top:12px;margin-top:4px;border-top:1px solid var(--line)}
.ck-totals__row--total strong{font-size:20px;font-weight:600;letter-spacing:-.03em}
/* Kart ödeme / taslak ödeme aynı düzeni kullanır; başlığın yanındaki numara olmayınca boşluk artmasın. */
.ck--pay .ck-summary__total{display:block;justify-self:end}
.ck--pay .ck-summary__head>span:not([class]){font-family:var(--fh);font-size:20px;font-weight:500;letter-spacing:-.03em;color:var(--ink)}

/* ================================================================ SİPARİŞ/HESAP */
.order-page,.account-page{padding:var(--page-top) 0 44px}
.order-page__inner{display:grid;grid-template-columns:228px minmax(0,1fr);gap:16px;align-items:start}
.order-page__inner:not(:has(.acc-nav)){grid-template-columns:minmax(0,1fr);max-width:920px}
.order-page__body{display:flex;flex-direction:column;gap:12px;min-width:0}
.order-hero{display:flex;gap:16px;align-items:center;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.order-hero h1{font-size:clamp(21px,2.4vw,28px);letter-spacing:-.03em}
.order-hero p{margin-top:5px;color:var(--ink-2);font-size:14px}
.order-hero__check{width:48px;height:48px;border-radius:50%;background:#e8f6ee;color:var(--ok);display:grid;place-items:center;flex:none}
.order-hero__check .icon{width:26px;height:26px}
.order-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.order-head h1{font-size:clamp(22px,2.6vw,30px);line-height:1.15;letter-spacing:-.03em}
.order-head > div > .muted{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px}
/* Durum: renk tek başına anlam taşımaz — her rozet yazıyla da söyler */
.status,.badge--status{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;
  background:var(--bg);color:var(--ink-2);border:1px solid var(--line)}
.status--confirmed,.status--processing{background:#e8f0fb;color:#12559c;border-color:#cfe0f5}
.status--shipped{background:#fff2e2;color:#8a4300;border-color:#f6ddbe}
.status--delivered,.status--completed{background:#e8f6ee;color:#0f6b38;border-color:#c3e5d1}
.status--cancelled,.status--refunded,.status--failed{background:#fdecec;color:#9b1414;border-color:#f6cfcf}
.status--pending{background:#fff8dd;color:#6f5200;border-color:#f0e2ad}
.badge--open{background:var(--tint);color:var(--primary-strong);border:1px solid color-mix(in srgb,var(--primary) 24%,transparent)}
.badge--pending{background:#fff8dd;color:#6f5200}
.badge--resolved{background:#e8f6ee;color:#0f6b38}
.badge--closed{background:var(--bg);color:var(--ink-3)}
.stock-pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;background:#e8f6ee;color:#0f6b38}
.stock-pill--az{background:#fff8dd;color:#6f5200}
.stock-pill--tukendi{background:#fdecec;color:#9b1414}
.stock-pill--on-siparis{background:#e8f0fb;color:#12559c}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.steps li{position:relative;text-align:center;font-size:12px;font-weight:600;color:var(--ink-4);padding-top:34px}
.steps li span{position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;
  background:var(--line);color:var(--ink-3);display:grid;place-items:center;font-size:12px;z-index:1}
.steps li::before{content:"";position:absolute;top:13px;left:-50%;right:50%;height:2px;background:var(--line)}
.steps li:first-child::before{display:none}
.steps li.is-done{color:var(--ink)}
.steps li.is-done span{background:var(--primary);color:var(--primary-ink)}
.steps li.is-done::before{background:var(--primary)}
.card-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.card-box h3{font-size:15px;letter-spacing:-.02em;margin-bottom:9px}
.card-box p{color:var(--ink-2);line-height:1.55;font-size:14px}
.card-box--accent{border-color:var(--primary);background:var(--tint)}
.card-box--cta{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.order-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(230px,.8fr);gap:12px;align-items:start}
.order-side{display:flex;flex-direction:column;gap:10px}
.order-side .card-box{padding:13px 15px}
.order-side .card-box h3{font-size:14px;margin-bottom:6px}
.order-side p{font-size:14px}
.order-lines{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.order-line{display:grid;grid-template-columns:58px 1fr auto;gap:11px;align-items:center;font-size:14px}
.order-line__img{width:58px;height:58px;border-radius:var(--r-sm);overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.order-line__img img{width:100%;height:100%;object-fit:cover}
.order-line__info{display:flex;flex-direction:column;gap:2px}
.order-line__info a{font-weight:600;text-decoration:none}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.timeline li{display:grid;grid-template-columns:126px 1fr;gap:12px;padding-left:13px;border-left:2px solid var(--line)}
.timeline--ship{margin:10px 0 12px}
.acc-nav{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:8px;position:sticky;top:calc(var(--header-h) + 12px)}
.acc-nav__user{display:flex;flex-direction:column;padding:8px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:5px}
.acc-nav a,.acc-nav__logout{padding:9px 11px;border-radius:var(--r-sm);text-decoration:none;font-weight:600;font-size:14px;
  text-align:left;width:100%;min-height:24px;display:flex;align-items:center;gap:8px;transition:background var(--t),color var(--t)}
.acc-nav a:hover{background:var(--bg)}
.acc-nav a.is-active{background:var(--ink);color:#fff}
.acc-nav__logout{color:var(--ink-3)}
.acc-nav form{margin-top:5px;border-top:1px solid var(--line);padding-top:5px}
.acc-nav__dealer{display:inline-block;margin-top:5px;font-size:12px;font-weight:700;color:var(--primary-strong)}
.acc-nav__group{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4);padding:10px 11px 3px;font-weight:700}
.acc-nav__hint{display:block;font-size:11px;font-weight:500;color:var(--ink-3)}
.acc-links{display:flex;flex-direction:column;gap:4px}
.acc-links__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.acc-links__row:last-child{border-bottom:0}
.table-wrap{overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.table-wrap--flat{border-radius:var(--r-sm);margin-top:6px}
.orders-table,.table,.price-table,.ledger-table,.quick-table{width:100%;border-collapse:collapse;font-size:14px}
.orders-table th,.table th,.price-table th,.ledger-table th,.quick-table th{text-align:left;font-size:12px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700;padding:11px 13px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.orders-table td,.table td,.price-table td,.ledger-table td,.quick-table td{padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
.orders-table tr:last-child td{border-bottom:0}
.orders-table tbody tr:hover,.price-table tbody tr:hover{background:var(--surface-2)}
.orders-table .r,.quick-table .r,.table .r{text-align:right}
.ledger-table__opening td{background:var(--bg);font-style:italic}
.price-table__name{font-weight:600;text-decoration:none}
.price-table code{font-family:var(--mono);font-size:12px;background:var(--bg);padding:2px 6px;border-radius:5px}
.addr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.addr-card__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.addr-card p{font-size:14px}
.addr-card__actions{display:flex;gap:14px;margin-top:10px;font-size:14px;align-items:center}
.addr-card__actions form{display:inline}
/* ===================================================== HESAP EKRANLARI (TAM EKRAN)
   Giriş, kayıt, şifre akışı mağaza başlığı/alt bilgisi olmadan açılır (layout/auth.liquid):
   solda form sütunu, sağda koyu marka yüzeyi. Sağ yüzeydeki "sıvı bulanıklık" üç geniş
   ışık lekesidir (blur 64 px, yavaş sürüklenme) — rengi kiracının marka renginden türer,
   üstündeki güven şeridi ise gerçek cam (backdrop-filter). Ölçek tema diliyle aynı:
   başlık Outfit 500, alan yüksekliği 44, köşe 4 px; yalnız cam yüzeylerde köşe 10 px. */
.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);background:var(--surface)}
.auth>.kl-section{display:contents}  /* bölüm sarmalayıcısı ızgarayı bölmesin */
.auth__pane{display:grid;grid-template-rows:auto 1fr auto;gap:22px;min-width:0;
  padding:clamp(20px,2.4vw,30px) clamp(22px,4.4vw,64px) clamp(18px,2vw,26px)}
.auth__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.auth__logo{display:inline-flex;align-items:center;text-decoration:none}
.auth__logo img{height:30px;width:auto}
.auth__back{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink-4);text-decoration:none}
.auth__back .icon{width:15px;height:15px;transform:rotate(180deg);transition:transform var(--t)}
.auth__back:hover{color:var(--ink)}
.auth__back:hover .icon{transform:rotate(180deg) translateX(3px)}
.auth__form{width:min(384px,100%);margin-inline:auto;align-self:center;padding-block:8px}
.auth__form--wide{width:min(430px,100%)}
.auth__form h1{font-size:28px;letter-spacing:-.035em}
.auth__note{margin:9px 0 22px;font-size:14px;color:var(--ink-3);line-height:1.6}
.auth__form .alert{margin-bottom:14px}
.auth__form .btn{margin-top:18px}
.auth__form .check{font-size:13px}
.auth__switch{margin-top:16px;font-size:14px;color:var(--ink-3);text-align:center}
/* sosyal giriş: "ya da" ayracı + beyaz Google/Apple düğmeleri (snippets/social-logins.liquid) */
.social-logins{margin-top:18px}
.social-logins__sep{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--ink-4)}
.social-logins__sep::before,.social-logins__sep::after{content:"";flex:1;height:1px;background:var(--line)}
.auth__form .social-btn{margin-top:12px;min-height:46px;font-size:15px;border-color:var(--line);color:var(--ink);background:var(--surface)}
.social-btn:hover{background:var(--bg);border-color:var(--ink-4);color:var(--ink)}
.social-btn .icon{flex:none}
.auth__legal{font-size:12px;color:var(--ink-4);text-align:center}
.auth__legal a{text-decoration:none}
.auth__legal a:hover{color:var(--ink)}
/* etiket satırı: solda etiket, sağda yardımcı bağlantı */
.field__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.field__row label{font-size:13px;font-weight:600;color:var(--ink-2)}
.link--sm{font-size:12px}
/* şifre alanı: göster/gizle düğmesi alanın içinde durur */
.field__wrap{position:relative;display:block}
.field__wrap input{padding-right:46px}
.field__reveal{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  display:grid;place-items:center;border-radius:var(--r);color:var(--ink-4);transition:color var(--t)}
.field__reveal:hover{color:var(--ink)}
.field__reveal[aria-pressed="true"]{color:var(--primary-strong)}
/* --- sağ yüzey: sıvı bulanıklık + cam panel ---
   Zemin açık kalır (tema beyaz): sıcak nötr degradenin üzerinde üç geniş leke erir —
   marka turuncusu, kehribar ve serin bir karşı ton. Doygunluk düşüktür; turuncu birincil
   düğme ekranın tek keskin marka noktası olarak kalır. Metin doğrudan zemine değil, tek
   bir cam panelin üstüne oturur: lekeler panelin arkasından geçerken bulanıklaşır. */
.auth__art{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-rows:1fr auto;
  padding:clamp(22px,2.6vw,40px);color:var(--ink);
  background:linear-gradient(158deg,#fbf9f6 0%,#f0ece6 46%,#e6e2dc 100%)}
.auth__blobs{position:absolute;inset:-16%;z-index:-2;pointer-events:none}
.auth__blob{position:absolute;display:block;border-radius:50%;filter:blur(52px);will-change:transform}
.auth__blob--1{width:40%;aspect-ratio:1;left:-2%;top:-6%;background:var(--primary);opacity:.34}
.auth__blob--2{width:40%;aspect-ratio:1;right:-6%;top:14%;opacity:.52;
  background:color-mix(in srgb,#7f9dcb 92%,var(--primary))}
.auth__blob--3{width:48%;aspect-ratio:1;left:8%;bottom:-20%;opacity:.5;
  background:color-mix(in srgb,var(--primary) 32%,#ffd79c)}
/* ince tanecik: geniş degradelerde oluşan bantlanmayı kırar */
.auth__art::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Cam panel: üst kenarında ince beyaz parlama, altında yumuşak düşen gölge. */
.auth__card{grid-row:2;align-self:end;padding:clamp(22px,2.2vw,30px);position:relative;
  box-shadow:0 30px 60px -44px rgba(23,25,29,.7)}
.auth__card::before{content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:10px 10px 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}
.auth__eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.auth__headline{margin-top:12px;font-size:clamp(24px,2.3vw,34px);line-height:1.16;letter-spacing:-.035em;max-width:18ch}
.auth__lede{margin-top:12px;font-size:15px;line-height:1.7;color:var(--ink-2);max-width:44ch}
.auth__perks{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid rgba(23,25,29,.1);
  display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13px;font-weight:500;color:var(--ink-2)}
.auth__perks li{display:inline-flex;align-items:center;gap:9px}
.auth__perks .icon{width:17px;height:17px;color:var(--primary-strong);flex:none}
@media (prefers-reduced-motion:no-preference){
  .auth__blob--1{animation:auth-drift-a 24s var(--ease) infinite alternate}
  .auth__blob--2{animation:auth-drift-b 30s var(--ease) infinite alternate}
  .auth__blob--3{animation:auth-drift-c 27s var(--ease) infinite alternate}
}
@keyframes auth-drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(14%,10%,0) scale(1.18)}}
@keyframes auth-drift-b{from{transform:translate3d(0,0,0) scale(1.12)}to{transform:translate3d(-12%,14%,0) scale(.92)}}
@keyframes auth-drift-c{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(10%,-16%,0) scale(1.14)}}
/* Fotoğraflı yüzey (giriş): order:-1 ile sola geçer, form sağda kalır (yönetim paneli girişiyle
   aynı düzen; DOM sırası değişmez, klavye önce forma gider). İki satır: fotoğraf üstte kalan
   yüksekliği doldurur (kırpma sağa yaslı: kişi + koliler korunur), metin ve üç madde altta düz
   zeminde — kutu, çerçeve, cam yok. Fotoğrafın alt kenarı maske ile zemine erir. Logo fotoğrafın
   sol üstüne biner; üstteki hafif beyaz geçiş logoyu açık duvarda kesin okunur kılar.
   Kurallar yalnız geniş ekranda: dar ekranda yüzey alttaki ince banda döner (aşağıdaki blok). */
@media (min-width:981px){
  .auth__art--photo{order:-1;grid-template-rows:minmax(0,1fr) auto;gap:22px;padding:0 0 clamp(22px,2.6vw,40px);
    background:#f6f4f0;border-right:1px solid var(--line)}
  .auth__art--photo::after{display:none}
  .auth__art--photo::before{content:"";position:absolute;inset:0 0 auto;height:30%;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0))}
  .auth__photo{grid-row:1;display:block;width:100%;height:100%;min-height:0;object-fit:cover;object-position:right center;
    -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
  .auth__brand{position:absolute;z-index:2;top:clamp(22px,2.6vw,40px);left:clamp(22px,2.6vw,40px);display:inline-flex;align-items:center;text-decoration:none}
  .auth__brand img{height:44px;width:auto}
  .auth__art--photo .auth__card{grid-row:2;width:100%;padding:0 clamp(22px,2.6vw,40px);
    border:0;border-radius:0;box-shadow:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .auth__art--photo .auth__card::before{display:none}
  .auth__art--photo .auth__headline{margin-top:0}
  /* Logo fotoğraf sütununda; form sütunundaki satır yalnız dönüş bağlantısını taşır. */
  .auth__top--photo{justify-content:flex-end}
  .auth__top--photo .auth__logo{display:none}
}
/* Dar ekran: sağ yüzey ikiye bölünmez — form tam genişliğe geçer, sıvı yüzey altta
   ince bir marka bandına iner ve yalnız güven maddelerini taşır. */
@media (max-width:980px){
  .auth{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .auth__art{padding:14px 16px 16px;grid-template-rows:auto}
  .auth__card{grid-row:1;padding:12px 16px;box-shadow:0 18px 40px -34px rgba(23,25,29,.7)}
  /* fotoğraflı yüzey dar ekranda düz banda döner: fotoğraf ve büyük logo gizli (logo form sütununda) */
  .auth__photo,.auth__brand{display:none}
  .auth__eyebrow,.auth__headline,.auth__lede{display:none}
  .auth__perks{width:100%;margin:0;padding:0;border-top:0;justify-content:space-between;gap:8px 14px;font-size:12px}
  .auth__perks .icon{width:15px;height:15px}
  .auth__pane{padding:26px 20px 22px;gap:20px}
  .auth__form h1{font-size:25px}
  .auth__legal{margin-top:4px}
}

/* ===================================================================== YORUMLAR */
.reviews__summary{display:grid;grid-template-columns:auto minmax(210px,340px);gap:8px 28px;align-items:center;
  padding:2px 0 20px;background:none;border:0;border-bottom:1px solid var(--line);margin-bottom:0}
.reviews__avg{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.reviews__avg strong{font-size:40px;line-height:1;letter-spacing:-.035em;font-weight:800}
/* Yıldız ölçüsü tek değişkenden: yarım yıldızın maskesi de aynı ölçüyü kullanır. */
.stars{display:inline-flex;gap:1px}
.star,.star--full{color:#f0a500}
.star svg{width:var(--star-size,15px);height:var(--star-size,15px)}
.star--empty{color:var(--line-2)}
.star--half{position:relative;color:var(--line-2)}
.star--half::before{content:"";position:absolute;inset:0;width:50%;overflow:hidden;background:currentColor;color:#f0a500;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.5 7 .8-5.2 4.8L18.3 21 12 17.5 5.7 21l1.5-6.9L2 9.3l7-.8z'/%3E%3C/svg%3E") left/var(--star-size,15px) var(--star-size,15px) no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.5 7 .8-5.2 4.8L18.3 21 12 17.5 5.7 21l1.5-6.9L2 9.3l7-.8z'/%3E%3C/svg%3E") left/var(--star-size,15px) var(--star-size,15px) no-repeat}
.reviews__dist{display:flex;flex-direction:column;gap:3px}
.reviews__bar{display:grid;grid-template-columns:40px 1fr 30px;gap:8px;align-items:center;font-size:12px;
  text-decoration:none;color:var(--ink-2);padding:2px 4px;border-radius:5px}
.reviews__bar:hover,.reviews__bar.is-on{background:var(--bg)}
.reviews__bar>span:first-child{display:inline-flex;align-items:center;gap:2px}
.reviews__bar .icon{width:11px;height:11px;color:#f0a500}
.reviews__track{height:7px;background:var(--line);border-radius:999px;overflow:hidden}
.reviews__track span{display:block;height:100%;background:#f0a500;border-radius:999px}
.reviews__filters{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line)}
.reviews__sort{padding:0 28px 0 10px;min-height:34px;border:1px solid var(--line-2);border-radius:var(--r-sm);background-color:#fff;font:inherit;font-size:13px;background-position:right 9px center;background-size:14px}
.reviews__list{display:flex;flex-direction:column;gap:0}
.review{padding:18px 0;background:none;border:0;border-bottom:1px solid var(--line)}
/* Öne çıkan yorum kutuya alınmaz; sol kenarında marka renginde ince bir işaret taşır */
.review--featured{border-left:2px solid var(--primary);padding-left:14px;background:none}
.review__head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.review__title{font-size:15px}
.badge-pill{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--primary);color:var(--primary-ink)}
.review__meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;margin:5px 0 7px;color:var(--ink-4)}
.review__verified,.tm__verified{display:inline-flex;align-items:center;gap:3px;color:var(--ok-text);font-weight:600}
.review__verified .icon,.tm__verified .icon{width:13px;height:13px}
.review__body{margin:0;line-height:1.6;font-size:14px}
.review__photos{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.review__photos img{width:80px;height:80px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)}
.review__reply{margin-top:11px;padding:11px 13px;background:var(--bg);border-radius:var(--r-sm);font-size:14px}
.review__reply strong{display:block;margin-bottom:3px;font-size:12px}
.review__reply p{margin:0}
.review__foot{display:flex;align-items:center;gap:8px;margin-top:11px}
.review__vote{padding:0 12px;min-height:32px;border:1px solid var(--line-2);border-radius:999px;background:#fff;
  font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.review__vote:hover{border-color:var(--ink-4)}
.review__vote.is-on{border-color:var(--ink);background:var(--ink);color:#fff}
.review-form{margin-top:0;background:none;border:0;border-bottom:1px solid var(--line);padding:0}
.review-form>summary{padding:14px 0;font-weight:700;font-size:15px;cursor:pointer;list-style:none;min-height:46px;display:flex;align-items:center}
.review-form>summary::-webkit-details-marker{display:none}
/* Açılır satırın işareti sayfadaki diğer akordeonlarla aynı: sağda + / – */
.review-form>summary::after{content:"+";margin-left:auto;font-size:18px;line-height:1;color:var(--ink-3)}
.review-form[open]>summary::after{content:"–"}
.review-form__body{padding:2px 0 18px;display:flex;flex-direction:column;gap:12px}
.review-form__body .field__label,.review-form__body label{font-weight:600;font-size:14px}
.star-input{display:inline-flex;flex-direction:row-reverse;gap:2px}
.star-input input{position:absolute;opacity:0;width:0;height:0}
.star-input label{cursor:pointer;color:var(--line-2);padding:2px}
.star-input label .icon{width:28px;height:28px}
.star-input input:checked~label,.star-input label:hover,.star-input label:hover~label{color:#f0a500}
.qa__list{display:flex;flex-direction:column;gap:0}
.qa__item{padding:16px 0;background:none;border:0;border-bottom:1px solid var(--line)}
.qa__q,.qa__a{display:flex;gap:11px;align-items:flex-start}
.qa__a{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.qa__q p,.qa__a p{margin:0 0 2px;line-height:1.55;font-size:14px}
.qa__mark{flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.qa__mark--a{background:var(--primary);color:var(--primary-ink)}
.tm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:10px}
.tm{display:flex;flex-direction:column;gap:9px;margin:0;padding:18px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);transition:border-color var(--t),box-shadow var(--t)}
.tm:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.tm__stars{display:flex;gap:2px}
.tm__stars .star .icon{width:15px;height:15px}
.tm__title{font-size:15px;font-weight:700;letter-spacing:-.015em}
.tm__body{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2);flex:1}
.tm__foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px}
.tm__author{font-weight:600}
.tm__product{font-size:12px;color:var(--ink-4);text-decoration:none;border-top:1px solid var(--line);padding-top:9px}
.tm__product:hover{color:var(--primary-strong)}

/* ================================================================ İÇERİK / BLOG */
.page{padding:var(--page-top) 0 48px}
.page__inner{max-width:900px;margin-inline:auto}
.page--narrow .page__inner{max-width:740px}
.page--full .page__inner{max-width:none}
.page__head{margin-bottom:20px}
.page__head h1{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.035em;text-wrap:balance}
.page__body{font-size:16px;line-height:1.7}
.rte .blk{margin:0 0 18px}
.rte .blk--p p{margin:0 0 12px}
.rte .blk--h{margin-top:28px}
.rte h2.blk--h{font-size:23px}.rte h3.blk--h{font-size:19px}.rte h4.blk--h{font-size:16px}
.rte .blk--h{scroll-margin-top:96px}
.legal-toc{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);font-size:14px}
.legal-toc strong{display:block;margin-bottom:8px;color:var(--ink)}
.legal-toc ul{margin:0;padding:0;list-style:none;columns:2;column-gap:24px}
.legal-toc li{margin:.2em 0;break-inside:avoid}
.legal-toc a{color:var(--ink-2);text-decoration:none}
.legal-toc a:hover{color:var(--primary-strong);text-decoration:underline}
.rte .blk--callout ul,.rte .blk--callout ol{margin:0;padding-left:18px}
.rte .blk--callout li{margin:.25em 0}
@media (max-width:640px){.legal-toc ul{columns:1}}
.blk--img img{border-radius:var(--r);width:100%}
.blk--img-wide{margin-inline:calc(-1 * min(100px,7vw))}
.blk--img-full{margin-inline:calc(50% - 50vw);max-width:100vw}
.blk--img-full img{border-radius:0}
.blk figcaption{font-size:12px;color:var(--ink-4);margin-top:7px;text-align:center}
.blk--gallery{display:grid;gap:8px}
.blk--gallery.blk--cols-2{grid-template-columns:repeat(2,1fr)}
.blk--gallery.blk--cols-3{grid-template-columns:repeat(3,1fr)}
.blk--gallery.blk--cols-4{grid-template-columns:repeat(4,1fr)}
.blk--gallery figure{margin:0}
.blk--gallery img{aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);width:100%}
.blk__video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}
.blk__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.blk--video video{width:100%;border-radius:var(--r);background:#000}
.blk--quote{margin:24px 0;padding:6px 0 6px 20px;border-left:3px solid var(--primary)}
.blk--quote p{font-size:20px;line-height:1.4;color:var(--ink);letter-spacing:-.02em;font-weight:600}
.blk--quote cite{display:block;margin-top:7px;font-style:normal;color:var(--ink-3);font-size:14px;font-weight:400}
.blk--btn.blk--align-center{text-align:center}
.blk--hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.blk--columns{display:grid;gap:20px}
.blk--columns.blk--cols-2{grid-template-columns:repeat(2,1fr)}
.blk--columns.blk--cols-3{grid-template-columns:repeat(3,1fr)}
.blk--callout{padding:14px 16px;border-radius:var(--r);background:#eef4fb;border:1px solid #cfe0f5}
.blk--callout > strong{display:block;margin-bottom:4px}
.blk--callout-warn{background:#fff8e6;border-color:#f0e2ad}
.blk--callout-success{background:#e8f6ee;border-color:#c3e5d1}
.blk--callout p{margin:0}
.blk--table{overflow:auto}
.blk--table table{width:100%;border-collapse:collapse;font-size:14px}
.blk--table th,.blk--table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.blk--table th{background:var(--surface-2);font-weight:700}
.blk--spacer-sm{height:10px}.blk--spacer-md{height:28px}.blk--spacer-lg{height:56px}
.blk--product{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;padding:12px;border:1px solid var(--line);
  border-radius:var(--r);text-decoration:none;background:var(--surface)}
.blk--product img{width:88px;height:88px;object-fit:cover;border-radius:var(--r-sm)}
.blk__product-body{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.blk--faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:6px;overflow:hidden}
.blk--faq summary{padding:14px 16px;font-weight:600;font-size:15px;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;gap:12px;align-items:center;min-height:46px}
.blk--faq summary::-webkit-details-marker{display:none}
.blk--faq summary::after{content:"+";color:var(--ink-4);font-size:19px;line-height:1}
.blk--faq details[open] summary{color:var(--primary-strong)}
.blk--faq details[open] summary::after{content:"–";color:var(--primary-strong)}
.blk__faq-a{padding:0 16px 14px;color:var(--ink-2);line-height:1.65}
.faq__group{font-size:clamp(18px,2vw,23px);letter-spacing:-.025em;margin:28px 0 10px}
.blog{padding:var(--page-top) 0 48px}
.blog__head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.blog__head h1{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.035em}
/* Kategoriler sağda, koleksiyon rafıyla aynı dil: kutusuz düz liste, başlık ince çizgiyle ayrılır.
   Uzun adlar sarabilir; sayı ilk satırla aynı hizada sağda durur. Liste ekrandan uzunsa kendi içinde kayar. */
.blog__layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:start}
.blog__main{min-width:0}
.blog__side{position:sticky;top:calc(var(--header-h) + 12px);min-width:0;
  max-height:calc(100vh - var(--header-h) - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.blog__side-title{font-family:var(--fh);font-size:14px;font-weight:600;color:var(--ink);margin:0;padding:0 0 10px;border-bottom:1px solid var(--line)}
.blog__catlist{display:flex;flex-direction:column;padding:6px 0 0}
.blog__catlist a{display:flex;align-items:baseline;gap:12px;padding:7px 0;font-size:14px;line-height:1.4;color:var(--ink-2);
  text-decoration:none;text-wrap:pretty;transition:color var(--t)}
.blog__catlist a:hover{color:var(--primary-strong)}
.blog__catlist a.is-active{color:var(--ink);font-weight:600}
.blog__catlist a span{margin-left:auto;flex:0 0 auto;font-size:12px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.blog__catlist a.is-active span{color:var(--primary-strong)}
.blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.acard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color var(--t),box-shadow var(--t)}
.acard:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.acard__media{display:block;aspect-ratio:16/10;background:var(--bg);overflow:hidden}
.acard__media img{width:100%;height:100%;object-fit:cover}
.acard__placeholder{display:grid;place-items:center;height:100%;font-size:56px;font-weight:800;color:var(--primary-strong);background:var(--tint)}
.acard__body{padding:14px 16px 16px}
.acard__meta{font-size:12px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.acard__meta a{text-decoration:none;color:var(--primary-strong)}
.acard__title{font-size:17px;margin:0 0 6px;letter-spacing:-.02em;line-height:1.3}
.acard__title a{text-decoration:none}
.acard__excerpt{color:var(--ink-3);font-size:14px;line-height:1.55}
/* Ana sayfa şeridi: ortalı başlık üstte-altta nefes payıyla, kartta iki satır başlık + dört satır özet +
   "Devamını oku"; "Tüm yazılar" ızgaranın altında ortada düğme */
.blog-strip__head{padding-top:clamp(8px,1.2vw,16px);margin-bottom:clamp(24px,2.8vw,40px)}
.blog-strip__head .section__sub{margin-top:2px}
.blog-strip__foot{display:flex;justify-content:center;margin-top:clamp(20px,2.4vw,32px)}
.blog-strip__foot .btn{gap:8px;padding-inline:22px}
.blog-strip__foot .btn .icon{width:16px;height:16px;transition:transform var(--t)}
.blog-strip__foot .btn:hover .icon{transform:translateX(3px)}
.acard--compact .acard__body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.acard--compact .acard__title{margin:0 0 8px;font-size:16px;font-weight:600;line-height:1.35}
.acard--compact .acard__title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard--compact .acard__excerpt{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  font-size:14px;line-height:1.6;margin:0}
.acard__more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;
  color:var(--ink);text-decoration:none;align-self:flex-start}
.acard__more .icon{width:16px;height:16px;transition:transform var(--t)}
.acard__more:hover{color:var(--primary-strong);text-decoration:underline;text-underline-offset:3px}
.acard__more:hover .icon{transform:translateX(3px)}
/* ------------------------------------------------------------------ blog yazısı
   Beyaz başlık bandı + iki sütun (gövde | yapışkan kenar çubuğu). Kenar çubuğu: kaydırmayı izleyen
   içindekiler, benzer yazılar, WhatsApp yardım kartı. Gövde, konteyner genişliğinde ama sağdaki
   336px'lik raf sayesinde satır uzunluğu okunur kalır. */
.post-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none}
.post-progress span{display:block;height:100%;width:0;background:var(--primary);transition:width 80ms linear}
.post-head{background:var(--surface);border-bottom:1px solid var(--line);padding:6px 0 28px}
.post-head__crumbs{padding:12px 0 14px}
/* Başlık ve özet tam genişlikte: `text-wrap:balance` satırları eşitler (tek kelimelik kuyruk kalmaz),
   özet biraz büyük ve gevşek satır aralıklı ki geniş satır okunur kalsın. */
.post-head__title{font-size:clamp(26px,3.6vw,44px);line-height:1.12;letter-spacing:-.035em;margin:0;text-wrap:balance}
.post-head__lead{margin:14px 0 0;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:var(--ink-2);text-wrap:balance}
.post-head__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;font-size:13px;font-weight:600;color:var(--ink-4)}
.post-head__author{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.post-head__dot{color:var(--faint)}
.post-ava{width:26px;height:26px;border-radius:999px;background:var(--ink);color:var(--primary);font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.post-ava--lg{width:56px;height:56px;font-size:18px}
.post{padding:var(--page-top) 0 8px}
.post__layout{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:56px;align-items:start}
.post__article{min-width:0}
.post__cover{margin:0 0 28px;border-radius:var(--r-lg);overflow:hidden;background:var(--bg)}
.post__cover img{width:100%;display:block;max-height:480px;object-fit:cover}
.post__body{font-size:16.5px;line-height:1.8;color:var(--ink-2)}
.post__body > *:first-child,.post__body .blk--html > *:first-child{margin-top:0}
.post__body p{margin:0 0 1.2em}
.post__body h2{font-size:clamp(21px,2.2vw,26px);margin:1.8em 0 .6em;line-height:1.25;letter-spacing:-.025em;scroll-margin-top:calc(var(--header-h) + 24px)}
.post__body h3{font-size:19px;margin:1.5em 0 .5em;line-height:1.35;scroll-margin-top:calc(var(--header-h) + 24px)}
.post__body h4{font-size:16px;margin:1.3em 0 .4em;color:var(--ink)}
.post__body ul,.post__body ol{margin:0 0 1.2em;padding-left:1.4em}
.post__body li{margin:.4em 0}
.post__body strong{color:var(--ink)}
.post__body a{color:var(--primary-strong);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;font-weight:600}
.post__body a:hover{color:var(--ink)}
.post__body img{max-width:100%;height:auto;border-radius:var(--r-lg);margin:1.2em 0}
.post__body blockquote{margin:1.6em 0;padding:14px 20px;border-left:3px solid var(--primary);background:var(--tint);border-radius:0 var(--r) var(--r) 0;color:var(--ink)}
.post__body table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 1.4em}
.post__body th,.post__body td{border:0;border-bottom:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
.post__body th{background:var(--bg);font-weight:700;color:var(--ink);font-size:13px}
.post__body span[style]{font-size:inherit !important;font-family:inherit !important}
.post-toc-m{display:none;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);margin:0 0 24px}
.post-toc-m summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:14px;font-weight:700;color:var(--ink)}
.post-toc-m summary::-webkit-details-marker{display:none}
.post-toc-m summary .icon{width:16px;height:16px}
.post-toc-m__n{margin-left:auto;font-size:12px;color:var(--ink-4);font-weight:600}
.post-toc-m ol,.post-toc ol{list-style:none;margin:0;padding:0}
.post-toc-m ol{padding:0 16px 12px}
.post-toc-m li a,.post-toc li a{display:block;padding:6px 0;font-size:13.5px;color:var(--ink-3);text-decoration:none;line-height:1.4}
.post-toc-m li.lv3 a,.post-toc li.lv3 a{padding-left:14px;font-size:12.5px}
.post__label{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.post__tags{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}
.post__tags .post__label{margin-right:4px}
.post__share{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;padding:14px 18px;background:var(--bg);border-radius:var(--r-lg)}
.post__share-l{font-size:13px;font-weight:700;color:var(--ink)}
.post__share-btns{display:flex;gap:8px;flex-wrap:wrap}
.post__share-btns .btn{background:var(--surface)}
.post__author{display:flex;gap:18px;margin-top:24px;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.post__author-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.post__author-n{font-size:15.5px;font-weight:700;color:var(--ink)}
.post__author-t{font-size:12.5px;font-weight:600;color:var(--primary-strong)}
.post__author-b{margin:4px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-3)}
.post__author-l{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--ink);margin-top:6px;text-decoration:none}
.post__author-l:hover{color:var(--primary-strong)}
.post__pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.post__pn-a{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;background:var(--surface);transition:border-color var(--t),box-shadow var(--t)}
.post__pn-a:hover{border-color:var(--ink);box-shadow:var(--sh-2)}
.post__pn-a--next{text-align:right;align-items:flex-end}
.post__pn-t{font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.post__side{position:sticky;top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:16px;min-width:0}
.post__side-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.post__side-h .icon{width:15px;height:15px}
.post-toc{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;background:var(--surface);max-height:calc(100vh - var(--header-h) - 60px);overflow:auto;scrollbar-width:thin}
.post-toc li a{border-left:2px solid transparent;padding-left:10px;transition:color var(--t),border-color var(--t)}
.post-toc li a:hover{color:var(--ink)}
.post-toc li a.is-on{color:var(--ink);font-weight:700;border-left-color:var(--primary)}
.post__side-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;background:var(--surface)}
.post-mini-list{display:flex;flex-direction:column;gap:4px}
.post-mini{display:flex;align-items:center;gap:12px;padding:6px;margin:0 -6px;border-radius:var(--r);text-decoration:none;transition:background var(--t)}
.post-mini:hover{background:var(--bg)}
.post-mini__media{flex:none;width:76px;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;background:var(--bg);display:grid;place-items:center}
.post-mini__media img{width:100%;height:100%;object-fit:cover;display:block}
.post-mini__ph{font-size:22px;font-weight:800;color:var(--primary-strong)}
.post-mini__t{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post__cta p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.post__cta .btn{width:100%;margin-top:8px}
.post__cta .btn:first-of-type{margin-top:0}
.post-more{padding-top:0}
.post-more .section__head{margin-top:36px}
.contact{padding:var(--page-top) 0 48px}
.contact__inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;align-items:start}
.contact__info h1{font-size:clamp(26px,3.2vw,38px);margin-bottom:12px;letter-spacing:-.035em}
.contact__list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.contact__list li{display:flex;align-items:center;gap:10px;font-weight:500;min-height:24px}
.contact__list a{text-decoration:none}
.contact__form.card-box{padding:20px}

/* ============================================================ MARKA / KARŞILAŞTIR */
/* Marka dizini — "çerçeve yerine ayraç": 67 ayrı kutu değil, ince çizgilerle bölünmüş tek bir yüzey.
   Dış çerçeve yok. Her hücre sağ ve alt ayraç taşır; iç ızgara sağdan ve alttan 1 px taşırılır, dış
   sarmalayıcı (`overflow:clip`) son sütunun sağ ve son satırın alt çizgisini keser. Sütun sayısına
   bağlı nth-child sayımı yok: süzgeç hücre gizlese de çizgiler bozulmaz. `clip` bilinçli — `hidden`
   kaydırılabilir kap sayılır ve #marka-A çapasına giderken iç ızgarayı kaydırırdı. */
.brands-page .collection-head{padding-top:var(--stack-2)} /* başlık üstünde nefes payı (istek: 13 Eylül 2026) */
.brands-grid{display:flow-root;overflow:clip;margin-top:var(--stack-1);background:var(--surface)} /* flow-root: clip BFC kurmaz, negatif alt boşluk dışarı sızardı */
.brands-grid__inner{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0 -1px -1px 0}
.brands-grid .empty-state{grid-column:1/-1}
.brandcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-width:0;min-height:138px;
  padding:22px 18px 20px;background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  text-decoration:none;transition:box-shadow var(--t)}
/* Logolar siyah-beyaz ve sakin durur; üzerine gelince markanın kendi rengine döner (ana sayfa şeridiyle aynı).
   Hover işareti keskin: alt kenarda 2 px marka çizgisi, ışıma yok. */
.brandcard__logo{display:grid;place-items:center;width:100%;height:56px}
.brandcard__logo img{display:block;max-width:min(100%,150px);max-height:56px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1) contrast(1.1);opacity:.72;mix-blend-mode:multiply;transition:filter var(--t),opacity var(--t)}
.brandcard__title{max-width:100%;font-size:13px;font-weight:500;color:var(--ink-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;transition:color var(--t)}
.brandcard__word{font-family:var(--fh);font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--ink-3);
  text-align:center;text-wrap:balance;transition:color var(--t)}
.brandcard:hover{box-shadow:inset 0 -2px 0 var(--primary)}
.brandcard:hover img{filter:none;opacity:1}
.brandcard:hover .brandcard__title,.brandcard:hover .brandcard__word{color:var(--ink)}
.brandcard:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--primary)}
.compare-page{padding:var(--page-top) 0 48px}
.compare-actions{display:flex;justify-content:flex-end;margin:8px 0 10px}
.compare-toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);cursor:pointer;min-height:24px}
.compare-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.compare-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.compare-table th,.compare-table td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.compare-table thead th{border-bottom:2px solid var(--ink);vertical-align:bottom;background:var(--surface-2)}
.compare-table__label{width:170px;color:var(--ink-3);font-weight:600;white-space:nowrap}
.compare-table tbody tr[data-differs="1"] td{background:var(--tint)}
.compare-cell{display:flex;flex-direction:column;gap:8px;align-items:flex-start;max-width:210px}
.compare-cell__media img{width:110px;height:110px;object-fit:cover;border-radius:var(--r-sm)}
.compare-cell__title{font-weight:600;text-decoration:none;line-height:1.35}
.compare-cell__title:hover{text-decoration:underline}

/* ================================================================= BAYİ / DESTEK */
.dealer-apply{padding:var(--page-top) 0 52px}
.dealer-apply__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start}
.dealer-apply__intro h1{font-size:clamp(26px,3.2vw,38px);margin:6px 0 12px;letter-spacing:-.03em}
.dealer-perks{list-style:none;margin:18px 0;padding:0;display:flex;flex-direction:column;gap:9px}
.dealer-perks li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.dealer-perks .icon{width:19px;height:19px;color:var(--ok);flex:none;margin-top:1px}
.dealer-docs-note ul{margin:0 0 8px 18px;padding:0;line-height:1.7}
/* Başvuru formu kartı (bayilik): alanlar 16 px iç boşlukta sıkışıyordu */
.dealer-apply__form .card-box{padding:30px}
/* ---- Tedarikçi sayfası: tam genişlikte hero bandı (metin | illüstrasyon), altında ortalı form */
.supplier-apply{padding:0 0 56px}
.supplier-hero{background:#fdfdfd;border-bottom:1px solid var(--line);margin-bottom:40px}
.supplier-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);align-items:center;gap:32px;min-height:440px}
.supplier-hero__text{max-width:520px;padding:36px 0}
.supplier-hero__text h1{font-size:clamp(30px,3.8vw,46px);line-height:1.1;margin:0 0 14px;letter-spacing:-.03em}
.supplier-hero__text p{margin:0 0 24px;font-size:16px;line-height:1.6;color:var(--ink-3)}
.supplier-hero__img{width:100%;height:auto;justify-self:end}
.supplier-apply__form{max-width:860px;margin:0 auto}
.supplier-apply__form .card-box{padding:30px 32px 34px}
.supplier-form__head{text-align:center;margin-bottom:22px}
.supplier-form__head p{margin:0;font-size:14px}
.supplier-note{margin:14px 0 0;text-align:center}
/* ---- Sipariş takibi: ortalı başlık + hap sorgu çubuğu, sonuç kartında 5 adımlı ilerleme */
.track{padding:var(--page-top) 0 56px}
.track__hero{max-width:760px;margin:0 auto 30px;text-align:center}
.track__art{display:block;width:100%;max-width:760px;height:auto;margin:-8px auto 14px}
.track__art path,.track__art rect,.track__art circle{fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.track__art .route{stroke:var(--ink-4);stroke-dasharray:5 6}
.track__art .ac{fill:color-mix(in srgb,var(--primary) 14%,#fff)}
.track__art .ac2{fill:color-mix(in srgb,var(--primary) 7%,#fff)}
.track__art .wh{fill:#fff}
.track__art .hi{stroke:var(--primary-strong)}
.track__art .mv{stroke:var(--ink-4)}
.track__art .node{fill:#fff;stroke:var(--ink-3)}
.track__art text{font-family:var(--font);font-size:12px;font-weight:600;fill:var(--ink-3);stroke:none}
.track__hero h1{font-size:clamp(28px,3.6vw,42px);margin:0 0 10px;letter-spacing:-.03em}
.track__hero p{max-width:620px;margin:0 auto;font-size:16px;line-height:1.6;color:var(--ink-3)}
.track__form{display:flex;align-items:center;gap:8px;margin:24px 0 0;padding:6px 6px 6px 18px;background:#fff;border:1px solid var(--line-2);border-radius:999px;
  box-shadow:0 8px 24px -18px rgba(0,0,0,.35);transition:box-shadow var(--t),border-color var(--t)}
.track__form:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.track__form .icon{width:20px;height:20px;flex:none;color:var(--ink-4)}
.track__form input{flex:1;min-width:0;height:44px;border:0;background:transparent;font-size:16px;outline:0}
.track__form input::placeholder{color:var(--ink-4)}
.track__form .btn{min-height:44px;padding:0 24px;border-radius:999px;flex:none}
.track__error{margin:12px 0 0;font-size:13px;color:#9b1414;font-weight:500}
.track__result{max-width:860px;margin:0 auto;padding:28px 32px 30px}
.track__top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.track__eyebrow{margin:0 0 6px;font-size:13px;color:var(--ink-3)}
.track__eyebrow strong{color:var(--ink);font-weight:600}
.track__status{font-size:26px;margin:0;letter-spacing:-.02em}
.track__status.is-done{color:var(--ok-text)}
.track__status.is-off{color:#9b1414}
.track__order{margin:4px 0 0;font-size:14px;color:var(--ink-3)}
.track__top .btn{flex:none}
/* İlerleme şeridi: beş eşit sütun, nokta üstte; sütunlar arası çizgi ::before ile önceki noktadan bu noktaya */
.track__steps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.track__steps li{position:relative;text-align:center;padding:0 4px}
.track__steps li::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--line-2)}
.track__steps li:first-child::before{display:none}
.track__steps li.is-done::before,.track__steps li.is-now::before{background:var(--primary)}
.track__dot{position:relative;z-index:1;display:grid;place-items:center;width:24px;height:24px;margin:0 auto 8px;border-radius:50%;background:#fff;border:2px solid var(--line-2)}
.track__dot .icon{width:13px;height:13px}
.is-done .track__dot{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.is-now .track__dot{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,#fff)}
.is-now .track__dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--primary)}
.track__step-label{display:block;font-size:12.5px;line-height:1.3;color:var(--ink-4)}
.is-done .track__step-label{color:var(--ink-2)}
.is-now .track__step-label{color:var(--ink);font-weight:700}
.track__meta{display:flex;flex-wrap:wrap;gap:8px 36px;margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.track__meta dt{font-size:12px;color:var(--ink-4);margin-bottom:2px}
.track__meta dd{margin:0;font-size:14px;font-weight:600}
.track__events{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.track__events h3{font-size:14px;margin:0 0 12px}
.track__events p{margin:0;font-size:14px}
.track__events ol{list-style:none;margin:0;padding:0}
.track__events li{position:relative;display:grid;grid-template-columns:128px 1fr;gap:14px;padding:0 0 14px 22px;font-size:14px}
.track__events li::before{content:"";position:absolute;left:4px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--ink-4)}
.track__events li::after{content:"";position:absolute;left:7px;top:16px;bottom:-4px;width:2px;background:var(--line)}
.track__events li:first-child::before{background:var(--primary)}
.track__events li:last-child::after{display:none}
.track__events time{color:var(--ink-3);font-variant-numeric:tabular-nums}
.track__events em{font-style:normal;color:var(--ink-3)}
.track__foot{max-width:860px;margin:22px auto 0;text-align:center;font-size:13px;color:var(--ink-3)}
.dealer-form h3{font-size:14px;margin:20px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.dealer-form h3:first-of-type{border-top:0;padding-top:0;margin-top:6px}
.dealer-form__title{font-size:20px;margin-bottom:6px}
.dealer-form__login{margin-bottom:10px}
.dealer-status{text-align:center;padding:32px 24px}
.dealer-status h2{font-size:22px;margin:8px 0}
.dealer-status p{margin-bottom:16px}
.dealer-status__icon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--ok);color:#fff}
.dealer-status__icon .icon{width:24px;height:24px}
.dealer-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dealer-stat{display:flex;flex-direction:column;gap:4px;padding:14px 16px}
.dealer-stat strong{font-size:21px;letter-spacing:-.025em;font-weight:800}
.dealer-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px}
.dealer-link{display:flex;flex-direction:column;gap:4px;text-decoration:none;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);transition:border-color var(--t)}
.dealer-link:hover{border-color:var(--ink)}
.dealer-note{padding:12px 14px;border-radius:var(--r-sm);background:var(--tint);
  border:1px solid color-mix(in srgb,var(--primary) 26%,transparent);font-size:14px;margin-bottom:14px}
.dealer-badge{display:inline-flex;align-items:center;margin-left:8px;padding:3px 9px;border-radius:999px;background:var(--ink);
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.dealer-errors{margin:6px 0 0 18px;padding:0}
.dealer-errors code{font-family:var(--mono);font-size:12px}
.dealer-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dealer-filter input,.dealer-filter select{height:42px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:0 12px;background-color:var(--surface);font-size:14px;outline:0}
.dealer-filter select{padding-right:32px}
.dealer-filter input[type=search]{flex:1;min-width:190px}
.dealer-filter label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.dealer-list-actions{display:flex;gap:8px;flex-wrap:wrap}
.quick-table-wrap{overflow:auto}
.quick-table input{height:40px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 11px;
  background:var(--surface);font-size:14px;outline:0;width:100%;min-width:110px}
.quick-table input[type=number]{width:82px;min-width:0;text-align:right}
.quick-table input:focus{border-color:var(--primary);box-shadow:var(--ring)}
.quick-table__name{max-width:300px}
.quick-table__remove{width:32px;height:32px;display:grid;place-items:center;color:var(--ink-4);border-radius:var(--r-sm)}
.quick-table__remove:hover{background:var(--bg);color:var(--sale)}
.quick-table__remove .icon{width:16px;height:16px}
.quick-actions{display:flex;gap:12px;align-items:center;margin:12px 0 6px;flex-wrap:wrap}
.quick-paste{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px}
.quick-paste summary{cursor:pointer;font-weight:600;font-size:14px;min-height:32px;display:flex;align-items:center}
.quick-paste .fields{margin-top:12px}
.doc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.doc-list__item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;transition:border-color var(--t)}
.doc-list__item:hover{border-color:var(--ink)}
.doc-list__icon{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm);background:var(--bg);
  font-size:11px;font-weight:800;color:var(--ink-2)}
.doc-list__name{font-weight:600}
.support-page__h2{font-size:18px;margin-top:8px}
.support-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--tint);border:1px solid color-mix(in srgb,var(--primary) 22%,transparent)}
.support-hero h2{font-size:18px;margin-bottom:4px}
.support-hero__text{flex:1;min-width:230px}
.support-hero__actions{display:flex;gap:8px;flex-wrap:wrap}
.support-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink-4);margin-right:4px;vertical-align:middle}
.support-dot--on{background:var(--ok)}
.support-form form{margin-top:12px}
.ticket-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--ink-2)}
.ticket-thread{display:flex;flex-direction:column;gap:10px}
.ticket-msg{max-width:88%;padding:13px 15px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.ticket-msg--customer{align-self:flex-end;background:var(--ink);color:#fff;border-color:var(--ink)}
.ticket-msg--customer .muted{color:rgba(255,255,255,.72)}
.ticket-msg--agent{align-self:flex-start;border-left:3px solid var(--primary)}
.ticket-msg--system{align-self:center;background:transparent;border:0;color:var(--ink-3);font-size:12px;padding:4px}
.ticket-msg__who{font-size:12px;font-weight:600;margin-bottom:5px}
.ticket-msg__body{line-height:1.6;overflow-wrap:anywhere;font-size:14px}
.ticket-reply h3{font-size:15px;margin-bottom:10px}

/* ======================================================================= FORMLAR */
.kl-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.kl-form__field{display:flex;flex-direction:column;gap:5px;grid-column:span 2}
.kl-form__field--half{grid-column:span 1}
.kl-form__label{font-size:13px;font-weight:600;color:var(--ink-2)}
.kl-form__req{color:var(--sale)}
.kl-form__input{width:100%;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:11px 12px;font:inherit;
  font-size:15px;background-color:var(--surface)}
select.kl-form__input{padding-right:34px;background-position:right 12px center}
.kl-form__input:focus{outline:0;border-color:var(--primary);box-shadow:var(--ring)}
textarea.kl-form__input{min-height:110px;resize:vertical}
.kl-form__help{font-size:12px;color:var(--ink-4)}
.kl-form__err--top{grid-column:span 2;padding:11px 13px;border-radius:var(--r-sm);background:#fdecec;border:1px solid #f6cfcf;color:#9b1414}
.kl-form__ok{grid-column:span 2;padding:11px 14px;border-radius:var(--r-sm);background:#e8f6ee;border:1px solid #c3e5d1;color:#0f6b38;font-size:14px}
.kl-form__choices{display:flex;flex-wrap:wrap;gap:8px 16px}
.kl-form__choice{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;min-height:24px}
.kl-form__consent{align-items:flex-start;line-height:1.45}
.kl-form__heading{grid-column:span 2;margin:6px 0 0;font-size:15px}
.kl-form__desc{color:var(--ink-3);margin:0 0 12px}
.kl-form__actions{grid-column:span 2}
.blk--form{margin:20px 0}
/* banner slotları */
.bslot{display:grid;gap:10px}
.bslot--strip{grid-template-columns:1fr}
.bslot--home_strip{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
/* Metinsiz kreatif: şeridin 132 px kuralı ve iç boşluğu geçerli değil, görsel kendi oranında durur */
.bslot__item--image{display:block;min-height:0;padding:0;overflow:hidden;border-radius:var(--r-lg);background:var(--bg)}
.bslot__image{width:100%;height:auto;display:block}
.bslot__item{position:relative;display:flex;align-items:center;min-height:132px;padding:22px 24px;border-radius:var(--r-lg);
  background:var(--b-bg) center/cover no-repeat;color:var(--b-fg);text-decoration:none;overflow:hidden}
.bslot__item::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--b-overlay,0))}
.bslot__item--center{justify-content:center;text-align:center}
.bslot__item--right{justify-content:flex-end;text-align:right}
.bslot__text{position:relative;display:flex;flex-direction:column;gap:5px;max-width:560px}
.bslot__eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.bslot__title{font-size:clamp(19px,2.2vw,27px);line-height:1.15;letter-spacing:-.025em;font-weight:700}
.bslot__sub{font-size:14px;opacity:.92}
.bslot__btn{align-self:flex-start;margin-top:6px}
.bslot__item--center .bslot__btn{align-self:center}
.bslot--card .bslot__item{min-height:200px;align-items:flex-end;padding:20px}
.bslot--product_side{margin-top:16px}
.collection-page .bslot{margin:0 0 16px}
.bslot__item:not([style*="background-image"]) .bslot__text{max-width:none;width:100%;flex-direction:row;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap}
.bslot__item:not([style*="background-image"]) .bslot__text > :not(.bslot__btn){flex:1 1 auto;min-width:0}
.bslot__item:not([style*="background-image"]) .bslot__eyebrow,
.bslot__item:not([style*="background-image"]) .bslot__title,
.bslot__item:not([style*="background-image"]) .bslot__sub{flex-basis:100%}
.bslot__item:not([style*="background-image"]) .bslot__btn{align-self:center;margin-top:0;flex:none}
@media (min-width:721px){
  .bslot--home_strip .bslot__item:not([style*="background-image"]) .bslot__text{display:grid;
    grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:26px;align-items:center}
  .bslot--home_strip .bslot__item:not([style*="background-image"]) .bslot__eyebrow{grid-column:1;grid-row:1}
  .bslot--home_strip .bslot__item:not([style*="background-image"]) .bslot__title{grid-column:1;grid-row:2}
  .bslot--home_strip .bslot__item:not([style*="background-image"]) .bslot__sub{grid-column:1;grid-row:3}
  .bslot--home_strip .bslot__item:not([style*="background-image"]) .bslot__btn{grid-column:2;grid-row:1 / span 3;justify-self:end}
}

/* para birimi seçici */
.curpick{position:relative}
.curpick__btn{height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r);background:transparent;font:inherit;font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer}
.curpick__btn:hover{border-color:var(--ink-4)}
.curpick__menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:130px;margin:0;padding:6px;list-style:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2)}
.curpick__menu a{display:block;padding:8px 10px;border-radius:6px;font-size:14px;text-decoration:none;color:inherit;min-height:24px}
.curpick__menu a:hover{background:var(--bg)}
.curpick__menu a.is-on{font-weight:700}

/* ======================================================================= HAREKET */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(12px)}
  .js .reveal.is-in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .js .reveal--d1.is-in{transition-delay:.05s}
  .js .reveal--d2.is-in{transition-delay:.1s}
  .js .reveal--d3.is-in{transition-delay:.15s}
}
.rv[hidden]{display:none}
.rv__clear{background:none;border:0;padding:0;font:inherit;cursor:pointer;min-height:24px}

/* ================================================================ ERİŞİLEBİLİRLİK */
.footer__links a,.footer__contact a,.footer__contact span,.footer__cookies,.footer__bottom a,
.auth__switch a,.auth__legal a,.acc-nav a,.acc-nav__logout{min-height:24px;display:inline-flex;align-items:center;gap:8px}
.iconbtn{flex:none}
.pdp-fav{min-height:32px}
@media (pointer:coarse){
  .field input,.field select,.field textarea,
  input:not([type=checkbox]):not([type=radio]),select:not([multiple]),textarea:not([readonly]){font-size:16px}
}
.price,.price__now,.price__old,.card__price,.cart-line__price,.cart-summary__row,.qty input,.table td,
.order-head,.badge,.toolbar__count,.acard__meta,.reviews__summary,.inst__table,.specs td,
.orders-table td,.ck-totals{font-variant-numeric:tabular-nums}
.price,.price__now,.price__old,.cart-line__price,.cart-summary__row strong,.card__price{white-space:nowrap}
:target,[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
::selection{background:color-mix(in srgb,var(--primary) 28%,transparent);color:var(--ink)}
input,textarea{caret-color:var(--primary)}
p,li,.section__sub,.card__title,.acard__excerpt{text-wrap:pretty}
.is-print .order-page__inner{grid-template-columns:1fr;max-width:none}
@media print{
  .no-print,.header,.footer,.acc-nav,.announce,.cart-drawer,.mobile-nav,.pdp-sticky,.auth__art{display:none!important}
  .account-page{padding:0}
  body{background:#fff}
  .price-table td,.price-table th{padding:6px 8px;font-size:12px}
}

/* ==================================================================== DAR EKRAN */
@media (max-width:1180px){
  .grid--products{grid-template-columns:repeat(3,1fr)}
  .blog__layout{grid-template-columns:minmax(0,1fr) 248px;gap:24px}
  .blog__layout .blog__grid{grid-template-columns:repeat(2,1fr)}
  .post__layout{grid-template-columns:minmax(0,1fr) 300px;gap:36px}
}
@media (max-width:960px){
  :root{--header-h:60px}
  :root:has(.announce){--announce-h:35px}
  /* Yazı: kenar çubuğu gövdenin altına iner; içindekiler gövdenin üstünde açılır-kapanır kutu olur. */
  .post__layout{grid-template-columns:1fr;gap:32px}
  .post__side{position:static}
  .post-toc{display:none}
  .post-toc-m{display:block}
  .header__navbar{display:none}
  .header__burger,.header__search-toggle{display:grid}
  /* Sabit 60 px + flex-wrap: ikon satırı sığmayınca alt satıra düşüp kutudan TAŞIYOR
     ve hero'nun üstüne biniyordu. Yükseklik içerikten gelir, taban 60 px. */
  .header__inner{gap:8px;height:auto;min-height:60px;padding:10px 0;flex-wrap:nowrap}
  /* Arama kutusu gizlenince satırda esneyen öğe kalmıyor, eylemler ortada asılı
     duruyordu. Logo boşluğu kendine alır; sepet sağ kenara yaslanır. */
  .header__logo{min-width:0;margin-right:auto}
  .header__search{display:none}
  .footer__grid{grid-template-columns:1fr 1fr 1fr;gap:26px 22px}
  .trust{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__col--brand{grid-column:1 / -1;max-width:640px}
  .blog__grid{grid-template-columns:repeat(2,1fr)}
  .contact__inner{grid-template-columns:1fr}
  .blk--img-wide{margin-inline:0}
  .dealer-apply__inner{grid-template-columns:1fr}
  .dealer-apply__form .card-box,.supplier-apply__form .card-box{padding:20px 18px 22px}
  .dealer-stats{grid-template-columns:1fr 1fr}
  .supplier-hero{margin-bottom:28px}
  .supplier-hero__inner{grid-template-columns:1fr;min-height:0;gap:6px;text-align:center}
  .supplier-hero__text{max-width:none;padding:28px 0 0}
  .supplier-hero__img{max-width:520px;justify-self:center}
  .track__art{max-width:420px;margin-bottom:6px}
  .track__art text{display:none}
  .track__result{padding:20px 18px 22px}
  .track__status{font-size:22px}
  .track__form{padding:5px 5px 5px 14px}
  .track__form .btn{padding:0 16px}
  .track__step-label{font-size:11px}
  .track__events li{grid-template-columns:1fr;gap:2px}
}
@media (max-width:900px){
  .brands-grid__inner{grid-template-columns:repeat(4,minmax(0,1fr))}
  .brandcard{min-height:124px;padding:18px 14px 16px}
  .stories{--story-d:66px;padding-top:var(--stack-1)}
  .stories--lg{--story-d:78px}
  .stories__track{justify-content:flex-start;gap:10px;margin-right:-20px;padding-right:20px}
  .stories__item{width:calc(var(--story-d) + 18px)}
  .story__label{font-size:11px}
  /* Üç dik kartı üst üste yığmak yerine yatay kaydırma: hero'ya kadar üç ekran boyu kaymak gerekmiyor */
  .hcards{padding-top:var(--stack-1)}
  .hcards__grid,.hcards__grid--1,.hcards__grid--2{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;
    padding-bottom:4px;margin-right:-20px;padding-right:20px;scrollbar-width:none}
  .hcards__grid::-webkit-scrollbar{display:none}
  .hcard,.hcards__grid--1 .hcard,.hcards__grid--2 .hcard{flex:0 0 78%;max-width:360px;aspect-ratio:4/5;scroll-snap-align:start}
  .hcards__grid--1 .hcard{flex-basis:100%;max-width:none;aspect-ratio:16/10}
  .product-page__grid{grid-template-columns:1fr;gap:18px}
  .gallery{position:static}
  .pdp-sticky{display:flex}
  body.template-product,body.template-cart.has-cart{padding-bottom:74px}
  .cart-layout{grid-template-columns:1fr}
  .cart-summary{position:static}
  /* Ödeme, dar ekran: özet en üstte katlanır bant (başlık satırına dokununca açılır),
     form altında tam genişlikte. Sütun ayracı ve sağ zemin uzantısı kalkar. */
  .ck{width:100%}
  .ck__form,.ck--pay{grid-template-columns:1fr}
  .ck__main{padding:8px 16px 40px}
  .ck__summary{order:-1;border-left:0;border-bottom:1px solid var(--line);padding:0 16px}
  .ck__summary::before{display:none}
  .ck-summary{position:static}
  .ck-summary__head{grid-template-columns:auto auto 1fr auto;grid-template-areas:"title count icon total";min-height:56px;margin:0;cursor:pointer;pointer-events:auto}
  .ck-summary__head .icon{display:block;grid-area:icon;justify-self:start;color:var(--ink-4);transition:transform var(--t)}
  .ck-summary[open] .ck-summary__head .icon{transform:rotate(180deg)}
  .ck-summary__title{font-size:15px;font-weight:600;font-family:var(--font);letter-spacing:-.01em}
  .ck-summary__total{display:block}
  .ck-summary__edit{display:none}
  .ck-summary__edit--body{display:inline-flex;margin:14px 0 16px}
  .ck-summary__body{padding-top:4px}
  .ck-lines{max-height:none}
  .ck-header__inner{height:56px}
  .ck-trail{display:none}
  .ck-footer__inner{justify-content:center;text-align:center;flex-direction:column;gap:8px}
  .order-page__inner{grid-template-columns:1fr}
  .acc-nav{position:static;flex-direction:row;flex-wrap:wrap;align-items:center}
  .acc-nav__user{display:none}
  .acc-nav a,.acc-nav__logout{width:auto}
  .acc-nav form{border:0;margin:0;padding:0}
  .order-grid{grid-template-columns:1fr}
  .collection-layout--filtered{grid-template-columns:1fr}
  /* Blog kategorileri dar ekranda liste olarak dikey yer yemesin: yazıların üstünde tek satır kayan çipler. */
  .blog__layout{grid-template-columns:1fr;gap:16px}
  .blog__side{position:static;order:-1;max-height:none;overflow:visible}
  .blog__side-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:-1px}
  .blog__catlist{flex-direction:row;gap:6px;padding:0 0 2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .blog__catlist::-webkit-scrollbar{display:none}
  .blog__catlist a{flex:0 0 auto;align-items:center;white-space:nowrap;padding:0 13px;min-height:34px;border-radius:999px;
    background:var(--surface);border:1px solid var(--line);color:var(--ink);font-weight:500}
  .blog__catlist a.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
  .blog__catlist a span{display:none}
  /* Çipler dar ekranda alt alta sarıp üç satır kaplıyordu: tek satırda yatay kayar
     (referansın mobil davranışı), sıralama kendi satırında sağda kalır. */
  .quickfilters{flex-wrap:nowrap;overflow-x:auto;width:100%;margin-right:0;padding-bottom:2px;
    scrollbar-width:none;-ms-overflow-style:none}
  .quickfilters::-webkit-scrollbar{display:none}
  .toolbar__sort{margin-left:auto}
  /* Kategori sayfasında "Filtrele" ile sıralama tek satırda: ikisi de 36 px'lik hap.
     Raf ve ızgara ayrı hücrelerde olduğundan sıralama akıştan çıkarılıp rafın ilk
     satırına sağdan bindirilir; panel açılınca hap yerinde kalır, gövde altına açılır.
     Arama sayfasının araç çubuğu (sayaç + çipler) bu kuralı almaz. */
  .collection-page .collection-layout--filtered{position:relative;gap:12px}
  .collection-page .collection-layout--filtered .toolbar{position:absolute;top:0;right:0;margin:0;z-index:1}
  .filters__toggle{display:inline-flex;gap:6px;min-height:36px;padding:0 13px;border:1px solid var(--line);border-radius:999px;
    background:var(--surface);font-size:13px;font-weight:600;color:var(--ink-2)}
  .filters__toggle svg{width:15px;height:15px;color:var(--ink-4)}
  .filters__badge{margin-left:2px;min-width:18px;height:18px;font-size:11px}
  .filters__panel[open] .filters__toggle{border-color:var(--ink);color:var(--ink)}
  .filters__body{margin-top:10px;border-top:1px solid var(--line)}
  .toolbar__sort{font-size:13px}
  .toolbar__value{font-size:13px}
  .reviews__summary{grid-template-columns:1fr}
  .support-hero{flex-direction:column;align-items:stretch}
  .ticket-msg{max-width:100%}
  .section__head--row > .section__link{position:static;transform:none;margin-top:2px}
}
@media (max-width:640px){
  .container{width:calc(100% - 24px)}
  body{font-size:15px}
  .post-head{padding-bottom:20px}
  .post-head__title{font-size:25px}
  .post__body{font-size:16px}
  .post__body h2{font-size:21px}
  .post__body h3{font-size:17.5px}
  .post__pn{grid-template-columns:1fr}
  .post__pn-a--next{text-align:left;align-items:flex-start}
  .post__author{flex-direction:column;gap:12px}
  .post__share{padding:12px 14px}
  :root{--section-y:24px}
  .grid--products{grid-template-columns:repeat(2,1fr);gap:10px}
  /* Konteyner kenar payı burada 12px: hikâye ve kart şeritlerinin sağ taşması da o kadar (yatay sayfa kaydırması olmasın) */
  .stories__track,.hcards__grid,.hcards__grid--1,.hcards__grid--2{margin-right:-12px;padding-right:12px}
  .grid--carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:6px;margin-right:-12px}
  /* Boyut doğrudan esnek çocuğa verilir: araya .reveal sarmalayıcısı girse de kural hedefini kaybetmez */
  .grid--carousel > *{flex:0 0 46%;min-width:150px;max-width:220px;scroll-snap-align:start}
  .grid--carousel .card__title{-webkit-line-clamp:2}
  .catgrid__grid,.catgrid__grid--cards{grid-template-columns:repeat(3,1fr);gap:8px}
  .catcard__body{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 9px 10px}
  .catcard__title{font-size:12px}
  .catcard__count{font-size:11px}
  .brands-page .collection-head{padding-top:var(--stack-1)}
  .brands-grid__inner{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brandcard{min-height:112px;padding:16px 10px 14px;gap:10px}
  .brandcard__logo{height:44px}
  .brandcard__logo img{max-width:min(100%,112px);max-height:44px}
  .brandcard__title{font-size:12px}
  .brandcard__word{font-size:14px}
  .brandstrip__bar{--bs-h:80px;--bs-gap:32px}
  .brandstrip__item img{max-width:130px;max-height:38px}
  .card__body{padding:9px 9px 10px}
  .card__title{font-size:13px}
  .price{font-size:16px}
  .section__title{font-size:clamp(18px,5vw,22px)}
  /* Dar ekranda başlık satırı tek satır kalır: ikincil ikonlar menü çekmecesinde
     (Favoriler / Karşılaştır / Hesap zaten orada listeleniyor). */
  .header__actions .curpick,.header__cmp,.header__fav,.header__account{display:none}
  /* Sepet, dar ekran: tek sütun; özet satırların altında tam genişlikte gri bant, sütun ayracı
     ve sağ zemin uzantısı kalkar. Satır: solda görsel, sağda ad; altta adet seçici ve fiyat
     karşılıklı; kaldır sağ üst köşede ikon. */
  .cart{width:100%}
  .cart__banner{padding:12px 16px 0}
  .cart__grid{grid-template-columns:1fr}
  .cart__main{padding:12px 16px 20px}
  .cart__summary{border-left:0;border-top:1px solid var(--line);padding:20px 16px 28px}
  .cart__summary::before{display:none}
  .cart-summary{position:static}
  .cart-head{margin-bottom:4px}
  .cart-head__title{font-size:22px}
  .cart-head__link{display:none}
  .cart-line{grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"img info info" "img qty price";
    gap:8px 12px;padding:14px 0;align-items:start}
  .cart-line__img{grid-area:img;width:72px;height:72px}
  .cart-line__info{grid-area:info;min-width:0;padding-right:32px}
  .cart-line__title{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cart-line__meta{margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cart-line__remove{position:absolute;top:8px;right:0;margin:0;width:36px;height:36px;justify-content:center;border-radius:var(--r-sm)}
  .cart-line__remove:active{background:var(--bg)}
  .cart-line__remove .icon{width:16px;height:16px}
  .cart-line__remove span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:-1px}
  .cart-line__qty{grid-area:qty;align-self:end}
  .cart-line .qty{height:36px}
  .cart-line .qty button{width:32px;font-size:16px}
  .cart-line .qty input{width:34px;font-size:14px}
  .cart-line__price{grid-area:price;align-self:end;min-width:0;line-height:1.2;padding-bottom:1px}
  .cart-line__unit{font-size:11px;margin-top:3px}
  .cart-summary__title{font-size:18px;margin-bottom:10px}
  .cart-summary__assure{gap:6px}
  .empty-state--cart{padding:48px 16px 56px}
  /* Favoriler, dar ekran: fiyat solda, "Sepete ekle" sağda karşılıklı; kaldır sağ üstte ikon. */
  .wish-line{grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"img info info" "img price act"}
  .wish-line .cart-line__price{text-align:left}
  .wish-line__act{grid-area:act;align-self:end;min-width:0}
  .wish-line__act .btn{min-height:34px;padding:0 14px}
  .wish-line__from{display:inline;margin-right:4px}
  /* ---------- Alt bilgi (dar ekran): tek sütun, sıralı katmanlar ----------
     Sarmalayıcılar (footer__top, footer__grid) display:contents ile eritilir; konteyner esnek
     sütun olur ve katmanlar `order` ile dizilir: güven satırları → marka + bülten → katlanır
     gruplar (kategoriler · müşteri hizmetleri · kurumsal) → iletişim → ödeme/telif → imza.
     Kategori bandı DOM'da markanın üstünde (geniş ekran öyle ister); dar ekranda tek başına bir
     akordeon satırı olarak markadan kopuk duruyordu, öbür gruplarla aynı yığına alındı. */
  .footer{margin-top:24px}
  .footer .container{display:flex;flex-direction:column}
  .footer__top,.footer__grid{display:contents}
  .trust{order:1}
  .footer__col--brand{order:2}
  .footer__col--fold{order:3}
  .footer__col--contact{order:4}
  .footer__bottom{order:5}
  .footer__credit{order:6}
  /* Güven şeridi: iki sütunlu ızgarada beşinci madde tek başına sarkıyordu; ikon solda,
     başlık + açıklama sağda beş eşit satır. İkon kutusu iletişim satırlarıyla aynı dil. */
  .trust{display:flex;flex-direction:column;gap:2px;padding-block:12px 12px}
  .trust__item{flex-direction:row;align-items:center;gap:14px;padding-block:9px}
  .trust__icon{width:42px;height:42px;margin:0;border-radius:var(--r-lg);background:var(--f-chip);border:1px solid var(--f-line)}
  .trust__icon .icon{width:22px;height:22px;stroke-width:1.6}
  .trust__item strong{font-size:15px;width:fit-content}
  .trust__item strong::after{height:4px;margin-top:2px}
  .trust__item p{font-size:12.5px;line-height:1.4;margin-top:3px}
  /* Marka + bülten */
  .footer__col--brand{padding-block:22px 24px}
  .footer__logo{height:28px;margin-bottom:10px}
  .footer__text{font-size:13.5px;line-height:1.6;max-width:none}
  .footer__nl{margin-top:16px;padding-top:16px;max-width:none}
  .footer__nl-label{margin-bottom:8px}
  .footer__social{margin-top:16px}
  /* Katlanır gruplar: eşit yükseklikte satırlar, sağda ince ok; alt bilgi bir ekrandan uzun sürmesin */
  .footer__col--fold{border-top:1px solid var(--f-line)}
  .footer__col--fold>summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .footer__col--fold>summary h2{margin:0}
  .footer__col--fold>summary h2::after{display:none}
  .footer__col--fold>summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    opacity:.55;margin-right:4px;transform:translateY(-2px) rotate(45deg);transition:transform var(--t)}
  .footer__col--fold[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
  .footer__col--fold>.footer__links{padding-bottom:12px}
  .footer__cats{padding:0}
  .footer__cats>summary{display:flex}
  /* Kategori bandı iki sütuna akar (grid değil): satır hizalı ızgarada alt kategorisi az olan
     başlığın altında koca boşluk kalıyordu; akışta bloklar sıkı dizilir */
  .footer__cats-grid{display:block;columns:2;column-gap:16px;padding-bottom:12px}
  .footer__cat{break-inside:avoid;padding-bottom:14px}
  .footer__cat-title{margin-bottom:2px;font-size:14px}
  .footer__cat .footer__links a{min-height:34px}
  /* İletişim: katlanmaz (telefon/e-posta dar ekranda en çok aranan bilgi); ikonlar kutuda,
     satırlar eşit hizada, karekod küçük */
  .footer__col--contact{border-top:1px solid var(--f-line);padding-block:18px 24px}
  .footer__col--contact h2{margin-bottom:12px}
  .footer__col--contact h2::after{display:none}
  .footer__contact{gap:6px;font-size:14px}
  .footer__contact li a,.footer__contact li span{align-items:center;gap:12px;min-height:0;line-height:1.4}
  .footer__contact .icon{width:36px;height:36px;padding:8px;margin-top:0;border-radius:var(--r-lg);background:var(--f-chip);border:1px solid var(--f-line)}
  .footer__etbis{margin-top:14px;padding:5px}
  .footer__etbis img{height:84px}
  /* Ödeme + telif: ortalı tek sütun; kart markaları üstte, telif altında, şirket bilgisi ayrı satır */
  .footer__bottom{flex-direction:column;align-items:center;text-align:center;gap:14px;padding-block:20px 18px;opacity:.7}
  .footer__payments{order:-1;flex-direction:column;gap:8px}
  .footer__pay{height:22px}
  .footer__legal{max-width:38ch;line-height:1.6}
  .footer__cookies{display:block;margin:4px auto 0}
  .footer__company{display:block;margin:6px 0 0}
  .footer__credit{padding-block:14px 16px;font-size:11.5px}
  /* Mobilde de sağa toplanır: tam genişlik verilince ok metinden kopup satırın öbür
     ucuna gidiyordu — tam da istenmeyen "çubuk" görüntüsü. */
  .toolbar{flex-wrap:wrap;gap:8px;margin-bottom:10px}
  .toolbar__sort{max-width:100%}
  .toolbar__sort select{min-width:0}
  /* Kategori başlığı telefonda ürün kartlarıyla orantılı: 30 px'lik başlık + açıklama +
     iki satırlık araç çubuğu ilk ekranın yarısını yiyordu. */
  .collection-page{padding-top:0}
  .collection-head{padding:2px 0 10px}
  .collection-head__inner{gap:3px}
  .collection-head__title{font-size:19px;letter-spacing:-.02em}
  .collection-head__desc{font-size:13px;line-height:1.5}
  .clamp__toggle{margin-top:2px;font-size:12px}
  .collection-head__logo{height:36px;margin-bottom:6px}
  .fields{grid-template-columns:1fr}
  .field--half{grid-column:1 / -1}
  .ck-step{padding:22px 0}
  .ck-step__head h2{font-size:18px}
  .ck-submit{padding:0 16px}
  .steps li{font-size:11px}
  .timeline li{grid-template-columns:1fr}
  /* 1180 kuralı (.blog__layout .blog__grid) daha özgül; burada da aynı seçici olmazsa telefonda iki sütun taşıyordu. */
  .blog__grid,.blog__layout .blog__grid{grid-template-columns:1fr}
  .blog-strip .blog__grid > *:nth-child(3){display:none}
  .blk--columns.blk--cols-2,.blk--columns.blk--cols-3,
  .blk--gallery.blk--cols-3,.blk--gallery.blk--cols-4{grid-template-columns:repeat(2,1fr)}
  .blk--columns{gap:12px}
  .blk--quote p{font-size:17px}
  .return-types{grid-template-columns:1fr}
  .return-item{grid-template-columns:46px minmax(0,1fr) auto}
  .kl-form{grid-template-columns:1fr}
  .kl-form__field,.kl-form__field--half,.kl-form__err--top,.kl-form__ok,
  .kl-form__heading,.kl-form__actions{grid-column:span 1}
  .pts-hero,.pts-hero__rules{grid-template-columns:1fr}
  .dealer-stats{grid-template-columns:1fr}
  .qv{grid-template-columns:1fr}
  .qv__media img{aspect-ratio:16/10}
  .qvmodal{padding:0;place-items:end stretch}
  .qvmodal__box{width:100%;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .tm{padding:16px}
  .pdp-assure{grid-template-columns:1fr 1fr}
  .bslot__item{min-height:110px;padding:18px}
  .compare-cell{max-width:170px}
}

/* ==========================================================================
   Ergonomi — "ekranda tek birincil renk" kuralı: ızgarada kalıcı turuncu yalnız
   fiyattır. Kart eylemi (sepete ekle) tümüyle kaldırıldı; kartın tek hedefi ürün.
   ========================================================================== */
/* Rozet ekonomisi: kırmızı yalnız indirimde, "yeni" nötr mürekkep */
.badge--new{background:var(--ink);color:#fff}
.card__rating{font-variant-numeric:tabular-nums}
/* Kart tümüyle tıklanır; düğmeler bağlantı katmanının üstünde kalır.
   DİKKAT: .card__fav/.card__cmp/.card__peek MUTLAK konumludur — burada yalnız
   yığın sırası yükseltilir, konumlandırma değiştirilmez. */
.card__fav,.card__cmp{z-index:3}
/* Okuma sırası: marka → ad → puan → renk → fiyat; fiyat kartın dibine yaslanır */
.card__body{display:flex;flex-direction:column;gap:3px;flex:1}

/* ==========================================================================
   Süzgeç rafı — masaüstünde her zaman açık.
   Chrome 131+ kapalı bir <details>'in içeriğini `content-visibility` ile gizliyor;
   çocuğa `display:block` vermek artık yetmiyor (raf bomboş görünüyordu).
   `::details-content` ile slotun kendisi açılır; ayrıca theme.js geniş ekranda
   `open` özniteliğini verir, böylece eski tarayıcılarda da çalışır.
   ========================================================================== */
@media (min-width:901px){
  .filters__panel::details-content{content-visibility:visible;block-size:auto;overflow:visible}
  .filters__body{display:block}
}
/* Dar ekranda kart üstünde iki ikon düğmesi kalabalık: karşılaştırma masaüstünde kalır */
@media (max-width:640px){
  .card__cmp{display:none}
}

/* --------------------------------------------------------------- mobil ince ayar */
@media (max-width:640px){
  /* Güven kutuları dar ekranda üç satır yer kaplıyordu: tek satırda üç sütun */
  .pdp-assure{grid-template-columns:repeat(3,1fr);gap:6px}
  .pdp-assure div{padding:9px 4px;font-size:11px;gap:4px}
  .pdp-assure strong{font-size:11px}
  .pdp-assure .icon{width:16px;height:16px}
  /* Galeri küçük resimleri parmakla kaydırılır, kesilmesin */
  .gallery__thumbs{scroll-snap-type:x proximity}
  .gallery__thumb{scroll-snap-align:start;width:60px;height:60px}
  /* Başlıktaki simge düğmeleri 44 px dokunma alanını korur */
  .header__actions .iconbtn{width:40px;height:40px}
  /* Telefonda üst bilgi kenardan kenara: menü ve sepet ikonları kap kenarıyla hizalanır
     (düğme payı geri alınır). Logo %25 küçülür — 40 px'lik ikonların yanında orantısız
     büyük duruyordu. */
  .header__inner{gap:6px;padding:8px 0}
  .header__burger{margin-left:-8px}
  .header__logo img{height:calc(var(--logo-h,36px) * .75);max-width:100%;object-fit:contain;object-position:left center}
  .header__wordmark{font-size:19px}
  .header__actions{margin-right:-8px}
  /* Alt bilgi bağlantıları arasında parmak payı */
  .footer__links{gap:2px}
  .footer__links a{min-height:38px}
  .footer__contact li a,.footer__contact li span{min-height:38px}
}
/* Yapışkan satın alma çubuğu içeriği ezmez: sayfa altına pay bırakılır (mobil PDP) */
@media (max-width:900px){body.template-product .footer{margin-bottom:0}}

/* --------------------------------------------------------------- son rötuşlar */
/* Metin bandı: beyaz boşlukta kaybolmasın — hafif zemin, güçlü başlık, ölçülü yükseklik */
.richtext{background:var(--surface-2)}
.richtext__title{font-size:clamp(22px,2.6vw,32px);font-weight:800}
.richtext__text,.richtext__body{font-size:16px;max-width:58ch;margin-inline:auto}
@media (max-width:640px){
  /* Dört kategori 3'lü ızgarada 3+1 kırılıyordu; iki sütun dengeli ve kart daha okunur */
  .catgrid__grid,.catgrid__grid--cards{grid-template-columns:repeat(2,1fr)}
  .catcard__title{font-size:14px}
  .catcard__body{padding:9px 10px 11px}
}

/* ==========================================================================
   ÜRÜN SAYFASI — üç sütun (galeri | bilgi | raf)
   Ölçüm: Trendyol ve Hepsiburada ürün sayfalarının ikisi de 1200 px kapta üç
   sütun kullanıyor; üçüncü sütun kargo/iade/satıcı taahhütlerini taşıyor ve
   satın alma sütununu şişirmiyor. Açıklama ve teknik tablo ızgaranın ALTINDA,
   tam genişlikte duruyor — dar bir sütuna sıkışmış tablo okunmuyordu.
   ========================================================================== */
.product-page__grid{grid-template-columns:minmax(0,42fr) minmax(0,36fr) minmax(0,22fr);gap:40px;align-items:start}
.pdp-rail{display:flex;flex-direction:column;gap:18px;position:sticky;top:calc(var(--header-h) + 12px)}
.pdp-rail__card{display:flex;flex-direction:column;gap:12px;padding:0;background:none;border:0}
.pdp-rail__card + .pdp-rail__card{padding-top:18px;border-top:1px solid var(--line)}
.pdp-rail__row{display:flex;align-items:flex-start;gap:10px;font-size:14px}
.pdp-rail__row .icon{width:18px;height:18px;flex:none;color:var(--ok-text);margin-top:1px}
.pdp-rail__row span{display:flex;flex-direction:column;gap:1px;min-width:0}
.pdp-rail__row strong{font-weight:600;color:var(--ink);font-size:14px}
.pdp-rail__row small{color:var(--ink-3);font-size:12px;line-height:1.35}
.pdp-rail__label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
/* Satıcı kimliği: sola yaslı küçük logo, altında tek ayraç (ilk bağlantının üst çizgisi kapalı) */
.pdp-rail__store{display:flex;align-items:center;min-height:34px;padding:6px 0 14px;
  border-bottom:1px solid var(--line-soft);font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--ink);text-decoration:none}
.pdp-rail__store img{display:block;height:22px;width:auto;max-width:100%}
.pdp-rail__store + .pdp-rail__link{border-top:0}
/* Tedarikçi/marka logoları genelde beyaz paylı geliyor; daha yüksek kutu, sola hizalı */
.pdp-rail__store--seller img{height:44px;max-width:180px;object-fit:contain;object-position:left center;margin:-6px 0}
.pdp-rail__link{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:14px;
  font-weight:600;color:var(--ink-2);text-decoration:none}
.pdp-rail__link .icon{width:16px;height:16px;color:var(--ink-3)}
.pdp-rail__link:hover{color:var(--primary-strong)}
.pdp-rail__link:hover .icon{color:var(--primary-strong)}
.pdp-rail .bslot{margin-top:2px}

/* Tam genişlik bilgi bloğu: açıklama, teknik özellikler, kargo, iade.
   Her başlık KUTU DEĞİL, tam genişlikte bir ayraç satırıdır. Üst üste dört
   çerçeveli dikdörtgen sayfayı amatör gösteriyordu; ayraç + boşluk aynı
   gruplamayı çizgi gürültüsü olmadan kuruyor. */
.pdp-detail{margin-top:8px;padding-top:20px;border-top:1px solid var(--line)}
.pdp-detail .accordion{margin-top:0;display:block}
/* Yalnız üst düzey paneller (`>`): yorum formu gibi iç içe <details> bu biçimi almaz */
.pdp-detail .accordion>details{border:0;border-top:1px solid var(--line);border-radius:0;background:none}
.pdp-detail .accordion>details:first-child{border-top:0}
.pdp-detail .accordion>details:last-child{border-bottom:1px solid var(--line)}
.pdp-detail .accordion>details>summary{padding:17px 0;font-size:15px}
.pdp-detail .accordion .rte,.pdp-detail .accordion .specs{padding:0 0 22px}
.pdp-detail .rte{max-width:none} /* açıklama tam sütun genişliğinde akar */
/* --- Sekme kipi (yalnız >=900 px; şeridi theme.js kurar) ---------------------
   Şerit gerçek bir role="tablist"tir. Akordeon başlıkları gizlenir, seçili
   olmayan paneller tümüyle gizlenir; içerik yine aynı <details> öğelerindedir. */
.pdp-tabs{display:flex;gap:30px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:24px}
.pdp-tabs button{padding:0 0 13px;margin-bottom:-1px;font-family:var(--fh);font-size:15px;font-weight:500;
  color:var(--ink-3);background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  min-height:40px;transition:color var(--t),border-color var(--t)}
.pdp-tabs button:hover{color:var(--ink)}
.pdp-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--primary)}
.pdp-detail .accordion.is-tabs{border-top:0}
.pdp-detail .accordion.is-tabs>details{border:0}
.pdp-detail .accordion.is-tabs>details>summary{display:none}
.pdp-detail .accordion.is-tabs>details:not(.is-active){display:none}
.pdp-detail .accordion.is-tabs .rte,.pdp-detail .accordion.is-tabs .specs{padding-top:0}
/* Teknik özellik tablosu: çerçeve ve zebra yok — satır ayracı yeter */
.pdp-detail .specs{width:100%;margin:0 0 22px;border:0;border-radius:0;font-size:14px}
.pdp-detail .specs th,.pdp-detail .specs td{padding:10px 0;border-bottom:1px solid var(--line)}
/* Son satırın çizgisi yalnız TEK sütunlu düzende kaldırılır. İki sütuna akan tabloda
   `tr:last-child` ikinci sütunun son satırıdır; kaldırılınca sütunlardan biri çizgisiz
   kalıp tablo bozuk görünüyordu. */
@media (max-width:899px){
  .pdp-detail .specs tr:last-child th,.pdp-detail .specs tr:last-child td{border-bottom:0}
}
.pdp-detail .specs th{width:38%;color:var(--ink-2);font-weight:400}
.pdp-detail .specs td{font-weight:500;color:var(--ink)}
@media (min-width:900px){
  /* Geniş ekranda iki sütunlu özellik tablosu — referanstaki yoğunluk.
     `column-count` YALNIZ tbody'de durur: tabloya da verilince iç içe iki multicol
     oluşuyor ve satırlar sütunun yarısına sıkışıyordu. */
  .pdp-detail .specs{display:block}
  .pdp-detail .specs tbody{display:block;column-count:2;column-gap:48px}
  .pdp-detail .specs tr{display:flex;break-inside:avoid}
  .pdp-detail .specs th,.pdp-detail .specs td{flex:1}
  .pdp-detail .specs th{flex:0 0 44%}
  /* Temel `.specs` kuralı son satırın çizgisini siliyor; iki sütuna akarken bu
     sütunlardan yalnız birini çizgisiz bırakıyor. Burada geri veriliyor. */
  .pdp-detail .specs tr:last-child th,.pdp-detail .specs tr:last-child td{border-bottom:1px solid var(--line)}
}
@media (max-width:1100px){
  .product-page__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
  .pdp-rail{grid-column:1 / -1;position:static;flex-direction:row;flex-wrap:wrap}
  .pdp-rail__card{flex:1 1 260px}
  .pdp-rail__card .pdp-rail__row{flex:1 1 200px}
  .pdp-rail__card:first-child{flex-direction:row;flex-wrap:wrap;gap:14px}
}
@media (max-width:900px){
  .product-page__grid{grid-template-columns:1fr}
  .pdp-rail{grid-column:auto}
}
@media (max-width:640px){
  .pdp-rail__card:first-child{flex-direction:column;gap:12px}
  .pdp-detail .specs{width:calc(100% - 24px);margin-inline:12px}
  .pdp-detail .accordion>details>summary{padding:13px 14px;font-size:14px}
  .pdp-detail .accordion .rte{padding:0 14px 14px}
}
@media (max-width:640px){
  /* Raf dar ekranda dikey yığın: satırlar sıkışır, dört taahhüt bir ekrana sığar */
  .pdp-rail{gap:8px}
  .pdp-rail__card{padding:12px;gap:9px}
  .pdp-rail__row{font-size:13px;gap:9px}
  .pdp-rail__row .icon{width:16px;height:16px}
  .pdp-rail__row strong{font-size:13px}
  .pdp-rail__row small{font-size:12px}
  .pdp-rail__seller{gap:6px}
  .pdp-detail{padding-top:16px}
}


/* Teslimat bildirimi: kutu değil, ince bir bilgi satırı */
/* Fiyat satırı: fiyat + KDV notu + indirim rozeti tek hizada */
.product-info__price{align-items:baseline;gap:10px;row-gap:4px}
.product-info__price .price__tax{font-size:12px}

/* Katlanır başlık işareti her yerde aynı: + / – (döndürülmüş + "×" gibi okunuyordu) */
.accordion>details>summary::after{content:"+";font-size:18px;color:var(--ink-3);transition:none;transform:none}
.accordion>details[open]>summary::after{content:"–";transform:none}
/* Galeri kart görselleriyle aynı dikey oranda: ürün daha büyük görünür */
.gallery__main{aspect-ratio:4/5}
/* --- ana görselde "büyüt" düğmesi + lightbox ------------------------------
   Sayfanın üstüne binen AÇIK GRİ, bulanık zeminli görüntüleyici: koyu zemin (kullanıcı
   kararı, 13 Eyl 2026) sayfayı fazla karartıyordu, düz beyaz ise görsel kartını yutuyordu;
   buzlu açık gri cam sayfanın üstünde durur, beyaz kart üstünde okunur. Görsel ortada
   yumuşak köşeli bir kart; üstte sayaç + ürün adı + kapat, iki yanda buzlu cam oklar,
   altta ortalanmış küçük görsel şeridi (sönük → seçili parlak, mürekkep halka). Açılışta
   zemin solar, görsel hafifçe büyüyerek gelir; görsel değişince kısa bir çapraz geçiş.
   Görsele tıklayınca 2× yakınlaşır. */
.gallery__zoom{position:absolute;right:10px;bottom:10px;z-index:2;width:36px;height:36px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink-2);cursor:pointer;
  transition:color var(--t),border-color var(--t)}
.gallery__zoom .icon{width:17px;height:17px}
.gallery__zoom:hover{color:var(--ink);border-color:var(--ink-4)}
.gallery__main .gallery__slide img{cursor:zoom-in}
.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:var(--ink);display:none;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);
  overscroll-behavior:contain;--lb-x:16px;--lb-y:12px;--lb-fg:var(--ink-3);--lb-glass:rgba(255,255,255,.78);
  --lb-glass-hover:#fff;--lb-edge:rgba(0,0,0,.12)}
.lightbox[open]{display:grid}
/* ::backdrop özel değişkenleri her tarayıcıda devralmaz — düz değerler. Bulanıklık sayfayı
   arkada silik bırakır: görüntüleyici sayfanın "üstünde" hissedilir. */
/* Zemin düz beyaz değil hafif gri: beyaz görsel kartı zemine karışıyordu, gri üstünde
   kart ve beyaz cam denetimler ayrışır. */
.lightbox::backdrop{background:rgba(232,232,234,.9);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1)}
.lightbox__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:10px 12px 10px 20px}
.lightbox__meta{display:flex;align-items:baseline;gap:14px;min-width:0;font-size:13px;line-height:1.3}
.lightbox__count{flex:none;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.lightbox__of{color:var(--lb-fg);font-weight:500;margin-left:5px}
.lightbox__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--lb-fg);font-weight:400}
/* Buzlu cam yuvarlak denetimler: kapat ve oklar aynı dil */
.lightbox__close,.lightbox__nav{display:grid;place-items:center;border:1px solid var(--lb-edge);border-radius:50%;
  background:var(--lb-glass);color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background-color .18s ease,border-color .18s ease,transform .18s var(--ease),opacity .18s ease}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--lb-glass-hover);border-color:rgba(0,0,0,.24)}
.lightbox__close:active,.lightbox__nav:active{transform:scale(.94)}
.lightbox__close:focus-visible,.lightbox__nav:focus-visible,.lightbox__thumb:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lightbox__close{width:40px;height:40px}
.lightbox__close .icon{width:18px;height:18px}
/* Görsel sahneye mutlak konumla oturur: yüzdeli max-width/height mutlak konumda her zaman
   sahnenin kesin ölçüsüne göre çözülür (grid/flex içinde görsel doğal boyutunda taşıyordu).
   Taşma yalnız yakınlaşınca kırpılır; normalde gölge sahne dışına serbestçe yayılır. */
.lightbox__stage{position:relative;min-height:0;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.lightbox__img{position:absolute;inset:var(--lb-y) var(--lb-x);margin:auto;width:auto;height:auto;
  max-width:calc(100% - var(--lb-x) * 2);max-height:calc(100% - var(--lb-y) * 2);object-fit:contain;cursor:zoom-in;
  border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.16),0 2px 10px rgba(0,0,0,.08);
  transition:transform .22s var(--ease),opacity .22s ease,border-radius .22s ease;transform-origin:center;will-change:transform}
.lightbox__img.is-switching{opacity:0;transition:none}
.lightbox.is-zoomed .lightbox__stage{overflow:hidden;touch-action:none}
.lightbox.is-zoomed .lightbox__img{cursor:zoom-out;border-radius:0;transition:none}
/* Yükleme halkası: ancak .35 sn'den uzun süren yüklemede belirir (hızlıda yanıp sönmesin) */
.lightbox__stage::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:2px solid rgba(0,0,0,.12);border-top-color:var(--ink);opacity:0;pointer-events:none}
.lightbox__stage.is-loading::after{animation:lb-spin .8s linear infinite,lb-fade .2s ease .35s forwards}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;z-index:2;opacity:.85}
.lightbox__nav:hover{opacity:1}
.lightbox__nav:active{transform:translateY(-50%) scale(.94)}
.lightbox__nav .icon{width:22px;height:22px}
.lightbox__nav--prev{left:20px}.lightbox__nav--prev .icon{transform:rotate(90deg)}
.lightbox__nav--next{right:20px}.lightbox__nav--next .icon{transform:rotate(-90deg)}
.lightbox.is-zoomed .lightbox__nav{display:none}
/* Küçük görseller: ortalanmış şerit; sığmazsa kayar (ilk/son öğeye auto kenar boşluğu —
   `justify-content:center` taşan şeritte baştaki öğeleri erişilmez kılıyordu). Kaydırma çubuğu gizli. */
.lightbox__thumbs{display:flex;gap:6px;padding:14px 16px calc(16px + env(safe-area-inset-bottom));overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 18px,#000 calc(100% - 18px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
.lightbox__thumbs::-webkit-scrollbar{display:none}
.lightbox__thumb{width:54px;height:54px;flex:none;overflow:hidden;border-radius:5px;background:#fff;border:0;padding:0;
  cursor:pointer;scroll-snap-align:center;opacity:.5;outline:2px solid transparent;outline-offset:2px;
  transition:opacity .18s ease,outline-color .18s ease}
.lightbox__thumb:first-child{margin-left:auto}.lightbox__thumb:last-child{margin-right:auto}
.lightbox__thumb:hover{opacity:.8}
.lightbox__thumb.is-active{opacity:1;outline-color:var(--ink)}
.lightbox__thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:901px){
  .lightbox{--lb-x:96px;--lb-y:16px}
  .lightbox__bar{padding:12px 20px 12px 28px}
  .lightbox__meta{font-size:14px}
  .lightbox__thumbs{padding:16px 24px 22px}
  .lightbox__thumb{width:62px;height:62px}
}
/* Dokunmatikte oklar gereksiz: kaydırma + şerit yeterli, sahne temiz kalır */
@media (hover:none) and (pointer:coarse){.lightbox__nav{display:none}}
/* Açılış: zemin solarak gelir, görsel hafif büyüyerek yerleşir; kapanışta tersi (JS .is-closing verir) */
@media (prefers-reduced-motion:no-preference){
  .lightbox[open]{animation:lb-fade .24s ease}
  .lightbox[open]::backdrop{animation:lb-fade .28s ease}
  .lightbox[open] .lightbox__img{animation:lb-pop .34s var(--ease)}
  .lightbox[open] .lightbox__bar,.lightbox[open] .lightbox__thumbs{animation:lb-fade .4s ease}
  .lightbox.is-closing,.lightbox.is-closing::backdrop{animation:lb-fade .18s ease reverse forwards}
}
@keyframes lb-fade{from{opacity:0}to{opacity:1}}
@keyframes lb-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes lb-spin{to{transform:rotate(360deg)}}
/* Galeri çerçevesi: ana görsel açık zeminde sayfaya karışıyordu; hafif bir çizgi
   görselin sınırını belli eder ("çerçeve yerine ayraç" kuralının bilinçli istisnası). */
.gallery__main{border:1px solid var(--line)}
/* Küçük görseller masaüstünde solda dikey şerit (pazaryeri düzeni). Ana görsel satır
   yüksekliğini belirler; şerit `height:0 + min-height:100%` ile o yüksekliğe uyar ve
   sığmayan küçük görseller kendi içinde kayar. Tek görselli üründe şerit yok, ızgara da yok. */
@media (min-width:901px){
  .gallery:has(.gallery__thumbs){display:grid;grid-template-columns:60px minmax(0,1fr);gap:10px;align-items:start}
  .gallery:has(.gallery__thumbs) .gallery__main{grid-column:2;grid-row:1}
  .gallery__thumbs{grid-column:1;grid-row:1;align-self:stretch;flex-direction:column;gap:8px;
    margin-top:0;padding:0;height:0;min-height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
  .gallery__thumb{width:60px;height:60px}
}

/* ==================================================== CAM YÜZEYLER ("liquid blur")
   Kural: cam yalnız **üstte duran, geçici** yüzeylerde kullanılır — içeriğin üzerinden
   geçen yapışkan başlık, çekmece perdesi, mobil satın alma çubuğu ve bildirim. Sayfanın
   akışındaki kartlar opak kalır (DESIGN.md "çerçeve yerine ayraç"). Cam köşesi 10 px'tir;
   temanın 4 px'lik köşesinden bilinçli sapma — bulanık yüzey keskin köşede kırılıyor.
   `backdrop-filter` desteklemeyen tarayıcıda hepsi opak haline düşer (aşağıdaki @supports). */
.glass{border-radius:10px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.55)}
.glass--dark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .glass{backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5)}
  /* Yapışkan başlık yalnız kaydırıldıktan sonra camlaşır; sayfa başında opak durur. */
  .header--sticky.is-scrolled{background:color-mix(in srgb,var(--header-bg) 74%,transparent);
    backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);
    box-shadow:0 10px 28px -14px rgba(16,24,40,.32)}
  /* Çekmece perdesi: arkadaki sayfa koyulaşmak yerine odaktan çıkar. */
  .drawer__scrim{background:rgba(16,24,40,.34);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  /* Mobil yapışkan satın alma çubuğu ve bildirim: içeriğin üstünde yüzer. */
  .pdp-sticky{background:color-mix(in srgb,var(--surface) 76%,transparent);
    backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6)}
  .toast{background:color-mix(in srgb,var(--ink) 82%,transparent);
    backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
    border:1px solid rgba(255,255,255,.1);border-radius:10px}
}

/* ==========================================================================
   ÜRÜN SAYFASI — referans düzenine hizalama (Trendyol ürün detayı)
   Ölçülen referans: sol galeri, orta satın alma sütunu, sağda KARTLARDAN oluşan
   üçüncü sütun. Puan satırı sayı + yıldız + "n değerlendirme" + "n soru-cevap"
   bağlantılarıdır; eylem satırında "Hemen al" çerçeveli ve "Sepete ekle" dolgulu
   yan yana, favori/karşılaştır yalnız ikon; öne çıkan özellikler bilgi sütununda
   dört sütunlu bir ızgara.
   Renk referanstan KOPYALANMAZ: turuncu zaten temanın `--primary` değeri, geri
   kalan her ton mevcut belirteçlerden gelir.
   ========================================================================== */

/* --- puan / değerlendirme satırı ------------------------------------------- */
.product-info__meta{gap:10px;font-size:13px;color:var(--ink-3);row-gap:4px}
/* Ayraç noktası: her öğeden önce, ilki hariç. Sarma olduğunda satır başındaki
   noktayı gizlemek mümkün değil; bu yüzden nokta öğenin İÇİNDE değil önünde
   ayrı bir kutu olarak durur ve satır sarınca da doğal okunur. */
.product-info__meta > * + *::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
  background:var(--ink-4);margin-right:10px;vertical-align:middle}
.rating--link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink-2)}
.rating--link strong{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.rating--link .stars{display:inline-flex;gap:1px}
.rating--link .stars .icon{width:14px;height:14px}
.rating__count{font-weight:600;color:var(--ink-2);border-bottom:1px solid transparent}
.rating--link:hover .rating__count{border-bottom-color:currentColor}
.rating--none{color:var(--ink-3);font-weight:600}
.product-info__link{font-weight:600;color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.product-info__link:hover{border-bottom-color:currentColor}

/* --- eylem satırı: Şimdi al | Sepete ekle | favori -------------------------
   Referans oranı: iki eylem EŞİT genişlikte ve aynı hizada, favori dairesi
   düğme yüksekliğinin ~%85'i.
   Satır IZGARA'dır, esnek kutu değil: `flex:1 1 0` iki düğmeyi eşitleyemiyor,
   çünkü esnek temel 0 verilse bile düğmenin 28+28 px dolgusu ve 1 px çerçevesi
   temelin ÜSTÜNE ekleniyor — çerçeveli "Şimdi al" 241 px, dolgusuz sarmalayıcı
   183 px kalıyordu. `minmax(0,1fr)` iki hücreyi dolgudan bağımsız eşitler. */
.product-form__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  align-items:center;gap:8px}
/* Masaüstünde eylem satırı fiyat/varyant bloğundan bir nefes ayrılır: düğmeler
   fiyatın hemen dibine yapışmıyor, satır kendi başına bir "karar alanı" gibi okunuyor. */
@media (min-width:901px){
  .product-form__row{margin-top:28px}
  .product-form__buy,.product-form__submit{min-height:54px}
  .product-form__row + .pdp-facts{margin-top:14px}
}
/* Tükendiyse "Şimdi al" basılmaz: kalan iki hücre sütunları doldursun */
.product-form__row:not(:has(.product-form__buy)){grid-template-columns:minmax(0,1fr) auto}
.product-form__buy{min-height:52px;font-size:15px;font-weight:600;margin:0;border-radius:var(--r-lg)}
/* Sarmalayıcı yalnız kargo rozetinin konumlandırma çapasıdır; kendi payı OLMAZ:
   `margin-top` iki düğmeyi birbirine göre kaydırıyordu. Rozetin taşma payını
   rozet varken satırın kendisi açar (aşağıdaki `:has`), böylece hiza bozulmaz. */
.product-form__submitwrap{position:relative;display:flex;min-width:0}
.product-form__submit{flex:1;min-height:52px;font-size:15px;font-weight:600;border-radius:var(--r-lg)}
.pdp-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  margin-left:2px;border:1px solid var(--line-2);border-radius:50%;background:var(--surface);color:var(--ink-3);
  transition:border-color var(--t),color var(--t)}
.pdp-icon-btn .icon{width:18px;height:18px}
.pdp-icon-btn:hover{border-color:var(--ink-4);color:var(--ink)}
.pdp-icon-btn.is-on{color:var(--sale);border-color:color-mix(in srgb,var(--sale) 45%,transparent)}
.pdp-icon-btn.is-on .icon{fill:currentColor}
@media (max-width:420px){
  /* En dar ekranda "Sepete ekle" + favori üstte, "Şimdi al" tam genişlikte altta.
     Üç hücrenin de yeri AÇIKÇA yazılır: `grid-column` verilip `grid-row` yazılmayan
     bir hücre otomatik akışı geri sarmıyor ve düğme yanlış satıra düşüyordu. */
  .product-form__row{grid-template-columns:minmax(0,1fr) auto}
  .product-form__submitwrap{grid-column:1;grid-row:1}
  .product-form__row .pdp-icon-btn{grid-column:2;grid-row:1}
  .product-form__buy{grid-column:1 / -1;grid-row:2}
}


/* --- bilgi listesi + tek çizgili kamyonet ---------------------------------------
   Kamyonet teslimat satırının ikonu: altındaki yol çizgisi akar, araç hafifçe salınır.
   Hareket azaltma tercihinde sahne durur. */
/* Bilgi listesi: kargo/teslimat, taksit, stok — ayraçlı satırlar, solda ikon sütunu */
.pdp-facts{list-style:none;margin:2px 0 0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Satırlar aynı tonda: metin ve vurgu --ink-2 (vurgu yalnız ağırlıkla), ikonlar --ink-3;
   ikon sütunu sabit 30 px olduğundan metinler aynı x'te başlar. */
.pdp-facts__row{display:flex;align-items:center;gap:10px;min-height:42px;padding:5px 0;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.pdp-facts__row + .pdp-facts__row{border-top:1px solid var(--line)}
.pdp-facts__icon{flex:none;width:30px;height:20px;display:grid;place-items:center;color:var(--ink-3)}
.pdp-facts__icon .icon{width:18px;height:18px}
.pdp-facts__text{min-width:0;color:inherit;text-decoration:none}
.pdp-facts__text strong{color:inherit;font-weight:600}
.pdp-facts__text .text-ok{color:var(--ok-text)}
.pdp-facts__text small{display:block;font-size:12px;color:var(--ink-3)}
.pdp-facts__dot{margin:0 6px;color:var(--ink-4)}
a.pdp-facts__text{text-decoration:none;cursor:pointer}
a.pdp-facts__text:hover{color:var(--ink)}
.pdp-facts__row--stock:has([data-stock]:empty){display:none}
.ship-eta__scene{width:30px;height:18px;color:var(--ink-3)}
.ship-eta__svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ship-eta__road{stroke-dasharray:5 7;opacity:.6;animation:eta-road 1s linear infinite}
.ship-eta__truck{animation:eta-bob 1.4s ease-in-out infinite}
@keyframes eta-road{to{stroke-dashoffset:-12}}
@keyframes eta-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.7px)}}
@media (prefers-reduced-motion:reduce){.ship-eta__road,.ship-eta__truck{animation:none}}

/* --- bilgi sütunundaki blok başlıkları ------------------------------------ */
.pdp-block__label{display:block;font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.005em;margin-bottom:-4px}

/* --- öne çıkan özellikler: sade ad–değer satırları ------------------------
   Kutulu ızgara uzun değerlerde (ör. "Pil tasarrufu sağlayan akıllı…") dört satıra
   uzayıp dengesiz yığınlara dönüyor, blok okunmaz oluyordu. Teknik tabloyla aynı dil:
   solda soluk ad, sağda değer, satırlar ince ayraçla ayrılır; göz tek sütunda iner. */
.pdp-hl{display:flex;flex-direction:column;gap:8px;margin-top:18px} /* bilgi listesinden sonra nefes payı */
.pdp-hl__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pdp-hl__head .pdp-block__label{margin-bottom:0}
.pdp-hl__all{display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:700;
  color:var(--primary-strong);text-decoration:none}
.pdp-hl__all .icon{width:15px;height:15px;transform:rotate(-90deg)}
.pdp-hl__list{display:flex;flex-direction:column}
.pdp-hl__item{display:flex;align-items:baseline;gap:14px;padding:7px 0;min-width:0;border-bottom:1px solid var(--line)}
.pdp-hl__item:last-child{border-bottom:0}
.pdp-hl__item span{flex:0 0 40%;max-width:180px;font-size:13px;color:var(--ink-3);line-height:1.4}
.pdp-hl__item strong{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}

/* --- sağ raf: referanstaki gibi çerçeveli kartlar -------------------------- */
.pdp-rail__card{padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.pdp-rail__card + .pdp-rail__card{padding-top:14px}
.pdp-rail__link{justify-content:space-between;padding:9px 0;border-top:1px solid var(--line-soft)}
/* "Bu üründe" satırları da aynı yumuşak ayraçla; kart boşluğu yerine satır iç boşluğu */
.pdp-rail__card:first-child{gap:0}
.pdp-rail__card:first-child .pdp-rail__row{padding:10px 0}
.pdp-rail__card:first-child .pdp-rail__row:first-child{padding-top:2px}
.pdp-rail__card:first-child .pdp-rail__row:last-child{padding-bottom:2px}
.pdp-rail__card:first-child .pdp-rail__row + .pdp-rail__row{border-top:1px solid var(--line-soft)}
.pdp-rail__link::after{content:"";width:7px;height:7px;flex:none;margin-left:auto;
  border-right:1.5px solid var(--ink-4);border-top:1.5px solid var(--ink-4);transform:rotate(45deg)}
.pdp-rail__seller{gap:6px}
/* Telefonda raf: dört taahhüt 2×2 ızgara — dikey yığında `flex-basis:200px` (≤1100 px
   kuralı, yatay eksen için) dikey eksene uygulanıp her satırı 200 px'e çekiyordu.
   Satıcı kartında bağlantılar tek sütun kalır; telefon numarası dokunulabilir satırdır. */
@media (max-width:640px){
  .pdp-rail__card:first-child{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:2px 12px}
  .pdp-rail__card:first-child .pdp-rail__row{flex:none;padding:10px 0;align-items:flex-start}
  .pdp-rail__card:first-child .pdp-rail__row + .pdp-rail__row{border-top:0}
  .pdp-rail__card:first-child .pdp-rail__row:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .pdp-rail__card:first-child .pdp-rail__row:nth-child(even){padding-left:12px;border-left:1px solid var(--line-soft)}
  .pdp-rail__card:first-child .pdp-rail__row:first-child,.pdp-rail__card:first-child .pdp-rail__row:last-child{padding-top:10px;padding-bottom:10px}
  .pdp-rail__row strong{font-size:13px;line-height:1.3}
  .pdp-rail__row small{font-size:11.5px}
  .pdp-rail__seller .pdp-rail__row{flex:none}
  .pdp-rail__store{min-height:0;padding:4px 0 10px}
  .pdp-rail__store img{height:20px}
  .pdp-rail__link{min-height:40px;padding:6px 0;font-size:13.5px}
}

/* ==========================================================================
   ÜRÜN SAYFASI — alt blok: tam genişlikte sekme şeridi + içerik
   Sekmeler ve atlama bağlantıları tek şeritte, aralarında boşluk yok; her
   başlık bir ikon taşır. 1000 px altında içerik akordeona döner.
   ========================================================================== */
/* Sekme panelleri: taksit tablosu ve değerlendirmeler */
.pdp-inst{padding:0 0 22px}
.pdp-inst .inst--tabs .inst__table,.pdp-inst .inst--table .inst__table{max-width:560px}
.pdp-reviews .reviews{padding:0 0 22px}
.pdp-reviews .section__head--row{display:flex;justify-content:space-between;align-items:center;text-align:left;gap:12px;margin-bottom:14px;padding-bottom:0}
.pdp-reviews .section__head--row::before{display:none}
.reviews__count{font-size:13px;font-weight:600;color:var(--ink-3)}
.pdp-detail .accordion.is-tabs .pdp-inst,.pdp-detail .accordion.is-tabs .pdp-reviews .reviews{padding-top:0}

/* Sekme paneli: ürün SSS listesi (panel içi <details>, akordeon biçimini almaz) */
.pdp-faq{display:flex;flex-direction:column;padding-bottom:18px}
.pdp-faq__item{border-bottom:1px solid var(--line)}
.pdp-faq__item>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;
  font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.pdp-faq__item>summary::-webkit-details-marker{display:none}
.pdp-faq__item>summary::after{content:"+";flex:none;font-size:18px;line-height:1;color:var(--ink-3)}
.pdp-faq__item[open]>summary::after{content:"–"}
.pdp-faq__item>summary:hover{color:var(--primary-strong)}
.pdp-faq__a{padding:0 0 14px;max-width:80ch;font-size:14px;line-height:1.65;color:var(--ink-2)}
.pdp-faq__a p{margin:0 0 8px}
.pdp-detail .accordion.is-tabs .pdp-faq{padding-top:2px}

/* Ürün sayfası öneri kartları: satırda 5 (dar ekran kuralları geçerli) */
.product-page .grid--products{--cols:5}

/* Açıklama/teknik/kargo/iade sekmeleri ve değerlendirmeler beyaz bir yüzeyde durur
   (sayfa zemini --page hafif gri); üst ayraç yerine yüzeyin kendi kenarı var. */
.pdp-lower{margin-top:16px;padding:20px 24px 8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.pdp-lower__main{min-width:0}
.pdp-detail{margin-top:0;padding-top:0;border-top:0}
.pdp-lower .qa{padding-block:clamp(22px,2.6vw,34px)}
/* Yorum gövdesi ve soru metni: sütun genişlese de satır uzunluğu sabit kalır */
.review__body,.qa__q p,.qa__a p{max-width:72ch}

.pdp-tabbar-host{border-bottom:1px solid var(--line);margin-bottom:22px}
/* Şerit kurulmadıysa (akordeon kipi) yuva boş kalır; çizgi ve boşluk basılmaz */
.pdp-tabbar-host:not(:has(.pdp-tabs)){display:none}
.pdp-tabbar{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.pdp-tabbar__tabs{display:contents}
/* Şerit çubuğun tam genişliğini alır ve sekmeler bu genişliğe EŞİT aralıkla yayılır:
   ilk sekme içeriğin sol kenarında, son sekme sağ kenarında biter. `gap` burada
   alt sınırdır; asıl boşluğu `space-between` dağıtır. */
.pdp-tabs{display:flex;flex:1 1 100%;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;border-bottom:0;margin-bottom:0}
.pdp-tabs button{display:inline-flex;align-items:center;gap:8px;padding:0 0 13px;margin-bottom:-1px;
  font-family:var(--fh);font-size:15px;font-weight:500;color:var(--ink-3);background:none;border:0;
  border-bottom:2px solid transparent;cursor:pointer;text-decoration:none;min-height:40px;
  transition:color var(--t),border-color var(--t)}
.pdp-tabs button .icon{width:18px;height:18px;color:var(--ink-4);transition:color var(--t)}
.pdp-tabs button:hover{color:var(--ink)}
.pdp-tabs button:hover .icon{color:var(--ink-2)}
.pdp-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--primary)}
.pdp-tabs button[aria-selected=true] .icon{color:var(--primary-strong)}
/* Sayı rozeti (SSS 5, Değerlendirmeler 12): başlığın yanında küçük yuvarlak hap;
   seçili sekmede marka tonuna döner. Akordeon başlığında da aynı hap basılır. */
.pdp-tabbar__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--r-pill);background:var(--line-soft);font-size:11.5px;font-weight:700;line-height:1;color:var(--ink-3);
  transition:background var(--t),color var(--t)}
.pdp-tabs button:hover .pdp-tabbar__count{color:var(--ink)}
.pdp-tabs button[aria-selected=true] .pdp-tabbar__count{background:var(--tint);color:var(--primary-strong)}
/* Akordeon kipinde (dar ekran) aynı ikon başlığın solunda */
.pdp-detail .accordion>details>summary{justify-content:flex-start;gap:9px}
.pdp-detail .accordion>details>summary::after{margin-left:auto}
.pdp-detail .accordion>details>summary .icon{width:18px;height:18px;color:var(--ink-4)}
.pdp-detail .accordion>details>summary .pdp-tabbar__count{margin-left:-1px}

/* 1000–1200 px arası yedi sekme tek satıra sığmaz; yazı bir tık küçülür, aralık daralır.
   1140 altında ikonlar da kalkar (7 × 24 px): yoksa "Değerlendirmeler" ikinci satıra
   düşüp `space-between` ile tek başına sola yapışıyordu. Akordeon kipi (<1000) ikonlu. */
@media (max-width:1200px){
  .pdp-tabs{gap:10px 14px}
  .pdp-tabs button{font-size:14px;gap:6px}
}
@media (max-width:1140px){
  .pdp-tabs button .icon{display:none}
}
@media (max-width:640px){
  .pdp-lower{padding:16px 14px 4px}
  .pdp-tabbar{gap:18px}
}

/* ==========================================================================
   TELEFON İNCE AYARI (20 Eyl 2026) — logo · çekmece · hero · ürün kartı
   Kural: dosyanın sonunda durur ki yukarıdaki dar ekran kurallarını aynı
   özgüllükle ezsin; masaüstü ölçeğine dokunmaz.
   ========================================================================== */
@media (max-width:640px){
  /* Logo: 40 px'lik ikon düğmelerinin yanında %75 (27 px) hâlâ iri duruyordu → %60 (22 px) */
  .header__logo img{height:calc(var(--logo-h,36px) * .6)}
  .header__wordmark{font-size:17px}

  /* Çekmece bağlantıları: 14 px dikey pay + 16 px yazı 55 px'lik satır yapıyordu → 45 px */
  .drawer__body.mobile-nav{padding-top:4px}
  .mobile-nav__item summary,.mobile-nav__link{padding:11px 0;font-size:15px;line-height:1.4}
  .mobile-nav__item ul{padding:0 0 10px 12px;gap:8px;font-size:14px}
  .mobile-nav__link--blog .nav__script{font-size:20px}

  /* Hero: telefonda metin bloğu görselden yüksekti; etiket/başlık/alt yazı/düğme bir kademe iner,
     düğme tam genişlik yerine içeriği kadar. Görsel bandı (16:10) olduğu gibi kalır. */
  .hero-deck{--deck-px:16px;--deck-py:16px}
  .hslide .hero__eyebrow{font-size:12px;line-height:1.4;margin-bottom:10px;padding-bottom:6px;max-width:none}
  .hslide .hero__eyebrow::after{width:28px;height:2px}
  .hslide .hero__title{font-size:clamp(20px,5.4vw,24px);line-height:1.15;letter-spacing:-.02em;margin:0 0 8px}
  .hslide .hero__sub{font-size:13px;line-height:1.5;margin:0 0 14px;max-width:none}
  .hero__actions .btn--lg{min-height:38px;padding:0 18px;font-size:13px;flex:0 0 auto}
  .hero__actions{gap:8px}
  .hero-deck--nav .hslide .hero__inner{padding-bottom:calc(var(--deck-py) + 40px)}
  .hero-deck__nav{bottom:calc(var(--deck-py) - 4px)}
  .hero-deck__arrow{width:30px;height:30px}
  .hero-deck__arrow svg{width:16px;height:16px}

  /* Ürün kartı: 2 sütunda ~175 px'lik kartta 13/16 px yazı iri kalıyordu; tüm ölçek bir kademe iner.
     Kartta favori/karşılaştır düğmesi yok — tek eylem ürüne gitmek. */
  .grid--products,.collection-layout__main .grid--products{gap:8px}
  .card__fav,.card__cmp{display:none}
  .card__img{padding:8px}
  .card__badges{top:6px;left:6px;gap:4px}
  .badge{height:20px;padding:0 7px;font-size:10px}
  .card__body{padding:8px 9px 9px;gap:2px}
  /* Ad her kartta İKİ satır yer tutar: tek satırlık ad da aynı yüksekliği alır, uzun ad ikinci satıra
     düşünce yanındaki kartla hizası bozulmaz; puan/kargo/fiyat hep aynı seviyeden başlar. */
  .card__title{font-size:12px;line-height:1.35}
  .card__title a{min-height:calc(2 * 1.35em)}
  .card__rating{font-size:11px;--star-size:11px;gap:4px}
  .card__ship{font-size:11px;gap:4px}
  .card__ship .icon{width:12px;height:12px}
  .card__swatches{gap:3px;margin-top:2px}
  .card__swatch{width:9px;height:9px}
  .card__swatch-more{font-size:10px}
  /* Fiyat: eski fiyat hep kendi satırında, üstte. Yan yana dizilince uzun tutar rastgele kırılıyor,
     kartlar farklı görünüyordu. */
  .card__price{padding-top:2px}
  .card__price .price{flex-direction:column;align-items:flex-start;gap:1px;font-size:14px;line-height:1.25}
  .card__price .price__compare{font-size:11px}
  /* Ana sayfa rafı: görünümde tam iki kart (yarım üçüncü kart yok), kaydırınca ikişer ilerler */
  .grid--carousel{gap:8px;margin-right:0}
  .grid--carousel > *{flex:0 0 calc(50% - 4px);min-width:0;max-width:none;display:flex}
  /* Sarmalayıcı (.reveal) esner ama kart esnemiyordu: kargo satırı olan kart uzun, olmayan kısa kalıyordu */
  .grid--carousel .card{flex:1 1 auto;width:100%}
}

/* ==================================================================== ÇATAL AKTARIMI 10 EKİ (B8 · B11 · B12)
   Blog araması (kenar çubuğu), yorum formu kapısı (review_access), kişiye özel baskı dosyası (ürün + sepet). */
.blog__search{display:flex;align-items:center;gap:6px;margin:0 0 18px;padding:0 4px 0 12px;min-height:42px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transition:border-color var(--t)}
.blog__search:focus-within{border-color:var(--ink-3)}
.blog__search input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:14px;color:var(--ink)}
.blog__search button{display:grid;place-items:center;width:34px;height:34px;border:0;background:none;color:var(--ink-3);cursor:pointer}
.blog__search button:hover{color:var(--primary-strong)}
.blog__filter{margin:0 0 14px}
@media (max-width:760px){.blog__search{margin-bottom:10px}}

.review-gate{display:grid;gap:12px;padding-bottom:18px}
.review-gate p{margin:0;color:var(--ink-2)}
.review-gate__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

.pdp-upload{display:grid;gap:10px;margin:4px 0 18px}
.pdp-upload__label{margin:0;font-size:13px;font-weight:600;color:var(--ink)}
.pdp-upload__drop{position:relative;display:flex;align-items:center;gap:14px;padding:16px;border:1.5px dashed var(--line);
  border-radius:var(--r-lg);background:var(--surface-2);cursor:pointer;transition:border-color var(--t),background var(--t)}
.pdp-upload__drop:hover,.pdp-upload__drop.is-over{border-color:var(--primary);background:var(--tint)}
.pdp-upload__drop:focus-within{box-shadow:var(--ring)}
.pdp-upload__drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pdp-upload__ico{flex:none;width:38px;height:38px;padding:8px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--primary-strong)}
.pdp-upload__drop span{display:grid;gap:2px;min-width:0}
.pdp-upload__drop strong{font-size:14px;font-weight:600;line-height:1.35;color:var(--ink)}
.pdp-upload__drop small{font-size:12px;line-height:1.4;color:var(--ink-4)}
.pdp-upload.is-error .pdp-upload__drop{border-color:var(--sale)}
.pdp-upload__progress{height:6px;border-radius:3px;background:var(--line-2);overflow:hidden}
.pdp-upload__progress span{display:block;height:100%;width:0;background:var(--primary);transition:width .2s}
.pdp-upload__file{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.pdp-upload__thumb{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r);background:var(--bg);overflow:hidden;
  font-size:11px;font-weight:700;color:var(--ink-4)}
.pdp-upload__thumb img{width:100%;height:100%;object-fit:cover}
.pdp-upload__meta{display:grid;gap:2px;min-width:0;flex:1}
.pdp-upload__meta strong{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdp-upload__meta small{font-size:12px;color:var(--ink-4)}
.pdp-upload__change{flex:none;border:0;background:none;padding:6px 2px;font:inherit;font-size:13px;font-weight:600;color:var(--primary-strong);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pdp-upload__error{margin:0;font-size:13px;color:var(--sale)}
.pdp-upload__note{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink)}
.pdp-upload__note small{font-weight:400;color:var(--ink-4)}
.pdp-upload__note textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  font:inherit;font-size:14px;line-height:1.5;font-weight:400;color:var(--ink);resize:vertical}
.pdp-upload__note textarea:focus{outline:0;border-color:var(--ink-3)}

.cart-line__upload{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;color:var(--ink-3);min-width:0}
.cart-line__upload img{flex:none;width:32px;height:32px;border-radius:var(--r-sm);object-fit:cover;border:1px solid var(--line)}
.cart-line__upload span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ==================================================================== /ÇATAL AKTARIMI 10 EKİ */