/* ==========================================================================
   vadenusa.com — tek stil dosyası

   GÖRSEL REFERANS: vadenoriginal.com / vaden.com.tr (ana site).
   vadenusa.com o ailenin ABD üyesi; tipografi, palet ve form oradan gelir.
   Ölçüm kaynağı: .cache/vaden-ref/css/ — ana sitenin kendi 106 KB CSS'i.

   Ana siteden ALINAN: Poppins · nötr gri ailesi (mavi tonu sıfır) ·
   #d32f2f ürün kırmızısı + #ff0000 marka kırmızısı · 8/10/12/15/20px köşe ·
   gölge ile katman ayırma · 3px imza alt çizgisi · hover'da renk TAKASI.

   Ana siteden ALINMAYAN ve nedeni:
   · 9pt (12px) gövde metni  -> 14px. Eldivenli elle telefon kullanan tamirci.
   · #979797 (2.92:1) metin  -> #606060 (5.87:1). AA geçmiyordu.
   · #bcbcbc (1.90:1) metin  -> yalnız çizgi rengi olarak alındı.
   · outline:none odak       -> 2px halka korunur.
   · karanlık tema yok       -> biz türettik; griler orada da nötr.
   ========================================================================== */

:root{
  /* Ana sitenin tek kuralı: *{font-family:'Poppins',sans-serif} (main.css:2).
     TEK AİLE — müşteri kararı (2026-08-17): Azeret Mono çıkarıldı, ana sitede
     de monospace yok. --font-mono tokeni SİLİNMEDİ (40+ kural kullanıyor,
     koparmak sessiz bozulma olurdu) ama artık Poppins'i gösteriyor; rakam
     hizalaması tablo hücrelerindeki sağa yaslamayla korunuyor. */
  /* "Poppins Fallback": olculeri Poppins'e esitlenmis yedek (fonts.css).
     Poppins yuklenene kadar metin onunla cizilir ve degisim aninda satirlar
     yerinden oynamaz. Sirada ONCE o gelmeli, sistem yazi tipleri sonra. */
  --font-display:"Poppins","Poppins Fallback","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Poppins","Poppins Fallback","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"Poppins","Poppins Fallback","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;

  /* Ölçek: ana sitenin pt değerleri px'e çevrildi (1pt=1.333px), 16px kök.
     --fs-body 12px DEĞİL 14px — gerekçe dosya başında. */
  --fs-pn-xl:2.125rem;   /* 34px — ana sitenin hero h1'i */
  --fs-pn-lg:1.5rem;     /* 24px — h4 / 18pt */
  --fs-h2:1.25rem;       /* 20px — h5 */
  --fs-h3:1rem;          /* 16px — h6 / 12pt, kart başlığı */
  --fs-body:.875rem;     /* 14px — 10.5pt, gövde ve tüm kontroller */
  --fs-ui-lg:.9375rem;   /* 15px — 11pt, büyük buton */
  --fs-data:.8125rem;    /* 13px — 10pt, tablo gövdesi */
  --fs-label:.65625rem;  /* 10.5px — 8pt, etiket */
  --fs-tab:1.1875rem;    /* 19px — 14pt, sekme etiketi */
  --ls-label:.12em; --ls-display:-.025em;
  --fw-h:500; --fw-em:600; --fw-max:700;   /* ana sitede 500 baskın: 82 kez */

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:5rem;
  --s-btn:.625rem;

  /* Köşe: ana sitenin en büyük tek görsel imzası. 20px(31) 15px(25) 8px(21) */
  /* Kose ailesi bir kademe kisildi: 15/20px kartlarda ve fotograf
     plakalarinda fazla yumusak duruyordu. Ana sitenin 8-20px araligi
     korunuyor, ust ucu kullanilmiyor. */
  --radius:6px; --radius-sm:4px; --radius-md:8px; --radius-lg:10px;
  --radius-card:10px; --radius-media:12px; --radius-pill:50%;
  --radius-data:4px;     /* bizim kuralımız: veri hücresi 8px'i geçmez */
  --border:1px; --border-strong:2px;
  --rule:3px;            /* imza alt çizgisi — onsuz "Vaden gibi" olmuyor */
  --container:1440px; --gutter:1.5rem; --container-pad:.75rem;
  --measure:68ch; --row-h-touch:48px;

  /* Gölge — doktrin değişikliği. Ana sitenin kart dili gölge üzerine kurulu.
     Kural: gölge yalnız YÜZEN/ETKİLEŞEN yüzeyde; statik veri yüzeyi hairline'da
     kalır — tablo, .cov, .oem, .facet, .panel, .b2b, .totals, .score gölge ALMAZ. */
  --shadow-card:0 10px 10px 0 rgba(0,0,0,.075);
  --shadow-raise:0 10px 30px 0 rgba(0,0,0,.075);
  --shadow-header:0 4px 6px rgba(0,0,0,.1);
  --shadow-overlay:0 10px 17px 0 rgba(0,0,0,.063);

  /* Yüzey — nötr. Ana sitede grinin mavi tonu SIFIR; bizimki mavimsiydi ve
     tek başına "bu Vaden değil" dedirtiyordu. */
  --ground:#ffffff; --surface:#ffffff; --surface-2:#f4f4f4; --sunken:#eaeaea;
  --ink:#1f1f1f;         /* 15.39:1 — kurumsal siyah, 61 kez */
  --text:#262f2e;        /* 12.82:1 — ürün tarafının metin rengi, 24 kez */
  --muted:#606060;       /* 5.87:1 — ana sitenin #979797'si 2.92:1 ile geçmiyordu */
  --faint:#6e6e6e;       /* 4.76:1 */
  --faint-line:#bcbcbc;  /* METİN DEĞİL: pasif nokta, ayraç, ikon */
  --line:#e3e3e3; --hair:#eeeeee; --hair-card:#f2f2f2;
  --line-strong:#b2b2b2;
  --rule-hard:#707070;   /* 4.95:1 — veri tablosu satır çizgisi */

  /* Kırmızı ikiye ayrılır: ürün yüzünde #d32f2f (51 kez, product.css),
     kurumsal yüzde #ff0000 (85 kez). Marka kırmızısı 3.73:1 — küçük metinde
     AA geçmez; yalnız 24px üstü, logo, multiply ve dekoratif işaret. */
  --red:#d22020;         /* 5.29:1 — beyaz uzerinde ve uzerinde beyaz yaziyla */
  --red-brand:#ff0000;
  --red-plate:#d32f2f;   /* fotograf uzeri multiply plakasi — her temada ayni */
  --red-hover:#1f1f1f;   /* ana sitenin karakteristik hamlesi: koyultma değil TAKAS */
  --red-ink:#b71c1c;     /* 6.57:1 — kırmızı METİN gerektiğinde */
  --red-soft:#fbeae9;
  --in-stock:#0c6d55; --in-stock-soft:#e0f1ec;
  --backorder:#9c5c07; --backorder-soft:#fbf1de;
  --unavailable:#606060; --unavailable-soft:#f4f4f4;
  /* Ana sitede link mavisi YOK — tek mavi kural yoruma alınmış.
     Mavi tek başına aileden çıkarıyordu. */
  --link:#1f1f1f; --link-hover:#d32f2f; --link-soft:#f4f4f4;
  --focus:#d32f2f;
  --band:#262f2e;        /* ürün bandı (product.css:1) */
  --band-alt:#1f1f1f;    /* kurumsal bant (production.css:116) */
  --band-ink:#bcbcbc;    /* 7.23:1 koyu bantta — AAA. Beyazda kullanılamayan
                            renk koyu bantta tam yerinde. */
  --on-band:#ffffff;
  --on-red:#ffffff;      /* 4.98:1 */
  --on-hover:#ffffff;    /* --red-hover (#1f1f1f) üzerinde 16.48:1 */
  --plate:#ffffff; --plate-mark:#bcbcbc;   /* acik temada gorunmez zemin */
}

/* Ana sitede karanlık tema YOK (prefers-color-scheme / data-theme: 0 eşleşme).
   Site her zaman açık temayla açılır; koyu tema yalnızca tema düğmesiyle seçilir,
   sistem ayarına bakılmaz (kullanıcı kararı, 2026-11-02).
   Light Vaden'e benziyor; dark bizim eserimiz — ama griler orada da nötr,
   yoksa tema anahtarında site kimlik değiştiriyor gibi görünür. */
:root[data-theme="dark"]{
  --ground:#0b0c0c; --surface:#141616; --surface-2:#1c1f1f; --sunken:#101212;
  --ink:#ffffff; --text:#dcdedd; --muted:#9a9d9c; --faint:#7c807f;
  --faint-line:#3b3f3e;
  --line:#2a2e2d; --hair:#232626; --hair-card:#262a29;
  --line-strong:#4a4f4e; --rule-hard:#606564;
  --red:#ff6b60; --red-brand:#ff6b60; --red-hover:#ff8078;
  --red-plate:#d32f2f;
  --red-ink:#ff8b83; --red-soft:#23100e;
  --in-stock:#42c3a2; --in-stock-soft:#0a201b;
  --backorder:#e2a34c; --backorder-soft:#231a0c;
  --unavailable:#9a9d9c; --unavailable-soft:#1c1f1f;
  --link:#dcdedd; --link-hover:#ff6b60; --link-soft:#1c1f1f;
  --focus:#ff6b60;
  --band:#0a0d0d; --band-alt:#121414; --band-ink:#bcbcbc; --on-band:#ffffff;
  --on-red:#1a0605;
  --on-hover:#1a0605;    /* --red-hover (#ff8078) üzerinde 8.03:1 */
  --plate:#c9d3db; --plate-mark:#6b6f6e;
  --shadow-card:0 10px 10px 0 rgba(0,0,0,.5);
  --shadow-raise:0 10px 30px 0 rgba(0,0,0,.5);
  --shadow-header:0 4px 6px rgba(0,0,0,.55);
  --shadow-overlay:0 10px 17px 0 rgba(0,0,0,.6);
}

/* ============================ base ============================ */
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--font-body);
  font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s-5)}
