/* ============================================================
   Seçkinler Otomotiv - ALTERNATİF ana sayfa (Locamart iskeleti)
   Palet referanstan: indigo + periwinkle + beyaz, havadar.
   FARK (kullanıcı kararı): hero TEK geniş slider; referanstaki
   iki küçük yan banner YOK. Ticaret öğeleri teklif diline
   çevrildi (ürün gerçeği: sitede fiyat yok).
   ============================================================ */
/* Yerel yazi tipleri - CDN YOK: harici istek, gizlilik ve
   erisilebilirlik bagimliligi olusturmasin diye dosyalar
   templates/assets/fonts/ altinda barindiriliyor.
   latin + latin-ext: Turkce ç ğ ı ö ş ü İ Ğ Ş icin latin-ext SART. */
@font-face{font-family:'Urbanist';font-style:normal;font-weight:400;font-display:swap;src:url('/templates/assets/fonts/urbanist-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:400;font-display:swap;src:url('/templates/assets/fonts/urbanist-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:600;font-display:swap;src:url('/templates/assets/fonts/urbanist-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:600;font-display:swap;src:url('/templates/assets/fonts/urbanist-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:700;font-display:swap;src:url('/templates/assets/fonts/urbanist-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:700;font-display:swap;src:url('/templates/assets/fonts/urbanist-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:800;font-display:swap;src:url('/templates/assets/fonts/urbanist-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:800;font-display:swap;src:url('/templates/assets/fonts/urbanist-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/templates/assets/fonts/open-sans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/templates/assets/fonts/open-sans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/templates/assets/fonts/open-sans-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/templates/assets/fonts/open-sans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/templates/assets/fonts/open-sans-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/templates/assets/fonts/open-sans-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:300 700;
  font-display:swap;src:url('/templates/assets/fonts/quicksand-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:300 700;
  font-display:swap;src:url('/templates/assets/fonts/quicksand-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --indigo:#3D4EA8;      /* nav bandı, vurgu blokları */
  --indigo-700:#31408C;  /* hover */
  --peri:#6478CC;        /* KATEGORİLER pili, ikincil vurgu */
  --link:#3672D9;        /* bağlantı ve aktif sekme mavisi */
  --ink:#232833;
  --steel:#6B7280;
  --line:#E6E8EC;
  --soft:#F5F6F8;        /* gri şerit */
  --tint:#EAF3FB;        /* açık mavi banner zemini */
  --r-sm:4px; --r-card:8px; --r-pill:999px;
  --e1:0 1px 3px rgba(20,25,40,.07),0 1px 2px rgba(20,25,40,.04);
  --e2:0 6px 16px rgba(20,25,40,.10),0 2px 4px rgba(20,25,40,.05);
  --ease:cubic-bezier(0.23,1,0.32,1);
  /* ONEMLI: bu zincir daha once BILDIRILIYOR ama hicbiri YUKLENMIYORDU -
     @font-face kurali yoktu, dolayisiyla site bastan beri sistem yazi
     tipiyle cizilmisti (olculdu: document.fonts bostu). Dosyalar artik
     yukarida tanimli ve yerelde barindiriliyor. */
  --font:"Urbanist","Quicksand","Open Sans",system-ui,sans-serif;
  /* Sol pano yuzeyi. Menu beyaz zeminde beyazdi (#fff) - sayfa arka
     planiyla ayni oldugu icin varligi gorunmuyordu.
     --panel        : istenen yari saydam ton (sayfa zemini uzerinde)
     --panel-solid  : ayni tonun BEYAZ UZERINE dusmus opak karsiligi.
                      Acilir menuler icerigin USTUNDE yuzdugu icin
                      saydam olamaz - arkadaki yazi sizip okunmaz hale
                      getirir. Gorunum ayni, okunurluk korunur.
     Asagidaki uc ton, panel zemininde OLCULEREK secildi (eski acik
     tonlar bu zeminde kayboluyordu):
     --panel-line   : satir ayraci  (panel ile 1.54:1)
     --panel-edge   : dis kenarlik  (1.84:1)
     --panel-ink2   : ikincil metin/ikon (5.30:1 - AA gecer) */
  --panel:#a9b0be7a;
  --panel-solid:#D6D9E0;
  --panel-line:#A9B0BE;
  --panel-edge:#98A1B2;
  --panel-ink2:#4E5563;
  /* Parca grubu ikonlari (iki tonlu). Referans dilde vurgu SARI idi;
     bizde acik mavi - uc zeminde de olculdu:
     kart zemini 1.97:1, beyaz 2.21:1, koyu konturla 6.69:1. */
  --icon-line:#232833;
  --icon-accent:#7FB3E8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:#fff;font-size:15.5px;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.container{max-width:1280px;margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em;font-weight:800}

/* ---------- ince üst bar ---------- */
.utility{border-bottom:1px solid var(--line);font-size:13px;color:var(--steel)}
.utility .container{display:flex;justify-content:space-between;align-items:center;min-height:36px}
.utility .left{display:flex;gap:20px}
.utility a{display:inline-flex;align-items:center;gap:6px;min-height:36px}
@media (hover:hover) and (pointer:fine){ .utility a:hover{color:var(--indigo)} }
.utility .lang a{padding:0 6px}
/* Kokluluk slogani: ust barin sag komsusu, baglantilardan tonla ayrilir
   (tiklanabilir sanilmasin). Onunde ince bir ayrac var; ayrac SOLDA degil
   ::before ile, cunku dar ekranda oge tamamen gizlenince ayrac da gitsin. */
.utility .kokum{
  display:inline-flex;align-items:center;min-height:36px;
  color:var(--steel);opacity:.85;font-size:12.5px;letter-spacing:.01em;white-space:nowrap
}
.utility .kokum::before{
  content:"";width:1px;height:14px;margin-right:20px;background:var(--line)
}
/* 900px alti: telefon + WhatsApp yeterli, slogan satiri tasitirdi. */
@media (max-width:900px){ .utility .kokum{display:none} }
.utility .lang .on{color:var(--indigo);font-weight:700}

/* ---------- ana header ---------- */
.header .container{display:flex;align-items:center;gap:26px;min-height:74px}
.logo img{height:49.7px;width:auto}   /* 36px +%15 +%20 = 49.68 */
/* Menuyu ortalayan flex:1 SARMALAYICIYA verilir: .mainnav bir <nav>
   icinde duruyor, yani .header .container'in dogrudan cocugu DEGIL -
   flex:1 dogrudan .mainnav'a yazilinca hicbir etkisi olmuyordu
   (olculdu: nav sarmalayicinin flex-grow'u 0 kaliyordu). */
.navwrap{flex:1;display:flex;justify-content:center;min-width:0}
.mainnav{display:flex;gap:2px}
.mainnav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 13px;
  font-size:13.5px;font-weight:800;letter-spacing:.05em;color:var(--ink);
  border-radius:var(--r-sm);
  /* Kategori menusuyle AYNI soldan saga renk gecisi (istek uzerine).
     Ayni teknik: background-size animasyonu - sozde-oge yigilma sirasina
     girmiyor. Sure ve egri de ayni ki iki menu ayni dili konussun. */
  background-image:linear-gradient(90deg,#B3CFF0 0%,#DCE9F9 45%,#DCE9F9 100%);
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:color 720ms cubic-bezier(.4,0,.2,1),
             background-size 720ms cubic-bezier(.4,0,.2,1)
}
.mainnav a.on{color:var(--indigo)}
@media (hover:hover) and (pointer:fine){
  .mainnav a:hover{color:var(--indigo);background-size:100% 100%}
}
.cartish{
  margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 16px;
  background:var(--indigo);border-radius:var(--r-sm);color:#fff;font-weight:800;font-size:13px;
  border:0;transition:background 160ms var(--ease),transform 160ms var(--ease)
}
.cartish:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .cartish:hover{background:var(--indigo-700)} }
.cartish .count{
  min-width:20px;height:20px;border-radius:var(--r-pill);background:#fff;color:var(--indigo);
  font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 6px
}
/* MOBIL ANA MENU.
   Onceden burada yalnizca "display:none" vardi ve yerine hicbir sey
   konmamisti: Hakkimizda / Urunler / Iletisim / Parca Gruplari telefonda
   HIC ERISILEMIYORDU. Artik hamburger ile acilan bir panel var. */
.burger{display:none}
/* Dar ekranda TEKLİF LİSTEM yalnizca ikon + sayi.
   Olculdu (390px): logo 156px, buton 139px, hamburger 32px - baslik
   tamamen doluyordu ve buton logoyla ayni agirlikta gorunuyordu.
   Metin gizleniyor, anlami kayboluyor DEGIL: baglantinin aria-label'i
   zaten "Teklif listem, N parça" diyor. */
@media (max-width:700px){
  .cartish{padding:0 12px;gap:8px;min-height:42px}
  .cartish .et{display:none}
}
@media (max-width:900px){
  .header .container{position:relative;gap:12px}
  .burger{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;border:0;background:transparent;
    color:var(--ink);border-radius:var(--r-sm);
    transition:background 160ms var(--ease),transform 160ms var(--ease)
  }
  .burger:active{transform:scale(.94)}
  .burger[aria-expanded="true"]{background:var(--soft);color:var(--indigo)}
  .navwrap{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:60;
    background:#fff;border-top:1px solid var(--line);box-shadow:var(--e2)
  }
  .navwrap.open{display:block}
  .mainnav{flex-direction:column;gap:0;padding:4px 20px 10px}
  .mainnav li + li a{border-top:1px solid var(--line)}
  .mainnav a{width:100%;min-height:50px;padding:0;font-size:14px}
}
/* Menu ortalanmasi: .cartish'in margin-left:auto'su, flex bosluğunu
   flex-grow'dan ONCE yuttugu icin .mainnav{flex:1} genisleyemiyordu -
   menu logonun hemen sagina yapisip sayfa merkezinin ~125px soluna
   dusuyordu. Menunun gorundugu genislikte auto margin kaldiriliyor;
   900px altinda menu gizli oldugu icin orada auto margin SART (sepet
   sag kenara yaslansin diye) ve dokunulmuyor. */
@media (min-width:901px){ .cartish{margin-left:0} }

/* ---------- indigo arama bandı ---------- */
.band{background:var(--indigo)}
.band .container{display:flex;align-items:stretch;gap:14px;padding-top:10px;padding-bottom:10px}
.cats-btn{
  display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border:0;
  background:var(--peri);border-radius:var(--r-sm);color:#fff;font-weight:800;font-size:13px;letter-spacing:.08em;
  transition:background 160ms var(--ease),transform 160ms var(--ease);flex:0 0 auto;width:250px
}
.cats-btn:active{transform:scale(.97)}
/* Pano acikken dugme "basili" durur - hangi durumda oldugu belli olsun. */
@media (min-width:1024px){ .cats-btn[aria-expanded="true"]{background:var(--indigo)} }
@media (hover:hover) and (pointer:fine){ .cats-btn:hover{background:#5769BD} }
.bandsearch{flex:1;display:flex;background:#fff;border-radius:var(--r-sm);overflow:hidden}
.bandsearch select{
  border:0;min-height:46px;padding:0 34px 0 14px;font-family:inherit;font-size:13.5px;color:var(--steel);
  background:#fff;border-right:1px solid var(--line);-webkit-appearance:none;appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%236B7280" stroke-width="2.4" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg>');
  background-repeat:no-repeat;background-position:right 12px center;max-width:190px
}
/* min-width:0 SART: flex ogesinin varsayilan min-width'i "auto"dur ve
   <input> kendi ic genisligi (~198px) altina KUCULMEZ. Dar ekranda input
   ve arama dugmesi kabin disina tasip overflow:hidden ile kirpiliyordu
   (olculdu: 390px ekranda input 198->396, dugme 396->448). */
.bandsearch input{flex:1;min-width:0;border:0;min-height:46px;padding:0 16px;
  font-family:inherit;font-size:14.5px;color:var(--ink)}
.bandsearch input::placeholder{color:#9AA1AC}
.bandsearch select:focus,.bandsearch input:focus{outline:none}
.bandsearch .go{
  border:0;background:#fff;min-width:52px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);transition:color 160ms var(--ease)
}
@media (hover:hover) and (pointer:fine){ .bandsearch .go:hover{color:var(--indigo)} }
@media (max-width:700px){ .bandsearch select{display:none} .cats-btn{width:auto} }
/* Dar ekranda tek sirada kalinca aramaya ~172px kaliyor - "Parça adı veya
   OEM kodu yazın" icin kullanissiz. Iki satira aliniyor, ikisi de tam en. */
@media (max-width:600px){
  .band .container{flex-wrap:wrap}
  .cats-btn{width:100%;justify-content:center}
  .bandsearch{flex:1 1 100%}
}

/* ---------- gövde: sol sütun + ana alan ---------- */
.shell{display:grid;grid-template-columns:1fr;gap:24px;padding:24px 0 8px}
/* Sutunlar ACIKCA yerlestiriliyor - "otomatik akis" DOM sirasina baglidir
   ve iki sablon farkli siralar kullaniyor (main.html: main->aside,
   alt.html: aside->main). Acik yerlesimle ikisi de masaustunde ayni
   gorunuyor: yan sutun solda, icerik sagda. Mobilde tek sutun oldugu icin
   sira yine DOM'dan gelir - orada da dogru: main.html'de once icerik. */
@media (min-width:1024px){
  .shell{grid-template-columns:250px 1fr}
  .shell > .side{grid-column:1;grid-row:1}
  .shell > main{grid-column:2;grid-row:1}
}
/* Icerik sayfasi govdesi - .shell yok, sol sutun yok.
   Dolgusu .shell ile AYNI (24px/8px) ki kirinti ve baslikla arasindaki
   mesafe liste sayfalarindakiyle tutsun.

   max-width DENENDI VE GERI ALINDI: 78ch (720px) verilince icerikteki
   float:right + width="650" gorsel metne 70px birakti, yazi kenarda
   harf harf akti. Icerik yoneticiden HAM HTML geldigi ve gorseller sabit
   genislikle gomulu oldugu icin sutunu daraltmak guvenli degil. Genislik
   serbest; okunabilirligi kayan gorsel zaten sagliyor (~73 karakter). */
.icerik{display:block;padding:24px 0 8px}
/* KAYAN GORSELI KAPSA: icerik HTML'inde float:right ile gelen 650px'lik
   gorseller kabin yuksekligine sayilmiyordu - resim kutudan tasip
   footer'in ustune biniyordu (Hakkimizda'da olculdu). Clearfix kaptan
   cikmayi bitirir. */
.icerik::after{content:"";display:table;clear:both}
/* Icerik ile footer arasinda nefes payi. Kayan gorsel metinden uzun
   bittiginde ikisi dip dibe geliyordu. (Once 300px denendi, fazla geldi.) */
.icerik{padding-bottom:100px}
@media (max-width:820px){
  .icerik{padding-bottom:60px}
}

/* Gomulu gorseller/haritalar sabit width ile geliyor (orn. 650px, 1024px);
   dar ekranda kabi asarlar. */
.icerik img,.icerik iframe,.icerik table{max-width:100%}
.icerik img{height:auto}
@media (max-width:820px){
  /* 650px'lik kayan gorselin yaninda okunacak yer kalmiyor - alt alta
     gecsinler. !important sart: float, iceriğin KENDI style="" niteliginde
     yazili ve satir ici stil normal kurallari yener. */
  .icerik img{float:none !important;display:block;margin:14px 0}
}
.side{display:flex;flex-direction:column;gap:20px}
@media (max-width:1023px){ .side .catlist{display:none} }
/* Icerik sayfalarinda (Hakkimizda, Iletisim...) yan sutunun TEK icerigi
   .catlist ve o da yukarida gizleniyor - aside 0px yuksekliginde kaliyor
   ama grid satirini ve 24px'lik bosluğu yemeye devam ediyordu. Basligin
   ustundeki bosluk mobilde 64px, masaustunde 40px cikiyordu; fark tam da
   bu bos sutun.
   :not(:has()) BILEREK secildi - tarayici :has() bilmiyorsa kural tumden
   dusuyor ve eski davranis kaliyor. Ters yazim (once gizle, iceriklileri
   goster) desteklenmeyen tarayicida filtreleri KAYBETTIRIRDI. */
@media (max-width:1023px){
  .shell > .side:not(:has(.filterform)):not(:has(.sidepromo)){display:none}
}

.sidebox{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--r-card)}
.catlist{position:relative;overflow:visible}
.catlist ul{list-style:none;padding:4px 0}
.catlist li{position:relative}
/* çok hafif ayraç: yalnızca öğeler arasında, ilkinin üstünde yok */
.catlist li + li{border-top:1px solid var(--panel-line)}
.catlist li a{
  display:flex;align-items:center;gap:12px;min-height:42px;padding:0 16px;font-size:14px;font-weight:600;color:var(--ink);
  /* Renk SOLDAN SAGA acilarak geliyor (istek uzerine).
     background-size animasyonu secildi: sozde-oge (::before) kullansaydik
     baglantinin icindeki metnin ustune/altina yigilma sirasi sorunu
     cikardi; background-image tek katman, yigilmaya hic girmiyor. */
  /* Onde daha koyu bir "dalga yuzu", arkasi acik: duz tek renk olunca
     hareket eden kenar secilmiyordu, gecis olup bitmis gibi duruyordu. */
  /* Ton --tint'ten (#EAF3FB) belirgin sekilde koyulastirildi: beyaz pano
     uzerinde --tint neredeyse beyaz kaliyor, gecis "gorunmuyor" diye
     bildirildi. Onde #A9C9EE dalga yuzu, arkasi #DCE9F9 - koyu indigo
     yaziyla kontrasti bol, ama satiri okunmaz yapacak kadar koyu degil. */
  background-image:linear-gradient(90deg,#A9C9EE 0%,#DCE9F9 45%,#DCE9F9 100%);
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  /* 340ms -> 720ms: istek uzerine belirgin sekilde yavas. Renk degisimi de
     ayni sureye cekildi, yoksa yazi rengi aninda donup gecisi one geciyordu.

     EGRI --ease DEGIL: --ease (cubic-bezier(.23,1,.32,1)) cok sert bir
     yavaslama, hareketin %85'ini ilk 250ms'de bitiriyor - "yavas" istense
     de hizli okunuyor (olculdu). Supurmenin GORULMESI icin hareketin
     esit dagilmasi lazim; cubic-bezier(.4,0,.2,1) bunu veriyor. */
  transition:color 720ms cubic-bezier(.4,0,.2,1),
             background-size 720ms cubic-bezier(.4,0,.2,1)
}
.catlist li a svg{flex:0 0 auto;color:var(--panel-ink2);transition:color 160ms var(--ease)}
.catlist li a .chev{margin-left:auto;color:var(--steel);transition:color 160ms var(--ease),transform 160ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  /* li:hover (a:hover değil): imleç alt menüye geçtiğinde satır sönmesin */
  .catlist li:hover > a{color:var(--indigo);background-size:100% 100%}
  /* Beyaz pano icinde beyaz hover gorunmez - orada acik mavi. */
  .herokat .catlist li:hover > a{background-size:100% 100%;border-left-color:var(--indigo)}
  .catlist li:hover > a svg{color:var(--indigo)}
  .catlist li:hover > a .chev{color:var(--indigo);transform:translateX(2px)}
}
/* Dokunmatikte hover yok: açık satır aynı vurguyu .open ile alır,
   yoksa hangi kategorinin açık olduğu görünmez. */
/* "background" KISAYOLU DEGIL: kisayol background-image'i de sifirlar ve
   soldan saga acilan renk katmanini siliyordu. JS hover-niyeti birinci
   seviyeye ".open" ekler eklemez katman yok oluyor, dolayisiyla 1. seviyede
   gecis HIC gorunmuyordu (olculdu: bgImage "none"); 2. ve 3. seviyede bu
   kural olmadigi icin onlar calisiyordu - kullanicinin gordugu fark buydu. */
.catlist li.open > a{color:var(--indigo);background-size:100% 100%}
.catlist li.open > a svg{color:var(--indigo)}
.catlist li.open > a .chev{color:var(--indigo);transform:translateX(2px)}
.catlist .allcats a{color:var(--indigo);font-weight:800}

/* sağa açılan alt menü */
.flyout{
  /* top/margin -1px -> kenarlıklar üst üste biner: alt menünün üst ve sol
     kenarı, tetikleyen satırın kenarıyla tam çakışır, arada boşluk kalmaz */
  position:absolute;top:-1px;left:100%;z-index:40;width:258px;margin-left:-1px;
  /* sol köşeler düz: menüye yapışık okunsun, aralarında beyaz kırıntı kalmasın */
  /* BEYAZ, gri degil: alt menuler ana menuyle ayni yuzeyde okunsun.
     Gri zemin (--panel-solid) onlari ayri bir bilesen gibi gosteriyordu.
     Kenarlik da ana panonun cizgisiyle ayni (--line), koyu --panel-edge
     degil - butunluk cizgi renginden de geciyor. */
  background:#fff;border:1px solid var(--line);border-radius:0 var(--r-card) var(--r-card) 0;
  box-shadow:0 18px 40px rgba(15,20,52,.22);padding:4px 0;
  opacity:0;transform:scale(.97);transform-origin:top left;pointer-events:none;
  transition:opacity 180ms var(--ease),transform 180ms var(--ease)
}
.flyout .fly-h{display:block;padding:10px 16px 8px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--steel)}
/* ":hover" YOK: açılışı JS'teki hover-niyeti denetleyicisi yönetip
   .open yazıyor. Saf :hover'da imleç satırdan panele çaprazlama
   giderken ikisinin de dışına düşüyor ve panel geri gelmiyordu. */
.catlist li:focus-within > .flyout,
.catlist li.open > .flyout{opacity:1;transform:scale(1);pointer-events:auto}
/* ".catlist li a" ile aynı ağırlıkta olmadığı için önek şart:
   öneksiz ".flyout a" seçicisi ana menü kuralına yeniliyor ve
   buradaki ölçek hiç uygulanmıyordu. */
/* Ana menu satiriyla AYNI olcek: 42px yukseklik, 14px/600, 16px dolgu.
   Onceden 38px/13.5px/12px idi - alt menu kucuk ve farkli duruyordu. */
.catlist .flyout a{
  display:flex;align-items:center;min-height:42px;padding:0 16px;
  font-size:14px;font-weight:600;color:var(--ink);gap:0;
  border-left:3px solid transparent
}
.fly-item{position:relative}
.fly-item + .fly-item{border-top:1px solid var(--line)}
@media (hover:hover) and (pointer:fine){
  /* fly-item:hover (a:hover değil): imleç üçüncü seviyeye geçince
     marka satırı sönmesin, açık yol okunur kalsın */
  /* Zemin artik beyaz; "background:#fff" hover'i gorunmez birakirdi -
     ana menuyle AYNI acik mavi + sol serit. */
  .fly-item:hover > a{background-size:100% 100%;color:var(--indigo);border-left-color:var(--indigo)}
  .fly-item:hover > a .chev{color:var(--indigo);transform:translateX(2px)}
  /* üçüncü seviyenin altı yok, doğrudan a:hover */
  .catlist .flyout2 a:hover{background-size:100% 100%;color:var(--indigo);border-left-color:var(--indigo)}
}
.fly-item.open > a{background-size:100% 100%;color:var(--indigo);border-left-color:var(--indigo)}
.fly-item.open > a .chev{color:var(--indigo);transform:translateX(2px)}

/* üçüncü seviye: marka -> araç
   margin-left:6px -> ikinci seviyenin 6px iç dolgusu + 1px kenarlığını
   aşar; üçüncü seviyenin sol kenarlığı, ikincinin sağ kenarlığının tam
   üstüne oturur. (-1px verilseydi panel 7px içeri taşardı.) */
/* margin-left 6px -> 0: o 6px, ikinci seviyenin ESKI 6px'lik ic dolgusunu
   asmak icindi. Alt menuler ana menuyle esitlenirken dolgu "4px 0" oldu
   (yatayda 0), boylece 6px acikta kalip iki seviye arasinda BOSLUK olarak
   gorundu. Simdi kenarliklar bitisik. */
.flyout2{width:296px;margin-left:0}
.flyout2 a + a{border-top:1px solid var(--line)}
/* GEÇİŞ KÖPRÜSÜ: bu 6px'lik şerit .fly-item'ın dışında kalıyor; imleç
   marka satırından panele giderken oradan geçtiği anda :hover kopuyor ve
   panel kayboluyordu. Görünmez bir uzantı şeridi panelin kendi parçası
   olduğu için hover .fly-item'da kesintisiz sürüyor. */
.flyout2::before{content:'';position:absolute;top:0;bottom:0;left:-7px;width:7px}
.flyout2.left::before{left:auto;right:-7px}
/* Not: burada ":hover" YOK. Fareyle açılışı JS yönetiyor (aşağıdaki
   hover-niyeti zamanlayıcısı) ve durumu .open ile yazıyor. Saf CSS
   :hover ile çapraz geçişte panel anında kapanıyordu. */
.fly-item:focus-within > .flyout2,
.fly-item.open > .flyout2{opacity:1;transform:scale(1);pointer-events:auto}
/* sağa yer kalmadıysa sola açılır (JS ölçüp .left sınıfını ekler) */
.flyout2.left{left:auto;right:100%;margin-left:0;margin-right:0;
  border-radius:var(--r-card) 0 0 var(--r-card);transform-origin:top right}
/* dar ekranda yana açılacak yer yok: akış içinde aç */
/* Not: akordiyon (akış içinde açılan) sürüm kaldırıldı. Sol menü zaten
   1024px altında gizli; 1024px'te bile üç seviye yan yana sığıyor:
   20 + 250 + 258 + 296 = 824px < 1024px. İkinci bir davranış modeli
   tutmak yerine tek kademeli açılım korunuyor. */

/* sol küçük promolar */
.sidepromo{border-radius:var(--r-card);overflow:hidden;padding:22px;color:#fff;background:var(--indigo);
  transition:box-shadow 180ms var(--ease),transform 180ms var(--ease)}
.sidepromo.light{background:var(--tint);color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .sidepromo:hover{box-shadow:var(--e2);transform:translateY(-2px)} }
.sidepromo h3{font-size:17px;margin-bottom:6px}
.sidepromo p{font-size:13.5px;opacity:.92;margin-bottom:14px;max-width:30ch}
.sidepromo .act{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--r-sm);
  background:#fff;color:var(--indigo);font-weight:800;font-size:12.5px;letter-spacing:.05em;
  transition:transform 160ms var(--ease)
}
.sidepromo.light .act{background:var(--indigo);color:#fff}
.sidepromo .act:active{transform:scale(.97)}

/* güven sütunu: gerçek bilgiler, ikon + başlık + kısa metin */
.trust{padding:6px 0}
.trust .titem{display:flex;gap:14px;padding:16px;align-items:flex-start}
.trust .titem + .titem{border-top:1px solid var(--panel-line)}
.trust .titem svg{flex:0 0 auto;color:var(--indigo);margin-top:2px}
.trust b{display:block;font-size:14.5px;margin-bottom:2px}
.trust span{font-size:13px;color:var(--panel-ink2);line-height:1.5}

/* ---------- hero: TEK geniş slider (yan banner YOK) ---------- */
/* Kategori panosunun acilma/kapanma suresi TEK YERDE: hem iki keyframe
   hem de JS (animationend gelmezse devreye giren guvenlik agi) bunu okur.
   900ms -> 1080ms (%20 yavas, istek uzerine). */
.heroband{position:relative;--kat-sure:1080ms}
.hero-slider{
  position:relative;width:100%;overflow:hidden;background:#001C4D;
  /* Yukseklik ekrana gore: kucuk laptopta sayfayi yutmasin, buyuk ekranda
     da posta pulu kalmasin. */
  /* Masaustunde kategori panosu (12 satir x 42px + dolgu ~= 520px)
     hero'nun icine sigmali - yoksa altindaki bolume tasar. Panonun
     kendisi artik kirpilmiyor, bu yukseklik onu KAPSAMAK icin. */
  height:clamp(559px,81vh,780px);
  --sure:6000ms
}
.hslide{
  position:absolute;inset:0;visibility:hidden;opacity:0;
  transition:opacity 900ms var(--ease),visibility 0s linear 900ms
}
.hslide.on{visibility:visible;opacity:1;z-index:1;transition:opacity 900ms var(--ease),visibility 0s}

/* Arka plan medyasi: fotograf da video da ayni kurallarla kaplar. */
.hmedya{position:absolute;inset:0;overflow:hidden}
.hmedya img,.hmedya video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%
}
/* YAKINLASMA KALDIRILDI. Kaynak fotograflar 770x480; hero zaten 1440px'e
   yayilirken ~1.9x buyutuluyor, ustune %11 daha olceklemek bulanikligi
   gorunur hale getiriyordu (kullanici "bulanik gorunuyor" dedi).
   Hareket, referans sitede de yok - netlik hareketten onemli.
   1920px+ fotograf yuklenirse geri acilabilir. */

/* Karartma perdesi. Solda koyu (yazi orada), saga dogru aciliyor ki
   fotograf tamamen kaybolmasin. Alt kenarda ayrica hafif bir koyulasma:
   noktalar ve sayfanin devami ayrissin.
   ONEMLI: beyaz yazinin okunurlugu bu perdeye bagli - fotograf degisse
   bile kontrast korunuyor, cunku perde fotograftan BAGIMSIZ. */
.hslide::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Perde rengi SIYAH DEGIL, sitenin laciverti ailesinden: #1B2450
     (--indigo #3D4EA8 ile ayni hue, koyulastirilmis). Siyah perde
     fotografi soguk gri yapiyor ve sayfanin geri kalanindan kopuyordu.
     Kontrast payi bol: bu tonda beyaz metin 14.84:1; fotograf altta
     bembeyaz olsa bile en soldaki %90 opaklikta etkin oran 11.12:1
     (olculdu) - yani metnin okunurlugu fotografa bagli degil. */
  /* Perde dokumculerosb.org.tr'deki hero ile AYNI: tek yonlu, soldan saga
     ve sagda TAMAMEN aciliyor (0 opaklik). Bizimki sagda .26 ile kapali
     kaliyordu - fotografin tamami perde altinda oldugu icin sahne
     "bulanik/tuhaf" okunuyordu. Sagi acik birakmak netligi geri veriyor.
     Alttaki ikinci katman da kalkti: referansta yok, sahneyi kirletiyordu.
     Renk sitenin laciverti (#001C4D ailesinde, referansla ayni ton). */
  background:linear-gradient(90deg,
    rgba(0,28,77,.90) 0%, rgba(0,28,77,.50) 48%, rgba(0,28,77,0) 100%)
}

/* Hero uzerindeki kategori panosu.
   Ust bantaki KATEGORİLER dugmesiyle AYNI sutunda ve onun hemen altinda
   duruyor - hero tam genislige cikinca yan sutun hero'nun ALTINDAN
   basliyor ve menu sayfanin cok asagisinda kaliyordu.
   Yalniz genis ekranda: 1024px altinda ayri bir cozum var (KATEGORİLER
   dugmesi tam ekran #catsmenu panelini aciyor). */
.herokat{display:none}
@media (min-width:1024px){
  .hero-slider{height:clamp(681px,81vh,780px)}
  .herokat{
    display:block;position:absolute;left:0;right:0;top:0;z-index:4;
    pointer-events:none            /* kap tiklamayi yutmasin, panonun kendisi alir */
  }
  .herokat .container{display:flex}
  .herokat-ic{
    width:250px;flex:0 0 250px;pointer-events:auto;
    /* KAYDIRMA YOK. Onceden max-height + overflow:auto vardi; o kaydirma
       kabi saga acilan alt menuleri KIRPIYOR, dahasi menu acilinca kabin
       kaydirma genisligi buyuyup pano yatay kayiyordu (kullanici bildirdi:
       fare saga-sola gidince liste kayiyor, yazilar soldan kesiliyordu).
       Pano dogal boyunda duruyor; hero yuksekligi asagida ona gore
       ayarlandi. */
    overflow:visible;
    /* Panonun kendi zemini var: hero fotografinin uzerinde okunabilsin.
       Yari saydam degil - fotograf desenli, arkasindan sizinca satirlar
       okunmuyordu. */
    background:#fff;border-radius:0 0 var(--r-card) var(--r-card);
    box-shadow:0 18px 40px rgba(15,20,52,.28);
    /* Ust bantla KESINTISIZ birlesir: dugme ile pano arasinda cizgi
       gorunmesin diye ust koseler duz ve ust kenarlik yok. */
    border:1px solid var(--panel-edge);border-top:0
  }
  /* Kapali durumda yalniz pano gizlenir; dugme yerinde kalir.
     Durum sinifi .heroband'de: pano .hero-slider'in DISINDA (alt menuler
     kirpilmasin diye), dolayisiyla ".hero-slider:not(.katacik) .herokat-ic"
     HICBIR ZAMAN eslesmiyordu - pano kapanmiyor, metin de altina giriyordu.
     Ortak ata .heroband; sinif orada. */
  .heroband:not(.katacik) .herokat-ic{display:none}
  /* Pano acikken hero metni panonun SAGINDA baslasin - ustune binmesin.
     Kaydirma .hicerik'e DEGIL metnin kendisine veriliyor: .hicerik'e
     padding verince icindeki .container'in "margin:0 auto" ortalamasi
     kaydirmanin yarisini geri yutuyor ve baslik panonun altinda kaliyordu
     (olculdu: 300px, panonun sag kenari 350px). .txt zaten container'in
     icinde, oradan verilen margin birebir uygulanir. */
  .heroband.katacik .hslide .txt{margin-left:280px}
  /* Acilis animasyonu: sayfa yuklenince pano yukaridan asagi ACILARAK
     olusur. Amaci sus degil - bilgi: panonun ACILIP KAPANABILIR bir sey
     oldugunu, kullanici hic dokunmadan gosteriyor. Duran bir liste bunu
     anlatmiyordu.

     clip-path SECILDI, max-height DEGIL: max-height animasyonu icin
     overflow:hidden gerekir, o da bu panoda saga acilan alt menuleri
     kirpan kaydirma kabini geri getirirdi (bir onceki hata). clip-path
     kirpma yapar ama kaydirma kabi YARATMAZ ve GPU'da calisir.
     Yine de animasyon suresince kirptigi icin sinif bitince kaldiriliyor
     (JS animationend) - sonrasinda alt menuler serbest.

     scaleY kullanilmadi: satirlari ezip geri acardi, ucuz durur. */
  @keyframes katAcilis{
    from{clip-path:inset(0 0 100% 0);transform:translateY(-14px);opacity:.25}
    to  {clip-path:inset(0 0 0 0);   transform:none;             opacity:1}
  }
  /* Kapanis: acilisin TERSI. Egri de ters (cubic-IN): yavas baslayip
     hizlanarak toplanir - "geri cekilme" boyle okunur. Acilisin egrisini
     aynen kullansaydik kapanis bir anda kopup sonunda surunurdu. */
  @keyframes katKapanis{
    from{clip-path:inset(0 0 0 0);   transform:none;             opacity:1}
    to  {clip-path:inset(0 0 100% 0);transform:translateY(-14px);opacity:.25}
  }
  .herokat-ic.aciliyor{
    /* 620ms -> 900ms ve daha yumusak bir egri (istek uzerine).
       Egri OLCULEREK secildi. Once cubic-bezier(.16,1,.3,1) denendi
       (expo-out): 240ms'de zaten %84 acilmis oluyordu, yani "yavas"
       istenmesine ragmen HIZLI okunuyordu - cok sert bir yavaslama
       hareketin tamamini basa yigiyor.
       cubic-bezier(.33,1,.68,1) (cubic-out) hareketi daha esit dagitiyor:
       ayni surede 240ms'de ~%61, gozle takip edilebilir bir acilma.
       Sure yine de 1sn altinda: bu bir giris hareketi, kullaniciyi
       bekletmemeli. */
    animation:katAcilis var(--kat-sure) cubic-bezier(.33,1,.68,1) both;
    transform-origin:top center
  }
  .herokat-ic.kapaniyor{
    animation:katKapanis var(--kat-sure) cubic-bezier(.32,0,.67,0) both;
    transform-origin:top center
  }
  /* Kapanis SURESINCE gorunur kalmali. Seciciyi gizleme kuralindan DAHA
     OZGUL yazmak zorunlu: ".heroband:not(.katacik) .herokat-ic" ozgullugu
     (0,3,0); duz ".herokat-ic.kapaniyor" (0,2,0) ona YENILIYORDU ve pano
     animasyon oynarken display:none kaliyordu - olculdu, kapanis
     karelerinin hepsi "display:none" gosterdi, yani hareket hic
     gorunmuyordu. */
  .heroband:not(.katacik) .herokat-ic.kapaniyor{display:block}
  .herokat .sidebox{background:transparent;border:0;border-radius:0}
  /* Uzerine gelince satir BELLI OLSUN. Genel .catlist kurali hover'da
     "background:#fff" veriyor - o kural gri panelin uzerinde calisiyordu,
     bu pano ZATEN BEYAZ oldugu icin hicbir sey degismiyordu (kullanici
     bildirdi). Burada acik mavi zemin + indigo yazi/ikon. */
  .herokat .catlist li + li{border-top:1px solid var(--line)}
  .herokat .catlist li > a{border-left:3px solid transparent}
  .herokat .catlist li.open > a{background-size:100% 100%;color:var(--indigo);border-left-color:var(--indigo)}
  .herokat .catlist li.open > a svg{color:var(--indigo)}
  .herokat .catlist ul{padding:2px 0}
}
@media (min-width:1024px) and (max-width:1180px){
  /* Dar masaustunde 250px pano + metin sigmiyor - pano biraz incelir. */
  .herokat-ic{width:212px;flex-basis:212px}
  .heroband.katacik .hslide .txt{margin-left:242px}
}

.hicerik{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.hicerik .container{width:100%}
.hslide .txt{max-width:46rem}
/* Metin kademeli giriyor - once baslik, sonra aciklama, sonra buton. */
.hslide .txt > *{
  opacity:0;transform:translateY(20px);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease)
}
/* Metnin kaymasi pano ile AYNI surede VE AYNI egride.
   Egri yone gore degisiyor: acilirken cubic-out (pano acilis egrisi),
   kapanirken cubic-in (pano kapanis egrisi). Tek egri birakilinca metin
   panodan once yerine oturuyordu - olculdu: 750ms'de metin sola donmustu
   ama pano hala %48 acikti, yani yazinin ustune biniyordu. */
.heroband .hslide .txt{transition:margin-left var(--kat-sure,1080ms) cubic-bezier(.32,0,.67,0)}
.heroband.katacik .hslide .txt{transition-timing-function:cubic-bezier(.33,1,.68,1)}
.hslide.on .txt > *{opacity:1;transform:none}
.hslide.on .txt > *:nth-child(1){transition-delay:180ms}
.hslide.on .txt > *:nth-child(2){transition-delay:300ms}
.hslide.on .txt > *:nth-child(3){transition-delay:420ms}

.hslide .txt .h1{
  font-size:clamp(30px,4.6vw,58px);line-height:1.04;letter-spacing:-.025em;
  font-weight:800;color:#fff;margin-bottom:16px;
  /* Fotograf acik bir bolgeye denk gelirse harf kenarlari yine tutsun. */
  text-shadow:0 2px 18px rgba(15,20,52,.5)
}
.hslide .txt p{
  color:#D7DCEA;font-size:clamp(15px,1.35vw,18px);line-height:1.55;
  max-width:44ch;margin-bottom:26px;text-shadow:0 1px 12px rgba(15,20,52,.45)
}
.hslide .txt .cta{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;
  background:var(--indigo);color:#fff;border-radius:var(--r-sm);font-weight:800;font-size:13.5px;
  letter-spacing:.06em;box-shadow:0 8px 26px rgba(15,20,52,.5);
  transition:background 160ms var(--ease),transform 160ms var(--ease)
}
.hslide .txt .cta:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .hslide .txt .cta:hover{background:var(--indigo-700)} }

/* Noktalar da sayfa ekseninde - hero tam genislikte ama icerik hizali. */
.hdotswrap{position:absolute;left:0;right:0;bottom:26px;z-index:3}
.hdots{display:flex;gap:8px}
.hdots button{
  position:relative;width:28px;height:5px;padding:0;border:0;border-radius:var(--r-pill);
  background:rgba(255,255,255,.34);overflow:hidden;
  transition:width 300ms var(--ease),background 300ms var(--ease)
}
.hdots button::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;border-radius:inherit}
.hdots button.on{width:58px}
.hdots button.on::before{animation:heroDolum var(--sure-aktif,var(--sure)) linear forwards}
@keyframes heroDolum{from{width:0}to{width:100%}}
.hero-slider.duruyor .hdots button.on::before{animation-play-state:paused}
.hdots button::after{content:"";position:absolute;inset:-14px}

@media (max-width:700px){
  .hero-slider{height:clamp(520px,72vh,676px)}
  .hslide .txt{max-width:none}
  .hmedya img,.hmedya video{object-position:center 38%}
}

@media (prefers-reduced-motion:reduce){
  /* Pano yine ACIK gelir, sadece acilma hareketi olmaz. */
  .herokat-ic.aciliyor{animation:none}
  .hslide,.hslide .txt > *{transition-duration:1ms !important;transition-delay:0s !important}
  .hslide.on .hmedya img{animation:none;transform:none}
  .hdots button.on::before{animation:none;width:100%}
}

/* ---------- araç seçici (kompakt, slider'ın hemen altı) ---------- */
/* Arac bulucu BANDI: kenardan kenara, hero'nun hemen altinda.
   Icerik sutununun icindeyken yan sutunun yanina sikisiyordu; sayfanin
   ana eylemi olmasina ragmen dar ve silik kaliyordu. */
.finderband{background:var(--indigo);width:100%}
.finder{
  padding:16px 0;
  display:grid;gap:14px;grid-template-columns:1fr;align-items:center
}
.finder .f-title{
  display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:15px;
  white-space:nowrap;letter-spacing:-.005em
}
/* Arac ikonunun renk kurallari. Finder blogunu yeniden yazarken bu iki
   satir da silinmisti; SVG'de fill/stroke NITELIGI olmadigi icin ikon
   varsayilan siyaha dusuyordu (kullanici bildirdi: "siyaha donusmus").
   Govde --peri (lacivert bant uzerinde okunan acik mor-mavi), konturlar
   beyaz. Boyut 26 -> 34px: bant tam genislige cikinca ikon kucuk kaliyordu. */
.finder .f-title svg{width:34px;height:34px;flex:0 0 auto}
.f-ico-ln{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.f-ico-fl{fill:var(--peri)}

.f-row{display:grid;gap:10px;grid-template-columns:1fr}

/* Secme kutulari: UCU DE AYNI gorunur.
   Onceden devre disi olan "Araç / iş makinası" gri zeminle geliyordu ve
   uclu bozuk/eksik gibi duruyordu (kullanici "input boxlar dogru
   gorunmuyor" dedi). Devre disi hali artik ayni beyaz zemin, yalniz yazi
   soluk ve imlec "not-allowed" - kutu bozuk degil, HENUZ SIRASI GELMEMIS
   okunuyor. */
.f-row select{
  min-height:46px;border:1px solid transparent;border-radius:var(--r-sm);
  background-color:#fff;color:var(--ink);
  font-family:inherit;font-size:14px;font-weight:600;padding:0 38px 0 14px;width:100%;
  -webkit-appearance:none;appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23232833" stroke-width="2.6" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg>');
  background-repeat:no-repeat;background-position:right 14px center;
  transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease)
}
/* opacity:1 SART: eski stil sayfasi devre disi form ogelerine opacity .7
   uyguluyor ve secme kutusunu lacivert bandin uzerinde mavimsi/soluk
   gosteriyordu - beyaz zemin verilmis olmasina ragmen (olculdu:
   background-color beyaz ama opacity 0.7). Kutu bozuk degil, HENUZ SIRASI
   GELMEMIS okunmali; bunu opaklik degil YAZI rengi anlatiyor. */
.f-row select:disabled{color:#9AA1AC;cursor:not-allowed;opacity:1}
@media (hover:hover) and (pointer:fine){
  .f-row select:not(:disabled):hover{border-color:#B3CFF0}
}
.f-row select:focus{outline:0;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.45)}

.f-row .go{
  min-height:46px;padding:0 30px;border:0;border-radius:var(--r-sm);
  background:#fff;color:var(--indigo);
  font-weight:800;font-size:13px;letter-spacing:.06em;white-space:nowrap;
  transition:background 160ms var(--ease),transform 160ms var(--ease)
}
.f-row .go:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .f-row .go:hover{background:#EEF1FA} }

@media (min-width:560px){ .f-row{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .f-row{grid-template-columns:1fr 1fr 1fr auto} }
@media (min-width:1100px){ .finder{grid-template-columns:auto 1fr;gap:22px} }

/* ---------- marka kutuları (gerekirse iki satır) ---------- */
.brandgrid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-top:20px}
@media (min-width:640px){ .brandgrid{grid-template-columns:repeat(4,1fr)} }
/* Marka kutusu, parca grubu kartiyla AYNI olculerde: ikisi de ayni
   sayfada alt alta duruyor, farkli olunca izgara iki ayri sistem gibi
   okunuyordu (olculdu: grup karti 168px/72px ikon, marka karti
   126px/46px logo). Ayni min-height, ayni gorsel yuvasi, ayni bosluk. */
.bcard{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;
  min-height:188px;padding:26px 14px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;text-align:center;
  transition:box-shadow 180ms var(--ease),transform 180ms var(--ease),border-color 160ms var(--ease)
}
.bcard::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--indigo);
  transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease)
}
@media (hover:hover) and (pointer:fine){
  .bcard:hover{box-shadow:var(--e2);transform:translateY(-2px);border-color:#D3D8E6}
  .bcard:hover::before{transform:scaleX(1)}
}
.bcard:active{transform:scale(.98)}

/* ---------- bölüm başlıkları ---------- */
.sec{padding:34px 0 8px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.sec-head h2{font-size:22px}
.sec-head .all{font-size:13.5px;font-weight:800;color:var(--link);min-height:44px;display:inline-flex;align-items:center;letter-spacing:.03em}
@media (hover:hover) and (pointer:fine){ .sec-head .all:hover{color:var(--indigo-700)} }

/* ---------- orta promo ikilisi (açık mavi zemin) ---------- */
.midpromos{display:grid;gap:20px;grid-template-columns:1fr;margin-top:26px}
@media (min-width:768px){ .midpromos{grid-template-columns:1fr 1fr} }
.midp{
  display:grid;grid-template-columns:1fr 130px;align-items:center;gap:12px;
  background:var(--tint);border-radius:var(--r-card);padding:22px;
  transition:box-shadow 180ms var(--ease),transform 180ms var(--ease)
}
@media (hover:hover) and (pointer:fine){ .midp:hover{box-shadow:var(--e2);transform:translateY(-2px)} }
.midp h3{font-size:18px;color:var(--indigo);margin-bottom:6px;max-width:22ch}
.midp p{font-size:13.5px;color:var(--steel);margin-bottom:14px;max-width:34ch;line-height:1.55}
.midp .act{
  display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-sm);
  background:var(--indigo);color:#fff;font-weight:800;font-size:12px;letter-spacing:.06em;
  transition:background 160ms var(--ease),transform 160ms var(--ease)
}
.midp .act:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .midp .act:hover{background:var(--indigo-700)} }
.midp img{width:130px;height:110px;object-fit:contain}

/* ---------- sekmeli ürün bölümü ---------- */
.tabs2{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}
.tabs2 button{
  min-height:46px;padding:0 2px;border:0;background:transparent;font-family:inherit;white-space:nowrap;
  font-size:16.5px;font-weight:800;color:var(--steel);border-bottom:3px solid transparent;margin-bottom:-1px;
  transition:color 160ms var(--ease),border-color 160ms var(--ease)
}
.tabs2 button.on{color:var(--indigo);border-bottom-color:var(--indigo)}
@media (hover:hover) and (pointer:fine){ .tabs2 button:hover{color:var(--ink)} }
.grid4{display:none;grid-template-columns:repeat(2,1fr);gap:12px}
.grid4.on{display:grid}
/* Telefonda da iki sutun: sekme basina 8 urun tek sutunda ~3200px'lik
   bir kuyruk yapiyordu (olculdu). Kart daralinca fotograf yuvasi,
   yazi ve buton oransal kuculur. */
@media (max-width:559px){
  .grid4 .p-card .ph{height:118px;padding:8px}
  .grid4 .p-card .bd{padding:10px 10px 12px;gap:4px}
  .grid4 .p-card h3{font-size:12.5px;line-height:1.35}
  .grid4 .p-card .fit{font-size:11px}
  /* min-height 44px: dokunma hedefi kucultmeyle 42px'e dusmustu. */
  .grid4 .p-card .add{font-size:11.5px;padding:0 6px;letter-spacing:0;min-height:44px}
  .grid4 .p-card .badge{font-size:10px;padding:2px 6px}
}
@media (min-width:560px){ .grid4{gap:20px} .grid4.on{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .grid4.on{grid-template-columns:repeat(4,1fr)} }
.p-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow 180ms var(--ease),transform 180ms var(--ease)
}
@media (hover:hover) and (pointer:fine){ .p-card:hover{box-shadow:var(--e2);transform:translateY(-2px)} }
.p-card .ph{height:170px;display:flex;align-items:center;justify-content:center;padding:14px;position:relative;background:#fff}
.p-card .ph img{max-height:100%;width:auto;object-fit:contain}
.badge{
  position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:var(--r-sm);
  background:var(--indigo);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em
}
.p-card .bd{padding:14px 16px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;flex:1}
.p-card h3{font-size:14px;font-weight:700;line-height:1.4}
.p-card .fit{font-size:12px;color:var(--steel);font-weight:700}
.p-card .add{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;min-height:42px;
  border:1.5px solid var(--indigo);border-radius:var(--r-sm);background:#fff;color:var(--indigo);
  font-weight:800;font-size:13px;letter-spacing:.04em;
  transition:background 160ms var(--ease),color 160ms var(--ease),transform 160ms var(--ease)
}
.p-card .add:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .p-card .add:hover{background:var(--indigo);color:#fff} }

/* ---------- WhatsApp bandı (gri şerit) ---------- */
.waband{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px 28px;margin:34px 0 8px;display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between}
.waband h3{font-size:18px;margin-bottom:4px}
.waband p{font-size:14px;color:var(--steel)}
.waband .wa{
  display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r-sm);
  background:var(--indigo);color:#fff;font-weight:800;font-size:14px;
  transition:background 160ms var(--ease),transform 160ms var(--ease)
}
.waband .wa:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .waband .wa:hover{background:var(--indigo-700)} }

/* ---------- footer (lacivert zemin, beyaz yazı) ---------- */
.footer{margin-top:30px;background:var(--indigo);color:#D5DBF0}
/* padding-top/bottom - KISAYOL DEGIL: "padding:42px 0 32px" .container'dan
   gelen yatay 20px'i sifirliyor ve mobilde metin ekran kenarina yapisiyordu
   (masaustunde kap ortalandigi icin gorunmuyordu). */
.footer .top{display:grid;gap:30px;grid-template-columns:1fr;
  padding-top:42px;padding-bottom:32px}
@media (min-width:768px){ .footer .top{grid-template-columns:2fr 1fr 1fr} }
/* Sutun basliklarinin altinda kisa gradyan cizgi (referans gorsel).
   Referanstakinden INCE istendi: 4px degil 2px.
   Renkler PALETTEN - referansin mavi->teal gecisi yabanci bir hue
   getirirdi; yerine mevcut --icon-accent (#7FB3E8) -> acik periwinkle
   (#A9BCF5). Lacivert altbilgi zemininde olculdu: 3.33:1 ve 3.92:1,
   ikisi de acik secik gorunuyor (--peri 1.79:1 ile kaybolurdu). */
.footer h4{font-size:14.5px;margin-bottom:12px;color:#fff;
  position:relative;padding-bottom:10px}
.footer h4::after{
  content:"";position:absolute;left:0;bottom:0;
  width:64px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#7FB3E8,#A9BCF5)
}
.footer p{font-size:14px;color:#C6CEEA;max-width:46ch;line-height:1.7}
.footer ul{list-style:none}
/* gap: rozet/simge ile metin arasindaki aralik. Flex duzeni HTML'deki
   bosluk metin dugumunu yok saydigi icin sart - ust seritteki telefon ve
   WhatsApp baglantilari da ayni 6px'i kullaniyor. */
.footer li a{display:inline-flex;align-items:center;gap:6px;min-height:34px;
  font-size:14px;color:#C6CEEA}
@media (hover:hover) and (pointer:fine){ .footer li a:hover{color:#fff} }
.footer .contact a{color:#fff;font-weight:700}
/* Yol tarifi baglantisi ve altindaki adres. Adres bir baglanti DEGIL -
   tiklanabilir gorunup hicbir sey yapmasin istemedim; navigasyonu ustteki
   satir yapiyor. Kirilmadan sarilsin diye kendi satir yuksekligi var. */
/* Iki sabit hat tek satirda: ikisi de ayri tel: baglantisi (dokunarak
   aranabilsinler) ama sutunu iki satir uzatmiyorlar. */
.footer .tel2{display:flex;align-items:center;flex-wrap:wrap}
.footer .tel2 .ayr{color:#8A96C8;margin:0 8px}
.footer .etiket{
  margin-left:7px;font-size:11px;font-weight:400;letter-spacing:.04em;
  color:#A7B1DC;text-transform:lowercase
}
/* Faks bir baglanti DEGIL - tiklanabilir gorunup hicbir sey yapmasin. */
.footer .faks{
  min-height:34px;display:flex;align-items:center;
  font-size:13.5px;color:#B3BCE0
}
.footer .adres{
  padding:2px 0 0 21px;font-size:13px;line-height:1.6;color:#B3BCE0;
  max-width:34ch;font-weight:400
}
.footer .pin-ico{flex:none}
.footer .base{border-top:1px solid rgba(255,255,255,.16);
  padding-top:16px;padding-bottom:16px;font-size:13px;color:#B3BCE0;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ============================================================
   ALT SAYFALAR — liste / kategori / ürün / teklif
   Ana sayfanın diliyle aynı: aynı tokenlar, aynı yarıçap, aynı
   gölge merdiveni. Buradan aşağısı yalnızca alt sayfaların
   ihtiyaç duyduğu bileşenler.
   ============================================================ */

/* ---------- kırıntı yolu ---------- */
.crumb{padding:14px 0 0;font-size:13px;color:var(--steel)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.crumb li{display:flex;align-items:center;gap:6px}
.crumb li + li::before{content:"›";color:#C2C7D0;font-weight:700}
.crumb a{min-height:28px;display:inline-flex;align-items:center}
@media (hover:hover) and (pointer:fine){ .crumb a:hover{color:var(--indigo)} }
/* Telefonda kirinti sariyordu: urun sayfasinda uc satir, 141px yer
   (olculdu). Tek satirda kalir ve yatay kayar; kaydirma cubugu gizli,
   parmakla surukleyip zincirin sonunu gormek yeterli. */
@media (max-width:559px){
  .crumb ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .crumb ol::-webkit-scrollbar{display:none}
  .crumb li{white-space:nowrap;flex:0 0 auto}
}
.crumb [aria-current]{color:var(--ink);font-weight:700}

/* ---------- sayfa başlığı ---------- */
.pagehead{padding:16px 0 4px}
.pagehead h1{font-size:clamp(22px,2.6vw,30px);margin-bottom:6px}
.pagehead p{color:var(--steel);font-size:14.5px;max-width:62ch}
.pagehead .meta{margin-top:10px;font-size:13.5px;color:var(--steel)}
.pagehead .meta b{color:var(--ink)}

/* ---------- araç çubuğu: sonuç sayısı + sıralama + görünüm ---------- */
.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;
  padding:12px 14px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:18px
}
.toolbar .count{font-size:13.5px;color:var(--steel)}
.toolbar .count b{color:var(--ink);font-weight:800}
.toolbar .right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toolbar label{font-size:13px;color:var(--steel);font-weight:700}
.toolbar select{
  min-height:40px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);
  font-family:inherit;font-size:13.5px;padding:0 32px 0 12px;-webkit-appearance:none;appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23232833" stroke-width="2.6" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg>');
  background-repeat:no-repeat;background-position:right 11px center
}
.viewtog{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.viewtog button{
  min-width:44px;min-height:40px;border:0;background:#fff;color:var(--steel);display:inline-flex;
  align-items:center;justify-content:center;transition:background 160ms var(--ease),color 160ms var(--ease)
}
.viewtog button + button{border-left:1px solid var(--line)}
.viewtog button.on{background:var(--indigo);color:#fff}
@media (hover:hover) and (pointer:fine){ .viewtog button:not(.on):hover{background:var(--tint);color:var(--indigo)} }

/* ---------- etkin filtre rozetleri ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.chip{
  display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 8px 0 12px;border-radius:var(--r-pill);
  background:var(--tint);color:var(--indigo);font-size:12.5px;font-weight:700
}
.chip button{
  border:0;background:transparent;color:var(--indigo);display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:var(--r-pill);transition:background 160ms var(--ease)
}
@media (hover:hover) and (pointer:fine){ .chip button:hover{background:rgba(61,78,168,.14)} }
.chips .clear{font-size:12.5px;font-weight:800;color:var(--link);min-height:44px;padding:0 4px;display:inline-flex;align-items:center}

/* ---------- yan filtre kutuları ---------- */
.fbox{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--r-card);overflow:hidden}
.fbox + .fbox{margin-top:0}
.fbox h3{
  /* Baslik bandi arama bandinin mavisiyle (--indigo, .band ile ayni) -
     istek: filtre basliklari belirgin olsun. Beyaz yazi bu zeminde
     7.3:1 kontrast (olculdu; AA'nin ustunde). Kutunun kose yumusatmasi
     .fbox'taki overflow:hidden ile korunur - h3 koseleri tasirmaz.
     Alt cizgi kalkti: koyu bandin altinda acik gri cizgi kirli duruyor. */
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#fff;font-weight:800;
  padding:12px 16px;background:var(--indigo)
}
/* Kaydirma KALDIRILDI (kullanici karari): secenekler kutu icinde
   gizlenmiyor, hepsi bir bakista gorunuyor. En uzun liste 18 secenek
   (Isuzu arac filtresi) - o kutu ~800px'e cikar; sol sutun uzar ama
   filtre gizli kalmaz. */
.fbox .body{padding:6px 6px 10px}
/* Arac kutusuna kaydirma tavani DENENDI ve kullanici istegiyle KALDIRILDI:
   liste uzun da olsa tamami gorunsun. .fbox-arac sinifi ileride gerekirse
   diye markup'ta duruyor. */
.fopt{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 10px;border-radius:var(--r-sm);
  font-size:13.5px;cursor:pointer;transition:background 160ms var(--ease)}
@media (hover:hover) and (pointer:fine){ .fopt:hover{background:#fff} }
.fopt input{width:17px;height:17px;accent-color:var(--indigo);flex:0 0 auto;cursor:pointer}
.fopt .n{margin-left:auto;font-size:12px;color:var(--panel-ink2);font-variant-numeric:tabular-nums}

/* ---------- liste ızgarası (yan sütunun sağında) ---------- */
.grid3{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:560px){ .grid3{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .grid3{grid-template-columns:repeat(3,1fr)} }

/* ---------- satır görünümü ---------- */
.plist{display:flex;flex-direction:column;gap:14px}
.prow{
  display:grid;grid-template-columns:130px 1fr auto;gap:18px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:14px;
  transition:box-shadow 180ms var(--ease),border-color 160ms var(--ease)
}
@media (hover:hover) and (pointer:fine){ .prow:hover{box-shadow:var(--e2);border-color:#D3D8E6} }
.prow .ph{height:104px;display:flex;align-items:center;justify-content:center}
.prow .ph img{max-height:100%;width:auto;object-fit:contain}
.prow h3{font-size:15px;font-weight:700;line-height:1.4;margin-bottom:6px}
.prow .fit{font-size:12.5px;color:var(--steel);font-weight:700;display:block;margin-bottom:4px}
.prow .add{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;
  border:1.5px solid var(--indigo);border-radius:var(--r-sm);background:#fff;color:var(--indigo);
  font-weight:800;font-size:13px;letter-spacing:.04em;white-space:nowrap;
  transition:background 160ms var(--ease),color 160ms var(--ease),transform 160ms var(--ease)
}
.prow .add:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .prow .add:hover{background:var(--indigo);color:#fff} }
@media (max-width:700px){
  .prow{grid-template-columns:92px 1fr;gap:12px}
  .prow .ph{height:80px}
  .prow .add{grid-column:1 / -1;width:100%}
}

/* ---------- menşei rozeti ---------- */
.origin{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);
  font-size:11px;font-weight:800;letter-spacing:.03em
}
.origin.orj{background:var(--indigo);color:#fff}
.origin.mua{background:var(--tint);color:var(--indigo);box-shadow:inset 0 0 0 1px rgba(61,78,168,.22)}
/* Kart icinde: gorselin sag ust kosesinde kucuk etiket. */
.p-card .ph .origin{position:absolute;top:10px;right:10px;padding:2px 7px;font-size:10px;
  font-weight:700;letter-spacing:.02em;line-height:1.5}
.grid4 .p-card .ph .origin{top:8px;right:8px}
/* Iki rozet birlikteyken dar kartta (mobilde ~160px) cakisiyorlardi:
   grup rozeti mensei rozetine yer birakacak kadar kisalir. */
.p-card .ph .badge{max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-card .ph:has(.origin) .badge{max-width:calc(100% - 96px)}

/* ---------- sayfalama ---------- */
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:30px 0 6px}
.pager a,.pager span{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:14px;font-weight:700;color:var(--ink);
  transition:background 160ms var(--ease),color 160ms var(--ease),border-color 160ms var(--ease)
}
.pager .on{background:var(--indigo);border-color:var(--indigo);color:#fff}
.pager .gap{border:0;background:transparent;min-width:22px;color:var(--steel)}
.pager [aria-disabled]{color:#C2C7D0;background:var(--soft)}
@media (hover:hover) and (pointer:fine){
  .pager a:not(.on):not([aria-disabled]):hover{background:var(--tint);color:var(--indigo);border-color:#C9D4EC}
}

/* ---------- boş durum ---------- */
.empty{
  text-align:center;padding:56px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card)
}
/* ">" SART: bu kural bos-durum CIZIMI icin - .empty icindeki her svg'ye
   uygulaninca butonun WhatsApp isaretini de gri (#C2C7D0) yapiyor ve
   flex kabinda "margin:0 auto" ile yerinden oynatiyordu. Cizim .empty'nin
   dogrudan cocugu, buton ikonu ise <a> icinde. */
.empty > svg{color:#C2C7D0;margin:0 auto 16px}
.empty h3{font-size:19px;margin-bottom:8px}
.empty p{color:var(--steel);font-size:14.5px;max-width:44ch;margin:0 auto 20px}

/* ---------- kategori ızgarası ---------- */
/* Telefonda da IKI sutun: tek sutunda 10 grup karti 2300px'lik bir
   liste oluyordu (olculdu) ve sayfanin geri kalani gorunmez kaliyordu.
   Dar ekranda ikon ve yazi biraz kuculur, ad uc satira kadar sarabilir. */
.catgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:560px){ .catgrid{gap:16px} }
/* Sutun sayisi HER kirilimda kart adedine gore PHP'de secilir
   (grup_kart_sutunu): son satirda tek basina kart kalmasin. 10 kart
   genis ekranda 5'erli iki satir, tablette 5+5; 11 kart genis ekranda
   4'erli uc satir, tablette 4+4+3 olur. Telefonda iki sutun sabit -
   tek kalan son kart asagida iki sutuna yayilir. */
@media (min-width:700px) and (max-width:1159px){
  .catgrid.t2{grid-template-columns:repeat(2,1fr)}
  .catgrid.t3{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1160px){
  .catgrid.s3{grid-template-columns:repeat(3,1fr)}
  .catgrid.s4{grid-template-columns:repeat(4,1fr)}
  .catgrid.s5{grid-template-columns:repeat(5,1fr)}
}
/* EMNIYET KEMERI: kart sayisi 7, 13, 19... gibi olunca hicbir sutun
   secimi son karti yalniz birakmaktan kurtaramaz (test bunu buldu).
   O durumda kart satirin ortasina alinir; telefonda orta sutun yok,
   orada iki sutunu birden kaplar. Secim mantigi (grup_kart_sutunu)
   zaten cogu adette tek kart birakmaz - bu, kalan halin cilasi. */
@media (max-width:699px){
  .catgrid > .ccard:last-child:nth-child(odd){grid-column:span 2}
}
@media (min-width:700px) and (max-width:1159px){
  .catgrid.t2 > .ccard:last-child:nth-child(odd){grid-column:span 2}
  .catgrid.t3 > .ccard:last-child:nth-child(3n+1){grid-column:2}
}
@media (min-width:1160px){
  .catgrid.s3 > .ccard:last-child:nth-child(3n+1){grid-column:2}
  .catgrid.s4 > .ccard:last-child:nth-child(4n+1){grid-column:2}
  .catgrid.s5 > .ccard:last-child:nth-child(5n+1){grid-column:3}
}
/* Parca grubu karti - DIKEY duzen (referans dilde oldugu gibi):
   ikon KAHRAMAN, etiket ikincil. Onceki yatay duzende ikon 30px'lik
   bir plakaya sikismisti; kart ne referansa benziyor ne de ikonlari
   gosteriyordu. */
.ccard{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:14px;padding:26px 14px 22px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);position:relative;overflow:hidden;text-align:center;
  min-height:188px;
  transition:box-shadow 180ms var(--ease),transform 180ms var(--ease),border-color 160ms var(--ease)
}
.ccard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--indigo);
  transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .ccard:hover{box-shadow:var(--e2);transform:translateY(-3px);border-color:#D3D8E6}
  .ccard:hover::before{transform:scaleX(1)}
  .ccard:hover .ic svg{transform:scale(1.06)}
}
.ccard .ic{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;color:var(--icon-line)
}
.ccard .ic svg{transition:transform 220ms var(--ease)}
/* Urun sayaci: ikon kahraman, ad ikincil, SAYI vurgulu ama adin onune
   gecmeyecek kadar. Sayi ve "Ürün" ayni satirda hizali durur. */
/* Iki satira saran grup adi ("Isıtma & Soğutma Aksamı") sayiyi asagi
   itiyordu: ayni satirdaki kartlarin sayilari farkli yukseklikte
   basliyordu (olculdu, 15px sapma). Ad alani iki satirlik yer ayirir. */
.ccard .ad{display:flex;align-items:center;justify-content:center;
  line-height:1.35;height:2.7em}
.ccard .say{display:block;font-size:13px;color:var(--steel);letter-spacing:.02em;margin-top:-4px}
.ccard .say b{font-size:26px;font-weight:800;color:var(--ink);display:block;line-height:1.15;
  font-variant-numeric:tabular-nums}
.ccard.bos .say b{color:var(--steel)}
/* Dar ekran: kart daralinca ad ucuncu satira tasabiliyor - sabit
   yukseklik orada kirpardi. Ikon ve sayi da bir tik kuculur. */
@media (max-width:559px){
  .ccard{min-height:0;padding:18px 8px 16px;gap:10px}
  .ccard .ad{height:auto;min-height:2.7em;font-size:13px}
  .ccard .ic{width:52px;height:52px}
  .ccard .ic svg{width:52px;height:52px}
  .ccard .say b{font-size:22px}
}

/* Urun detayinda marka logosu: baslikta once marka, sonra parca adi -
   kullanici once "hangi arac" sorusunun cevabini gorur. */
.pbrand{margin:0 0 12px}
.pbrand img{height:52px;width:auto;max-width:120px;object-fit:contain;display:block}
@media (max-width:559px){ .pbrand img{height:42px} }

/* Marka sayfasi ust banneri: o markanin araci. Panelden yuklenen
   1395x270 gorsel; oran korunur, dar ekranda kirpilmaz kuculur.
   width/height nitelikleri HTML'de - gorsel gelmeden yer ayrilir. */
.markabanner{margin:0 0 4px;border-radius:var(--r-card);overflow:hidden;
  background:var(--soft);line-height:0}
.markabanner img{width:100%;height:auto;display:block}
/* Telefonda 1395x270 gorsel 331x64'e dusuyordu (olculdu): araclar da
   marka adi da secilmiyordu. Yukseklik sabitlenip gorsel KIRPILIYOR -
   soldan hizali, cunku hem fotograflarda araclar hem grafik bantlarda
   logo+ad sol tarafta duruyor. */
@media (max-width:559px){
  .markabanner img{height:112px;object-fit:cover;object-position:left center}
}

/* Marka sayfasinda ARAC MODELLERI, model sayfasinda PARCA GRUPLARI.
   58 model sayfasinin site icinde hic linki yoktu; buradaki serit hem o
   oksuzlugu cozuyor hem de dizin agacinda bir kademe asagi inmeyi
   tiklamayla mumkun kiliyor. Urunu olmayan dal hic cizilmez. */
.altdallar{margin:14px 0 4px}
.altdallar h2{font-size:14px;font-weight:800;color:var(--steel);letter-spacing:.04em;
  text-transform:uppercase;margin:0 0 10px}
.altdallar ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.altdallar a{display:inline-flex;align-items:center;gap:8px;min-height:38px;
  padding:6px 12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:13.5px;font-weight:700;color:var(--ink);
  transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease)}
.altdallar a b{font-weight:800;font-size:12px;color:var(--steel);
  background:var(--soft);border-radius:var(--r-pill);padding:2px 8px;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .altdallar a:hover{border-color:var(--peri);box-shadow:var(--e1)}
  .altdallar a:hover b{color:var(--indigo)}
}
/* Telefonda 18 model rozeti 15 satira yayiliyordu (olculdu) ve sayfa
   uzuyordu: iki sutunlu izgara 9 satira indiriyor, dokunma hedefi de
   44px'e cikiyor (rozette 38px'ti). */
@media (max-width:559px){
  .altdallar ul{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  /* min-width:0 SART: grid/flex cocuklarinin varsayilani "auto"dur, yani
     hucre icerigi kadar genisler ve 1fr sutunu tasar (olculdu: 371px
     ekranda 519px genislik, 148px yatay kaydirma). */
  .altdallar li,.altdallar a{min-width:0}
  /* inline-flex kendi icerigi kadar genisler ve 145px'lik hucreden
     tasar; izgara icinde tam genislik + border-box sart. */
  .altdallar a{display:flex;width:100%;box-sizing:border-box;
    font-size:12.5px;padding:5px 10px;min-height:44px;
    border-radius:var(--r-card);justify-content:space-between}
  .altdallar a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  /* Sayi rozeti daralinca ada birkac karakter daha yer kalir - dar
     ekranda "NKR 55 Low 1998…" ile "NKR 71 Low 2006…" ayirt edilebilmeli. */
  .altdallar a b{padding:1px 5px;font-size:11px}
}

/* Ana sayfa vitrinleri: bolum basligi + aciklama. */
.grupsayac h2,.hometabs h2{font-size:22px;margin:0 0 6px}
.grupsayac .alt,.hometabs .alt{color:var(--steel);font-size:14px;margin:0 0 18px;max-width:70ch}
/* Sekme seridi artik 10 sekme tasiyor: dar ekranda yatay kayar ve
   kaydirma cubugu gizlenir (parmakla surukleme yeterli). */
/* 10 sekmelik serit. GENIS EKRANDA hicbir sey gizlenmez: serit iki
   satira sarar (kaydirma ve ok gerekmez - gorunmeyen sekme kalmayinca
   "devami var mi" sorusu da kalmiyor). DAR EKRANDA sarmak 5-6 satir
   ederdi; orada yatay kaydirma + ok dugmeleri ve kenar solmasi var. */
.hometabs .tabs2{scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hometabs .tabs2::-webkit-scrollbar{display:none}
@media (min-width:700px){
  .hometabs .tabs2{flex-wrap:wrap;overflow-x:visible;row-gap:0}
}
/* Serit + oklar tek satirda: oklar seridin disinda durur, sekmelerin
   ustunu kapatmaz. */
.tabsarma{position:relative;display:flex;align-items:stretch;gap:6px;margin-bottom:22px}
.tabsarma .tabs2{flex:1 1 auto;margin-bottom:0;min-width:0}
.tabok{
  flex:0 0 auto;width:36px;min-height:46px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);font-size:0;cursor:pointer;display:none;
  align-items:center;justify-content:center;transition:opacity 160ms var(--ease)
}
.tabok svg{width:18px;height:18px}
.tabok[disabled]{opacity:.35;cursor:default}
/* Oklar YALNIZ gercekten kaydirilabiliyorsa (JS olcer) ve dar ekranda. */
@media (max-width:699px){
  .tabsarma.kayar .tabok{display:flex}
  .hometabs .tabs2{gap:18px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 24px),transparent)}
  .tabsarma.basta .tabs2{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .tabsarma.sonda .tabs2{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px);
    mask-image:linear-gradient(90deg,transparent 0,#000 12px)}
}

/* Sayac animasyonu: kart ekrana girince sayilar solup yukselerek gelir,
   sayim alt-shell.js'te. Varsayilan gorunur - JS yoksa kartlar oldugu
   gibi okunur. */
@keyframes sayacGel{from{opacity:0;transform:translateY(6px)}}
.catgrid .ccard.gorundu .say b{animation:sayacGel 420ms var(--ease) both}
@media (prefers-reduced-motion:reduce){
  .catgrid .ccard.gorundu .say b{animation:none}
}
/* Grup ve marka kartinin etiket tipografisi AYNI - olculdu ve
   farkliydi: grup adi steel renkte (sarmalayici span'dan miras),
   marka alt yazisi 11.5px, grup alt yazisi 13px idi. */
/* WhatsApp marka isareti. Gercek logo yolu (Simple Icons) kullaniliyor -
   sitenin geri kalanindaki iki tonlu/konturlu ikon sistemine bilerek dahil
   DEGIL: bu bir marka isareti, taninirligi stilize etmekten onemli.
   Marka yesili KULLANILMIYOR - currentColor ile bulundugu baglantinin
   rengini alir, yoksa ust serit ve altbilgide tek yesil leke olarak
   paleti bozardi. */
.wa-ico{vertical-align:-.18em;flex:none}
.act .wa-ico,.btn-primary .wa-ico,.btn-ghost .wa-ico{vertical-align:-.22em}

/* KATEGORILER menusu - YALNIZCA dar ekranda.
   Sol menu (.catlist) 1024px altinda gizli ve yerine hicbir sey yoktu:
   telefonda ana sayfadan dogrudan bir parca grubuna gitmenin yolu
   kalmiyordu. Masaustunde sol menu uc seviyeli kaskadi zaten gosteriyor,
   orada bu panel hic acilmaz - dugme eski davranisini korur. */
.catsmenu{display:none}
@media (max-width:1023px){
  .band .container{position:relative}
  .catsmenu{
    position:absolute;left:20px;right:20px;top:100%;z-index:60;
    max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:#fff;border-radius:var(--r-card);box-shadow:var(--e2);
    padding:6px 0
  }
  .catsmenu.kapali{display:none}
  .catsmenu:not(.kapali){display:block}
  .catsmenu a{
    display:flex;align-items:center;gap:12px;min-height:46px;padding:0 16px;
    font-size:14px;font-weight:600;color:var(--ink)
  }
  .catsmenu a + a{border-top:1px solid var(--line)}
  .catsmenu a svg{flex:0 0 auto;color:var(--panel-ink2)}
  /* Ikonu olmayan grup: hizanin bozulmamasi icin ayni genislikte bosluk */
  .catsmenu .bosik{width:20px;height:20px;flex:0 0 auto}
  .catsmenu .tumu{
    justify-content:center;font-weight:800;font-size:12.5px;
    letter-spacing:.06em;color:var(--indigo)
  }
  .cats-btn[aria-expanded="true"]{background:var(--indigo)}
}

/* Katlanabilir filtre paneli - YALNIZCA dar ekranda.
   Dar ekranda .shell tek sutuna dusuyor ve panel (843px) urunlerin
   TAMAMINI asagi itiyordu. 1024px ustunde panel sol sutunda duruyor,
   katlamanin anlami yok: dugme gizli, govde her zaman acik.

   Govde sunucudan ACIK geliyor, kapatmayi JS yapiyor - tersi olsaydi
   betiksiz tarayicida filtrelere hic ulasilamazdi. */
.filtretog{display:none}
@media (max-width:1023px){
  .filtretog{
    display:flex;align-items:center;gap:9px;width:100%;min-height:48px;
    padding:0 14px;margin-bottom:10px;border:1px solid var(--panel-edge);
    border-radius:var(--r-card);background:var(--panel);color:var(--ink);
    font-family:inherit;font-weight:800;font-size:13px;letter-spacing:.06em;
    transition:background 160ms var(--ease)
  }
  .filtretog .et{flex:1;text-align:left}
  /* Kapaliyken kac filtre secili oldugu dugmede yaziyor - yoksa panel
     kapaninca aktif filtre olup olmadigi gorunmez olurdu. */
  .filtretog .n{
    min-width:20px;height:20px;border-radius:var(--r-pill);
    background:var(--indigo);color:#fff;font-size:11.5px;
    display:inline-flex;align-items:center;justify-content:center;padding:0 6px
  }
  .filtretog .chev{transition:transform 160ms var(--ease);color:var(--panel-ink2)}
  .filtretog[aria-expanded="false"] .chev{transform:rotate(-90deg)}
  .filtregovde.kapali{display:none}
}

/* WhatsApp CTA'lari.
   Yuzey gercek marka yesili #25D366, yazi ve simge BEYAZ - WhatsApp'in
   kendi butonu boyle gorunur (kullanici karari; koyu yazi siyah gibi
   duruyordu).

   Bilinerek kabul edilen odun: beyaz metin bu zeminde 1.98:1, yani WCAG
   AA esigi olan 4.5:1'in altinda. Etiket 14px/800 ve kisa oldugu icin
   pratikte okunuyor, ama dusuk gorme keskinliginde zorlanan olacaktir.
   Okunurlugu artirmak icin tek satir yeter: zemini #128040 yapmak
   (beyaz metinle 5.02:1) - marka yesilinden vazgecmek pahasina.

   Cerceve KOYU DEGIL (kullanici karari): butonun beyaz sayfadan ayrilmasi
   sert bir cizgiyle degil, yesil tonlu yumusak golgeyle saglaniyor.
   Kenarlik zeminin kendi rengi - yalnizca .btn-ghost'tan gelen 1.5px'lik
   geometriyi koruyor, gorunmuyor. */
.btn-ghost.btn-wa,.btn-primary.btn-wa{
  background:#25D366;color:#fff;border:1.5px solid #25D366;
  box-shadow:0 2px 10px rgba(18,128,64,.32);
  transition:background 160ms var(--ease),color 160ms var(--ease),
             border-color 160ms var(--ease),box-shadow 160ms var(--ease),
             transform 160ms var(--ease)
}
/* Hover TERS cevirir: beyaz zemin, yesil yazi. Yazi #128040 - #25D366
   beyaz uzerinde 1.98:1 kalirdi. Kenarlik #1DA851: yesil (siyah degil) ve
   beyaza karsi 3.10:1, yani WCAG 1.4.11'in bilesen siniri icin istedigi
   3:1'i saglayarak butonun nerede bittigini belli ediyor. */
/* Beyaz metin yesil zeminde 1.98:1 kaldigi icin (yukarida acikca kabul
   edilen odun), harflerin altina cok hafif koyu bir halo konuyor. Beyaz
   metnin kenarindaki yerel kontrasti artirir - olcuye giren zemin/yazi
   oranini DEGISTIRMEZ, ama harf sinirlarini yesilin uzerinden ayirdigi
   icin okumak gozle gorulur sekilde kolaylasir.
   Renk koyu WhatsApp yesili ailesinden (#06301A), opaklik dusuk: leke
   gibi durmasin, yalnizca kenari tutsun.
   SVG'ye text-shadow ISLEMEZ - simgeye ayrica drop-shadow gerekiyor. */
.btn-ghost.btn-wa,.btn-primary.btn-wa,
.sidepromo .act.act-wa{text-shadow:0 1px 1.5px rgba(6,48,26,.42)}
.btn-ghost.btn-wa .wa-ico,.btn-primary.btn-wa .wa-ico,
.sidepromo .act.act-wa .wa-ico{filter:drop-shadow(0 1px 1.5px rgba(6,48,26,.42))}

/* Hover'da zemin beyaz, yazi yesil - koyu halo orada ters teper, kalkiyor. */
.btn-ghost.btn-wa:hover,.btn-primary.btn-wa:hover{
  background:#fff;color:#128040;border-color:#1DA851;box-shadow:none;
  text-shadow:none
}
.btn-ghost.btn-wa:hover .wa-ico,.btn-primary.btn-wa:hover .wa-ico,
.sidepromo .act.act-wa:hover .wa-ico{filter:none}
.sidepromo .act.act-wa:hover{text-shadow:none}
/* Yan kutu laciverte oturuyor: yuzey orada zaten 3.71:1 ile ayrisiyor,
   golge gerekmiyor. */
.sidepromo.light .act.act-wa,.sidepromo .act.act-wa{
  background:#25D366;color:#fff;
  transition:background 160ms var(--ease),color 160ms var(--ease),
             transform 160ms var(--ease)
}
.sidepromo .act.act-wa:hover{background:#fff;color:#128040}

/* Metin baglantisindaki isaret TERS: beyaz simge, marka yesili zemin -
   uygulamanin kendi ikonu boyle. Simge/zemin kontrasti 1.98:1; WCAG 1.4.11
   logo ve marka isaretlerini kontrast alt sinirindan MUAF tutar, o yuzden
   burada gercek #25D366 kullaniliyor. Rozetin kendisi beyaz sayfada
   yesil bir blok olarak zaten ayirt ediliyor. */
.wa-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:5px;background:#25D366;color:#fff;
  vertical-align:-.28em;flex:none
}
.wa-badge .wa-ico{width:11px;height:11px;vertical-align:0}

.ccard b, .bcard b{display:block;font-size:14.5px;font-weight:800;line-height:1.3;
  margin:0;color:var(--ink)}
.ccard span, .bcard span{font-size:13px;color:var(--steel);line-height:1.5}
/* Ad <span> icinde sarili - span'in steel rengi <b>'ye sizmasin */
.ccard span b{color:var(--ink)}

/* ---------- ürün detayı ---------- */
.pdetail{display:grid;grid-template-columns:1fr;gap:28px;margin-top:8px}
@media (min-width:900px){ .pdetail{grid-template-columns:minmax(0,460px) 1fr;gap:36px} }
.gal .main{
  border:1px solid var(--line);border-radius:var(--r-card);background:#fff;height:360px;
  display:flex;align-items:center;justify-content:center;padding:22px;overflow:hidden
}
.gal .main img{max-height:100%;max-width:100%;width:auto;object-fit:contain;
  transition:transform 260ms var(--ease)}
/* Buyutme tetikleyicisi: gorselin kendisi buton. */
.galzoom{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;padding:0;border:0;background:transparent;
  position:relative;cursor:zoom-in
}
.galzoom .zicon{
  position:absolute;right:0;bottom:0;width:34px;height:34px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);color:var(--indigo);
  box-shadow:var(--e1);opacity:.85;transition:opacity 160ms var(--ease)
}
@media (hover:hover) and (pointer:fine){
  .galzoom:hover .zicon{opacity:1}
  .galzoom:hover img{transform:scale(1.03)}
}
.galzoom:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:var(--r-sm)}

/* VITRIN (buyutulmus gorsel) */
.vitrin{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(8,13,26,.88);padding:28px;
  opacity:0;visibility:hidden;transition:opacity 240ms var(--ease),visibility 0s linear 240ms
}
.vitrin.acik{opacity:1;visibility:visible;transition:opacity 240ms var(--ease),visibility 0s}
.vitrin img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:var(--r-card);background:#fff;
  transform:scale(.96);transition:transform 240ms var(--ease)
}
.vitrin.acik img{transform:scale(1)}
.vitrin .kapat,.vitrin .gez{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border:0;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);color:var(--ink);
  transition:background 160ms var(--ease),transform 160ms var(--ease)
}
/* [hidden] UA kurali, yazarin "display:flex" bildirimine YENILIR - tek
   gorselli urunde gizlenen gez dugmeleri ekranda kalip zemine yapilan
   tiklamayi yutuyordu (olculdu: zemine tiklayinca vitrin kapanmadi,
   cunku tiklama gizli "onceki" dugmesine gidiyordu). Bu projede ayni
   tuzaga .grid3[hidden]'da da dusulmustu. */
.vitrin .gez[hidden]{display:none}
.vitrin .kapat{top:20px;right:20px}
.vitrin .gez.onceki{left:20px;top:50%;margin-top:-23px}
.vitrin .gez.sonraki{right:20px;top:50%;margin-top:-23px}
.vitrin .kapat:active,.vitrin .gez:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .vitrin .kapat:hover,.vitrin .gez:hover{background:#fff}
}
.vitrin .sayac{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;opacity:.9
}
@media (max-width:700px){
  .vitrin{padding:14px}
  .vitrin .gez.onceki{left:8px} .vitrin .gez.sonraki{right:8px}
  .vitrin .kapat{top:10px;right:10px}
}
@media (prefers-reduced-motion:reduce){
  .vitrin,.vitrin img{transition-duration:1ms !important}
  .galzoom:hover img{transform:none}
}

.gal .thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.gal .thumbs button{
  width:76px;height:76px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;padding:6px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease)
}
.gal .thumbs button.on{border-color:var(--indigo);box-shadow:0 0 0 2px rgba(61,78,168,.16)}
.gal .thumbs img{max-width:100%;max-height:100%;object-fit:contain}
@media (hover:hover) and (pointer:fine){ .gal .thumbs button:not(.on):hover{border-color:#B9C2DC} }

.pinfo h1{font-size:clamp(21px,2.4vw,27px);line-height:1.28;margin-bottom:10px}
.pinfo .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pinfo .tag{
  display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--soft);border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--steel)
}
.spec{width:100%;border-collapse:collapse;margin-bottom:22px}
/* Kunye: OEM kodu monospace (rakam/harf karisik kodlar boyle okunur),
   uyumlu modeller ALT ALTA (uzun listeler tek satirda okunmuyordu). */
.spec .oem{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;background:var(--tint);color:var(--indigo);padding:2px 7px;border-radius:4px;
  letter-spacing:.02em}
.spec td.uyumlu{line-height:1.55}
.spec .uyumlu-satir{display:block}
.spec .uyumlu-satir + .uyumlu-satir{margin-top:2px}
.spec td a{color:var(--indigo);text-decoration:none;border-bottom:1px solid rgba(61,78,168,.28)}
.spec td a:hover{border-bottom-color:var(--indigo)}
.spec th,.spec td{text-align:left;padding:11px 0;font-size:14px;vertical-align:top}
.spec tr + tr th,.spec tr + tr td{border-top:1px solid var(--line)}
.spec th{color:var(--steel);font-weight:700;width:42%;padding-right:14px}
.spec td{font-weight:700}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 26px;
  border:0;border-radius:var(--r-sm);background:var(--indigo);color:#fff;font-family:inherit;
  font-weight:800;font-size:14px;letter-spacing:.04em;
  transition:background 160ms var(--ease),transform 160ms var(--ease)
}
.btn-primary:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .btn-primary:hover{background:var(--indigo-700)} }
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 22px;
  border:1.5px solid var(--indigo);border-radius:var(--r-sm);background:#fff;color:var(--indigo);
  font-family:inherit;font-weight:800;font-size:14px;letter-spacing:.04em;
  transition:background 160ms var(--ease),color 160ms var(--ease),transform 160ms var(--ease)
}
.btn-ghost:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .btn-ghost:hover{background:var(--indigo);color:#fff} }

/* açıklama panosu: fiyat yok, süreç anlatılır */
.note{
  background:var(--tint);border-radius:var(--r-card);padding:18px 20px;display:flex;gap:14px;align-items:flex-start
}
.note svg{flex:0 0 auto;color:var(--indigo);margin-top:1px}
.note b{display:block;font-size:14.5px;margin-bottom:4px;color:var(--indigo)}
/* max-width KALDIRILDI: bu paragraf zaten .note kutusunun icinde ve kutu
   .pinfo sutununda (744px) - ustune 56ch (~450px) sinir koyunca metin uc
   satira cikip kutunun sagini bos birakiyordu. Kutunun kendi genisligi
   dogal siniri; ayrica dolgusu da var. */
.note p{font-size:13.5px;color:var(--ink);line-height:1.6}

/* uyumlu araç listesi */
.fitlist{display:flex;flex-wrap:wrap;gap:8px}
.fitlist a{
  display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--r-sm);
  background:#fff;border:1px solid var(--line);font-size:13px;font-weight:700;
  transition:border-color 160ms var(--ease),color 160ms var(--ease),background 160ms var(--ease)
}
@media (hover:hover) and (pointer:fine){ .fitlist a:hover{border-color:var(--indigo);color:var(--indigo);background:var(--tint)} }

/* ---------- teklif listesi ---------- */
.qwrap{display:grid;grid-template-columns:1fr;gap:24px;margin-top:8px}
@media (min-width:1000px){ .qwrap{grid-template-columns:1fr 372px;gap:28px;align-items:start} }
.qlist{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.qhead{
  display:grid;grid-template-columns:74px 1fr 116px auto;gap:14px;align-items:center;padding:12px 16px;
  background:var(--soft);border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)
}
/* Son sutun "auto": SİL dugmesi artik etiketli, 44px sabit genislige sigmiyor. */
.qrow{display:grid;grid-template-columns:74px 1fr 116px auto;gap:14px;align-items:center;padding:14px 16px}
.qrow + .qrow{border-top:1px solid var(--line)}
.qrow .ph{height:64px;display:flex;align-items:center;justify-content:center}
.qrow .ph img{max-height:100%;width:auto;object-fit:contain}
.qrow h3{font-size:14.5px;font-weight:700;line-height:1.4;margin-bottom:4px}
.qrow h3 a{display:inline-block;padding:4px 0}
.qrow .fit{font-size:12.5px;color:var(--steel);font-weight:700}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.qty button{
  width:36px;height:40px;border:0;background:#fff;color:var(--indigo);font-size:17px;font-weight:800;line-height:1;
  transition:background 160ms var(--ease)
}
@media (hover:hover) and (pointer:fine){ .qty button:hover{background:var(--tint)} }
.qty input{
  width:44px;height:40px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font-family:inherit;font-size:14px;font-weight:800;color:var(--ink);
  -moz-appearance:textfield
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:2px solid var(--indigo);outline-offset:-2px}
/* Listeden cikarma. Onceden 44x44 saydam bir "✕" idi: cercevesiz, gri ve
   etiketsiz oldugu icin tiklanabilir bir kontrol oldugu anlasilmiyordu.
   Artik cop kutusu ikonu + "SİL" yazisi, gorunur cerceve, dokunma hedefi
   44px'in altina dusmuyor. Renk notr baslar, silme niyeti ancak
   uzerine gelince/basinca kirmiziya doner - liste bastan uyari
   dolu gorunmesin. */
.rm{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding:0 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;color:var(--steel);font-family:inherit;
  font-weight:800;font-size:12px;letter-spacing:.06em;
  transition:background 160ms var(--ease),color 160ms var(--ease),
             border-color 160ms var(--ease),transform 160ms var(--ease)
}
.rm .et{line-height:1}
.rm:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .rm:hover{background:#FDECEC;border-color:#E7B4AE;color:#C0392B}
}
@media (max-width:700px){
  .qhead{display:none}
  .qrow{grid-template-columns:64px 1fr auto;grid-template-areas:"ph info rm" "qty qty qty";row-gap:12px}
  .qrow .ph{grid-area:ph} .qrow .info{grid-area:info} .qrow .qtycell{grid-area:qty} .qrow .rmcell{grid-area:rm}
}

/* ---------- form ---------- */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:22px}
.formcard h2{font-size:18px;margin-bottom:4px}
.formcard .lead{font-size:13.5px;color:var(--steel);margin-bottom:18px;line-height:1.55}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:800;margin-bottom:6px}
.field .req{color:#C0392B}
.field input,.field textarea,.field select{
  width:100%;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);
  font-family:inherit;font-size:14.5px;padding:11px 13px;min-height:46px;transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease)
}
.field textarea{min-height:104px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(61,78,168,.14)
}
.field input::placeholder,.field textarea::placeholder{color:#9AA1AC}
.field .hint{display:block;font-size:12.5px;color:var(--steel);margin-top:6px;line-height:1.5}
.field.bad input,.field.bad textarea{border-color:#C0392B}
.field .err{display:none;font-size:12.5px;color:#C0392B;font-weight:700;margin-top:6px}
.field.bad .err{display:block}
.formgrid{display:grid;grid-template-columns:1fr;gap:0 14px}
@media (min-width:520px){ .formgrid{grid-template-columns:1fr 1fr} }
.checkrow{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--steel);line-height:1.55;margin-bottom:16px}
.checkrow input{width:18px;height:18px;accent-color:var(--indigo);flex:0 0 auto;margin-top:2px}
.btn-block{width:100%}

/* ============================================================
   DOKUNMA HEDEFİ DÜZELTMELERİ
   Mobilde ölçülüp bulunan üç gerçek kusur. Kural: ≥44px.
   ============================================================ */

/* 1) Kart ve satır başlıkları tek satırlıkken 16px yükseklikte bir
      bağlantıydı. Başlığı büyütmek yerine bağlantının tıklama alanını
      kartın tamamına yayıyoruz; "TEKLİFE EKLE" butonu üstte kalır. */
.p-card{position:relative}
.p-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.p-card .add{position:relative;z-index:2}
.prow{position:relative}
.prow h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.prow .add{position:relative;z-index:2}

/* 2) Rozet kapatma butonu 26px'ti; görünen daire aynı kalıp
      görünmez uzantıyla 44px'e çıkıyor. */
.chip button{position:relative;width:28px;height:28px}
.chip button::after{content:"";position:absolute;inset:-8px}

/* 3) Kırıntı yolu ve uyumlu araç bağlantıları 28-36px'ti. */
.crumb a{min-height:40px}
.fitlist a{min-height:44px}

/* ============================================================
   /teklif SAYFASI (Görev 8) — gönderildi ekranı, sunucu-taraflı
   hata gösterimi, özet, WhatsApp ikinci yolu.
   Prototip: docs/tasarim/teklif-alt.html (kendi <style> bloğundan
   birebir taşındı — burada .qlist/.qrow/.empty/.formcard/.qwrap gibi
   paylaşılan sınıflar zaten yukarıda tanımlı, tekrar edilmedi).
   ============================================================ */
.sent{display:none}
.sent.on{display:block}
.sent .box{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:38px 28px;text-align:center
}
.sent .tick{
  width:62px;height:62px;border-radius:var(--r-pill);background:var(--tint);color:var(--indigo);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px
}
.sent h2{font-size:22px;margin-bottom:8px}
.sent p{color:var(--steel);font-size:14.5px;max-width:50ch;margin:0 auto 22px;line-height:1.6}
.sent .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.side-summary{position:sticky;top:16px}
.sumline{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:9px 0}
.sumline + .sumline{border-top:1px solid var(--line)}
.sumline b{font-weight:800}
.wa-alt{
  display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;background:var(--soft);
  border:1px solid var(--line);border-radius:var(--r-card);font-size:13.5px;color:var(--steel);line-height:1.5
}
.wa-alt a{color:var(--link);font-weight:800;white-space:nowrap}
/* Sunucu-taraflı doğrulama: JS'siz de çalışır. IFDEF hata metni varsa
   basılır, .field.bad sınıfı gerekmeden görünür olması yeterli. */
.err.on{display:block}

/* ============================================================
   DUZELTMELER — kullanici geri bildirimi (2026-08-11)
   ============================================================ */

/* .viewtog calismiyordu: kutu ve satir gorunumu AYNI ANDA gorunuyordu.
   Sebep: [hidden] tarayicinin UA stil sayfasinda display:none uretir, ama
   yazar kurallarimiz (.grid3{display:grid} / .plist{display:flex}) ondan
   daha guclu - hidden niteligi sessizce eziliyordu. Ozel kural sart. */
.grid3[hidden], .plist[hidden], .grid4[hidden]{display:none}

/* ---------- sol sutun filtre formu ---------- */
.filterform{display:flex;flex-direction:column;gap:16px}
/* Ayni duzen govdeye de gerekiyor: katlama icin eklenen .filtregovde
   sarmalayicisi .fbox'lari formun DOGRUDAN cocugu olmaktan cikardi ve
   formun gap'i onlara ulasmaz oldu - kutular birbirine yapisti (olculdu:
   16px -> 0, hem mobilde HEM masaustunde).
   .fbox + .fbox{margin-top:0} kurali da margin'le telafi etmeyi kapatiyor,
   yani bosluk gap'ten gelmek zorunda. */
.filtregovde{display:flex;flex-direction:column;gap:16px}
.filterform .fbox{margin:0}
.filter-go{margin-top:2px}
.filter-clear{
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  font-size:13px;font-weight:800;color:var(--link);text-align:center
}
@media (hover:hover) and (pointer:fine){ .filter-clear:hover{color:var(--indigo-700)} }
/* JS acikken "FILTRELE" butonu gereksiz: degisim aninda gonderiliyor.
   JS kapaliyken buton tek yol - bu yuzden varsayilan GORUNUR, JS onu gizler. */
.js-auto-filter .filter-go{display:none}

/* Sayfalama: pencere disi bosluk isareti ve devre disi uclar */
.pager .gap{
  border:0;background:transparent;min-width:24px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--steel)
}
.pager span.on{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border:1px solid var(--indigo);border-radius:var(--r-sm);
  background:var(--indigo);color:#fff;font-size:14px;font-weight:700
}

/* ============================================================
   GUVEN KUTULARI (kurum ici/disi fotograf) + MARKA LOGOLARI
   ============================================================ */

/* Fotografli varyant: .midp'in ayni kabugu, ama gorsel ustte tam
   genislikte. 770x480 yatay fotograflar yan-yana 130px'lik kucuk
   gorsel yuvasina sigmiyordu. */
.midp.photo{
  display:block;padding:0;overflow:hidden;background:#fff;
  border:1px solid var(--line)
}
.midp.photo .shot{
  display:block;width:100%;aspect-ratio:770/480;background:var(--soft);overflow:hidden
}
.midp.photo .shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 320ms var(--ease)
}
@media (hover:hover) and (pointer:fine){ .midp.photo:hover .shot img{transform:scale(1.03)} }
.midp.photo .cap{padding:18px 22px 22px}
.midp.photo h3{color:var(--indigo);margin-bottom:6px;max-width:28ch}
.midp.photo p{margin-bottom:0;max-width:46ch}
/* Fotograf kutulari bir onceki bolumden ayrilsin */
.midpromos.trust{margin-top:34px}
@supports not (aspect-ratio: 1){ .midp.photo .shot{height:230px} }

/* ---------- marka kutusunda logo ---------- */
.bcard .blogo{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:100%;height:72px
}
/* Kaynak logolar 120x115 - 72px'e OLCEK KUCULTMEsi, buyutme degil
   (bulaniklik yok). max-width kutuyu tasmayi engeller. */
.bcard .blogo img{max-height:100%;width:auto;max-width:80%;object-fit:contain;
  transition:transform 220ms var(--ease)}
@media (hover:hover) and (pointer:fine){ .bcard:hover .blogo img{transform:scale(1.06)} }
/* Logolu kutuda marka adi ikincil olur: gorsel zaten markayi soyluyor */
/* Logosu olmayan marka (Newholland): ad ana oge olarak kalir, kutu
   yuksekligi digerleriyle ayni - izgara bozulmaz. */
.bcard.nologo b{font-size:14.5px;font-weight:800;color:var(--ink)}

/* ============================================================
   UST MENU — prototiple hizalama
   Prototipte .mainnav duz <a> listesiydi; sistemde CMS agacindan
   <ul><li> geliyor. Uc fark gorunuyordu:
     1) madde isaretleri (list-style sifirlanmamis)
     2) etiketler kucuk harf (prototipte "ANA SAYFA" yazili gelmisti)
     3) alt sayfali maddede .dropdown stilsiz
   ============================================================ */
.mainnav{list-style:none;margin:0;padding:0;align-items:center;
  /* flex:1 + justify-content:center yukarida (satir ~45) tanimli;
     burada yalniz liste sifirlama var, yerlesimi ezmiyor */}
.mainnav > li{list-style:none;position:relative;display:flex;align-items:center}
/* CMS'teki ad kucuk harfle yonetilir (panelde okunur kalsin), ekranda
   prototipteki gibi buyuk harf gorunur. lang="tr" oldugu icin i -> İ
   donusumu dogru yapilir. */
.mainnav a{text-transform:uppercase}

/* Alt sayfasi olan menu maddesi: prototipte karsiligi yoktu ama CMS'e
   alt sayfa eklenince stilsiz bir liste dokuluyordu. Flyout'larla ayni
   dil: beyaz kutu, ince kenarlik, yumusak golge. */
.mainnav .dropdown{
  position:absolute;top:100%;left:0;z-index:45;min-width:220px;margin:0;padding:6px;
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--e2);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity 160ms var(--ease),transform 160ms var(--ease)
}
.mainnav > li:hover > .dropdown,
.mainnav > li:focus-within > .dropdown{opacity:1;transform:translateY(0);pointer-events:auto}
.mainnav .dropdown li{display:block}
.mainnav .dropdown a{
  display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--r-sm);
  font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);
  white-space:nowrap
}
.mainnav .dropdown li + li{border-top:1px solid #ECEEF3}
@media (hover:hover) and (pointer:fine){
  .mainnav .dropdown a:hover{background:var(--tint);color:var(--indigo)}
}

/* reCAPTCHA v3 gorunmez calisir; Google'in kullanim sartlari rozet ya da
   bu metni istiyor. Formun alt kenarinda, gonder butonunun uzerinde. */
.captchanot{margin:2px 0 10px;font-size:11.5px;line-height:1.5;color:#6B7280}
.captchanot a{color:#4B5563;text-decoration:underline}
.captchanot a:hover{color:var(--indigo)}