.mono,.pn,.price,.qty{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.scroll-x{overflow-x:auto}
.measure{max-width:var(--measure)}
.label{font-family:var(--font-display);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.lead{color:var(--muted);margin:var(--s-2) 0 var(--s-5)}
.ptitle{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.125rem);font-weight:var(--fw-em);
  letter-spacing:-.022em;color:var(--ink);margin:var(--s-4) 0 0;line-height:1.15}
.draft{font-family:var(--font-mono);font-size:12px;color:var(--backorder);
  background:var(--backorder-soft);border:var(--border) solid var(--line);
  border-radius:var(--radius);padding:10px 13px;display:inline-block}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.draftbar{background:var(--backorder);color:#160f04;font-family:var(--font-display);
  font-size:12px;font-weight:700;letter-spacing:.04em;padding:7px 0;text-align:center}

/* ============================ utility serit ============================
   Sayfanin ilk pikseli koyu ve kurumsal. Sticky DEGIL: kaydirinca kaybolur,
   yapiskan olan yalnizca calisma cubugu (.topbar).
   ==================================================================== */
.util{background:var(--band-alt);color:var(--band-ink)}
.util__in{max-width:var(--container);margin:0 auto;padding:0 var(--s-5);min-height:34px;
  display:flex;align-items:center;gap:var(--s-3)}
.util__f{font-size:11px;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.util__sp{flex:1}
.util .themebtn{border-color:rgba(255,255,255,.14);color:var(--band-ink);width:30px;height:24px}
.util .themebtn:hover{color:#fff;border-color:var(--on-band)}
.util .lang{border-color:rgba(255,255,255,.14)}
.util .lang b{background:var(--on-band);color:var(--band-alt)}
.util .lang a{background:transparent;color:var(--band-ink)}
.util .lang a:hover{color:#fff}
.util .lang b,.util .lang a{padding:4px 9px;font-size:11px}
.util__c,.topbar__c{display:flex;align-items:center;gap:var(--s-3);flex:none}
/* Kontroller iki yerde basili, biri her zaman kapali. 820px altinda ust serit
   tumden kalkar: kurumsal metin zaten gizliydi ve serit yalnizca bu iki
   kontrol icin 50px yer kapliyordu. */
.topbar__c{display:none}
/* Dar ekranda "Distributor Login" 152px kapliyor ve dil anahtarini kendi
   satirina itiyordu (basliga fazladan 58px). Kisa etiket ucunu ayni satirda
   tutar: logo + dil + giris = 287px, 327px'lik ic genislige sigar. */
.lbl-sm{display:none}
@media (max-width:820px){
  .util{display:none}
  .topbar__c{display:flex;order:7}
  .lbl-lg{display:none}
  .lbl-sm{display:inline}
}

/* ============================ topbar ============================ */
.topbar{background:var(--surface);border-bottom:var(--border) solid var(--line);
  position:sticky;top:0;z-index:20;transition:box-shadow .2s}
/* Ana site kaydırıldığında başlığa gölge düşürüyor — katman ayrımı gölgeyle. */
.topbar.is-stuck{box-shadow:var(--shadow-header);border-bottom-color:transparent}
.topbar__in{max-width:var(--container);margin:0 auto;padding:0 var(--s-5);min-height:82px;
  display:flex;align-items:center;gap:var(--s-4);flex-wrap:nowrap;
  transition:min-height .3s}
/* Kaydirinca baslik inceliyor: ilk ekranda kurumsal duruyor, calisirken
   yer kaplamiyor. Eski vadenusa basliginin davranisi. */
.topbar.is-stuck .topbar__in{min-height:62px}
.brand{display:flex;align-items:center;flex:none}
.brand:hover{text-decoration:none}
/* Resmi logo tek renk koyu ve seffaf zeminli. Dark temada beyaz plaka koymak
   yerine filtreyle cevriliyor: plaka koyu arayuzde yamali duruyor.
   brightness(0) tum opak pikselleri siyaha sabitler, invert(1) beyaza cevirir —
   alfa korunur, kaynak rengi ne olursa olsun sonuc temiz beyazdir. */
.brand__logo{height:46px;width:auto;display:block;transition:height .3s}
.topbar.is-stuck .brand__logo{height:36px}
/* Logo 2026-11: kirmizi seritli. Koyu temada filtre yerine ayri dosya (harfler beyaz,
   seritler kirmizi); filtre seritleri de beyaza ceviriyordu. */
.brand__logo--dark{display:none}
:root[data-theme="dark"] .brand__logo--light{display:none}
:root[data-theme="dark"] .brand__logo--dark{display:block}
.nav{display:flex;gap:var(--s-4);font-family:var(--font-display);font-size:13.5px;
  font-weight:600;min-width:0;align-items:center;flex:0 0 auto;
  margin-left:var(--s-5)}
.nav a,.nav__b{color:var(--ink);padding-block:10px;position:relative;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
/* Eski vadenusa basliginin (ve ana sitenin) liste imi: her maddenin onunde
   kalici kirmizi nokta. Hover'da kaybolmaz, yalnizca buyur — bir gosterge
   degil, markanin isareti. */
.nav a::before,.nav__b::before{content:"";flex:none;width:6px;height:6px;
  border-radius:50%;background:var(--red);transition:transform .15s}
.nav a:hover,.nav__b:hover{color:var(--red);text-decoration:none}
.nav a:hover::before,.nav__b:hover::before{transform:scale(1.5)}
.nav a[aria-current]{color:var(--red);font-weight:var(--fw-em)}
.nav a[aria-current]::before{transform:scale(1.5)}
/* Yalnizca panel acan ust madde (Production): govdede karsiligi olmadigi icin
   <button>. Denetim kromu silinir, kardes baglantilarla ayni gorunur. */
.nav__b{font:inherit;background:none;border:0;cursor:pointer}
@media (prefers-reduced-motion:reduce){.nav a::before,.nav__b::before{transition:none}}
/* Gezinme sayaci: kac marka, kac arac. Gezinmenin kendisi kapsam beyani olur. */
.nav__n{font-size:10px;font-weight:400;color:var(--faint);
  font-variant-numeric:tabular-nums}
.topbar__sp{flex:1}
/* ---- mega menu: saf CSS dropdown (:hover + :focus-within). JS yok; klavye
   kullanicisi Tab ile panele girer, mobilde (nav yatay kayar) panel kapali. */
.nav__g{position:relative;display:inline-flex}
.drop{visibility:hidden;opacity:0;position:absolute;top:100%;left:-12px;z-index:30;
  min-width:255px;padding:10px;background:var(--surface);
  border:var(--border) solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-header);display:grid;gap:2px;
  transition:opacity .15s,visibility .15s}
.nav__g:hover>.drop,.nav__g:focus-within>.drop{visibility:visible;opacity:1}
.drop--2{grid-template-columns:1fr 1fr;min-width:470px}
.drop a{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:7px 10px;border-radius:var(--radius);color:var(--muted);
  font-weight:600;white-space:nowrap}
.drop a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.drop a::after{content:none}  /* kirmizi alt cizgi animasyonu panel icine tasinmasin */
.drop a::before{content:none} /* kirmizi nokta yalnizca ust seviyede */
/* Dis bag oku: bu baglantilar grup sitesine, yeni sekmede acilir. */
.drop__x{font-size:11px;color:var(--faint);flex:none}
.drop a:hover .drop__x{color:var(--red)}
.drop--note{padding-bottom:6px}
.drop__note{grid-column:1/-1;margin:4px 10px 0;padding-top:8px;
  border-top:var(--border) solid var(--line);font-size:11.5px;color:var(--faint)}
.drop__n{font-family:var(--font-mono);font-size:10.5px;color:var(--faint);font-weight:400;
  font-variant-numeric:tabular-nums}
.drop__all{color:var(--link)}
@media (max-width:1319px){.drop{display:none}}
@media (prefers-reduced-motion:reduce){.drop{transition:none}}
.tsearch{display:flex;align-items:center;border:var(--border) solid var(--line);
  border-radius:999px;background:var(--surface-2);height:46px;
  flex:0 1 250px;min-width:188px;padding:0 5px 0 14px;overflow:hidden}
.tsearch:focus-within{border-color:var(--ink)}
.tsearch__i{flex:none;width:17px;height:17px;color:var(--muted)}
.tsearch:focus-within .tsearch__i{color:var(--red)}
/* Odak halkasi ALANIN kendisinde degil hapin cevresinde: ic ice iki
   yuvarlak cerceve (input outline + hap kenarligi) kirli duruyordu. */
.tsearch input:focus-visible{outline:none}
.tsearch:focus-within{box-shadow:0 0 0 2px var(--focus)}
.tsearch input{border:0;background:transparent;flex:1;min-width:0;padding:0 10px;
  font-family:var(--font-body);font-size:var(--fs-data);color:var(--ink)}
.tsearch input::placeholder{color:var(--faint)}
/* Kirmizi yuvarlak gonder dugmesi — eski basligin imzasi. Sayfanin birincil
   kirmizi butonu DEGIL: arama alaninin parcasi, bu yuzden .btn--primary
   sinifini almaz (verify sayfa basina tek birincil kirmizi buton sayar). */
.tsearch__go{flex:none;width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;
  background:var(--red);color:var(--on-red);
  display:flex;align-items:center;justify-content:center;transition:background-color .2s}
.tsearch__go svg{width:16px;height:16px}
.tsearch__go:hover{background:var(--ink);color:var(--surface)}
.themebtn{background:transparent;border:var(--border) solid var(--line-strong);
  border-radius:var(--radius);color:var(--muted);width:32px;height:32px;cursor:pointer;
  font-size:14px;line-height:1;flex:none}
.themebtn:hover{color:var(--ink);border-color:var(--ink)}
.lang{display:flex;border:var(--border) solid var(--line-strong);border-radius:var(--radius);
  overflow:hidden;font-family:var(--font-display);font-size:12px;font-weight:700;flex:none}
.lang b,.lang a{padding:7px 10px;line-height:1.1}
.lang b{background:var(--ink);color:var(--ground)}
.lang a{color:var(--muted);background:var(--surface)}
.lang a:hover{color:var(--ink);text-decoration:none}
/* Dar ekranda gezinti GIZLENMEZ — kendi satirina iner ve yatay kayar.
   Onceki hali 1180px altinda .nav'i display:none yapiyordu ve yerine hicbir sey
   koymuyordu: tablette ve telefonda dort ana bolume erisim yoktu. */
/* Sinir 1319px (2026-11): yeni, daha genis logoyla 1260-1319px araliginda menu ayni
   satira sigmiyordu (eski logoyla da 1260'ta 15px tasma vardi). */
@media (max-width:1319px){
  .topbar__in{padding-top:8px;padding-bottom:8px;row-gap:8px;flex-wrap:wrap}
  .nav{order:9;flex-basis:100%;overflow-x:auto;gap:var(--s-5);
       padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .nav a{white-space:nowrap;padding-bottom:6px}
}
/* Arama da kendi satirina iner: onceki hali flex ile 2px'e cokuyordu ve
   baslik satiri 25-43px tasiyordu. */
@media (max-width:820px){
  .tsearch{order:8;flex:1 1 100%;min-width:0;height:48px}
  .tsearch input{font-size:14px;padding:0 13px}
  /* Üst şerit mobilde kalkıyor; tema düğmesi TOPBAR kopyasında yaşamalı.
     Önceki hali ikisini birden gizliyordu ve telefonda karanlık tema
     seçilemiyordu. */
  .util .themebtn{display:none}
  .topbar__sp{display:none}
}
@media (max-width:600px){.brand__logo{height:32px}}

/* ============================ buttons ============================ */
.btn{font-family:var(--font-display);font-size:var(--fs-body);font-weight:var(--fw-h);
  padding:var(--s-btn) 20px;border-radius:var(--radius);
  border:var(--border) solid transparent;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;white-space:nowrap;line-height:1}
.btn--primary{background:var(--red);color:var(--on-red);border-color:var(--red)}
/* Ana sitenin imzası: kırmızı buton hover'da KOYULAŞMAZ, siyaha döner.
   Metin rengi zeminle birlikte takas edilmeli: dark'ta hover AÇILDIĞI için
   (--red-hover #ff8078) beyaz metin 2.44:1'e düşüyordu. --on-red zaten her
   iki temada da kırmızı ailesinin karşıtı. */
.btn--primary:hover{background:var(--red-hover);border-color:var(--red-hover);
  text-decoration:none;color:var(--on-hover)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
/* Hayalet buton ters yönde takas eder: çerçeveden dolu siyaha. */
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--surface);
  text-decoration:none}
.btn--sm{padding:6px 13px;font-size:var(--fs-data)}
/* Baslikta duran bayi girisi: koyu hap. Eski vadenusa basliginda da ayni
   islevi ayni bicim tasiyordu — kirmizi degil, kirmizi CTA'ya rakip olmasin. */
.btn-b2b{display:inline-flex;align-items:center;gap:8px;flex:none;
  font-family:var(--font-display);font-size:var(--fs-data);font-weight:var(--fw-h);
  padding:11px 17px;border-radius:999px;background:var(--ink);color:var(--ground);
  border:var(--border) solid var(--ink);white-space:nowrap;line-height:1;
  transition:background-color .2s,color .2s}
.btn-b2b:hover{background:var(--red);border-color:var(--red);color:var(--on-red);
  text-decoration:none}
.btn-b2b__i{width:15px;height:15px;flex:none;opacity:.9}

/* ============================ chips & tags ============================ */
.chip{font-family:var(--font-display);font-size:11.5px;font-weight:var(--fw-em);
  letter-spacing:.04em;padding:5px 11px;border-radius:var(--radius-md);
  border:var(--border) solid currentColor;white-space:nowrap;display:inline-flex;
  align-items:center;gap:5px;line-height:1.3}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip--in{color:var(--in-stock);background:var(--in-stock-soft)}
.chip--bo{color:var(--backorder);background:var(--backorder-soft)}
.chip--na{color:var(--unavailable);background:var(--unavailable-soft)}
.chip--plain::before{display:none}
.tag{font-family:var(--font-mono);font-size:12px;font-weight:var(--fw-h);color:var(--ink);
  background:var(--surface-2);border:var(--border) solid var(--line);
  border-radius:var(--radius-sm);padding:4px 9px;white-space:nowrap;line-height:1.35;
  display:inline-block}
a.tag:hover{text-decoration:none;border-color:var(--ink)}
.tag--more{background:transparent;border-style:dashed;color:var(--link);font-weight:400}
.tags{display:flex;gap:6px;flex-wrap:wrap;min-width:0}

/* ============================ sections ============================ */
.sec{margin-bottom:var(--s-7)}
.sec__h{border-top:var(--border) solid var(--line);padding-top:var(--s-4);
  margin:var(--s-6) 0 var(--s-4);
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.sec__h::before{content:"";flex:none;width:var(--rule);height:14px;
  background:var(--red);border-radius:1px}
.sec__h h2{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin:0}
.sec__h .n{font-family:var(--font-mono);font-size:11px;color:var(--red);
  font-weight:var(--fw-em)}
.spectab{table-layout:fixed}
.spectab th,.spectab td{width:50%;text-align:left}
.spectab td.num{font-variant-numeric:tabular-nums}
@media (max-width:560px){.spectab th,.spectab td{width:auto}}
.panel{background:var(--surface);border:var(--border) solid var(--line);
  border-radius:var(--radius-card);overflow:hidden}
main{padding-bottom:var(--s-6)}

/* .panel ile .scroll-x ayni ogeye verildiginde .panel{overflow:hidden} kazaniyordu
   (ayni ozgulluk, dosyada sonra). Tablolar mobilde sessizce kirpiliyordu — kaydirma
   cubugu da yok, tasma da yok, veri sadece erisilemez. Acik kural ile cozuluyor. */
.panel.scroll-x{overflow-x:auto;overflow-y:hidden}
.scroll-x:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* ============================ tables ============================ */
table{border-collapse:collapse;width:100%;font-size:var(--fs-data)}
/* Veri satırı hover'ı — ana sitenin tablolarında var, okuma hattını tutuyor. */
tbody tr:hover{background:var(--surface-2)}
th{font-family:var(--font-display);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);
  background:var(--surface-2);border-bottom:var(--border) solid var(--line);
  text-align:left;white-space:nowrap;padding:9px 15px}
td{border-bottom:var(--border) solid var(--hair);padding:10px 15px;vertical-align:middle;
  line-height:1.45}
tr:last-child td{border-bottom:none}
td.num,td.pn{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
th.r,td.r{text-align:right}
.brandcell{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.03em;
  color:var(--muted);text-transform:uppercase;white-space:nowrap}
/* Arac tablosu marka hucresi — brandcell gorunumu, ayri sinif: brandcell'li
   tablo verify'da capraz-referans feragat denetimini tetikler. */
.makecell{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.03em;
  color:var(--muted);text-transform:uppercase;white-space:nowrap}
.makecell a{color:var(--muted)}
.makecell a:hover{color:var(--ink)}
/* Arac tablosunun altindaki motor satiri */
.engline{display:flex;gap:var(--s-3);align-items:baseline;flex-wrap:wrap;
  padding:12px 15px;border-top:var(--border) solid var(--line)}
.spec-name{font-family:var(--font-body);color:var(--text)}
.metric{color:var(--faint);font-size:11.5px;margin-left:5px}
.verify td.val{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.verify td.match{white-space:nowrap;font-family:var(--font-display);font-weight:700;
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--in-stock)}
.verify th.vdn{color:var(--ink)}

/* ============================ shared bits ============================ */
/* Ana sitenin .page-head deseni: 9pt, "/" ayraç, hover kırmızı.
   Ayrışma: breadcrumb HER sayfada kalır — ana site yalnız iki sayfada
   veriyor, bu bir eksiklik, kopyalanmaz. */
/* Kirinti yolu: basligin altinda kendi rafi. Alt hairline onu sayfa
   basligindan ayirir; sarma YOK — dar ekranda yatay kayar, cunku sarilan
   kirinti yolu iki satira bolununce yol olmaktan cikiyor. */
.crumb{padding:var(--s-3) 0 0;margin-bottom:var(--s-4);
  font-size:.8125rem;color:var(--muted);
  display:flex;gap:.35rem;align-items:center;
  white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.crumb::-webkit-scrollbar{display:none}
.crumb b{color:var(--ink);font-weight:var(--fw-em)}
/* Ayrac: chevron, metin renginde (cizgi rengi --faint-line 1.77:1 ile
   okunmuyordu). */
.crumb i{font-style:normal;color:var(--faint);padding:0 .1rem}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--red);text-decoration:none}
/* Ev baglantisi: metin degil isaret. Ilk madde her sayfada ayni oldugu icin
   kelimeyle yer kaplamasi gereksiz. */
.crumb__h{display:inline-flex;align-items:center;color:var(--faint);flex:none}
.crumb__h svg{width:15px;height:15px;display:block}
.crumb__h:hover{color:var(--red)}
.ph{background:var(--sunken);border:var(--border) solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  text-align:center;padding:6px}
.disclaim{font-size:12px;line-height:1.55;color:var(--muted);padding:var(--s-3) var(--s-4);
  background:var(--surface-2);border-top:var(--border) solid var(--line);margin:0}
.note{border:var(--border) solid var(--line);border-left:var(--rule) solid var(--backorder);
  background:var(--backorder-soft);border-radius:var(--radius);padding:14px 17px;
  font-size:.93rem;line-height:1.55;margin:var(--s-4) 0}
.note b{font-family:var(--font-display);font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--backorder);display:block;margin-bottom:5px}
.note label{margin-right:var(--s-4);font-size:.88rem}
details{border-bottom:var(--border) solid var(--hair);background:var(--surface)}
details:last-child{border-bottom:none}
summary{padding:var(--s-4);cursor:pointer;font-family:var(--font-display);font-weight:600;
  font-size:14.5px;color:var(--ink);list-style:none;display:flex;justify-content:space-between;
  gap:var(--s-4);align-items:center;min-height:var(--row-h-touch)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--font-mono);color:var(--muted);font-size:16px;flex:none}
details[open] summary::after{content:"\2013"}
details .a{padding:0 var(--s-4) var(--s-4);color:var(--muted);font-size:14px}

/* ============================ fitment card ============================ */
/* Medya sutunu 190px degil 300px: urun fotografi bu sayfanin ana gorsel
   varligi ve 176px'e sikismisti. CDN master 800px'te tavanliyor — 300 CSS px
   2x retinada 600px eder, tam siniri icinde. */
.fit{background:var(--surface);border:var(--border) solid var(--line);
  border-radius:var(--radius-card);
  padding:var(--s-6);display:grid;grid-template-columns:minmax(340px,44%) 1fr;
  gap:var(--s-6);margin-bottom:var(--s-7)}
/* MOBILDE SIRA TAKASI. Tek sutunda fotograf once geliyordu: parca numarasi
   375px'lik telefonda y=786'ya, "Replaces/Fits" blogu y=1493'e dusuyordu —
   yani tamirci once bir fotograf goruyor, aradigi numaraya ulasmak icin iki
   ekran kaydiriyordu. Kritik blok basa alinir, plaka hemen altina iner. */
@media (max-width:820px){
  .fit{grid-template-columns:1fr;padding:var(--s-5);gap:var(--s-5)}
  .fit__b{order:1}
  .fit__media{order:2}
  /* Plaka yatay seride doner: parcanin tamami gorunur, ekrani yutmaz. */
  .fit__m .fit__img{aspect-ratio:3/2;max-height:220px}
}
.fit__media{display:flex;flex-direction:column;gap:var(--s-2)}
/* Galeri plakasi: cerceve ve golge YOK, yalniz hafif zemin ve ic bosluk.
   (Kural yorum satirina alinmisti ama yalniz ILK satiri; geri kalan
   "padding:...;background:...}" ust seviyede kalip CSS'i bozuyordu.) */
.fit__m{padding:var(--s-5);background:var(--surface-2);
  border-radius:var(--radius-media)}
.fit__img{aspect-ratio:1;width:100%;height:auto;object-fit:contain;display:block}
.fit__tm{border:var(--border) solid var(--line);border-radius:var(--radius);
  padding:3px;cursor:pointer}
.fit__tm:hover{border-color:var(--red)}
.fit__thumb[aria-pressed="true"]{outline:var(--border-strong) solid var(--red);
  outline-offset:1px;border-radius:calc(var(--radius) - 3px)}
.fit__thumb{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block}
/* Gorsel degisiminde kisa bir belirme — degisimin fark edilmesi icin, sus icin degil */
.fit__img.is-swapped{animation:vdn-fade .18s ease-out}
@keyframes vdn-fade{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fit__img.is-swapped{animation:none}}
.kit__m{border:var(--border) solid var(--line);border-radius:var(--radius);padding:4px}
.kit__img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;display:block}
/* 4 degil 6: en zengin urunlerde 6 fotograf var, 4'lu izgara ikisini gizliyordu */
.fit__thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;align-items:start}
@media (max-width:820px){.fit__thumbs{grid-template-columns:repeat(4,1fr)}}
.fit__thumbs .ph{aspect-ratio:1;font-size:8.5px}
.fit__b{min-width:0;display:flex;flex-direction:column}
.pn-hero{font-family:var(--font-mono);font-size:var(--fs-pn-xl);font-weight:var(--fw-max);
  letter-spacing:var(--ls-display);line-height:1.08;color:var(--ink);
  font-variant-numeric:tabular-nums;margin:3px 0 0;display:flex;align-items:center;
  gap:var(--s-3);flex-wrap:wrap}
.copy{font-family:var(--font-display);font-size:var(--fs-data);font-weight:var(--fw-h);
  color:var(--muted);background:var(--surface-2);
  border:var(--border) solid var(--line);border-radius:var(--radius);padding:7px 12px;
  cursor:pointer;line-height:1}
.copy:hover{color:var(--ink);border-color:var(--line-strong)}
.copy[data-done]{color:var(--in-stock);border-color:var(--in-stock)}
/* Ikon dugme: kare, metinsiz. Kopyalaninca tik isaretine doner. */
.copy--icon{width:34px;height:34px;padding:0;display:inline-flex;
  align-items:center;justify-content:center}
.copy--icon svg{width:16px;height:16px}
.copy--icon[data-done] svg{display:none}
.copy--icon[data-done]::after{content:"";width:15px;height:9px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translate(1px,-2px)}
/* Urun paylasim satiri: Copy Link + WhatsApp/X/LinkedIn/Facebook.
   Salt href + inline SVG — yuklemede sifir ucuncu taraf istek. */
.share{display:flex;align-items:center;gap:8px;margin-top:var(--s-4);flex-wrap:wrap}
.share__l{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--faint);
  text-transform:uppercase;letter-spacing:.08em}
.share a{color:var(--muted);display:inline-flex;padding:8px;
  border:var(--border) solid var(--line);border-radius:var(--radius)}
.share a:hover{color:var(--red);border-color:var(--line-strong)}
.share svg{width:15px;height:15px;fill:currentColor;display:block}
/* EAN satiri: ana site "EAN Code 869..." basiyor, bizde gorunmuyordu. */
/* Aciklama paragrafi: sutundan biraz dar ve iki yana yasli. hyphens:auto
   sart — iki yana yaslama tek basina kelimeler arasinda genis bosluk
   birakiyor; heceleme o bosluklari kapatir (sayfa <html lang> tasidigi icin
   tarayici dogru heceleme kurallarini kullanir). */
.pdesc{max-width:70ch}
.pdesc p{margin:0;text-align:justify;hyphens:auto}

/* Aciklama + SSS: yan yana iki sutun. Aciklama metni okunabilirlik icin
   zaten dar sariyor; tek sutunda basildiginda sagda ekranin yarisi bos
   kaliyordu. Tek sutuna dusen ekranlarda sira: once aciklama, sonra SSS. */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s-5) var(--s-6);align-items:start;margin-bottom:var(--s-6)}
.duo > .sec{margin:0}
@media (max-width:900px){.duo{grid-template-columns:1fr}}

/* Teknik ozet kutusu — ana sitedeki "SUMMARY" blogunun karsiligi.
   Solda kirmizi imza cizgisi, ustte kucuk kirmizi etiket, govdede olculer
   kirmizi madde isaretleriyle ayrilmis tek paragraf. Tam tablo asagida durur;
   bu onun bir bakista okunan ozeti. */
.sumbox{margin:var(--s-4) 0 0;background:var(--surface-2);
  border-bottom:var(--rule) solid var(--red);
  border-radius:var(--radius) var(--radius) 0 0;padding:var(--s-4)}
.sumbox__h{display:block;font-family:var(--font-display);font-size:var(--fs-label);
  font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--red);margin-bottom:var(--s-2)}
.sumbox__b{font-size:var(--fs-data);line-height:1.7;color:var(--text)}
.sumbox__i{white-space:nowrap}
.sumbox__i b{font-weight:var(--fw-em);color:var(--ink)}
/* Madde isareti ogeler ARASINA girer, basa gelmez. */
.sumbox__i + .sumbox__i::before{content:"•";color:var(--red);
  padding:0 8px;font-weight:700}
@media (max-width:560px){.sumbox__i{white-space:normal}}

/* Kisa tanitim: baslik blogu ile teknik satirlar arasinda tek paragraf. */
.pintro{margin:var(--s-3) 0 0;max-width:56ch;font-size:var(--fs-body);
  line-height:1.6;color:var(--muted)}
.ean{font-family:var(--font-mono);font-size:var(--fs-data);color:var(--muted);
  margin:4px 0 0;font-variant-numeric:tabular-nums}
.ean span{font-family:var(--font-display);font-size:var(--fs-label);font-weight:var(--fw-em);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--faint);margin-right:4px}
.pname{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:var(--fw-h);color:var(--text);
  line-height:1.35;margin:5px 0 0}
.fit__rows{border-top:var(--border) solid var(--hair);border-bottom:var(--border) solid var(--hair);
  padding:var(--s-4) 0;margin:var(--s-5) 0;display:flex;flex-direction:column;gap:11px}
.frow{display:flex;gap:var(--s-3);align-items:baseline;flex-wrap:wrap}
.frow__l{width:88px;flex:none;font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stock{display:flex;gap:11px;align-items:baseline;flex-wrap:wrap;margin-bottom:var(--s-5)}
.stock__d{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.pricebox{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:2px}
.price{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:15px;
  font-weight:700;color:var(--ink);white-space:nowrap}
.price em{font-style:normal;font-size:10.5px;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-left:3px}
.netlink{font-family:var(--font-display);font-size:11.5px;font-weight:600;color:var(--link);
  white-space:nowrap}
.cta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
@media (max-width:560px){.cta{grid-template-columns:1fr}}
@media (max-width:560px){.pricebox{margin-left:0;text-align:left;align-items:flex-start}}

/* ============================ answer (cross-ref) ============================ */
.answer{background:var(--surface);border:var(--border) solid var(--line);
  border-radius:var(--radius-card);padding:var(--s-6);margin-bottom:var(--s-7);
  box-shadow:var(--shadow-card)}
.answer__grid{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s-5);align-items:center}
@media (max-width:860px){.answer{padding:var(--s-5)}
  .answer__grid{grid-template-columns:1fr;gap:var(--s-3)}
  .answer__arrow{transform:rotate(90deg);justify-self:start;margin-left:6px}}
.side{display:flex;flex-direction:column;gap:4px;min-width:0}
.side__l{font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.side__pn{font-family:var(--font-mono);font-size:clamp(1.5rem,3.6vw,2rem);letter-spacing:-.02em;
  line-height:1.08;font-variant-numeric:tabular-nums;word-break:break-word;margin:0}
.side--from .side__pn{font-weight:600;color:var(--muted)}
.side--to .side__pn{font-weight:700;color:var(--ink)}
.side--to .side__pn a{color:inherit}
.side__n{font-size:13px;color:var(--muted);line-height:1.4}
.answer__arrow{font-size:26px;color:var(--red);flex:none}
.answer__foot{border-top:var(--border) solid var(--hair);margin-top:var(--s-5);
  padding-top:var(--s-4);display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
.answer__meta{font-size:12px;color:var(--muted)}
.answer__cta{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-4)}

/* ============================ grids ============================ */
.appgrid,.othergrid,.kits,.catgrid{display:grid;gap:var(--s-4)}
.appgrid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.othergrid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.kits{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.catgrid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1180px){.catgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.catgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.catgrid{grid-template-columns:1fr}}
.appcell,.othercell,.kit,.catcell{background:var(--surface);padding:var(--s-4);
  display:flex;flex-direction:column;gap:var(--s-2);
  border:var(--border) solid var(--line);border-radius:var(--radius-card);overflow:hidden;}
/* Gölge YALNIZ yüzen/etkileşen yüzeyde; statik veri yüzeyi hairline'da kalır. */
.othercell:hover,.kit:hover,.catcell:hover{text-decoration:none;
  border-color:var(--line-strong);box-shadow:var(--shadow-card)}
.appcell h3{font-family:var(--font-display);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin:0}
.othercell__pn,.kit__pn{font-family:var(--font-mono);font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.2}
.othercell__pn{font-size:1.05rem}
.kit__pn{font-size:var(--fs-pn-lg);letter-spacing:-.02em}
.kit__t{font-family:var(--font-display);font-size:var(--fs-h3);
  font-weight:var(--fw-em);color:var(--ink);line-height:1.3}
a.kit:hover .kit__t{color:var(--red)}
.othercell__n,.kit__n{font-size:12.5px;color:var(--muted);line-height:1.45}
.kit__n--clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.othercell__x{font-family:var(--font-mono);font-size:11.5px;color:var(--faint)}
.kit .ph{aspect-ratio:16/10}
.catcell{padding:0;gap:0;height:100%;position:relative;overflow:hidden}
.catcell--static:hover{box-shadow:none;border-color:var(--line)}
.catcell--static .catcell__m::after{display:none}
.catcell--static .catcell__b::after{display:none}
.catcell--cover .catcell__img{aspect-ratio:3/4;object-fit:cover}
/* Kirmizi 1: fotografin uzerine hover'da carpilan plaka — urun kartlarindaki
   hareketin aynisi, site tek bir dil konusur. */
.catcell__m{border-bottom:var(--border) solid var(--line);padding:6px;
  position:relative;overflow:hidden}
.catcell__m::after{content:"";position:absolute;inset:0;background:var(--red-plate);
  mix-blend-mode:multiply;opacity:0;transition:opacity .25s;pointer-events:none}
.catcell:hover .catcell__m::after{opacity:1}
/* Kirmizi 2: ad satirinin altinda sitenin imza cizgisi. Durur halde kisa ve
   solda, hover'da sagdaki bosluga kadar uzar. */
.catcell__b::after{content:"";display:block;height:var(--rule);width:34px;
  background:var(--red);margin-top:var(--s-3);border-radius:1px;
  transition:width .28s}
.catcell:hover .catcell__b::after{width:72px}
@media (prefers-reduced-motion:reduce){
  .catcell__m::after,.catcell__b::after{transition:none}
}
.catcell__img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;display:block}
.catcell__img.ph{border-radius:0;aspect-ratio:16/9;background:var(--sunken)}
.catcell__b{padding:var(--s-4);display:flex;flex-direction:column;gap:3px;
  flex:1}
.catcell__n{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--ink)}
.catcell__c{font-size:11.5px;font-weight:var(--fw-em);color:var(--red);
  font-variant-numeric:tabular-nums}

/* one cikan urun seridi — ana sayfada gercek gorsel */
/* Alt yazi seridi: solda parca no, sagda GERCEK veri (kac OEM referansi) */
.feat__f{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  padding:0 12px;min-height:44px}
.feat__pn{font-family:var(--font-mono);font-size:13.5px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.feat__x{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;flex:none}

/* ======================= urun kartlari (FinditParts modeli) ======================
   Satir listesi yerine kart izgarasi. Kurumsal agirlik urun fotografi +
   uretici rozeti + yogun izgaradan geliyor — yasam tarzi fotografi olmadan.
   ================================================================================ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));
  gap:var(--s-3);margin-bottom:var(--s-6)}
.pcard{background:var(--surface);display:flex;flex-direction:column;padding:0;
  border:var(--border) solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.pcard:hover{text-decoration:none;border-color:var(--line-strong);box-shadow:var(--shadow-card)}
/* Ana sitede kart hover'ında hareket eden şey görselin kendisi. */
.pcard__img{transition:transform .3s}
.pcard:hover .pcard__img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.pcard:hover .pcard__img{transform:none}}
.pcard__media{position:relative;display:block;
  border-bottom:var(--border) solid var(--hair-card);padding:6px;overflow:hidden}
.pcard__media::after{content:"";position:absolute;inset:0;background:var(--red-plate);
  mix-blend-mode:multiply;opacity:0;transition:opacity .25s;pointer-events:none}
.pcard:hover .pcard__media::after{opacity:1}
@media (prefers-reduced-motion:reduce){.pcard__media::after{transition:none}}
.pcard__img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block}
.pcard__img.ph{display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10px;color:var(--faint);border:0}
.pcard__brand{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;
  gap:5px;background:var(--band);color:var(--on-band);font-family:var(--font-display);
  font-size:9.5px;font-weight:var(--fw-em);letter-spacing:.08em;text-transform:uppercase;
  padding:5px 9px;border-radius:var(--radius-sm);max-width:calc(100% - 16px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard__more{color:var(--band-ink);font-weight:400}
.pcard__b{padding:12px 13px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.pcard__pn{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.2}
.pcard__n{font-size:12px;color:var(--muted);line-height:1.42;flex:1}
.pcard__facts{min-height:15px;font-family:var(--font-mono);font-size:10.5px;color:var(--faint);
  letter-spacing:.02em;margin-top:4px}
@media (max-width:560px){.pgrid{grid-template-columns:repeat(2,1fr)}}

/* ======================= iki sutunlu duzen + kenar filtresi ====================
   SINIF ADI .side DEGIL .facet: .side capraz referans sayfasindaki "aradiginiz /
   Vaden karsiligi" sutunlarinin adi. Ayni adi kullanmak o panele beyaz kutu,
   cerceve ve position:sticky veriyordu (ayni ozgulluk, dosyada sonra gelen
   kural kazanir) — 1.431 capraz referans sayfasinda sessiz bozulma.
   ============================================================================= */
.layout{display:grid;grid-template-columns:276px 1fr;gap:var(--s-5);align-items:start;
  margin-bottom:var(--s-6)}
@media (max-width:1180px){.layout{grid-template-columns:240px 1fr}}
/* Filtre gizlendiginde sutun da kapanmali — yoksa kartlar 236px'e sikisir */
.layout--nofacet{grid-template-columns:1fr}
.layout__m{min-width:0}
/* Kurumsal giris paragrafi: sayfa genisliginin cogunu kullanir, govde
   metninden bir tik buyuk. Onceki hali .measure ile 60 karakterde sariliyor
   ve sagda yarim sayfa bos kaliyordu. */
.clead{max-width:92ch;margin:0 0 var(--s-6);font-size:clamp(1rem,1.25vw,1.15rem);
  line-height:1.65;color:var(--text)}

/* ============== rakam kartlari (Uretim Gucu) ==============
   Buyuk rakam ustte, etiketi altinda. Ilk kart one cikar: kirmizi rakam ve
   kirmizi alt cizgi. Satir listesi yerine kart olunca sayilar okunuyor.
   ========================================================= */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s-3);margin-bottom:var(--s-4)}
.kpi__c{background:var(--surface);border:var(--border) solid var(--line);
  border-radius:var(--radius-card);padding:var(--s-4) var(--s-5) var(--s-5);
  display:flex;flex-direction:column;gap:6px;
  border-bottom:var(--rule) solid var(--line)}
.kpi__c--hi{border-bottom-color:var(--red)}
.kpi__n{font-family:var(--font-display);font-weight:var(--fw-max);
  font-size:clamp(1.6rem,2.6vw,2.25rem);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.kpi__c--hi .kpi__n{color:var(--red)}
.kpi__l{font-size:var(--fs-data);color:var(--muted);line-height:1.45}
.kpi__note{margin:0 0 var(--s-5);color:var(--muted);font-size:var(--fs-data)}

/* ============== kurumsal kapak ==============
   Tam genislik fotograf, uzerinde koyu gecis, en altta kirinti yolu + etiket
   + baslik. Referanslardaki editoryal acilis: sayfa metinle degil goruntuyle
   basliyor. Fotograf CDN'den, metin okunurlugu icin gradyan sart.
   =========================================== */
.chero{position:relative;isolation:isolate;background:var(--band-alt);
  min-height:clamp(300px,42vw,460px);display:flex;align-items:flex-end;
  overflow:hidden;margin-bottom:var(--s-6)}
.chero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2}
.chero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(12,13,13,.92) 0%,rgba(12,13,13,.72) 45%,
    rgba(12,13,13,.35) 100%)}
.chero__in{width:100%;padding:var(--s-7) 0 var(--s-6)}
.chero .crumb{margin-bottom:var(--s-4);color:rgba(255,255,255,.72)}
.chero .crumb a,.chero .crumb__h{color:rgba(255,255,255,.72)}
.chero .crumb a:hover,.chero .crumb__h:hover{color:#fff}
.chero .crumb b{color:#fff}
.chero .crumb i{color:rgba(255,255,255,.45)}
.chero__h{font-family:var(--font-display);font-weight:var(--fw-em);
  font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.05;letter-spacing:-.02em;
  color:#fff;margin:var(--s-2) 0 0}
.chero__d{max-width:70ch;margin:var(--s-4) 0 0;font-size:clamp(1rem,1.2vw,1.15rem);
  line-height:1.6;color:rgba(255,255,255,.82)}
@media (max-width:820px){.chero__in{padding:var(--s-6) 0 var(--s-5)}}

/* ============== numarali bolum (kurumsal sayfalar) ==============
   Referans duzen: solda buyuk soluk sira numarasi, yaninda baslik, altinda
   metin; gorseli olan bolumde metin ve gorsel yan yana. Numara sayfayi bir
   anlatiya ceviriyor — okuyucu nerede oldugunu goruyor.
   ============================================================== */
/* Numarali bolum: baslik KENDI metin sutununun ustunde durur. Metin sagda
   ise baslik da sagda. Onceki hali basligi her zaman sola basiyordu ve
   gorsel sag taraftayken baslik metinden kopuk kaliyordu. */
.nsec{margin:0 0 var(--s-7);border-top:var(--border) solid var(--line);
  padding-top:var(--s-5)}
.nsec--split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);
  align-items:start}
.nsec--flip .nsec__t{order:2}
.nsec--flip .nsec__m{order:1}
.nsec__h{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-4)}
.nsec__n{font-family:var(--font-mono);font-size:clamp(1.75rem,3vw,2.75rem);
  font-weight:700;line-height:.9;color:var(--sunken);flex:none;
  font-variant-numeric:tabular-nums}
.nsec__h h2{font-family:var(--font-display);font-size:clamp(1.2rem,2vw,1.6rem);
  font-weight:var(--fw-em);color:var(--ink);margin:0;line-height:1.2}
.nsec__t .measure{max-width:64ch}
/* Tesis/bolum alt basligi (corprow icinde). */
.nsec__sub{font-family:var(--font-display);font-size:var(--fs-h3);
  font-weight:var(--fw-em);color:var(--ink);margin:0 0 var(--s-3);line-height:1.3}
.nsec__m{border-radius:var(--radius-media);overflow:hidden;background:var(--surface-2)}
.nsec__m img{width:100%;aspect-ratio:4/3;height:auto;max-height:340px;
  display:block;object-fit:cover}
@media (max-width:820px){
  .nsec--split{grid-template-columns:1fr;gap:var(--s-4)}
  .nsec--flip .nsec__t{order:1}
  .nsec--flip .nsec__m{order:2}
}

/* ============== iletisim kanal kartlari ==============
   Kime, ne icin, hangi adres. Ilk kart one cikar (kirmizi zemin) cunku ABD
   alicisinin gitmesi gereken yer orasi. Form YOK: site statik, formu
   isleyecek sunucu yok — calismayan form yerine dogrudan e-posta.
   ================================================== */
.changrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--s-3);margin-bottom:var(--s-6)}
.chan{display:flex;flex-direction:column;gap:8px;padding:var(--s-5);
  background:var(--surface);border:var(--border) solid var(--line);
  border-radius:var(--radius-card);transition:border-color .2s,transform .2s}
.chan:hover{text-decoration:none;border-color:var(--red);transform:translateY(-2px)}
.chan__i{width:40px;height:40px;border-radius:var(--radius);flex:none;
  background:var(--surface-2);color:var(--red);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:4px}
.chan__i svg{width:19px;height:19px}
.chan__t{font-family:var(--font-display);font-size:var(--fs-h3);
  font-weight:var(--fw-em);color:var(--ink);line-height:1.3}
.chan__b{font-size:var(--fs-data);color:var(--muted);line-height:1.5}
.chan__m{margin-top:auto;padding-top:8px;font-family:var(--font-mono);
  font-size:12.5px;color:var(--red);font-weight:var(--fw-em);word-break:break-all}
/* One cikan kart: ABD masasi. */
.chan--hi{background:var(--band-alt);border-color:var(--band-alt)}
.chan--hi .chan__t{color:#fff}
.chan--hi .chan__b{color:rgba(255,255,255,.72)}
.chan--hi .chan__i{background:rgba(255,255,255,.12);color:#fff}
.chan--hi .chan__m{color:#fff}
.chan--hi:hover{border-color:var(--red)}
/* Merkez bilgisinin yanindaki nokta harita. */
.cmap{background:var(--surface-2);border:var(--border) solid var(--line);
  border-radius:var(--radius-card);padding:var(--s-5);display:flex;
  align-items:center;justify-content:center;color:var(--faint)}
.cmap .mapband__svg{max-width:100%}
@media (prefers-reduced-motion:reduce){.chan{transition:none}.chan:hover{transform:none}}

/* ============== SSS akordeonu ==============
   Her soru kendi yuvarlak karti. Sagda yuvarlak kirmizi dugme: kapaliyken
   disari bakan ok, acikken iceri bakan ok. Cerceveli tek kutu icinde satirlar
   yerine ayri kartlar — soru sayisi arttikca liste bogulmuyor.
   ========================================= */
.faq{display:flex;flex-direction:column;gap:10px;margin:0 auto var(--s-6);
  max-width:940px;width:100%}
/* Bolum basligi akordeonla ayni genislikte ve ayni hizada olsun. */
.sec__h:has(+ .faq){max-width:940px;margin-left:auto;margin-right:auto}
.faq details{background:var(--surface-2);border:var(--border) solid var(--line);
  border-radius:14px;overflow:hidden;transition:background-color .25s,border-color .25s}
.faq details[open]{background:var(--surface);border-color:var(--line-strong)}
.faq summary{display:flex;align-items:center;gap:var(--s-4);
  padding:16px 16px 16px var(--s-5);cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:var(--fw-em);font-size:var(--fs-body);
  color:var(--ink);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
/* Ok: daire YOK, sade chevron. Iki kenarlik cizgisinden cizilir — yazi
   tipinden bagimsiz, her olcude keskin. Kapaliyken asagi, acikken yukari. */
.faq summary::after{content:"";flex:none;margin-left:auto;margin-right:8px;
  width:10px;height:10px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s,border-color .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq summary:hover::after{border-color:var(--ink)}
.faq summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.faq .a{padding:0 var(--s-5) 18px;color:var(--muted);font-size:var(--fs-data);
  line-height:1.65}
@media (prefers-reduced-motion:reduce){
  .faq details,.faq summary::after{transition:none}
}

/* ============== marka karti (Capraz referans dizini) ==============
   Kosedeki kirmizi daire hover'da buyuyup karti dolduruyor, yazilar beyaza
   doner. Desen uiverse.io "angry-rattlesnake-53" (MIT); Tailwind yerine
   kendi belirteclerimizle yazildi. Daire z-index:-1 ile metnin ALTINDA
   kalir; kart "isolation" ile kendi yigin baglamini kurar, yoksa daire
   sayfanin zeminine dusuyor.
   ================================================================ */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--s-3);margin-bottom:var(--s-6)}
.bcard{position:relative;isolation:isolate;overflow:hidden;
  min-height:130px;padding:var(--s-5);display:flex;flex-direction:column;gap:4px;
  background:var(--surface);border:var(--border) solid var(--line);
  border-radius:var(--radius-card)}
.bcard::before{content:"";position:absolute;z-index:-1;top:-2.5em;right:-2.5em;
  width:5em;height:5em;border-radius:50%;background:var(--red);
  transform:scale(1);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.bcard:hover{text-decoration:none;border-color:var(--red)}
.bcard:hover::before{transform:scale(9)}
.bcard__n{font-family:var(--font-display);font-size:1.05rem;font-weight:700;
  color:var(--ink);letter-spacing:-.01em;transition:color .35s}
.bcard__c{font-family:var(--font-mono);font-size:11.5px;color:var(--faint);
  font-variant-numeric:tabular-nums;transition:color .35s}
.bcard__go{margin-top:auto;font-family:var(--font-display);font-size:12.5px;
  font-weight:var(--fw-em);color:var(--red);opacity:0;transform:translateY(4px);
  transition:opacity .3s,transform .3s,color .35s}
.bcard:hover .bcard__n,.bcard:hover .bcard__c,.bcard:hover .bcard__go{color:#fff}
.bcard:hover .bcard__go{opacity:1;transform:none}
.bcard:focus-visible .bcard__go{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .bcard::before{display:none}
  .bcard__go{opacity:1;transform:none}
  .bcard:hover .bcard__n,.bcard:hover .bcard__c{color:var(--red)}
}

/* ============== zaman cizelgesi (Tarihce) ==============
   Ortada dikey ray, her yil rayin uzerinde kirmizi hap icinde. Kayitlar
   sirayla saga sola dizilir ve kart icinde durur; ayni yilin ikinci kaydi
   ince ayirac cizgiyle ayrilir. Gorsel KULLANILMAZ: 45 kaydin gorsellerinin
   cogu odul afisi, kucuk karede okunmuyor — afislerin yeri Oduller sayfasi.
   ==================================================== */
.tl{position:relative;margin:0 0 var(--s-7);padding:var(--s-3) 0}
.tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:var(--line);transform:translateX(-50%)}
.tl__r{position:relative;display:grid;grid-template-columns:1fr 130px 1fr;
  align-items:start;margin-bottom:var(--s-5)}
.tl__y{grid-column:2;display:flex;justify-content:center;align-items:flex-start}
.tl__y b{font-family:var(--font-mono);font-size:13.5px;font-weight:700;
  color:var(--on-red);background:var(--red);border-radius:999px;
  padding:7px 15px;line-height:1.15;position:relative;z-index:1}
.tl__c{grid-column:3;padding-left:var(--s-5);position:relative}
.tl__r--alt .tl__c{grid-column:1;padding:0 var(--s-5) 0 0;text-align:right}
.tl__c::before{content:"";position:absolute;top:20px;width:var(--s-4);height:2px;
  background:var(--line);left:calc(var(--s-5) * -1 + 4px)}
.tl__r--alt .tl__c::before{left:auto;right:calc(var(--s-5) * -1 + 4px)}
.tl__e{background:var(--surface);border:var(--border) solid var(--line);
  border-radius:var(--radius-card);padding:var(--s-4) var(--s-5);
  display:flex;flex-direction:column;gap:8px}
.tl__x{margin:0;font-size:var(--fs-data);line-height:1.55;color:var(--text)}
.tl__x + .tl__x{padding-top:8px;border-top:var(--border) solid var(--hair)}
@media (max-width:820px){
  .tl::before{left:9px}
  .tl__r{grid-template-columns:1fr;gap:var(--s-2)}
  .tl__y{grid-column:1;justify-content:flex-start;margin-left:-4px}
  .tl__c,.tl__r--alt .tl__c{grid-column:1;padding:0 0 0 var(--s-5);text-align:left}
  .tl__c::before,.tl__r--alt .tl__c::before{display:none}
}

/* ============== gecis kartlari ==============
   About sayfasi diger kurumsal sayfalarin icerigini TASIMAZ, onlara baglanir.
   Sade satir kartlar: ad + ok, hover'da kirmizi.
   ========================================== */
.gogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s-3);margin-bottom:var(--s-6)}
.gocard{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-4);background:var(--surface);
  border:var(--border) solid var(--line);border-radius:var(--radius-card);
  font-family:var(--font-display);font-weight:var(--fw-em);color:var(--ink);
  transition:border-color .2s,color .2s}
.gocard:hover{text-decoration:none;border-color:var(--red);color:var(--red)}
.gocard__x{color:var(--red);flex:none}

/* ============== baslik seridi ==============
   Kirinti yolu + baslik blogu kendi gri zemininde, sayfanin beyazindan ayri.
   Tam genislige tasma: 100vw DEGIL — o kaydirma cubugunu da sayar ve sayfayi
   yatay kaydirir. Bunun yerine box-shadow yanlara yayilir, clip-path dikeyde
   kirpar; boylece serit yalnizca kendi yuksekligi kadar boyanir.
   ========================================================= */
.hband{background:var(--surface-2);
  box-shadow:0 0 0 100vmax var(--surface-2);clip-path:inset(0 -100vmax);
  padding:var(--s-5) 0 var(--s-6);margin-bottom:var(--s-6)}
.hband .crumb{padding:0;margin-bottom:var(--s-4)}
.hband .phead{margin:0}
@media (max-width:900px){.hband{padding:var(--s-4) 0 var(--s-5)}}

/* ============== sayfa basligi (katalog ailesi) ==============
   Ust satir + H1 + olcu satiri. Ust satirdaki kirmizi cubuk bolum
   basliklarindaki (.sech__i) isaretle ayni aile — sayfa ile bolum ayni dili
   konusur. Olcu satirindaki sayi mono ve koyu: bir katalog sayfasinda ilk
   sorulan sey "kac urun var".
   ============================================================ */
.phead{margin:0 0 var(--s-5)}
/* Bolum etiketi: basliktaki menu maddeleriyle ayni isaret — kirmizi nokta.
   Sabit bir bolum adi tasir, kirinti yolunun tekrari degil. */
.phead__l{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red)}
.phead__l::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--red)}
.phead .ptitle{margin:8px 0 0;line-height:1.15}
.phead__d{margin:var(--s-3) 0 0;color:var(--muted);line-height:1.6}
.phead__m{margin:var(--s-3) 0 0;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;
  font-size:var(--fs-data);color:var(--muted)}
.phead__m b{color:var(--ink);font-weight:var(--fw-em);
  font-variant-numeric:tabular-nums}
.phead__p{color:var(--faint)}

/* ============== kenar cubugu (kategori agaci) ==============
   Satir aralarindaki cizgiler kaldirildi: her satirin altinda hairline olmasi
   listeyi tabloya benzetiyordu. Ayrim artik bosluk ve etkin maddenin dolgusu
   ile. Girintili dallar "-" / "." karakteriyle degil, sol kenardaki KILAVUZ
   CIZGI ile gosteriliyor — komsu satirlarin kenarliklari birlesip kesintisiz
   bir dikey cizgi olusturuyor, agac boylece gercekten agac gibi okunuyor.
   ============================================================ */
.facet{background:var(--surface);border:var(--border) solid var(--line);
  border-radius:var(--radius-card);position:sticky;top:76px;padding:10px 10px 12px;
  max-height:calc(100vh - 84px);overflow-y:auto;overscroll-behavior:contain;
  overscroll-behavior:contain}
/* Kaydirma cubugu: ince, yuvarlak, izsiz. Basparmak sonuk gri, uzerine
   gelince markanin kirmizisina doner.
   NEDEN @supports: Chrome, standart scrollbar-width/scrollbar-color
   yazildiginda ::-webkit-scrollbar kurallarini tamamen yok sayip isletim
   sisteminin kendi cubugunu ciziyor — uclardaki ok dugmeleri oradan
   geliyordu (cubuk 8px degil 12px olculdu). Standart ozellikler artik
   yalnizca ::-webkit-scrollbar'i desteklemeyen tarayicida uygulaniyor. */
@supports not selector(::-webkit-scrollbar){
  .facet{scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
}
.facet::-webkit-scrollbar{width:8px}
.facet::-webkit-scrollbar-track{background:transparent}
/* Uclardaki ok dugmeleri: Windows'ta varsayilan olarak ciziliyor ve cubugun
   ince cizgisini bozuyordu. */
.facet::-webkit-scrollbar-button{display:none;width:0;height:0}
.facet::-webkit-scrollbar-thumb{background:var(--muted);border-radius:999px;
  border:2px solid transparent;background-clip:padding-box;
  transition:background-color .2s}
.facet::-webkit-scrollbar-thumb:hover{background:var(--red);background-clip:padding-box}
/* Alt kenar yumusamasi: kaydirma alaninin dibinde yapisik durur, son satir
   kartin zeminine karisir — liste kesilmis gibi degil, devam ediyor gibi. */
.facet__fade{position:sticky;bottom:-12px;display:block;height:30px;
  margin:-30px -10px -12px;pointer-events:none;
  background:linear-gradient(to top,var(--surface),transparent)}
.facet__h{font-family:var(--font-display);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--faint);
  padding:18px 4px 8px}
.facet__h:first-child{padding-top:2px}
/* Kategori suzgeci: 29 kategori arasinda kaydirarak degil yazarak daralt. */
.facet__s{padding:2px 0 10px}
.facet__s input{width:100%;box-sizing:border-box;height:38px;padding:0 12px;
  font-family:var(--font-body);font-size:12.5px;color:var(--ink);
  background:var(--surface-2);border:var(--border) solid var(--line);
  border-radius:var(--radius)}
.facet__s input::placeholder{color:var(--faint)}
.facet__s input:focus{outline:2px solid var(--focus);outline-offset:1px;
  border-color:var(--ink)}
.facet__none{margin:8px 6px 0;font-size:12px;color:var(--faint)}
.facet__i{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 11px;font-size:13.5px;line-height:1.35;color:var(--text);
  border-radius:var(--radius);transition:background-color .18s,color .18s}
a.facet__i:hover{background:var(--surface-2);text-decoration:none;color:var(--red)}
.facet__i b{flex:none;font-size:11.5px;font-weight:400;
  color:var(--faint);font-variant-numeric:tabular-nums}
.facet__i.is-on{background:var(--surface-2);color:var(--ink);font-weight:var(--fw-em);
  box-shadow:inset var(--rule) 0 0 var(--red)}
.facet__i.is-on b{color:var(--ink)}
/* Seviye-2 ve seviye-3: kilavuz cizgi. Satirlar bitisik oldugu icin
   kenarliklar tek bir dikey cizgi halinde birlesir. */
.facet__i--sub,.facet__i--sub2{border-left:var(--border) solid var(--line);
  border-radius:0 var(--radius) var(--radius) 0;font-size:12.5px}
.facet__i--sub{margin-left:13px;padding-left:16px}
.facet__i--sub2{margin-left:28px;padding-left:16px;color:var(--muted)}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .facet{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:2px}
  .facet__h,.facet__s{width:100%}
  .facet__i{flex:1 1 auto;min-width:150px}
  .facet__i--sub,.facet__i--sub2{margin-left:0;padding-left:10px;border-left:0}
}

.pg{display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  justify-content:space-between;margin:var(--s-5) 0 var(--s-6);
  padding-top:var(--s-4);border-top:var(--border) solid var(--line)}
.pg__c{font-size:var(--fs-data);color:var(--muted)}
.pg__n{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-left:auto}
.pg__i{font-family:var(--font-mono);font-size:var(--fs-data);min-width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 11px;
  border:var(--border) solid var(--line);border-radius:var(--radius-pill);
  color:var(--text);background:var(--surface);font-variant-numeric:tabular-nums}
a.pg__i:hover{border-color:var(--ink);background:var(--ink);color:var(--surface);text-decoration:none}
.pg__i.is-on{background:var(--red);color:var(--on-red);border-color:var(--red);font-weight:var(--fw-em)}
.pg__gap{color:var(--faint);padding:0 3px}
@media (max-width:820px),(pointer:coarse){.pg__i{min-width:48px;height:48px}}

/* ============================ numune plakasi ============================
   892 urun cekiminin tamami beyaz zeminli. multiply ile fotografin beyazi
   plakanin rengine oturur: kesme (cutout) etkisi bedavaya gelir ve dark
   temada beyaz kare patlamasi biter. Filigran ("VADEN ORIGINAL") kaybolmaz —
   kendi markamiz, kalir.
   ========================================================================= */
.plate{background:var(--plate);display:block}
/* Fotografin KENDI zemini seffaf olmali: hem oge hem plaka --plate olsaydi
   multiply ikisini carpar ve object-fit:contain'in birakti bosluklar
   koyulasirdi. Zemini yalniz plaka verir. */
.plate img{mix-blend-mode:multiply;background:transparent}
/* Guvenlik agi: multiply desteklenmiyorsa plaka beyaza doner, fotograf
   yine dogru gorunur — sadece kesme etkisi olmaz. */
@supports not (mix-blend-mode:multiply){
  :root{--plate:#ffffff}
  :root[data-theme="dark"]{--plate:#e6ecf1}
}
/* Buyuk plakalarda olcu dili: 4 registrasyon kosesi. 232px karoda kostum
   gibi durur, buyuk plakada dokuman isareti olur — yalniz .plate--mark. */
.plate--mark{position:relative}
.plate--mark::before,.plate--mark::after{content:"";position:absolute;width:10px;height:10px;
  pointer-events:none}
.plate--mark::before{left:6px;top:6px;border-left:1px solid var(--plate-mark);
  border-top:1px solid var(--plate-mark)}
.plate--mark::after{right:6px;bottom:6px;border-right:1px solid var(--plate-mark);
  border-bottom:1px solid var(--plate-mark)}

/* ============================ hero / home ============================ */
.hero{background:var(--surface);border-bottom:var(--border) solid var(--line);
  padding:var(--s-7) 0 var(--s-6)}
.hero__h{font-family:var(--font-display);font-size:clamp(1.8rem,4.6vw,2.5rem);font-weight:var(--fw-em);
  letter-spacing:-.025em;color:var(--ink);margin:0 0 var(--s-5);line-height:1.12;text-wrap:balance}
.sbar{display:flex;border:var(--border-strong) solid var(--ink);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);max-width:760px}
/* overflow:hidden içerideki odak halkasını kırpıyordu. Halka kapsayıcıda
   çizilir; içerideki öğenin kendi halkası bastırılır — aksi halde iki halka
   üst üste biner. */
.sbar:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.sbar__in:focus-visible,.sbar__b:focus-visible{outline:none}
.sbar__in{flex:1;min-width:0;border:0;background:transparent;padding:13px 15px;
  font-family:var(--font-body);font-size:var(--fs-ui-lg);color:var(--ink)}
.sbar__in::placeholder{color:var(--faint)}
.sbar__b{background:var(--ink);color:var(--surface);border:0;font-family:var(--font-display);
  font-weight:var(--fw-h);font-size:var(--fs-ui-lg);
  padding:0 26px;cursor:pointer;flex:none}
.sbar__b:hover{background:var(--red)}
.hero__alt{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;margin-top:var(--s-4)}
.hero__lbl{font-family:var(--font-display);font-size:12px;color:var(--muted);
  letter-spacing:.04em;flex:none}

/* ==========================================================================
   KURUMSAL BANTLAR — ana sayfa
   Sert kural: ardisik iki bant asla ayni zemini kullanmaz, ve hicbir koyu bant
   YALNIZ baslik tasiyamaz (ya plaka, ya rakam, ya kontrol tasir). "Hareket"
   hissi animasyondan degil bu ritimden gelir.
   ========================================================================== */
.band{padding:var(--s-6) 0}
.band--2{background:var(--band);color:var(--on-band);
  border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.band--dark{background:var(--band-alt);color:var(--on-band);padding:var(--s-7) 0;
  margin:var(--s-7) 0}
/* Olcum duzlemi: iki repeating-gradient — 8px ince + 40px kalin. Gorsel dosya
   yok, dis istek yok, ~4 satir. */

.hero--dark{background-color:var(--band-alt);border-bottom:0;padding:var(--s-7) 0;
  position:relative;overflow:hidden}
/* Sag taraftaki kontur dokusu: metnin arkasinda degil, YANINDA duruyor.
   Sagdan tasar, ustten ve alttan kirpilir; icerik hep okunur kalir cunku
   opaklik dusuk ve tiklamayi engellemez. 900px altinda tumden kapali —
   dar ekranda metnin arkasina giriyordu. */
.hero__art{position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:min(46vw,560px);height:auto;opacity:.10;pointer-events:none;user-select:none}
@media (max-width:900px){.hero__art{display:none}}
.hero--dark .hero__h{color:var(--on-band);max-width:22ch}
.hero--dark .hero__lbl{color:var(--band-ink)}
.sbar--dark{border-color:var(--red);background:var(--band);max-width:820px}
.sbar--dark .sbar__in{color:var(--on-band)}
.sbar--dark .sbar__in::placeholder{color:var(--band-ink)}
/* Sayfanin TEK kirmizi dolgusu. btn--primary sinifi verilmez — "sayfa basina
   tek birincil buton" sayaci bozulmasin. */
.sbar--dark .sbar__b{background:var(--red);color:var(--on-red)}
.bchip{font-family:var(--font-display);font-size:12.5px;font-weight:600;padding:9px 13px;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);
  background:var(--band);color:var(--on-band);white-space:nowrap;
  display:inline-flex;align-items:center;min-height:38px}
a.bchip:hover{text-decoration:none;border-color:var(--on-band);color:#fff}

/* --- kabiliyet rakamlari: 6 hucre, 6/3/2'ye tam bolunur */
.stats{display:grid;grid-template-columns:repeat(6,1fr)}
.stats--3{grid-template-columns:repeat(3,1fr)}
.stats--5{grid-template-columns:repeat(5,1fr)}
@media (min-width:901px){
  .stats--3 .stat:nth-child(3n+1){border-left:0}
  .stats--3 .stat:nth-child(n+4){border-top:1px solid rgba(255,255,255,.14)}
  .stats--5 .stat:nth-child(5n+1){border-left:0}
  .stats--5 .stat:nth-child(n+6){border-top:1px solid rgba(255,255,255,.14)}
}
.stat{padding:var(--s-3) var(--s-4);border-left:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;gap:5px;justify-content:center;min-height:112px}
.stat:first-child{border-left:0}
/* Rakamlar Poppins 700 — ana site rakamlarini kendi ailesiyle basiyor;
   mono burada sutun hizalamiyor, yalnizca terminal havasi veriyordu. */
.stat__n{font-family:var(--font-display);font-weight:var(--fw-max);
  font-size:clamp(1.6rem,2.8vw,2.5rem);letter-spacing:-.02em;line-height:1;color:#fff}
.stat__l{font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--band-ink);line-height:1.35}
@media (max-width:900px){.stats{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(3n+1){border-left:0}
  .stat:nth-child(n+4){border-top:1px solid rgba(255,255,255,.14)}}
@media (max-width:600px){.stats{grid-template-columns:repeat(2,1fr)}
  .stat{min-height:92px}
  .stat:nth-child(3n+1){border-left:1px solid rgba(255,255,255,.14)}
  .stat:nth-child(odd){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}}

/* --- bolum basligi: indeks + baslik + dolduran cizgi + baglanti */
.sech{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-7) 0 var(--s-4)}
.sech__i{font-size:var(--fs-label);font-weight:var(--fw-max);letter-spacing:.14em;
  color:var(--muted);flex:none;font-variant-numeric:tabular-nums;
  padding-left:11px;position:relative}
/* Bölüm indeksinin önünde ana sitenin kırmızı işareti. */
.sech__i::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:var(--rule);height:14px;background:var(--red);border-radius:1px}
.sech h2{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:var(--fw-h);
  color:var(--ink);margin:0;flex:0 1 auto;min-width:0;letter-spacing:-.01em}
.sech__r{flex:1;height:1px;background:var(--line);min-width:var(--s-4)}
.sech__a{font-family:var(--font-display);font-size:12px;font-weight:600;flex:none}
.sech--dark h2{color:var(--on-band)}
.sech--dark .sech__i{color:var(--band-ink)}
.sech--dark .sech__r{background:rgba(255,255,255,.14)}
@media (max-width:600px){.sech{flex-wrap:wrap}.sech__r{display:none}}

/* --- anit rakam: kutle ile verilir, renkle degil. Kirmizi YOK. */
.monument{margin:var(--s-5) 0;display:flex;align-items:baseline;gap:var(--s-4);flex-wrap:wrap}
.monument b{font-family:var(--font-display);font-weight:var(--fw-max);
  font-size:clamp(3rem,7vw,5.5rem);letter-spacing:-.03em;line-height:.95;color:#fff}
.monument span{font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--band-ink)}
.bpdisc{font-size:11px;line-height:1.6;color:var(--band-ink);
  max-width:68ch;margin:var(--s-5) 0 0}

/* --- OEM referans alani: renk-disi yogunluk haritasi, her hucrede sayi basili */
.oem{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:var(--s-2)}
/* product.css:310-311 birebir: marka hücresi açık yüzey, hover'da KIRMIZI
   DOLGU. Önceki mavi ölçüm zemini ana site ailesinin dışındaydı. */
.oem__c{background:var(--surface);padding:12px 13px;display:flex;flex-direction:column;
  gap:4px;justify-content:center;min-height:64px;
  border:var(--border) solid var(--hair-card);border-radius:var(--radius-md)}
.oem__c.is-hi{background:var(--surface-2)}
a.oem__c:hover{text-decoration:none;background:var(--red);border-color:var(--red)}
a.oem__c:hover .oem__b,a.oem__c:hover .oem__n{color:var(--on-red)}
.oem__b{font-family:var(--font-display);font-size:12px;font-weight:var(--fw-em);
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink);line-height:1.25}
.oem__n{font-family:var(--font-mono);font-size:var(--fs-data);font-weight:var(--fw-h);
  color:var(--muted);font-variant-numeric:tabular-nums}
.oem__c--all{background:var(--ink);border-color:var(--ink)}
/* Metin --on-band DEĞİL --surface: --ink dark'ta beyaza döndüğü için
   --on-band (beyaz) ile birlikte 1.00:1 oluyordu. --surface her iki temada
   da --ink'in karşıtı: light 16.48:1, dark 18.16:1. */
.oem__c--all .oem__b,.oem__c--all .oem__n{color:var(--surface)}


/* ABD programi: 8 kart sabit 4x2 — auto-fit'in yetim biraktigi duzen yok */
.pgrid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.pgrid--4{grid-template-columns:repeat(2,1fr)}}


/* --- kompresor anatomisi: 1 buyuk plaka + 12 aile hucresi */
.anat__g{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2)}
.anat__c{background:var(--surface);padding:var(--s-3);display:flex;flex-direction:column;
  align-items:center;gap:4px;text-align:center;
  border:var(--border) solid var(--line);border-radius:var(--radius)}
.anat__c:hover{text-decoration:none;border-color:var(--line-strong);box-shadow:var(--shadow-card)}
.anat__m{width:56px;height:56px;border-radius:2px;display:block}
.anat__m img{width:100%;height:100%;object-fit:contain;display:block}
.anat__t{font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--ink);
  line-height:1.3}
.anat__n{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums}
@media (max-width:600px){.anat__g{grid-template-columns:repeat(3,1fr)}}
.b2bband{background:var(--surface);border:var(--border) solid var(--line);
  border-radius:var(--radius-card);padding:var(--s-5);display:flex;gap:var(--s-5);
  align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-top:var(--s-7);margin-bottom:var(--s-7)}

/* ============================ one cikan serit (karusel) ============================
   Ana sayfadaki "In the US programme". Kutuphane YOK: CSS scroll-snap +
   static/site.js icindeki kisa surucu. Referans alinan ornekler GSAP
   tabaniydi, alinmadi — sifir ucuncu taraf istek sozu ve ScrollSmoother'in
   ucretli olmasi. Kartin kendisi sayfanin her yerindeki .pcard; karusel
   yalnizca dizilimi ve ortadaki karti degistirir.
   ============================================================== */
.fcar{position:relative;margin-bottom:var(--s-7);--fcar-w:296px}
.fcar>.sech{margin-bottom:0}
.fcar__track{display:flex;align-items:flex-start;gap:var(--s-4);overflow-x:auto;
  scroll-behavior:smooth;scroll-snap-type:x mandatory;
  padding:var(--s-4) max(var(--s-4),calc(50% - var(--fcar-w)/2)) var(--s-5);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fcar__track::-webkit-scrollbar{display:none}
.fcar__track>.pcard{flex:0 0 var(--fcar-w);scroll-snap-align:center}
/* JS calisirsa: kenardakiler geri cekilir, ortadaki one gelir. JS yoksa
   is-live hic eklenmez ve serit duz, tam okunur bir liste olarak kalir. */
.fcar.is-live>.fcar__track>.pcard{opacity:.62;transform:scale(.95);
  transition:opacity .3s,transform .3s,box-shadow .3s,border-color .3s}
.fcar.is-live>.fcar__track>.pcard.is-mid{opacity:1;transform:scale(1);
  border-color:var(--line-strong);box-shadow:var(--shadow-card)}
/* Ortadaki kartta acilan blok: ornekteki "fiyat" yerine bizde aracin
   markalari ve OEM sayisi. Kirmizi 3px cizgi sitenin imzasi. */
/* Fotografin alt kenarina oturur, kartin boyunu DEGISTIRMEZ. Govdede
   dururken orta kart her degistiginde serit yukseklik degistiriyor ve
   altindaki bolum ziplayarak yer degistiriyordu. */
.pcard__rev{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:3px;padding:9px 13px 11px;
  background:var(--surface);border-top:var(--rule) solid var(--red);
  font-size:var(--fs-data);text-align:left}
/* Kart merkeze gelince blok ALTTAN yukari kayar. Fotograf kutusu zaten
   overflow:hidden — disari tasmadan asagida bekler. */
.fcar.is-live .pcard__rev{transform:translateY(101%);opacity:0;pointer-events:none;
  transition:transform .38s cubic-bezier(.22,.61,.36,1),opacity .22s}
.fcar.is-live .pcard.is-mid .pcard__rev{transform:none;opacity:1;pointer-events:auto}
.pcard__fits{color:var(--muted);line-height:1.5}
.pcard__fits b{color:var(--ink);font-weight:var(--fw-em)}
.pcard__oem{font-family:var(--font-mono);font-size:11px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.pcard__go{color:var(--red);font-weight:var(--fw-em);margin-top:2px}
/* Oklar: sitenin "yukari don" dugmesiyle ayni aile — koyu daire, hover kirmizi. */
.sech__nav{display:none;gap:8px;flex:none;margin-left:var(--s-3)}
.fcar.is-live .sech__nav{display:flex}
.fcar__nav{width:42px;height:42px;flex:none;cursor:pointer;
  border:var(--border) solid var(--line-strong);border-radius:var(--radius-pill);
  background:transparent;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .2s,color .2s,border-color .2s}
.fcar__nav svg{width:18px;height:18px}
.fcar__nav:hover{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.fcar__nav[disabled]{opacity:.35;cursor:default}
.fcar__nav[disabled]:hover{background:transparent;border-color:var(--line-strong);
  color:var(--muted)}
/* Noktalar: etkin olan kirmizi cubuga uzar. */
.fcar__dots{display:none;gap:7px;justify-content:center;align-items:center}
.fcar.is-live .fcar__dots{display:flex}
.fcar__dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;
  background:var(--rule-hard);opacity:.45;cursor:pointer;
  transition:width .25s,opacity .25s,background-color .25s}
.fcar__dot:hover{opacity:.85}
.fcar__dot.is-on{width:24px;background:var(--red);opacity:1}
@media (max-width:820px){
  .fcar{--fcar-w:230px}
  .sech__nav{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .fcar__track{scroll-behavior:auto}
  .fcar.is-live .pcard__rev{transition:none}
  .fcar.is-live>.fcar__track>.pcard{transition:none;transform:none;opacity:1}
  .fcar__dot{transition:none}
}

/* ================= kompresor bandi (kaydirmayla acilan) =================
   75 kare alfa kanalli WebP, kendi sunucumuzda. <img> ilk kare olarak hemen
   gorunur; canvas ustune biner ve JS varsa kareyi kaydirmaya gore degistirir.
   JS yoksa bant sabit bir urun gorseli olarak dogru calismaya devam eder.
   ==================================================================== */
/* Dizi YERINDE oynamali. Onceki hali bandi normal yukseklikte birakiyordu:
   siz kaydirdikca hem kareler ilerliyor hem bandin kendisi yukari kayiyordu,
   parcalar acilirken gorsel ekrandan cikip gidiyordu.
   Cozum: banda kaydirma pisti veriliyor (stage), icerik pistin icinde yapisik
   duruyor. Ekranda sabit kalir, yalnizca kareler ilerler; pist bitince sayfa
   normal akisina devam eder. Telefon/tablette pist kapali — orada yapisik
   bolumler kaydirmayi ele geciriyormus gibi hissettiriyor. */
.cband{padding:0;margin:var(--s-7) 0 0}
.cband__stage{height:250vh;position:relative}
/* Icerik pistin icinde yapisik ve ekran boyunda: koyu alan tam genislik,
   gorsel kaydirirken yerinde durur. Metin sutunu daraltildi, kalan genislik
   gorsele verildi. */
.cband__in{position:sticky;top:0;min-height:100vh;max-width:1560px;
  display:grid;grid-template-columns:minmax(200px,.44fr) 1.56fr;
  gap:var(--s-5);align-items:center;padding-block:0}
/* Parcalar acilirken govde gorsel olarak kuculuyor; kareyi elden geldigince
   buyuk basmak bunu dengeler. Yapiskan pencerede dikey yer bol. */
.cband__m{margin-left:auto}
/* Tam ekran koyu bantta baslik sayfanin geri kalanindaki olcuyle duramaz:
   yaninda 900px'lik bir gorsel var, normal bolum basligi orada kayboluyor. */
.cband__t h2{margin:var(--s-3) 0 var(--s-4);
  font-size:clamp(2rem,3.2vw,3.1rem);line-height:1.08;letter-spacing:-.02em}
.cband__t .measure{margin-bottom:var(--s-5);font-size:clamp(1rem,1.15vw,1.15rem);
  line-height:1.55;color:var(--band-ink)}
/* Koyu bantta hayalet buton ters calisir: cerceve acik, dolgu koyu kalir. */
.band--dark .cband__t .btn--ghost{color:var(--band-ink);border-color:rgba(255,255,255,.28)}
.band--dark .cband__t .btn--ghost:hover{background:var(--on-band);color:var(--band-alt);
  border-color:var(--on-band)}
/* Kutunun oranini kareler inmeden ONCE sabitler: tembel yuklenen gorsel
   gelince bant zipla­masin. */
.cband__m{position:relative;width:100%;aspect-ratio:900/506}
.cband__still{display:block;width:100%;height:auto}
/* Canvas gorunmez baslar: kareler inene kadar altindaki ilk kare gorunur,
   boylece bos bir dikdortgen hic olusmaz. Kareler gelince ROLLER DEGISIR —
   canvas gorunur, sabit kare SONER. Onceki hali sabit kareyi birakiyordu ve
   iki katman ust uste biniyordu: parcalar acilirken altta duran kapali
   kompresor da gorunmeye devam ediyordu. */
.cband__c{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity .3s}
.cband__m.is-live .cband__c{opacity:1}
.cband__still{transition:opacity .3s}
.cband__m.is-live .cband__still{opacity:0}
@media (max-width:900px){
  .cband{padding:var(--s-6) 0}
  .cband__stage{height:auto}
  .cband__in{position:static;min-height:0;grid-template-columns:1fr;gap:var(--s-5)}
}
@media (prefers-reduced-motion:reduce){
  .cband{padding:var(--s-6) 0}
  .cband__stage{height:auto}
  .cband__in{position:static;min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .cband__c,.cband__still{transition:none}
}

/* ================= dunya haritasi bandi =================
   Nokta matrisi SVG — gorsel istegi YOK, birkac kilobayt. Kirmizi noktalar
   ihracat bolgelerini isaretler; bilgi yalnizca renkle verilmedigi icin
   (baslikta sayi yazili) erisilebilirlik acisindan da sorun cikarmaz.
   ==================================================================== */
.mapband{display:grid;gap:var(--s-5);justify-items:center;margin-bottom:var(--s-7)}
.mapband .measure{text-align:center;margin:0}
.mapband__svg{width:100%;max-width:1040px;height:auto;color:var(--faint)}
.map__d{fill:currentColor;opacity:.55}
.map__hi{fill:var(--red)}

/* ============================ filters ============================ */
.filters{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s-5)}

/* ============================ search page ============================ */
.searchband{background:var(--surface);border-bottom:var(--border) solid var(--line);
  padding:var(--s-5) 0 var(--s-4)}
.sresult{margin-top:var(--s-3);font-size:13.5px;color:var(--muted)}
.sresult b{font-family:var(--font-mono);color:var(--ink);font-weight:700}
.empty{background:var(--surface);border:var(--border) solid var(--line);
  border-radius:var(--radius-card);padding:var(--s-6);margin-top:var(--s-5);max-width:640px}
.empty h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--ink);
  margin:0 0 var(--s-3)}
.empty h3 span{font-family:var(--font-mono);color:var(--red-ink)}
.empty ul{margin:0 0 var(--s-4);padding-left:1.15em;color:var(--muted);font-size:14px;
  display:flex;flex-direction:column;gap:6px}

/* ============================ b2b ============================ */
.b2bbar{background:var(--band);color:var(--band-ink);padding:11px 0;
  font-size:var(--fs-data)}
.b2bbar .wrap{display:flex;gap:var(--s-4);flex-wrap:wrap;justify-content:space-between}
.b2bbar__acct{color:var(--on-band);font-weight:700}
.b2bbar__acct em{font-style:normal;font-weight:400;color:var(--band-ink)}
.paste{width:100%;font-family:var(--font-mono);font-size:var(--fs-data);padding:12px 14px;
  border:var(--border) solid var(--line);border-radius:var(--radius-md);
  background:var(--sunken);color:var(--ink);resize:vertical;margin-top:var(--s-2)}
.b2b td{padding:11px 15px}
.b2bpn{font-family:var(--font-mono);font-weight:700;color:var(--ink);font-size:13px}
.b2bdsc{font-size:12px;color:var(--muted);display:block;margin-top:2px}
.listp{font-family:var(--font-mono);font-size:11.5px;color:var(--faint);
  text-decoration:line-through;display:block;font-variant-numeric:tabular-nums}
.qtybox{font-family:var(--font-mono);font-size:var(--fs-data);
  border:var(--border) solid var(--line);
  border-radius:var(--radius);padding:6px 11px;display:inline-block;min-width:52px;
  text-align:center;background:var(--surface)}
.totals{background:var(--surface);border:var(--border) solid var(--line);
  border-radius:var(--radius-card);padding:var(--s-5);margin-top:var(--s-5);max-width:420px;
  margin-left:auto;display:flex;flex-direction:column;gap:9px}
.totals__r{display:flex;justify-content:space-between;gap:var(--s-4);font-size:13.5px;
  color:var(--muted)}
.totals__r b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.totals__r--tot{border-top:var(--border) solid var(--line);padding-top:9px;font-size:15px;
  color:var(--ink);font-weight:600}
.polabel{font-family:var(--font-display);font-size:12px;color:var(--muted);
  display:flex;gap:var(--s-2);align-items:center;margin-top:var(--s-2)}
.poinput{font-family:var(--font-mono);font-size:var(--fs-data);padding:8px 11px;flex:1;min-width:0;
  border:var(--border) solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink)}
.score{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--s-3);margin:var(--s-5) 0}
.score__c{background:var(--surface);padding:15px 17px 17px;display:flex;flex-direction:column;
  gap:3px;border:var(--border) solid var(--line);border-radius:var(--radius-card)}
.score__n{font-family:var(--font-mono);font-size:28px;font-weight:700;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.score__l{font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.score__d{font-family:var(--font-mono);font-size:11.5px;color:var(--faint)}
.score__d.over{color:var(--red-ink)}

/* ============================ footer ============================ */
footer{background:var(--surface);border-top:3px solid var(--red);margin-top:var(--s-8);
  padding:var(--s-6) 0 var(--s-5)}
/* Ana sitenin footer'ı: sütunlar dikey çizgiyle ayrılıyor, sonuncusu
   şeffaf. Başlıklar BÜYÜK HARF DEĞİL (ana sitede text-transform hiç yok). */
.fgrid{display:grid;grid-template-columns:minmax(230px,1.4fr) repeat(4,minmax(160px,1fr));
  gap:0;margin-bottom:var(--s-5)}
@media (max-width:1100px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.fbrand{display:inline-block}
.fbrand img{height:42px;width:auto;display:block}
.fbrand__dark{display:none!important}
:root[data-theme="dark"] .fbrand__light{display:none!important}
:root[data-theme="dark"] .fbrand__dark{display:block!important}
.fabout{font-size:var(--fs-data);color:var(--muted);line-height:1.65;
  margin:var(--s-3) 0 var(--s-4);max-width:34ch}
.fcol{padding:var(--s-5);border-right:var(--border) solid var(--line)}
.fgrid>.fcol:first-child{padding-left:0}
.fcol:last-child{border-right:0;padding-right:0}
/* Marka sutunu bir bag listesi degil, kimlik alani: ayirac cizgisi almaz
   ve yanindaki sutuna biraz daha nefes birakir. */
.fgrid>.fcol--brand{border-right:0;padding-left:0;padding-right:var(--s-6)}
.fcol h4{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-em);
  color:var(--ink);margin:0 0 var(--s-3)}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
  font-size:var(--fs-data)}
.fcol a{color:var(--text)}
.fcol a:hover{color:var(--red);text-decoration:none}
@media (max-width:820px){
  .fcol,.fgrid>.fcol--brand{border-right:0;padding-left:0;padding-right:0}
}
/* Kunye: tamami katalogdan sayilan gercek veri. En dusuk maliyetli, en yuksek
   getirili kurumsal isaret — "bu siteyi kim yaptiysa neyi yayinladigini
   sayiyor" demek. */
.colophon{font-size:var(--fs-data);color:var(--muted);
  border-bottom:var(--border) solid var(--line);padding-bottom:var(--s-4);
  margin-bottom:var(--s-5);line-height:1.7;font-variant-numeric:tabular-nums}
/* Ana sitede burada e-bülten paneli var; bizde bülten YOK, uydurulmaz.
   Aynı görsel ağırlık gerçek içerikle: künye paneli. */
.fbar{border-top:var(--border) solid var(--line);padding-top:var(--s-4);
  display:flex;gap:var(--s-4) var(--s-6);justify-content:space-between;
  flex-wrap:wrap;font-size:var(--fs-data);color:var(--muted);line-height:1.65}
.fbar p{margin:0}
.fbar__d{max-width:78ch}
.fbar__c{white-space:nowrap}
.fbar__c span{display:block;color:var(--faint)}
.fcol li a[href^="mailto"]{font-family:var(--font-mono);font-size:12px}

/* Ekran disindaki agir bolumleri tarayici ilk boyamada atlar. Ana sitenin
   urun sayfasindan alindi. Urun sayfasinda 1.431 referans + 13.025 uyum
   satiri var; contain-intrinsic-size verilmezse kaydirma cubugu ziplar. */
#xref,#veh,#tech,#related,#faq{content-visibility:auto;contain-intrinsic-size:auto 600px}
#veh{contain-intrinsic-size:auto 1600px}

/* Buyutme — <dialog> tabanli, bagimliliksiz. Fotograf beyaz plakada kalir
   (fotograflar beyaz zeminli), fon her temada koyu. */
.fit__m .fit__img{cursor:zoom-in}
.lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,860px);
  width:100%;max-height:92vh}
.lightbox::backdrop{background:rgba(8,10,10,.84)}
.lightbox__img{width:100%;height:auto;display:block;background:#fff;
  border-radius:var(--radius-media);padding:10px}
.lightbox__x{position:fixed;top:14px;right:18px;width:44px;height:44px;
  border-radius:var(--radius-pill);border:0;background:var(--red);color:var(--on-red);
  font-size:22px;line-height:1;cursor:pointer;z-index:2}
.lightbox__x:hover{background:#1f1f1f;color:#fff}
/* Buyutmede onceki/sonraki gorsel + sayac */
.lightbox__nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border-radius:var(--radius-pill);border:0;background:rgba(255,255,255,.14);color:#fff;
  font-size:26px;line-height:1;cursor:pointer;z-index:2;
  display:inline-flex;align-items:center;justify-content:center}
.lightbox__nav:hover{background:var(--red)}
.lightbox__nav--p{left:18px}.lightbox__nav--n{right:18px}
.lightbox__c{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;
  font-size:13px;color:#fff;background:rgba(0,0,0,.45);padding:4px 12px;
  border-radius:var(--radius-md)}
/* Tek gorselli urunde gezinme ve sayac gosterilmez */
.lightbox--solo .lightbox__nav,.lightbox--solo .lightbox__c{display:none}

/* Yukari don — ana sitenin .top-button'i: 40px daire, koyu, hover kirmizi. */
.topbtn{position:fixed;right:28px;bottom:28px;width:44px;height:44px;
  border-radius:var(--radius-pill);background:var(--ink);color:var(--surface);
  border:0;cursor:pointer;display:none;align-items:center;justify-content:center;
  font-size:18px;line-height:1;z-index:30;box-shadow:var(--shadow-card)}
.topbtn.is-vis{display:inline-flex}
.topbtn:hover{background:var(--red)}

/* .fsel: arac sayfasindaki kardes-marka cipleri (CSS'i temizlikte silinmis,
   markup uretilmeye devam ediyordu — stilsiz linkti) */
.fsel{font-family:var(--font-display);font-size:12.5px;font-weight:var(--fw-h);
  padding:8px 13px;border:var(--border) solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);color:var(--text);white-space:nowrap;display:inline-block}
a.fsel:hover{text-decoration:none;border-color:var(--red);color:var(--red)}

/* Kuresel dusme sonucu — yerelde yok, ana katalogda var */
.gcell{background:var(--surface);border:var(--border) solid var(--line);
  border-radius:var(--radius-card);padding:var(--s-4) var(--s-5);
  display:flex;flex-direction:column;gap:6px}
.gcell__badge{align-self:flex-start;background:var(--band);color:var(--on-band);
  font-size:9.5px;font-weight:var(--fw-em);letter-spacing:.08em;
  padding:4px 9px;border-radius:var(--radius-sm)}
.gcell__pn{font-size:1.1rem;font-weight:var(--fw-max);color:var(--ink)}
.gcell__n{font-size:var(--fs-data);color:var(--muted)}
.gcell__note{font-size:12px;color:var(--faint)}
.gcell__a{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

/* ============================ ana sayfa slayti ============================
   Capraz gecisli, otomatik ilerleyen serit. Metin okunurlugu icin gorselin
   ustune soldan koyu gradyan iner — beyaz metin fotografa degil gradyana
   oturur (kontrast garanti). */
.slider{position:relative;overflow:hidden;background:var(--band-alt)}
.slider__track{position:relative;height:clamp(340px,38vw,460px)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none}
.slide.is-on{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide__b{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;gap:10px;padding:0 min(7vw,96px);
  background:linear-gradient(90deg,rgba(10,13,13,.78) 0%,rgba(10,13,13,.45) 46%,transparent 75%)}
.slide__b h2{font-size:clamp(1.4rem,3.2vw,2.25rem);font-weight:var(--fw-em);
  letter-spacing:-.02em;line-height:1.15;color:#fff;margin:0;max-width:19ch;
  text-wrap:balance}
.slide__b p{color:#d9dedd;font-size:var(--fs-ui-lg);margin:0;max-width:44ch}
.slide__cta{align-self:flex-start;border-color:rgba(255,255,255,.55);color:#fff;
  margin-top:6px}
.slide__cta:hover{background:#fff;border-color:#fff;color:#1f1f1f}
.slider__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border-radius:var(--radius-pill);border:0;background:rgba(255,255,255,.16);
  color:#fff;font-size:24px;line-height:1;cursor:pointer;z-index:2;
  display:inline-flex;align-items:center;justify-content:center}
.slider__nav:hover{background:var(--red)}
.slider__nav--p{left:14px}.slider__nav--n{right:14px}
.slider__dots{position:absolute;left:0;right:0;bottom:14px;display:flex;
  justify-content:center;gap:8px;z-index:2}
.slider__dot{width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.45);padding:0}
.slider__dot.is-on{background:var(--red);transform:scale(1.25)}
@media (max-width:600px){.slider__nav{display:none}}

/* ============================ kurumsal sayfalar ============================ */
/* Alt gezinme seridi: about/manufacturing/engineering/fairs arasi gecis */
.fsub{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-4) 0 var(--s-2)}
.fsub__i{font-family:var(--font-display);font-size:var(--fs-data);font-weight:var(--fw-h);
  padding:8px 14px;border:var(--border) solid var(--line);border-radius:var(--radius-md);
  color:var(--text);background:var(--surface)}
.fsub__i:hover{color:var(--red);border-color:var(--red);text-decoration:none}
.fsub__i.is-on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
/* Zaman cizelgesi */
.miles{display:flex;flex-direction:column;gap:0;border:var(--border) solid var(--line);
  border-radius:var(--radius-card);background:var(--surface);overflow:hidden;
  margin-bottom:var(--s-6)}
.mile--ev b{width:auto;min-width:150px}
.mile--ev .kit__n{display:block;margin-top:3px}
.mile{display:flex;gap:var(--s-5);padding:14px var(--s-5);align-items:baseline;
  border-bottom:var(--border) solid var(--hair)}
.mile:last-child{border-bottom:0}
.mile b{font-variant-numeric:tabular-nums;color:var(--red);flex:none;width:52px}
.mile span{max-width:var(--measure)}
/* Kurumsal gorseller — urun plakasiyla ayni dil */
.corpimg{display:block;border:var(--border) solid var(--hair-card);
  border-radius:var(--radius-media);overflow:hidden}
.corpimg img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.corprow{display:grid;grid-template-columns:minmax(280px,42%) 1fr;gap:var(--s-6);
  align-items:start;margin-bottom:var(--s-6)}
.corprow--flip{grid-template-columns:1fr minmax(280px,42%)}
.corprow--flip>.plate{order:2}
.corprow .measure{max-width:66ch}
@media (max-width:820px){
  .corprow,.corprow--flip{grid-template-columns:1fr;gap:var(--s-4)}
  .corprow--flip>.plate{order:-1}
}
.band--2 .corpimg{border-color:rgba(255,255,255,.14)}
.corpgal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s-4);margin:var(--s-5) 0}
.anat__g--corp{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.anat__g--corp .anat__m{width:100%;height:auto;aspect-ratio:16/10}
.catcover{display:block;border:var(--border) solid var(--hair-card);
  border-radius:var(--radius);overflow:hidden;margin-bottom:var(--s-2)}
.catcover img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}

/* ============================ haber makalesi ============================ */
/* Uzun okuma govdesi (.measure genisliginde). Renkler tamamen token —
   uc tema blogu icin ayri kural GEREKMEZ, tokenlar zaten tema basina cozulur. */
.article h2{font-family:var(--font-display);font-size:1.15rem;font-weight:var(--fw-h);
  margin:var(--s-6) 0 var(--s-3)}
/* Vaden kategori metni ara baslik olarak h6 kullaniyor; kural olmadan tarayici
   varsayilaniyla 9px'e dusuyordu. h2 ile ayni gorunur. h3'e dokunulmaz: haber
   ve blog govdesi onu kullaniyor, gorunumu statik siteyle birebir kalmali. */
.article h4,.article h5,.article h6{font-family:var(--font-display);font-size:1.15rem;
  font-weight:var(--fw-h);margin:var(--s-6) 0 var(--s-3)}
.article p{margin:0 0 var(--s-3)}
.article ul{margin:0 0 var(--s-3);padding-left:1.25em}
.article li{margin-bottom:6px}
.article .panel{margin:var(--s-4) 0}
/* Makale govdesi saricisi: tablolar 860px'e kadar tam genislik kullanir
   (dar .measure'a sigmayan capraz referans tablolari icin), metin ogeleri
   okunurluk icin --measure'da (68ch) kalir. Cok genis tablo sayfayi yatay
   kaydirmaz: mevcut .panel.scroll-x sarmali kendi icinde kaydirir. */
.artbody{max-width:1040px}
/* Musteri istegi: satirlar iki yana yasli, sutunu doldursun. hyphens
   olmadan justify genis bosluk nehirleri acar — birlikte kullanilir. */
.artbody p,.artbody ul,.artbody ol{max-width:none;text-align:justify;
  hyphens:auto;-webkit-hyphens:auto;line-height:1.7}
.artbody h2,.artbody h3{max-width:none}

/* Footer sosyal ikonlari — inline SVG, currentColor tokeni izler */
.fsoc{display:flex;gap:10px;margin-top:var(--s-3)}
.fsoc a{color:var(--muted);display:inline-flex;padding:6px}
.fsoc a:hover{color:var(--red)}
.fsoc svg{width:18px;height:18px;fill:currentColor}

/* ==========================================================================
   DOKUNMATİK HEDEF MİNİMUMU — dosyanın SONUNDA olmalı, yoksa ezilir.
   ========================================================================== */
/* Kural 48px'ti ama blok 44px kullaniyordu ve radyo/tema/arama/etiket
   kontrollerine hic dokunmuyordu. Hepsi --row-h-touch (48px) tabanina alindi. */
@media (max-width:820px),(pointer:coarse){
  .topbar__in{min-height:64px}
  .btn,.btn--sm{min-height:var(--row-h-touch);padding-top:0;padding-bottom:0}
  .copy{min-height:var(--row-h-touch);padding:0 14px}
  .lang b,.lang a{min-height:var(--row-h-touch);display:flex;align-items:center;padding:0 14px}
  .tag,a.tag{min-height:36px;display:inline-flex;align-items:center;padding:6px 10px}
  .nav a{min-height:var(--row-h-touch);display:inline-flex;align-items:center}
  .themebtn{width:var(--row-h-touch);height:var(--row-h-touch)}
  .tsearch{height:var(--row-h-touch)}
  .qtybox,.poinput{min-height:var(--row-h-touch)}
  .note label{min-height:var(--row-h-touch);display:inline-flex;align-items:center;gap:6px}
  .note input[type=radio]{width:20px;height:20px}
  summary{min-height:52px}
  .sbar__b,.sbar__in{min-height:var(--row-h-touch)}
  /* Kural bu sinlflara hic dokunmuyordu: 375px'te footer'da 27 baglanti 18px,
     capraz referans tablosunda 28 parca no baglantisi 15px yuksekligindeydi.
     Eldivenli el bunlari isabet ettiremez. */
  .fcol a{min-height:44px;display:inline-flex;align-items:center}
  .crumb a{min-height:40px;display:inline-flex;align-items:center}
  .netlink{min-height:44px;display:inline-flex;align-items:center}
  .brand{min-height:var(--row-h-touch)}
  .facet__i,.cov__r,.oem__c{min-height:var(--row-h-touch)}
  .fsub__i{min-height:44px;display:inline-flex;align-items:center}
  .bchip,.sech__a{min-height:44px;display:inline-flex;align-items:center}
}
/* Tablo satiri 48px'e cikar (--row-h-touch) ve baglanti hucreyi doldurur:
   yogunluk korunur, hedef buyur. */
@media (max-width:600px){
  td{padding-top:2px;padding-bottom:2px}
  td a{min-height:44px;display:inline-flex;align-items:center}
}

/* Iletisim formu bot tuzagi: gorunmez, odaklanmaz (display:none bazi botlarca atlaniyor). */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Panelin yazi onizlemesi seridi. */
.preview-bar{background:#b3161d;color:#fff;text-align:center;font:600 13px/1.4 var(--font-body);padding:10px 16px;letter-spacing:.02em}

/* ============================ iletisim formu (2026-11-02) ============================
   Onceki form tarayicinin ciplak kutulariyla kalmisti. Kart icinde iki sutun; mesaj ve
   gonder tam genislik. Renkler ve kenarlar sitenin degiskenlerinden; koyu temada da calisir. */
.miles--wide .mile b{width:96px}
.cform{border:var(--border) solid var(--line);border-radius:var(--radius-card);background:var(--surface);
  padding:var(--s-6);margin-bottom:var(--s-7)}
.cform__sub{margin:0 0 var(--s-5);color:var(--muted)}
.cform .note{margin:0 0 var(--s-5)}
.note--ok{border-left-color:var(--in-stock);background:var(--in-stock-soft)}
.cform__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-5)}
.cfield{display:flex;flex-direction:column;gap:6px;min-width:0}
.cfield--wide{grid-column:1 / -1}
.cfield > span{font-family:var(--font-display);font-size:var(--fs-data);font-weight:var(--fw-em);color:var(--ink)}
.cfield i,.cform__req i{font-style:normal;color:var(--red)}
.cfield input,.cfield textarea{font:inherit;font-size:var(--fs-ui-lg);color:var(--ink);background:var(--ground);
  border:var(--border) solid var(--line-strong);border-radius:var(--radius);padding:11px 13px;width:100%;min-width:0;
  transition:border-color .15s,box-shadow .15s}
.cfield textarea{resize:vertical;min-height:150px;line-height:1.55}
.cfield input:hover,.cfield textarea:hover{border-color:var(--rule-hard)}
.cfield input:focus,.cfield textarea:focus{outline:none;border-color:var(--focus);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent)}
.cform__foot{display:flex;align-items:center;gap:var(--s-5);margin-top:var(--s-5);flex-wrap:wrap}
.cform__foot .btn{min-width:180px}
.cform__req{font-size:var(--fs-data);color:var(--muted)}
@media (max-width:700px){
  .cform{padding:var(--s-5) var(--s-4)}
  .cform__grid{grid-template-columns:minmax(0,1fr)}
  .cform__foot .btn{width:100%}
}

/* Ust seritteki ana site baglantisi (2026-11-02). */
.util__f a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.util__f a:hover{color:#fff}