:root{
  /* marka — kilitli */
  --navy:#162030; --navy-2:#1E2D3D; --navy-3:#0A0E14;
  --kirmizi:#B62126; --kirmizi-koyu:#9A1B1F;

  /* yüzeyler — katmanlı derinlik */
  --zemin:#FFFFFF; --zemin-yumusak:#F5F7FA; --zemin-alt:#EEF1F6;
  --cizgi:#DFE5EC; --cizgi-koyu:#C8D2DE;
  /* Fotografi olmayan urun kartindaki yedek simge. Cizgi renginden
     AYRI bir token: cizgi ince oldugu icin acik olabilir, simge olamaz. */
  --ikon-yedek:#6B7A90;

  /* metin — WCAG 4.5:1 üstü */
  --tx:#12161C; --tx-2:#3A4553; --tx-3:#55606E; --tx-ters:#FFFFFF;
  /* ── Koyu zemin türevleri ────────────────────────────────────────────────
     Marka kırmızısı (#B62126) koyu navy üstünde 2,7:1 — okunmaz. Metin ve
     bağlantılarda onun açık varyantı kullanılır (5,4:1). Gri-mavi tonlar da
     koyu zeminde metin kademeleridir. Hepsi burada tanımlı: gövde CSS'inde
     serbest hex kullanılmaz. */
  --kirmizi-acik:#E8837A; --kirmizi-acik-2:#F5A79F; --kirmizi-solgun:#F0D5D6;
  --ters-tx:#C6D4E3; --ters-tx-2:#9FB0C4; --ters-tx-3:#7C8DA3;
  --ters-cizgi:rgba(255,255,255,.14);
  /* ── Durum renkleri ──────────────────────────────────────────────────────
     Marka paletinin dışında ama işlevsel: sipariş/stok/uyarı durumu renkle
     ayrışmazsa okunmaz. Tek yerde tanımlı, gövdede serbest yeşil/turuncu yok. */
  --basari:#166534; --basari-zemin:#DCFCE7; --basari-cizgi:#86EFAC;
  --uyari:#92400E; --uyari-zemin:#FEF3C7;
  --hata:#991B1B;  --hata-zemin:#FEE2E2;  --hata-cizgi:#FCA5A5;
  /* WhatsApp kendi marka yeşilini zorunlu kılar (CLAUDE.md istisnası) */
  --whatsapp:#25D366; --whatsapp-acik:#4AE88A;

  --basli:'Barlow Condensed',system-ui,sans-serif;
  --govde:'Inter',system-ui,-apple-system,sans-serif;

  --r-s:4px; --r:8px; --r-l:12px;
  --golge-1:0 1px 2px rgba(22,32,48,.06),0 2px 8px rgba(22,32,48,.04);
  --golge-2:0 2px 6px rgba(22,32,48,.08),0 8px 24px rgba(22,32,48,.07);
  --golge-3:0 4px 12px rgba(22,32,48,.10),0 16px 40px rgba(22,32,48,.10);
  --hiz:.18s cubic-bezier(.2,.8,.3,1);
  --en:1320px;
}

*,*::before,*::after{box-sizing:border-box}
/* Yazar CSS'i display verince tarayıcının [hidden]{display:none} kuralı eziliyor
   (sepet rozeti "0" olarak görünüyordu). Tek yerden kapatıyoruz. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
/* ── Site scrollbar — Karsen (ince navy pill, kırmızı hover; 30 Eyl) ── */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--zemin-yumusak)}
::-webkit-scrollbar-thumb{background:var(--navy);border-radius:999px;border:3px solid var(--zemin-yumusak);background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--kirmizi)}
html{scrollbar-width:thin;scrollbar-color:var(--navy) var(--zemin-yumusak)}
body{margin:0;background:var(--zemin);color:var(--tx);
  font:400 15px/1.65 var(--govde);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--basli);font-weight:700;letter-spacing:-.01em;
  line-height:1.08;margin:0;text-transform:uppercase}
:focus-visible{outline:2px solid var(--kirmizi);outline-offset:2px;border-radius:var(--r-s)}
.kap{max-width:var(--en);margin:0 auto;padding:0 20px}
/* Kablo kesit diyagrami (kabloGorseli) - yedek ikon yerine gecer. */
.gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Klavye kullanicisi tum mega menuyu gezmeden icerige atlasin (WCAG 2.4.1).
   Odaklanmadan gorunmez, Tab ile ilk odakta ustte belirir. */
.atla{position:absolute;left:8px;top:-48px;z-index:200;background:#162030;color:#fff;
  padding:10px 16px;border-radius:0 0 8px 8px;font-weight:600;text-decoration:none;
  transition:top .18s ease}
.atla:focus{top:0;outline:2px solid #B62126;outline-offset:2px}
#icerik:focus{outline:none}

/* ── üst şerit ─────────────────────────────────── */
.serit{background:var(--navy-3);color:var(--ters-tx-2);font-size:12.5px;letter-spacing:.02em}
.serit .kap{display:flex;gap:20px;align-items:center;height:38px}
.serit b{color:#fff;font-weight:600}
.serit .sag{margin-left:auto;display:flex;gap:20px;align-items:center}
/* Kur rozeti — EUR listeden TL'ye çevrilen fiyatların dayanağı görünür olsun.
   Şeritteki bağlantılardan ayrışsın diye çerçeveli, tıklanabilir değil. */
.kur{display:inline-flex;align-items:center;gap:8px;padding:3px 10px;
  border:1px solid rgba(255,255,255,.14);border-radius:999px;
  background:rgba(255,255,255,.04);font-variant-numeric:tabular-nums;cursor:default}
.kur b{color:#fff;font-weight:700;margin-right:3px}
.kur-birim{display:inline-flex;align-items:center}
.kur-birim + .kur-birim{margin-left:9px;padding-left:9px;
  border-left:1px solid rgba(255,255,255,.16)}
.kur i{width:1px;height:11px;background:rgba(255,255,255,.16);display:inline-block}
/* Kur notu — rozetin yanında, bağlantı değil düz bilgi. Rozetten bir ton soluk
   ki fiyat rakamlarıyla yarışmasın. 1180px altında şeritte yer kalmıyor, düşer. */
.kur-not{color:var(--ters-tx-3,rgba(255,255,255,.55));font-size:11.5px;
  white-space:nowrap;margin-left:-8px}
@media(max-width:1240px){ .kur-not{display:none} }
/* 26 Eyl (Erhan: "mobilde diğer kur gözükmüyor"): eskiden ≤900px'te USD
   gizleniyordu (yer yok sanılmıştı). Artık iki kur da (€ + $) görünür;
   rozet ufalır ki sığsın. */
@media(max-width:900px){
  .kur{padding:2px 9px;font-size:12px;margin-left:auto}
  .kur-birim + .kur-birim{margin-left:7px;padding-left:7px}
}
.serit a{display:inline-flex;align-items:center;gap:6px;transition:color var(--hiz);
  white-space:nowrap}
.serit a:hover{color:#fff}
.serit svg{width:15px;height:15px;flex:none}
/* WhatsApp kısayolu — B2B'de asıl iletişim kanalı, marka renginde durur */
.serit .wa{color:var(--whatsapp);font-weight:600}
.serit .wa svg{width:17px;height:17px}
.serit .wa:hover{color:var(--whatsapp-acik)}
.serit .wa b{color:inherit}

/* ── favori düğmesi (ürün kartı) ─────────────────
   Kart görselinin sağ altında durur; basılıysa kırmızı dolu kalp. */
.kart-favori{position:absolute;right:8px;bottom:8px;z-index:2;width:32px;height:32px;
  border-radius:50%;border:1px solid var(--cizgi);background:rgba(255,255,255,.94);
  color:var(--tx-3);display:grid;place-items:center;cursor:pointer;opacity:0;
  transition:opacity var(--hiz),color var(--hiz),border-color var(--hiz),transform var(--hiz)}
.kart:hover .kart-favori,.kart-favori[aria-pressed="true"]{opacity:1}
.kart-favori:hover{color:var(--kirmizi);border-color:var(--kirmizi);transform:scale(1.08)}
.kart-favori:focus-visible{opacity:1}
.kart-favori svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.kart-favori[aria-pressed="true"]{color:var(--kirmizi);border-color:var(--kirmizi)}
.kart-favori[aria-pressed="true"] svg{fill:currentColor}

/* fiyatı girilmemiş üründe teklif çağrısı (ürün detayı) */
.f-teklif.buyuk{font-family:var(--basli);font-size:19px;color:var(--kirmizi);
  text-transform:uppercase;letter-spacing:.01em;margin-bottom:6px}
.teklif-not{font-size:12.5px;color:var(--tx-3);line-height:1.6;margin:0 0 14px}

/* ── canlı stok rozeti (19 Eyl 2026) ──────────────────────────────────────
   Gece 00:00'da tazelenen gerçek adet. PALET KURALI: navy + #B62126 + gri
   dışına ÇIKILMAZ — "stokta" için yeşil uydurmak yasak aksan olurdu.
   Mevcut = navy (sakin, olgusal) · Tükendi = kırmızı (dikkat, palet içi).
   Nokta işareti renkten bağımsız okunabilirlik verir (renk körlüğü). */
.stok-var,.stok-yok{display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;letter-spacing:.01em;line-height:1.2}
.stok-var{color:var(--navy)}
.stok-yok{color:var(--kirmizi)}
.stok-var::before,.stok-yok::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:none}
/* Kartta buton satırının ÜSTÜNDE tam satır kaplar. kart-alt flex olduğu için
   flex-basis:100% verilmezse butonun yanına sıkışıp onu daraltıyordu.
   ⚠ BU DOSYADA YORUMA BACKTICK YAZMA — CSS bir template literal içinde;
     backtick string'i erken kapatıp kalan CSS'i JavaScript'e çeviriyor
     ("alt is not defined" ile sunucu hiç açılmıyor, 19 Eyl). */
.kart-alt{flex-wrap:wrap}
.kart-alt .stok-var,.kart-alt .stok-yok{flex:0 0 100%;margin:0 0 2px}

/* ── sepet tutar balonu (hover) ──────────────────
   Sepete girmeden biriken tutarı gösterir. */
.sepet-dugme{position:relative}
.sepet-balon{position:absolute;top:calc(100% + 9px);right:0;z-index:70;
  background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;
  padding:9px 13px;border-radius:var(--r);box-shadow:var(--golge-3);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity var(--hiz),transform var(--hiz)}
.sepet-balon::before{content:'';position:absolute;bottom:100%;right:18px;
  border:6px solid transparent;border-bottom-color:var(--navy)}
/* ── alt kategori (aile) listesi — kategori sayfası sol paneli ──
   Mega menüdeki alt kategori bilgisi liste sayfasında da olmalı; kullanıcı
   280 ürünlük listede önce alt gruba iniyor, sonra teknik filtreye. */
.aile-kutu{padding:16px 16px 8px;border-bottom:1px solid var(--cizgi)}
.aile-kutu h3{font-family:var(--basli);font-size:12.5px;letter-spacing:.09em;
  color:var(--tx-3);text-transform:uppercase;margin-bottom:10px}
.aile-oge{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 9px;margin:0 -9px;border-radius:var(--r-s);font-size:13px;
  color:var(--tx-2);line-height:1.35;transition:background var(--hiz),color var(--hiz)}
.aile-oge span{min-width:0}
.aile-oge b{flex:none;font-size:11.5px;font-weight:700;color:var(--tx-3);
  font-variant-numeric:tabular-nums}
.aile-oge:hover{background:var(--zemin-alt);color:var(--navy)}
.aile-oge.aktif{background:var(--navy);color:#fff;font-weight:600}
.aile-oge.aktif b{color:rgba(255,255,255,.7)}

/* /kategoriler sayfasında grup başlıkları */
.grup-blok{margin-bottom:38px;scroll-margin-top:120px}
.grup-bas{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:11px;margin-bottom:16px;border-bottom:2px solid var(--navy)}
.grup-bas h2{font-size:19px;color:var(--navy);text-transform:uppercase;letter-spacing:.01em}
.grup-bas p{margin:0;font-size:13px;color:var(--tx-3)}

/* ── kategori kartı ızgarası (/kategoriler sayfası) ──
   15 kategori 5 sütuna tam bölünür; dar ekranda 3 ve 1'e iner. */
.kat-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));
  gap:16px;align-items:start}
@media (max-width:760px){.kat-izgara{grid-template-columns:1fr}}
.kat-kart{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);
  overflow:hidden;transition:border-color var(--hiz),box-shadow var(--hiz),
  transform var(--hiz)}
.kat-kart:hover{border-color:var(--navy);box-shadow:var(--golge-2);transform:translateY(-2px)}
.kat-kart-bas{display:flex;align-items:center;gap:12px;padding:14px 15px;
  border-bottom:1px solid var(--cizgi)}

/* Görselli kart başlığı — kategori sayfasındaki banner'ın küçük hâli:
   koyu zemin, fotoğraf sağda net, metin solda düz zemin üstünde.
   Kart dar olduğu için fotoğraf sağ %55'te durur, sola doğru navy'ye erir. */
.kat-kart-bas.gorselli{position:relative;min-height:132px;align-items:flex-end;
  border-bottom-color:transparent;
  background:linear-gradient(120deg,var(--navy-3),var(--navy) 60%,var(--navy-2))}
.kat-kart-bas.gorselli::before{content:'';position:absolute;inset:0 0 0 14%;
  background:var(--bg) 70% center/cover no-repeat}
.kat-kart-bas.gorselli::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,14,20,.15) 0%,rgba(10,14,20,.30) 42%,
      rgba(10,14,20,.86) 100%),
    linear-gradient(100deg,rgba(10,14,20,.72) 0%,rgba(10,14,20,.30) 44%,transparent 72%)}
.kat-kart-bas.gorselli > *{position:relative;z-index:1}
.kat-kart-bas.gorselli .kk-gorsel{background:var(--kirmizi);color:#fff;width:38px;height:38px;
  box-shadow:0 6px 16px -6px rgba(182,33,38,.8)}
.kat-kart-bas.gorselli .kk-gorsel svg{width:21px;height:21px}
.kat-kart-bas.gorselli .kk-ad b{color:#fff}
.kat-kart-bas.gorselli .kk-ad em{color:var(--ters-tx)}
.kat-kart:hover .kat-kart-bas.gorselli::before{transform:scale(1.05)}
.kat-kart-bas.gorselli::before{transition:transform .5s cubic-bezier(.22,.8,.3,1)}

.kk-gorsel{flex:none;width:44px;height:44px;display:grid;place-items:center;
  background:var(--zemin-alt);border-radius:var(--r);color:var(--kirmizi)}
.kk-gorsel svg{width:24px;height:24px}
.kk-ad{display:flex;flex-direction:column;gap:2px;min-width:0}
.kk-ad b{font-family:var(--basli);font-size:14px;color:var(--navy);text-transform:uppercase;
  letter-spacing:.01em;line-height:1.2}
.kk-ad em{font-style:normal;font-size:12px;color:var(--kirmizi);font-weight:600;
  display:inline-flex;align-items:center;gap:5px}
.kk-ad em svg{width:13px;height:13px}
.kat-kart-liste{display:flex;flex-direction:column;padding:10px 15px 14px}
.kat-kart-liste a{font-size:12.5px;color:var(--tx-2);padding:4px 0;line-height:1.4}
.kat-kart-liste a:hover{color:var(--kirmizi)}

/* footer: kalan kategorilere giden bağlantı */
.alt .alt-tumu{color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:7px;
  margin-top:4px}
.alt .alt-tumu svg{width:14px;height:14px}
.alt .alt-tumu:hover{color:var(--kirmizi)}

.sepet-dugme:hover .sepet-balon:not([hidden]),
.sepet-dugme:focus-visible .sepet-balon:not([hidden]){opacity:1;transform:translateY(0)}
@media (max-width:1080px){
  /* dar ekranda ikincil bağlantılar düşer, WhatsApp ve kargo takibi kalır */
  .serit .sag a:nth-child(n+3){display:none}
}
@media (max-width:620px){
  .serit .kap{gap:12px}
  .serit .sag a:nth-child(n+2){display:none}
  .serit .wa b{font-size:12px}
}

/* ── başlık ────────────────────────────────────── */
.bas{background:var(--zemin);border-bottom:1px solid var(--cizgi);
  position:sticky;top:0;z-index:50}
.bas .kap{display:flex;align-items:center;gap:26px;height:76px}
/* Kurumsal logo (SVG) + "Shop" eki. Metin logosu marka kimliğini taşımıyordu. */
.logo{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.logo img{height:34px;width:auto;display:block}
.logo span{font-family:var(--basli);font-size:23px;font-weight:800;letter-spacing:-.01em;
  color:var(--kirmizi);text-transform:uppercase;line-height:1}
/* koyu zeminde marka kırmızısı 2.5:1 kalıyor → açık ton (5.9:1) */
.alt-logo span{color:var(--kirmizi-acik)}
.alt-logo img{height:36px}
@media (max-width:760px){
  .logo img{height:28px}
  .logo span{font-size:19px}
}

.ara{flex:1;max-width:620px;position:relative}
.ara input{width:100%;height:46px;padding:0 108px 0 42px;border:1.5px solid var(--cizgi-koyu);
  border-radius:var(--r);background:var(--zemin-yumusak);font-size:14.5px;
  transition:border-color var(--hiz),background var(--hiz)}
.ara input:focus{background:#fff;border-color:var(--navy);outline:none}
.ara input::placeholder{color:var(--tx-3)}
.ara .ikon{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--tx-3);pointer-events:none}
.ara button{position:absolute;right:5px;top:5px;height:36px;padding:0 20px;border:0;
  border-radius:var(--r-s);background:var(--navy);color:#fff;font-size:13px;font-weight:600;
  cursor:pointer;transition:background var(--hiz),transform var(--hiz)}
.ara button:hover{background:var(--kirmizi)}
.ara button:active{transform:scale(.97)}

.bas-sag{display:flex;align-items:center;gap:10px;margin-left:auto}
.dugme{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;
  border-radius:var(--r);font-size:13.5px;font-weight:600;border:1.5px solid var(--cizgi-koyu);
  background:#fff;color:var(--tx);cursor:pointer;white-space:nowrap;
  transition:border-color var(--hiz),background var(--hiz),transform var(--hiz)}
.dugme:hover{border-color:var(--navy);background:var(--zemin-yumusak)}
.dugme:active{transform:translateY(1px)}
/* İkon SVG'lerinde width/height ATTRİBUTE'u yok (yalnız viewBox) — CSS'te
   genel boyut kısıtı olmayınca tarayıcı devasa/tahmin edilemez bir intrinsic
   boyuta düşüyordu (ör. "Siparişi tamamla" ikonu 144×144 render olup altındaki
   kupon "Uygula" butonunun tıklamasını GÖRÜNMEZCE engelliyordu — Playwright
   testinde yakalandı, .bas-sag dışındaki HER .dugme/.mini/.serit-ok'ta aynı
   risk vardı). Tek genel kural, header'daki özel kural fazlalık ama zararsız. */
.dugme svg,.mini svg,.serit-ok svg{width:18px;height:18px;flex:none}
.dugme.dolu{background:var(--kirmizi);border-color:var(--kirmizi);color:#fff}
.dugme.dolu:hover{background:var(--kirmizi-koyu);border-color:var(--kirmizi-koyu)}
.dugme.koyu{background:var(--navy);border-color:var(--navy);color:#fff}
.dugme.koyu:hover{background:var(--navy-2);border-color:var(--navy-2)}

/* çerez bandı (8 Eki) — GA4/Clarity tercihi. Sabit düğmelerin (WhatsApp 900,
   destek 950-980) ÜSTÜNDE: bant açıkken altında tıklanamaz düğme kalmasın. */
.cerez-bant{position:fixed;left:16px;right:16px;bottom:16px;z-index:990;max-width:720px;
  margin:0 auto;display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;
  padding:16px 20px;border-radius:12px;background:var(--navy);color:var(--ters-tx);
  border:1px solid var(--ters-cizgi);
  box-shadow:0 18px 40px -12px rgba(10,14,20,.55),0 4px 12px -4px rgba(10,14,20,.35);
  animation:cerezGir .35s cubic-bezier(.2,.8,.2,1) both}
.cerez-bant p{flex:1 1 320px;margin:0;font-size:13px;line-height:1.6}
.cerez-bant a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cerez-dugmeler{display:flex;gap:10px;flex:none}
.cerez-bant .dugme{height:40px}
.cerez-bant .dugme:not(.dolu){background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.cerez-bant .dugme:not(.dolu):hover{background:rgba(255,255,255,.08);border-color:#fff}
.cerez-bant .dugme:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes cerezGir{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* altbilgi ödeme rozeti (14 Eyl) */
.alt-rozetler{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start}
/* güven şeridi (8 Eki): yasal künye solda, PayTR + ETBİS sağda — tam genişlik,
   üst kolonlardan bir ton koyu zemin (base → elevated katmanı) */
.alt-guven{border-top:1px solid var(--ters-cizgi);background:rgba(0,0,0,.16)}
.alt .alt-guven .kap{display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:24px 56px;padding:24px 20px;grid-template-columns:none}
.alt-resmi{margin:0;flex:1 1 560px;display:grid;
  grid-template-columns:minmax(220px,1.7fr) repeat(3,auto);gap:12px 36px}
.alt-resmi dt{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ters-tx-3);margin-bottom:4px}
.alt-resmi dd{margin:0;font-size:13px;line-height:1.55;color:var(--ters-tx)}
.alt .alt-resmi a{display:inline;padding:0;min-height:0;color:var(--ters-tx)}
.alt .alt-resmi a:hover{color:#fff}
.alt-guven .alt-rozetler{flex:none;gap:28px;align-items:flex-start}
/* PayTR logosu ETBİS kutusuyla aynı yükseklikte ortalansın (etiketler üstte hizalı) */
.alt-guven .alt-odeme a{display:flex;align-items:center;min-height:64px;padding:0}
.alt-odeme span{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ters-tx-3);margin-bottom:8px}
.alt-odeme a{display:inline-block;opacity:.8;transition:opacity var(--hiz)}
.alt-odeme a:hover,.alt-odeme a:focus-visible{opacity:1}
.alt-odeme img{display:block;height:20px;width:auto}
/* ETBİS kaydı — Bakanlık site profiline giden doğrulama bağlantısı (8 Eki 2026) */
.alt-etbis{margin-top:0}
.alt-etbis>span{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ters-tx-3);margin-bottom:8px}
.alt .etbis-yer{display:inline-flex;align-items:center;gap:10px;padding:9px 13px;min-height:44px;
  border:1px solid var(--ters-cizgi);border-radius:10px;color:var(--ters-tx-2);text-decoration:none;
  transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.alt .etbis-yer:hover{border-color:var(--ters-tx-3)}
.alt .etbis-yer:focus-visible{outline:2px solid var(--ters-tx);outline-offset:2px}
.alt .etbis-yer:active{transform:scale(.98)}
.etbis-yer svg{width:22px;height:22px;flex:none}
.etbis-yer b{font-family:var(--basli);font-size:13px;letter-spacing:.03em;color:var(--ters-tx);display:block}
.etbis-yer em{font-style:normal;font-size:10.5px;color:var(--ters-tx-3)}
/* Footer üstü CTA — karsenelektrik.com "Projenizi Konuşalım" stili: AÇIK zemin,
   ORTALI, kırmızı pill + iki-tonlu büyük başlık (navy+kırmızı) + ortalı butonlar. Kutu YOK. */
.on-cta{padding:64px 0;text-align:center}
.on-cta .kap{max-width:760px}
.on-cta-etiket{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--kirmizi);padding:7px 15px;border-radius:999px;
  box-shadow:0 8px 20px -10px rgba(182,33,38,.75)}
.on-cta h2{font-family:var(--basli);font-weight:800;font-size:46px;line-height:1.05;
  color:var(--navy);letter-spacing:.004em;margin-top:20px}
.on-cta h2 span{color:var(--kirmizi)}
.on-cta p{margin:16px auto 0;font-size:15.5px;line-height:1.55;color:var(--tx-2);max-width:50ch}
.on-cta-dugmeler{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.on-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:var(--r);
  font-family:var(--basli);font-size:14.5px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;
  transition:background var(--hiz),transform var(--hiz),border-color var(--hiz),color var(--hiz)}
.on-cta-btn svg{width:18px;height:18px}
.on-cta-btn.kirmizi{background:var(--kirmizi);color:#fff;box-shadow:0 12px 26px -12px rgba(182,33,38,.72)}
.on-cta-btn.kirmizi:hover{background:var(--kirmizi-koyu);transform:translateY(-1px)}
.on-cta-btn.hat{background:#fff;color:var(--navy);border:1.5px solid var(--cizgi)}
.on-cta-btn.hat:hover{border-color:var(--navy);background:var(--zemin-alt)}

/* ── ANA KATEGORİ (üst grup) SAYFASI — 15 Eyl ─────────────────────────
   Erhan'ın düzeltmeleri: banner görselli · sayaç YOK · grup içi fırsat ·
   alt kategorilere fotoğraflı afiş. */

/* 1) GRUP BANNER — grubu temsil eden kategorinin gerçek vitrin görseli.
      Metin solda, görsel sağdan bindirmeli. Sayı kutusu YOK (Erhan). */
.gb{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--navy);
  min-height:250px;display:flex;align-items:center;margin-bottom:6px}
.gb-foto{position:absolute;inset:0 0 0 auto;width:62%;height:100%;object-fit:cover;
  object-position:center}
/* Sol %55'te metin okunsun diye koyu perde; sağda görsel açıkta kalır. */
.gb.gorselli::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 34%,
             rgba(22,32,48,.86) 52%,rgba(22,32,48,.28) 76%,rgba(22,32,48,.12) 100%)}
.gb::before{content:'';position:absolute;inset:0;z-index:2;
  background:radial-gradient(520px 300px at 92% 78%,rgba(182,33,38,.24),transparent 70%)}
.gb-ic{position:relative;z-index:3;padding:34px 38px;max-width:620px}
.gb-ustlik{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ters-tx-3);margin-bottom:9px}
.gb-ustlik i{width:19px;height:19px;color:var(--kirmizi)}
.gb-ustlik i svg{width:100%;height:100%;display:block}
.gb h1{font-family:var(--basli);font-size:clamp(30px,3.6vw,46px);line-height:1;
  letter-spacing:-.018em;text-transform:uppercase;color:#fff;margin:0 0 10px}
.gb p{font-size:14.5px;line-height:1.55;color:var(--ters-tx-2);max-width:48ch;margin:0}
/* alt kategori adları rozet olarak — sayaç değil, İÇERİK bilgisi */
.gb-etiket{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.gb-etiket span{padding:5px 11px;border-radius:999px;font-size:12px;color:var(--ters-tx-2);
  background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.13)}

/* ── ANA KATEGORİ SAYFASI (16 Eylül) ────────────────────────────────────
   Gerekçe + referans ölçümleri: ANA_KATEGORI_DNA.md
   Kısaca: üst kategoride kategoriler karşılaştırılamaz (ray klemenste kesit,
   DIN rayda boy) — sayfanın işi karşılaştırmak değil YÖN GÖSTERMEK. RS'in
   ana kategori sayfası 1354px'lik saf bir dizin; Star Akım'ınki 8227px'lik
   ürün+metin sayfası. İkisinin ortası: önce dizin, sonra vitrin, sonra metin. */

/* Banner içi arama — RS'in ana kategori sayfasındaki en pratik öğesi */
.gb-ara{display:flex;align-items:center;gap:0;margin-top:17px;max-width:520px;
  background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.22)}
.gb-ara .ikon{width:18px;height:18px;flex:none;margin:0 0 0 13px;color:var(--tx-3)}
.gb-ara input{flex:1;min-width:0;height:44px;padding:0 12px;border:0;background:none;
  font-size:14px;color:var(--tx)}
.gb-ara input::placeholder{color:var(--tx-3)}
.gb-ara input:focus{outline:none}
.gb-ara button{flex:none;height:44px;padding:0 20px;border:0;cursor:pointer;
  background:var(--kirmizi);color:#fff;font-family:var(--basli);font-size:15px;
  font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  transition:background var(--hiz)}
.gb-ara button:hover{background:var(--kirmizi-koyu)}
.gb-ozet{margin-top:14px !important;font-size:13px;color:var(--ters-tx-3)}
.gb-ozet b{color:var(--ters-tx);font-variant-numeric:tabular-nums}

/* Alt kategori dizini — IZGARA DEĞİL LİSTE.
   Grup 1 ile 5 kategori arasında değişiyor; üç sütunlu ızgarada 5 kategori
   3+2 kırılıp boş hücre bırakıyor, tek kategorili grupta kart yapayalnız
   kalıyordu. Tam genişlik satır 1'de de 5'te de aynı görünür. */
.ak-liste{display:grid;gap:10px}
.ak-satir{display:grid;grid-template-columns:minmax(210px,258px) 1fr auto;
  align-items:center;gap:18px;padding:13px 16px;background:#fff;
  border:1px solid var(--cizgi);border-radius:var(--r);
  transition:border-color var(--hiz),box-shadow var(--hiz)}
.ak-satir:hover{border-color:var(--cizgi-koyu);box-shadow:var(--golge-1)}
.ak-ana{display:flex;align-items:center;gap:13px;min-width:0}
.ak-foto{display:grid;place-items:center;flex:none;width:56px;height:56px;padding:4px;
  background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-s)}
.ak-foto img{max-width:100%;max-height:100%;object-fit:contain}
.ak-foto i{display:block;width:28px;height:28px;color:var(--ikon-yedek)}
.ak-foto i svg{width:100%;height:100%;display:block}
.ak-ad{display:flex;flex-direction:column;gap:2px;min-width:0}
.ak-ad b{font-family:var(--basli);font-size:18px;font-weight:700;line-height:1.1;
  text-transform:uppercase;letter-spacing:-.005em;color:var(--navy);
  transition:color var(--hiz)}
.ak-ad em{font-style:normal;font-size:12.5px;color:var(--tx-3);
  font-variant-numeric:tabular-nums}
.ak-ana:hover .ak-ad b{color:var(--kirmizi)}

/* Aileler ayrı bağlantı: dizinden iki seviye aşağıya tek tıkla inilir. */
.ak-aileler{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.ak-aileler a{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border:1px solid var(--cizgi);border-radius:999px;background:var(--zemin-yumusak);
  font-size:12.5px;color:var(--tx-2);white-space:nowrap;
  transition:border-color var(--hiz),color var(--hiz),background var(--hiz)}
.ak-aileler a span{font-size:11px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.ak-aileler a:hover{background:#fff;border-color:var(--navy);color:var(--navy)}
.ak-aileler a:hover span{color:var(--navy)}
.ak-fazla{background:none !important;border-style:dashed !important;color:var(--tx-3) !important}

.ak-tumu{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--kirmizi);transition:gap var(--hiz)}
.ak-tumu .ok{width:15px;height:15px}
.ak-satir:hover .ak-tumu{gap:9px}

/* Bu kategorideki markalar — marka Karsen'de satın alma kriteri */
.ak-markalar{display:flex;flex-wrap:wrap;gap:10px}
.ak-marka{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;gap:11px;padding:9px 16px;
  background:#fff;border:1px solid var(--cizgi);border-radius:var(--r);
  transition:border-color var(--hiz),box-shadow var(--hiz)}
.ak-marka:hover{border-color:var(--navy);box-shadow:var(--golge-1)}
/* Marka logosu GRİ FİLTRE ALTINDA DEĞİL: WAGO'nun logosu zaten açık tonlu,
   grayscale+opacity ile beyaz zeminde neredeyse kayboluyordu (ekran
   görüntüsü, 16 Eyl). Marka varlıkları olduğu gibi basılır. */
/* Yükseklik logoya göre değişir (--oy, gorunum.js ROZET_LOGO ölçümü) ama
   KUTU sabit kalır; yoksa satırdaki kutular farklı boyda olup basamak yapar. */
.ak-marka img{height:var(--oy,22px);width:auto;max-width:96px;object-fit:contain}
.ak-marka b{font-family:var(--basli);font-size:16px;text-transform:uppercase;
  color:var(--navy)}
.ak-marka span{font-size:12px;color:var(--tx-3);font-variant-numeric:tabular-nums}

@media (max-width:860px){
  .ak-satir{grid-template-columns:1fr;gap:11px}
  .ak-tumu{justify-self:start}
  .gb-ara{max-width:none}
  .gb-ara button{padding:0 14px;font-size:14px}
}

/* 2) ALT KATEGORİ AFİŞLERİ — KALDIRILDI (16 Eyl).
   Fotoğraf üstüne yazı basan afiş kartlarıydı; "KABLO BAĞI" açık gri
   fotoğraf üstünde okunmuyordu. Yerine .ak-liste (yukarıda) geldi:
   metin fotoğrafın YANINDA, beyaz zeminde. Ölçüm ve gerekçe:
   ANA_KATEGORI_DNA.md ③ */

/* ── KATEGORİ ŞERİDİ (.ks-*) — KALDIRILDI (16 Eyl) ──────────────────────
   Sol kimlik paneli + sağ ürün rafı bileşeniydi; üç turda da Erhan'ın
   barına gelmedi: *"O container'ı ben sevmedim, anasayfadaki gibiler
   yapalım."* Yerine anasayfanın ONAYLI deseni kullanılıyor:
   .raf-duzen + .raf-afis (aşağıda, anasayfa bölümünde tanımlı).
   Ara banner (.ks-ara / .yb) duruyor — o ayrı bir istekti. */

/* ── ARA BANNER — iki kategoride bir yönlendirme (Erhan, 16 Eyl) ─────────
   Birincisi gruptaki en büyük markanın onaylı afişi (marka Karsen'de satın
   alma kriteri), ikincisi proje bazlı teklif çağrısı (B2B'de asıl dönüşüm
   kanalı WhatsApp). Şeritlerin arasına nefes de veriyor. */
.ks-ara{padding:10px 0 22px}
.yb{position:relative;display:block;overflow:hidden;border-radius:var(--r-l);
  background:var(--navy);min-height:196px;
  transition:box-shadow var(--hiz),transform var(--hiz)}
.yb:hover{box-shadow:var(--golge-3);transform:translateY(-2px)}
.yb-foto{position:absolute;inset:0 0 0 auto;width:58%;height:100%;object-fit:cover}
.yb::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 34%,
             rgba(22,32,48,.88) 54%,rgba(22,32,48,.26) 82%,rgba(22,32,48,.08) 100%)}
.yb-ic{position:relative;z-index:2;padding:30px 34px;max-width:620px}
.yb-ustlik{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ters-tx-3);margin-bottom:8px}
.yb h3{font-family:var(--basli);font-size:clamp(21px,2.2vw,29px);line-height:1.06;
  color:#fff;text-transform:uppercase;letter-spacing:-.012em;margin:0 0 9px}
.yb p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ters-tx-2);max-width:54ch}
.yb-dugme{display:inline-flex;align-items:center;gap:8px;margin-top:17px;
  height:40px;padding:0 18px;border-radius:var(--r);
  background:var(--kirmizi);color:#fff;font-size:13.5px;font-weight:600;
  transition:background var(--hiz)}
.yb-dugme .ok{width:16px;height:16px}
.yb:hover .yb-dugme{background:var(--kirmizi-koyu)}
/* Teklif bandının fotoğrafı yok: derinlik gradyanla kuruluyor */
.yb-teklif{background:linear-gradient(140deg,var(--navy-2) 0%,var(--navy) 52%,var(--navy-3) 100%)}
.yb-teklif::after{background:radial-gradient(520px 280px at 86% 62%,rgba(182,33,38,.32),transparent 70%)}

@media (max-width:760px){
  .yb-foto{width:100%;opacity:.26}
  .yb::after{background:linear-gradient(180deg,rgba(22,32,48,.72),var(--navy) 74%)}
  .yb-ic{padding:22px 20px;max-width:none}
}

/* ── METİN KATMANI (SEO) ─────────────────────────────────────────────────
   Ölçüm (16 Eyl): Star Akım /aydinlatma 2.142 kelime · 12×H2 · 5×H3 · 0 tablo;
   Endüstriyel Market /guc-salterleri 2.135 kelime · 0 tablo. İkisinin de
   metni jenerik ("Yaşam alanlarının dekorasyonunda kuşkusuz…"). Derinliği
   alıyoruz, boşluğu almıyoruz: buradaki her sayı katalogdan türetiliyor.

   Tipografi referanstan DAHA İYİ olacak: onlarda gövde 13px/1,34 satır
   yüksekliği — 2.000 kelime o sıkışıklıkta okunmuyor. Bizde 15px/1,75 ve
   okuma genişliği 900px'te sabit (tam genişlik satır göz yorar). */
.ky{background:#fff;padding:46px 0 54px}
/* 26 Eyl (Erhan "sola çok yapışık"): .ky-ic'in yatay dolgusu yoktu → 900px
   altında (tüm mobil) metin kenara yapışıyordu. .kap ile aynı 20px iç boşluk. */
.ky-ic{max-width:900px;margin:0 auto;padding:0 20px}
.ky h2{font-family:var(--basli);font-size:27px;line-height:1.1;color:var(--navy);
  text-transform:uppercase;letter-spacing:-.01em;
  margin:38px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--navy)}
.ky h2:first-child{margin-top:0}
.ky h3{font-family:var(--basli);font-size:19px;line-height:1.15;color:var(--navy);
  text-transform:uppercase;letter-spacing:-.005em;margin:28px 0 9px}
.ky p{margin:0 0 13px;font-size:15px;line-height:1.75;color:var(--tx-2)}
.ky-giris{font-size:16.5px;line-height:1.72;color:var(--tx)}
.ky ul{margin:0 0 16px;padding-left:19px}
.ky li{margin-bottom:5px;font-size:14.5px;line-height:1.7;color:var(--tx-2)}
.ky li b{color:var(--navy)}
.ky a{color:var(--kirmizi);font-weight:500;transition:color var(--hiz)}
.ky a:hover{color:var(--kirmizi-koyu);text-decoration:underline;text-underline-offset:3px}
/* Katalogdan türeyen veri cümleleri ayrı bir yüzeyde: okuyucu "bu sayfa
   bana gerçek envanteri veriyor" ayrımını görsün. */
.ky-veri{background:var(--zemin-yumusak);border-left:3px solid var(--kirmizi);
  border-radius:0 var(--r) var(--r) 0;padding:13px 16px;font-size:14.5px !important}
.ky-veri b{color:var(--navy);font-variant-numeric:tabular-nums}
.ky-adet{font-size:11.5px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.ky-ust{margin-top:26px;padding-top:16px;border-top:1px solid var(--cizgi);
  font-size:14px;color:var(--tx-3)}
/* SSS — soru başlığı h4, cevap p. Sorular okunurken taranıyor, o yüzden soru
   koyu/navy ve cevaptan ayrık; h3'ten küçük kalıyor ki başlık sırası bozulmasın.
   Ayırıcı çizgi soru başına: blok tek bir gri kutu gibi görünmesin. */
.ky-sss{margin:4px 0 0}
/* text-transform:none — sitedeki h1-h4 kuralı büyük harf, ama SORU cümlesi
   cümle olarak okunur, etiket gibi taranmaz. Büyük harfte "OTOMATİK SİGORTALAR
   KOLİ BAZINDA MI SATILIYOR?" bağırıyor gibi duruyordu (iki render karşılaştırıldı).
   Barlow Condensed + navy kalıyor, yani Karsen sesi bozulmuyor. */
.ky-sss h4{font-family:var(--basli);font-size:17px;line-height:1.3;
  color:var(--navy);text-transform:none;letter-spacing:0;margin:20px 0 6px;
  padding-top:16px;border-top:1px solid var(--cizgi)}
.ky-sss h4:first-child{padding-top:0;border-top:0;margin-top:10px}
.ky-sss p{margin:0;font-size:14.5px;line-height:1.75;color:var(--tx-2)}
/* Ana kategori SSS'i h3 kullanıyor (orada başlık sırası h2>h3) — aynı ses. */
.ky-sss h3{text-transform:none;letter-spacing:0;font-size:17px;
  margin:20px 0 6px;padding-top:16px;border-top:1px solid var(--cizgi)}
.ky-sss h3:first-child{padding-top:0;border-top:0;margin-top:10px}

.ky-tablo-sar{overflow-x:auto;margin:20px 0 28px;
  border:1px solid var(--cizgi);border-radius:var(--r)}
.ky-tablo{width:100%;border-collapse:collapse;font-size:13.5px}
.ky-tablo thead th{background:var(--navy);color:#fff;font-family:var(--basli);font-size:12.5px;
  font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  text-align:left;white-space:nowrap;padding:10px 12px}
.ky-tablo tbody th{text-align:left;font-weight:600;color:var(--navy);padding:9px 12px;
  border-top:1px solid var(--cizgi);white-space:nowrap}
.ky-tablo td{padding:9px 12px;border-top:1px solid var(--cizgi);color:var(--tx-2)}
.ky-tablo tbody tr:hover th,.ky-tablo tbody tr:hover td{background:var(--zemin-yumusak)}
.ky-sayi{font-variant-numeric:tabular-nums;white-space:nowrap}
.ky-yok{color:var(--tx-3)}

@media (max-width:760px){
  .ky{padding:32px 0 36px}
  .ky h2{font-size:23px;margin:28px 0 12px}
  .ky h3{font-size:17px}
}

/* 3) seçim rehberi — koyu, sayfanın ayırt edici bölümü */
.gs-rehber{background:var(--navy-2);color:#fff;padding:44px 0}
.gs-rehber-bas{margin-bottom:22px}
.gs-rehber-bas h2{font-family:var(--basli);font-size:24px;text-transform:uppercase;
  letter-spacing:-.01em;color:#fff;margin:0 0 6px}
.gs-rehber-bas p{font-size:13.5px;color:var(--ters-tx-2);margin:0}
.gs-rehber-liste{display:grid;gap:14px}
.gs-rehber-liste.s1{grid-template-columns:minmax(268px,460px)}
.gs-rehber-liste.s2{grid-template-columns:repeat(2,1fr)}
.gs-rehber-liste.s3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){ .gs-rehber-liste.s3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .gs-rehber-liste.s2,.gs-rehber-liste.s3{grid-template-columns:1fr} }
.gs-rehber-kart{padding:18px;border-radius:var(--r-m);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.gs-rehber-kart h3{display:flex;align-items:center;gap:9px;font-family:var(--basli);
  font-size:15.5px;text-transform:uppercase;color:#fff;margin:0 0 11px}
.gs-rehber-kart h3 i{width:19px;height:19px;flex:none;color:var(--kirmizi)}
.gs-rehber-kart h3 i svg{width:100%;height:100%;display:block}
.gs-rehber-kart ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gs-rehber-kart li{position:relative;padding-left:15px;font-size:13px;line-height:1.5;
  color:var(--ters-tx-2)}
.gs-rehber-kart li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--kirmizi)}

@media (max-width:760px){
  .gb{min-height:0}
  .gb-foto{width:100%;opacity:.3}
  .gb.gorselli::after{background:linear-gradient(180deg,rgba(22,32,48,.7),var(--navy) 72%)}
  .gb-ic{padding:24px 20px;max-width:none}
}

/* ── güven bandı (14 Eyl) ────────────────────────
   Banner'ın hemen altı. Eski "marka + ürün sayısı" şeridinin yerini aldı.
   5 madde tek satır; dar ekranda 3 -> 2 -> 1 sütuna iner. Kart gölgesi YOK:
   banner ile fırsat rafı arasında sessiz bir ayraç olmalı, üçüncü bir
   "kart katmanı" daha eklenirse sayfa ritmi bozuluyor. */
.guven-bant{background:var(--zemin);border-bottom:1px solid var(--cizgi)}
.guven-bant .kap{padding-top:18px;padding-bottom:18px}
.gb-liste{list-style:none;margin:0;padding:0;display:grid;gap:14px 26px;
  grid-template-columns:repeat(5,1fr)}
.gb-oge{display:flex;align-items:flex-start;gap:11px;min-width:0}
.gb-ikon{width:26px;height:26px;flex:none;color:var(--kirmizi);margin-top:1px}
.gb-ikon svg{width:100%;height:100%;display:block}
.gb-metin{min-width:0}
.gb-metin b{display:block;font-size:13.5px;font-weight:650;color:var(--tx-1);
  line-height:1.3;letter-spacing:-.01em}
.gb-metin span{display:block;margin-top:3px;font-size:12px;line-height:1.45;
  color:var(--tx-3)}
@media (max-width:1180px){
  .gb-liste{grid-template-columns:repeat(3,1fr)}
  .gb-oge:nth-child(n+4){display:flex}
}
/* 26 Eyl (Erhan: "burayı 2x2 yap" + "5. maddeyi kaldır daha nizami durur"):
   mobilde 2 sütun ve 5. madde (Hafta içi destek) gizli → tam 2x2 (4 madde). */
@media (max-width:760px){ .gb-liste{grid-template-columns:repeat(2,1fr);gap:12px 16px}
  .gb-oge:nth-child(5){display:none} }
/* Fırsat rafı 3'lü olunca ≤430px'te kart ~95-113px; en uzun koli rozeti
   ("100'lü koli") + %rozeti çakışıyordu (ölçüldü: 18px bindirme @360). Sadece
   bu 3'lü rafta rozetler küçülür ki çakışma bitsin (2'li kategori rafları
   dokunulmaz). Rozet küçük ama okunur — 3'lü Erhan'ın açık isteği. */
/* ≤430px'te TÜM 3'lü grid'lerde (fırsat rafı + kategori rafları + kategori/arama
   sayfası grid'i) kart ~95-105px'e düşüyor. Bu grid'lerdeki rozet/fiyat/dolgu
   ufaltılır ki çakışma/kırılma olmasın. Scope grid'lere sabit — .f-net ürün
   DETAY sayfasında da var, onu ufaltmamak için generic YAZILMAZ. */
@media (max-width:430px){
  .urun-serit .rozet-sol,.raf .rozet-sol,.izgara .rozet-sol{font-size:8px;padding:2px 5px;letter-spacing:0}
  .urun-serit .rozet-sag,.raf .rozet-sag,.izgara .rozet-sag{font-size:8px;padding:2px 5px}
  .urun-serit .kart-govde,.raf .kart-govde,.izgara .kart-govde{padding:7px 7px 8px}
  .urun-serit .kart-alt,.raf .kart-alt,.izgara .kart-alt{padding:0 7px 8px}
  /* 95px kartta 5 haneli net fiyat ("14.058,00 ₺") 18px'te 2 satıra kırılıyordu;
     ufaltılıp tek satırda tutulur (fiyat = en kritik bilgi, kırılmasın). */
  .urun-serit .f-net,.raf .f-net,.izgara .f-net{font-size:15px;white-space:nowrap}
  .urun-serit .f-liste,.raf .f-liste,.izgara .f-liste{font-size:10px}
  .urun-serit .kart-alt .dugme,.raf .kart-alt .dugme,.izgara .kart-alt .dugme{font-size:11px}
}

/* ── mega menü ─────────────────────────────────── */
.menu{background:var(--navy);border-bottom:3px solid var(--kirmizi);position:relative;z-index:40}
.menu .kap{display:flex;align-items:center;max-width:min(98vw,1560px)}
.mm-liste{list-style:none;margin:0;padding:0;display:flex;flex:1;min-width:0}
/* "Tüm kategoriler" — şeride sığmayan kategorilerin tam listesi burada */
.mm-tum{position:relative;flex:none}
.mm-tum-bas{display:flex;align-items:center;gap:9px;height:58px;padding:0 18px 0 16px;
  border:0;background:var(--kirmizi);color:#fff;font-family:var(--basli);font-size:14px;
  letter-spacing:.02em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.mm-tum-bas svg{width:19px;height:19px}
.mm-tum-bas:hover,.mm-tum-bas[aria-expanded="true"]{background:var(--kirmizi-koyu)}
.mm-tum-panel{position:absolute;left:0;top:100%;z-index:60;min-width:290px;
  background:#fff;border:1px solid var(--cizgi);border-top:0;
  border-radius:0 0 var(--r) var(--r);box-shadow:var(--golge-3);padding:8px}
.mm-tum-panel a{display:flex;align-items:center;gap:11px;padding:9px 12px;
  border-radius:var(--r-s);color:var(--tx);font-size:13.5px;font-weight:500}
.mm-tum-panel a:hover{background:var(--zemin-alt);color:var(--kirmizi)}
.mm-tum-panel i{display:grid;place-items:center;width:22px;height:22px;color:var(--kirmizi);flex:none}
.mm-tum-panel i svg{width:19px;height:19px}

/* ── mega menü: grup paneli içinde kategori kolonları ──
   Menü artık üst grup gösteriyor; panelde o grubun kategorileri ve her
   kategorinin ilk alt grupları sütun sütun duruyor. */
.mm-not{font-size:12px;color:var(--ters-tx-2);line-height:1.55;margin:6px 0 12px}
.mm-kat{display:flex;flex-direction:column;gap:1px;min-width:0}
.mm-kat-bas{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-family:var(--basli);font-size:13.5px;text-transform:uppercase;letter-spacing:.01em;
  color:var(--navy);padding:6px 9px;margin:0 -9px 4px;border-radius:var(--r-s);
  border-bottom:1px solid var(--cizgi)}
.mm-kat-bas em{font-style:normal;font-size:11px;font-weight:600;color:var(--tx-3)}
.mm-kat-bas:hover{background:var(--zemin-alt);color:var(--kirmizi)}
.mm-kat .mm-aile{font-size:12.5px;padding:5px 9px}
.mm-kat .mm-daha{color:var(--kirmizi);font-weight:600}
.mm-oge{position:static}
/* MENU OGE OLCUSU — TEK DEGER, MEDYA SORGUSU YOK (16 Eyl).
   ONCEKI HALI EKRAN GENISLIGINE GORE BUYUYORDU: 1880 ve 1400px'te iki ayri
   medya sorgusu vardi. Ama menunun kabi --en:1320px ile HER EKRANDA AYNI;
   kisit ekran degil KAP. Sonuc olculdu:
       1920 -> 1576px icerik / 1280px kap = 296px TASMA
       1600 -> 1334 / 1280 = 54px tasma
       1440 -> 1334 / 1280 = 54px tasma
       1366 -> 1211 / 1280 = SIGIYOR   (en sikisik degerler devrede)
   Yani sadece kucuk ekranda duzgun, buyuk ekranda bozuktu — Erhan 1920'de
   bakinca menu kabin disina tasiyordu. Sikisik degerler artik TEMEL:
   10 grup 1211px, her ekranda sigar. */
.mm-bas{display:flex;align-items:center;gap:5px;height:58px;padding:0 6px;color:var(--cizgi-koyu);
  font-size:12px;font-weight:700;white-space:nowrap;position:relative;
  transition:color var(--hiz),background var(--hiz)}
.mm-bas::after{content:'';position:absolute;left:4px;right:4px;bottom:0;height:2px;
  background:var(--kirmizi);transform:scaleX(0);transform-origin:left;
  transition:transform var(--hiz)}
.mm-oge:hover .mm-bas,.mm-oge:focus-within .mm-bas,.mm-bas[aria-current]{color:#fff;background:var(--navy-2)}
.mm-oge:hover .mm-bas::after,.mm-oge:focus-within .mm-bas::after,
.mm-bas[aria-current]::after{transform:scaleX(1)}
.mm-ikon{width:18px;height:18px;flex:none;color:var(--ters-tx-2);transition:color var(--hiz)}
.mm-ikon svg{width:100%;height:100%;display:block}
.mm-oge:hover .mm-ikon,.mm-oge:focus-within .mm-ikon{color:var(--kirmizi)}
.mm-bas em{font-style:normal;font-size:11px;color:var(--ters-tx-3);font-variant-numeric:tabular-nums}
.mm-oge:hover .mm-bas em{color:var(--ters-tx-2)}
.mm-ok{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);opacity:.55;transition:transform var(--hiz),opacity var(--hiz)}
.mm-oge:hover .mm-ok,.mm-oge:focus-within .mm-ok{transform:rotate(225deg) translate(-3px,-3px);opacity:1}
/* Menü 10 üst gruba çıkınca (14 Eyl: +Tesisat ve Priz, +Diafon) 1440px'te
   satır 1577px istiyor, kap 1280px idi -> SAYFA YATAY KAYIYORDU. mm-oge'nin
   paneli mutlak konumlu olduğu için nav'a overflow-x VERİLEMEZ (panel kırpılır);
   çözüm dar ekranda satırı sıkmak. Doğrulama: puppeteer ile her kırılma
   noktasında scrollWidth === clientWidth ölçülür. */
@media (max-width:1880px){
  /* Menu olcusu artik temelde sikisik — bu iki medya sorgusu kaldirildi
     (bkz. .mm-bas yorumu). Burada baska bir sey varsa duruyor. */
}
/* !! 24 Eyl 2026 gece denetimi — MENU 11 GRUBA CIKINCA YENIDEN TASTI.
   Base sikisik degerler 10 grup icin ayarliydi (Kablo, Pano, Salt, Motor,
   Kumanda, Konum, Role, Aydinlatma, PCB, Tesisat). 14 Eyl'de Diafon eklenince
   11 oldu; 11 oge = 1395px, menu kabi 1280px. Olcum (puppeteer, 91 kombinasyon):
       1600+ -> sigiyor (kab ortali, bol bosluk)
       1440  -> ~15px tasma
       1366  -> ~80px tasma  (en yaygin dizustu!)
   Panel mutlak konumlu oldugu icin nav'a overflow-x verilemez (panel kirpilir);
   cozum dar ekranda satiri SIKMAK. 1460px alti: padding/gap/ikon kucultulur,
   ~110px kazanilir, 11 oge 1366'da sigar. Genis ekran (1600/1920) etkilenmez.
   Dogrulama: her kirilma noktasinda scrollWidth === clientWidth olculdu. */
@media (max-width:1460px){
  .mm-bas{padding:0 3px;gap:3px}
  .mm-ikon{width:16px;height:16px}
}
@media (max-width:1360px){
  /* 1280-1360 arasi son daralma — ikon gizlenir, sadece metin kalir. */
  .mm-bas{padding:0 3px;font-size:11.5px}
  .mm-ikon{display:none}
}

.mm-panel{position:absolute;left:0;right:0;top:100%;background:#fff;
  border-bottom:1px solid var(--cizgi);box-shadow:var(--golge-3);
  opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
  transition:opacity .2s ease,transform .2s cubic-bezier(.22,1,.36,1),visibility .2s}
.mm-oge:hover .mm-panel,.mm-oge:focus-within .mm-panel{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
/* 12 Eylül: ızgara 216px 1fr 230px idi — üçüncü sütun eski "marka listesi"
   (.mm-sag) için ayrılmıştı, o blok markup'tan kaldırılmış ama CSS'te kalmıştı.
   Sonuç: her mega panelin sağında 230px+34px = 264px ÖLÜ boşluk. İki sütuna
   indirildi; orta sütun artık paneli gerçekten dolduruyor. */
.mm-ic{max-width:var(--en);margin:0 auto;padding:22px 20px 26px;
  /* Çok kategorili grup (ör. Şalt ve Koruma = 9 kart) panel viewport'u aşmasın:
     yükseklik sınırlı, taşarsa panel İÇİNDE kayar (alt satır fold altında kalmaz). */
  max-height:calc(100vh - 176px);overflow-y:auto}

/* ── MEGA MENÜ KART DÜZENİ (24 Eyl 2026, Erhan) ─────────────────────────
   Her kategori bir KART: üstte afiş fotoğrafı + ikon + ad + "N ürün" rozeti,
   altında aileler düz link. Eski sol panel (ikon+başlık+açıklama+Tümünü gör)
   ve kolon-akışı kaldırıldı. Kartlar sola dayalı, sabit ~270px genişlikte —
   az kategoride gerilmez, çok kategoride satır atlar. Kurallar .mm-kartlar
   altında (yüksek özgüllük) → eski dağınık .mm-kat / .mm-kat-bas kuralları
   ölür, ayrıca temizlemeye gerek kalmadan geçersiz kalır. */
.mm-kartlar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;align-items:stretch}
/* Satır başına SABİT 5 kart (Erhan 24 Eyl: "her satıra 5 kart sığdır").
   Menü zaten ≤1240px'te hamburger'a düşüyor, panel --en=1320 ile sınırlı →
   5 sütun her masaüstünde ~227-243px kart = rahat. Az kartlı grup (Kablo=2)
   ilk 2 track'i doldurur, gerisi boş — sola dayalı, gerilmez. */
.mm-kartlar .mm-kat{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;margin:0;
  transition:border-color var(--hiz),box-shadow var(--hiz),transform var(--hiz)}
.mm-kartlar .mm-kat:hover{border-color:var(--navy);box-shadow:var(--golge-2);transform:translateY(-2px)}
/* foto başlık — kategori banner'ın küçük hâli: koyu zemin, foto tam kaplar,
   alta doğru karartma, ikon+ad+sayaç sol altta. Afiş yoksa .gorselli yok →
   düz açık zeminli başlık (fallback). */
.mm-kartlar .mm-kat-bas{display:flex;align-items:center;gap:11px;padding:14px 17px;margin:0;
  border-bottom:1px solid var(--cizgi);min-width:0}
/* ⚠ margin:0 ŞART — eski .mm-kat-bas kuralında margin:0 -9px var, override
   edilmezse başlık karttan 9px taşıyor ve ikon sol kenara yapışıyor (6px). */
.mm-kartlar .mm-kat-bas.gorselli{position:relative;min-height:92px;align-items:flex-end;
  border-bottom-color:transparent;
  background:linear-gradient(120deg,var(--navy-3),var(--navy) 60%,var(--navy-2))}
.mm-kartlar .mm-kat-bas.gorselli::before{content:'';position:absolute;inset:0;
  background:var(--bg) center/cover no-repeat;transition:transform .5s cubic-bezier(.22,.8,.3,1)}
.mm-kartlar .mm-kat-bas.gorselli::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,14,20,.12) 0%,rgba(10,14,20,.34) 44%,rgba(10,14,20,.88) 100%),
    linear-gradient(100deg,rgba(10,14,20,.66) 0%,rgba(10,14,20,.22) 46%,transparent 74%)}
.mm-kartlar .mm-kat:hover .mm-kat-bas.gorselli::before{transform:scale(1.05)}
.mm-kartlar .mm-kat-bas > *{position:relative;z-index:1}
.mm-kk-gorsel{flex:none;width:30px;height:30px;display:grid;place-items:center;
  background:var(--zemin-alt);border-radius:8px;color:var(--kirmizi)}
.mm-kat-bas.gorselli .mm-kk-gorsel{background:var(--kirmizi);color:#fff;
  box-shadow:0 6px 16px -6px rgba(182,33,38,.8)}
.mm-kk-gorsel i{display:grid;place-items:center}
.mm-kk-gorsel svg{width:24px;height:24px}
.mm-kk-ad{display:flex;flex-direction:column;gap:2px;min-width:0}
.mm-kk-ad b{font-family:var(--basli);font-size:13.5px;color:var(--navy);text-transform:uppercase;
  letter-spacing:.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-kat-bas.gorselli .mm-kk-ad b{color:#fff}
.mm-kk-ad em{font-style:normal;font-size:11.5px;color:var(--kirmizi);font-weight:600;
  display:inline-flex;align-items:center;gap:5px}
.mm-kat-bas.gorselli .mm-kk-ad em{color:var(--ters-tx)}
.mm-kk-ad em svg{width:12px;height:12px}
.mm-kat-liste{display:flex;flex-direction:column;padding:6px 14px 9px}
.mm-kat-liste a{font-size:12.5px;color:var(--tx-2);padding:3px 0;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--hiz)}
.mm-kat-liste a:hover{color:var(--kirmizi)}
.mm-kat-liste .mm-daha{color:var(--kirmizi);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.mm-kat-liste .mm-daha svg{width:12px;height:12px}
.mm-ic > .mm-arac{margin-top:16px}

.mm-sol{border-right:1px solid var(--cizgi);padding-right:26px}
.mm-buyuk-ikon{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r);
  background:var(--zemin-alt);color:var(--kirmizi);margin-bottom:13px}
.mm-buyuk-ikon svg{width:26px;height:26px}
.mm-sol h3{font-size:20px;color:var(--navy);margin-bottom:6px}
.mm-sol p{margin:0 0 15px;font-size:12.5px;color:var(--tx-3)}
.mm-tumu{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--kirmizi);transition:gap var(--hiz)}
.mm-tumu svg{width:15px;height:15px}
.mm-tumu:hover{gap:11px}
/* Kablo grubundaki araç bağlantısı: "Tümünü gör"den ayrışsın diye çerçeveli */
.mm-arac{display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  padding:7px 11px;border:1.5px solid var(--navy);border-radius:var(--r-s);
  font-size:12.5px;font-weight:700;color:var(--navy);
  transition:background var(--hiz),color var(--hiz)}
.mm-arac svg{width:15px;height:15px}
.mm-arac:hover{background:var(--navy);color:#fff}

/* MEGA PANEL IZGARASI — sutunlar GERILMEZ (16 Eyl olculerek duzeltildi).
   Onceki hali: repeat(var(--sutun), minmax(0,1fr)). Tek kategorili grupta
   (Kablo, Aydinlatma, Diafon) tek sutun 1030px'e geriliyor ve icinde 2 bagti
   duruyordu — panelin %80'i bos. Bes kategorili Pano Baglanti'da ise 3 sutunlu
   izgara 2. satirda BOS HUCRE birakiyordu (5 kategori / 3 sutun).
   Izgara yerine KOLON AKISI: tarayici bloklari kolonlara dagitirken
   yukseklikleri dengeler, bos hucre diye bir sey kalmaz. Sutun genisligi
   ust sinirli (272px) — az kategori az yer kaplar, panel gerilmez. */
.mm-orta{columns:var(--sutun,1) 272px;column-gap:26px}
.mm-kat{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:18px}
/* Grupta TEK kategori varsa (Kablo, Aydinlatma, Diafon) blok butun genisligi
   kapliyor ve panelin %80'i bos kaliyordu.
   ⚠️ ILK DENEME KOTUYDU: blogun kendisini kolonlara BOLDURDUM
   (break-inside:auto). Baslik 1. kolonda tek basina kaldi, aile listesi
   kopuk sekilde 2-3. kolona akti — baslikla bagi kopmus gorunuyordu.
   DOGRUSU: blok butun kalir, ICINDEKI AILE LISTESI kolonlara akar.
   Baslik ustte tam genislikte durur. */
/* display:block SART — .mm-kat normalde flex kutu, cok-kolon flex kapsayicida
   CALISMAZ. Bunu yazmadan once kolonlar hic olusmadi (olculdu: 8 aile, tek
   sol kenar). */
/* column-count:3 (genislik VERILMEZ). "columns:3 220px" yazinca tarayici
   1030px'e 4 kolon sigdirip her birini ~163px yapiyordu ve aile adlari
   kesiliyordu ("LED Panel — Sıv..."). Sabit 3 kolon = ~326px, metin sigar. */
.mm-orta:has(.mm-kat:only-child) .mm-kat{display:block;column-count:3;column-gap:26px}
.mm-orta:has(.mm-kat:only-child) .mm-kat-bas{column-span:all}
.mm-orta:has(.mm-kat:only-child) .mm-aile{break-inside:avoid}
/* (Ilk denemeden kalan --sutun:1 kurallari SILINDI: .mm-aile'yi
   inline-flex %50 yapip kolon akisini bozuyorlardi — 3 kolon istenirken
   ekranda 4 dar kolon cikiyor, aile adlari kesiliyordu.) */
/* IKON YERI HER ZAMAN AYRILIR. Once ikonu olan aile (or. "Push-in
   Klemensler") ikonu olmayanlardan 26px saga kayiyordu; sol kenar tirtikli
   goruniyordu. Bos ikon kutusu ayni genisligi tutar, hiza bozulmaz. */
.mm-aile{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:var(--r-s);
  font-size:13.5px;color:var(--tx-2);transition:background var(--hiz),color var(--hiz)}
.mm-aile::before{content:'';flex:none;width:16px;height:16px;order:-1}
.mm-aile:has(.mm-aile-ikon)::before{display:none}
/* Ikon kutusu, yukarida ayrilan bos yerle AYNI olcude olmali; yoksa hiza
   yine kayar. Bu sinifin hic CSS kurali yoktu — SVG kendi olcusunde
   geliyordu ve ikonlu satir 16px saga kayiyordu (olculdu). */
.mm-aile-ikon{display:grid;place-items:center;flex:none;width:16px;height:16px;color:var(--tx-3)}
.mm-aile-ikon svg{width:16px;height:16px}
.mm-aile span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-aile em{font-style:normal;font-size:11.5px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.mm-aile:hover{background:var(--zemin-yumusak);color:var(--navy)}
.mm-daha{color:var(--kirmizi);font-weight:600}

/* (.mm-sag / .mm-marka kuralları 12 Eylül'de silindi — markup'ta karşılığı yoktu) */
.mm-not{display:flex;gap:9px;align-items:flex-start;margin-top:16px;padding:12px;
  background:var(--zemin-yumusak);border-radius:var(--r);font-size:12px;color:var(--tx-3);
  line-height:1.5}
.mm-not svg{width:17px;height:17px;flex:none;color:var(--navy);margin-top:1px}

.mm-hamburger{display:none;align-items:center;gap:9px;height:52px;padding:0 14px;border:0;
  background:transparent;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}
.mm-hamburger svg{width:20px;height:20px}

/* mobil çekmece */
.mm-mobil{position:fixed;inset:0;z-index:200;background:#fff;overflow-y:auto}
.mm-mobil[hidden]{display:none}
.mm-mobil-bas{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--cizgi);position:sticky;top:0;background:#fff}
.mm-mobil-bas strong{font-family:var(--basli);font-size:19px;text-transform:uppercase;color:var(--navy)}
.mm-kapat{border:0;background:transparent;cursor:pointer;color:var(--tx-2);padding:6px}
.mm-kapat svg{width:22px;height:22px}
.mm-mobil-ic details{border-bottom:1px solid var(--cizgi)}
.mm-mobil-ic summary{display:flex;align-items:center;gap:11px;padding:14px 18px;cursor:pointer;
  font-size:15px;font-weight:600;color:var(--navy);list-style:none}
.mm-mobil-ic summary::-webkit-details-marker{display:none}
/* 26 Eyl (Erhan: "ikonlar biraz daha belli olsun") — 20px çıplak simge yerine
   34px kırmızı-tint kutu; simge 21px. Ayrıca genişleyen kategoriyi belli eden
   şekil-değiştiren chevron (kapalıyken aşağı, açıkken yukarı). */
.mm-mobil-ic summary i{width:34px;height:34px;display:grid;place-items:center;
  border-radius:9px;background:rgba(182,33,38,.08);color:var(--kirmizi);flex:none}
.mm-mobil-ic summary i svg{width:21px;height:21px}
.mm-mobil-ic summary span{flex:1}
.mm-mobil-ic summary::after{content:'';width:8px;height:8px;flex:none;margin-left:6px;
  border-right:2px solid var(--tx-3);border-bottom:2px solid var(--tx-3);
  transform:translateY(-2px) rotate(45deg);transition:transform var(--hiz)}
.mm-mobil-ic details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.mm-mobil-ic summary em{font-style:normal;font-size:12px;color:var(--tx-3)}
.mm-mobil-ic details a{display:flex;justify-content:space-between;padding:10px 18px 10px 63px;
  font-size:14px;color:var(--tx-2);background:var(--zemin-yumusak)}
.mm-mobil-ic details a em{font-style:normal;font-size:12px;color:var(--tx-3)}
.mm-mobil-tumu{font-weight:600;color:var(--kirmizi) !important}
/* İlk 9 kategorinin altında "Tüm kategoriler" → /kategoriler tam sayfası */
.mm-mobil-hepsi{display:flex;align-items:center;justify-content:center;gap:8px;
  margin:16px 18px 24px;padding:14px;background:var(--kirmizi);color:#fff;
  border-radius:var(--r);font-family:var(--basli);font-size:13.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em}
.mm-mobil-hepsi svg{width:17px;height:17px}

/* arama önerileri */
/* 15 Eki — DAR EKRAN HATASI (Polat'ın bilgisayarı: önerilerde yalnız fiyat görünüyordu).
   Kök neden: kutu genişliği arama girdisine bağlıydı (left:0;right:0). Dar pencere /
   yüksek yakınlaştırma / büyük tarayıcı yazısında girdi ~250 px'e iniyor, resim (40)
   ve fiyat (69) sabit kaldığı için ad+kod sütunu sıfıra yakın eziliyordu. Artık kutu
   en az 560 px (ekranı aşmadan), girdinin ortasına hizalı; geniş ekranda değişmez. */
.oneri{position:absolute;left:50%;right:auto;transform:translateX(-50%);
  width:max(100%, min(560px, calc(100vw - 24px)));top:calc(100% + 6px);background:#fff;
  border:1px solid var(--cizgi);border-radius:var(--r);box-shadow:var(--golge-3);
  overflow:hidden;z-index:60;max-height:min(60vh,420px);overflow-y:auto}
.oneri[hidden]{display:none}
.oneri a{display:flex;align-items:center;gap:12px;padding:10px 13px;border-bottom:1px solid var(--zemin-alt);
  transition:background var(--hiz)}
.oneri a:last-child{border-bottom:0}
.oneri a:hover,.oneri a.secili{background:var(--zemin-yumusak)}
.oneri img{width:40px;height:40px;object-fit:contain;background:var(--zemin-yumusak);
  border-radius:var(--r-s);flex:none}
.oneri .o-ad{flex:1;min-width:0}
.oneri .o-ad b{display:block;font-size:13px;font-weight:500;color:var(--tx);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oneri .o-ad span{display:block;font-size:11.5px;color:var(--tx-3);font-family:ui-monospace,Menlo,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oneri .o-ad span b{display:inline;font-size:inherit;font-weight:700;color:var(--tx)}
.oneri .o-fiyat{flex:none;white-space:nowrap;font-size:13px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.oneri .o-bos{padding:16px;text-align:center;color:var(--tx-3);font-size:13px}

.sepet-rozet{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:100px;background:var(--kirmizi);color:#fff;font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums}
.dugme.koyu .sepet-rozet{background:var(--kirmizi)}
.bas-sag .dugme svg{width:17px;height:17px}
.hesap-dugme{max-width:170px}
.hesap-dugme .hesap-ad{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── anasayfa vitrin bloğu ─────────────────────── */
.vitrin-blok{background:var(--zemin-alt);padding:16px 0 20px}
.vitrin-blok .kap{display:grid;grid-template-columns:236px 1fr 232px;gap:14px;align-items:stretch}

/* slider */
.slayt-alan{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--navy);
  min-height:392px}
.slaytlar{position:relative;height:100%;min-height:392px}
.slayt{position:absolute;inset:0;opacity:0;visibility:hidden;display:block;
  transition:opacity .45s ease,visibility .45s}
.slayt.aktif{opacity:1;visibility:visible}
.slayt img{width:100%;height:100%;object-fit:cover}
/* Görsellerin sol %40'ı bilinçli olarak boş üretildi; metin oraya biner.
   Gradyan, açık kadrajlarda da kontrastı 4.5:1 üstünde tutar. */
/* padding-left 68px: sol ok butonu (14px + 38px) metnin ilk harfini örtüyordu */
/* Vitrin görselleri: katalogdaki GERÇEK ürün fotoğrafı, tek parça.
   Sabit kutu + max-height/max-width → yüzde çözümleme sorunu yok, taşma yok. */
.sy-gorsel,.ma-gorsel,.ra-gorsel{position:absolute;z-index:0;display:grid;
  place-items:center;pointer-events:none}
.sy-gorsel img,.ma-gorsel img,.ra-gorsel img{max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.55))}
.sy-gorsel{right:4%;top:12%;bottom:12%;width:36%}
.ma-gorsel{right:20px;bottom:18px;width:25%;height:42%}

/* ── afiş kompozisyonu: KATALOGDAKİ GERÇEK ürün fotoğrafları ──────
   AI'a ürün çizdirmek katalogda olmayan parçalar üretiyordu. Afişler artık
   3 gerçek ürün fotoğrafından kurulu; boyut ve derinlik farkı kompozisyon
   yaratır, hepsi aynı düzlemde yan yana durmaz. */
.ma-dizi,.ra-dizi{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Referanslı üretilmiş afiş (ürünü referansa sadık basar) kartı kaplar.
   !! 22 Eyl 2026 (Erhan gosterdi): eski yorum "16:9 uretim kart oraninda ONCEDEN
   kirpildigi icin object-position gerekmez" diyordu - DAR EKRANDA DOGRU DEGIL.
   390px genislikte kart ~270px yuksek oluyor (1,26:1); afis 1,78:1 oldugu icin
   cover yanlardan ~%30 kirpiyor ve kenardaki urun YARIM gorunuyor.
   !! Bu dosya bir template literal - yorumda BACKTICK kullanma, string'i kapatir.
   Olculdu: mobilde kacak akim kartinda soldaki cihaz ikiye bolunuyordu.
   Cozum: kirpmayi MERKEZE topla (urunler ortada durur) ve dar ekranda kartin
   kendisini afis oranina yaklastir ki kirpilacak pay kalmasin. */
.ma-afis-bg,.ra-afis-bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;z-index:0}
@media (max-width:640px){
  /* raf-afiş DİKEY posterler (3:4) — KENDİ oranında kalır, ne üstten ne
     yandan kırpılır (22 Eyl kuralı korunuyor: 700x933 poster 16:9'a zorlanınca
     ürünün yarısı gidiyordu). !! Bu dosya template literal - yorumda BACKTICK yok. */
  .raf-afis:has(.ra-afis-bg){min-height:0}
  .raf-afis:has(.ra-afis-bg) .ra-afis-bg{position:relative;height:auto;aspect-ratio:auto}
  .raf-afis:has(.ra-afis-bg) .ra-ic{position:absolute;inset:auto 0 0 0;max-width:100%}
  /* MARKA afişleri (siemens/pelsan/wago) — 26 Eyl KÖK-NEDEN FIX. Önceki 16:9
     dayatması görseli 188px'e kilitliyor, ama içerik (logo+başlık+açıklama+buton)
     231-251px istiyordu → overflow:hidden BUTONU ve son yazı satırını KESİYORDU
     (Erhan'ın ekranında butonlar görünmüyor, "ile yol" yarım kalıyordu). Çözüm:
     görsel yine MUTLAK arka plan (cover), kartı İÇERİK yüksekliği belirler →
     hiçbir şey kesilmez. Açıklama p mobilde gizli (kart zaten <a> link, açıklama
     süs) → kart daha KOMPAKT + buton tam görünür. Ölçekli küçültme. */
  .marka-afis:has(.ma-afis-bg){min-height:0}
  .marka-afis:has(.ma-afis-bg) .ma-afis-bg{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .marka-afis:has(.ma-afis-bg) .ma-ic{position:relative;inset:auto;height:auto;max-width:100%;padding:16px 18px}
  .marka-afis:has(.ma-afis-bg) .ma-logo{height:25px;margin-bottom:9px}
  .marka-afis:has(.ma-afis-bg) h3{font-size:16px;line-height:1.2;margin-bottom:13px;max-width:74%}
  .marka-afis:has(.ma-afis-bg) p{display:none}
  .marka-afis:has(.ma-afis-bg) .ma-dugme{padding:9px 15px;font-size:12.5px}
}
.marka-afis:has(.ma-afis-bg)::before{
  background:linear-gradient(90deg,rgba(8,12,18,.93) 0%,rgba(8,12,18,.76) 44%,
             rgba(8,12,18,.22) 76%,rgba(8,12,18,.08) 100%)}
/* Erhan (12 Eyl): anasayfa marka kartlarinda 3'lu ozellik ikonu gereksiz.
   Once sadece ARKA PLAN GORSELI OLAN kartlarda gizleniyordu; gorseli
   olmayan Oznur karti tek basina ikonlari gosterip siritiyordu (olculdu:
   5 kart display:none, Oznur display:flex). Kosul kaldirildi.
   Marka SAYFASI afisinde (.marka-banner) ikonlar duruyor - orada yerinde. */
.marka-afis .ma-ozellik{display:none}
.marka-afis:has(.ma-afis-bg) p{margin-bottom:auto;max-width:58%}
.raf-afis:has(.ra-afis-bg)::before{
  background:linear-gradient(180deg,rgba(8,12,18,.15) 0%,rgba(8,12,18,.32) 44%,
             rgba(8,12,18,.86) 74%,rgba(8,12,18,.96) 100%)}
.ma-dizi img,.ra-dizi img{position:absolute;object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.62))}
/* marka afişi (yatay kart): büyük ürün sağda, iki küçüğü arkada */
.ma-dizi .md1{right:4%;top:16%;width:40%;height:68%;opacity:1}
.ma-dizi .md2{right:32%;top:36%;width:26%;height:44%;opacity:.55}
.ma-dizi .md3{right:-2%;top:52%;width:24%;height:40%;opacity:.42}
/* kategori rafı (dikey kart): büyük ürün üstte ortada, ikisi altında */
.ra-dizi .rd1{left:12%;right:12%;top:6%;height:44%;width:auto;opacity:1}
.ra-dizi .rd2{left:2%;top:40%;width:44%;height:28%;opacity:.6}
.ra-dizi .rd3{right:2%;top:44%;width:42%;height:26%;opacity:.45}
.ma-gorsel img{border-radius:10px}
/* Afişi olmayan kategoride ürün fotoğrafı kartı taşır — afişli kartlarla
   dengeli dursun diye geniş tutulur (eskiden %22 padding ile cılız kalıyordu). */
.ra-gorsel{left:0;right:0;top:10%;height:52%;padding:0 12%}
/* Banner görselinin sol %45'i bilerek boş üretiliyor → metin oraya oturur.
   Gradyan yalnızca okunabilirliği garantiler, ürünü örtmez. */
.slayt-metin{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;padding:36px 40px 36px 62px;max-width:52%;
  background:linear-gradient(90deg,rgba(10,14,20,.86) 0%,rgba(10,14,20,.55) 62%,transparent 100%)}
.slayt-metin h2{font-size:clamp(24px,2.4vw,34px);color:#fff;line-height:1.12;margin-bottom:10px;
  text-shadow:0 2px 12px rgba(0,0,0,.5)}
.slayt-metin p{font-size:14.5px;color:var(--ters-tx);margin:0 0 20px;max-width:40ch;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
.slayt-yedek{height:100%;position:relative;background:var(--navy);overflow:hidden}
/* Slider: katalogdaki GERCEK urun fotograflari (AI sahne uydurma urun ciziyordu) */
.sy-metin{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:36px 40px 36px 68px;max-width:62%}
.sy-ustlik{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ters-tx-2);font-weight:700;margin-bottom:10px}
.slayt-yedek::before{content:'';position:absolute;inset:0;
  background:radial-gradient(700px 340px at 6% 0%,rgba(182,33,38,.36),transparent 62%),
             radial-gradient(560px 400px at 96% 108%,rgba(56,96,150,.32),transparent 60%)}
/* KALDIRILDI: eski "slayt-yedek > *" kurali .sy-urunler katmanini relative yapip
   inset:0'i etkisiz birakiyordu (yukseklik 0, urun gorunmuyordu).
   Metin katmani zaten .sy-metin ile konumlaniyor. */
.slayt-logo{width:auto !important;height:auto !important;max-height:40px;max-width:190px;
  object-fit:contain !important;margin-bottom:18px;align-self:flex-start;
  filter:brightness(0) invert(1);opacity:.95}
.slayt-fayda{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:6px}
.slayt-fayda li{font-size:13px;color:var(--ters-tx);display:flex;align-items:center;gap:9px}
.slayt-fayda li::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--kirmizi);flex:none}
.sy-metin h2{font-size:clamp(24px,2.4vw,34px);color:#fff;margin-bottom:14px;line-height:1.12}
.slayt-yedek p{font-size:14px;color:var(--cizgi-koyu);margin:0 0 20px;max-width:46ch}
.slayt-dugme{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--kirmizi);color:#fff;padding:11px 20px;border-radius:var(--r);
  font-size:13.5px;font-weight:600;transition:gap var(--hiz)}
.slayt-dugme svg{width:16px;height:16px}
.slayt:hover .slayt-dugme{gap:13px}
.slayt-ok{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;
  border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:23px;
  line-height:1;cursor:pointer;backdrop-filter:blur(6px);
  transition:background var(--hiz),transform var(--hiz)}
.slayt-ok:hover{background:rgba(255,255,255,.3)}
.slayt-ok.sol{left:14px}
.slayt-ok.sag{right:14px}
.slayt-noktalar{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;
  gap:7px;justify-content:center}
/* ⚠ 22 Eyl — dokunma hedefi: noktalar 8×8px'di, parmakla basılamıyordu
   (WCAG 2.5.8 asgari 24px). Görünen nokta 8px KALIR; kutu şeffaf dolguyla
   24×24'e çıkar ve arka plan yalnız içteki daireye uygulanır. */
.slayt-noktalar button{width:24px;height:24px;border-radius:50%;border:0;cursor:pointer;
  padding:8px;box-sizing:border-box;
  /* ⚠ UZUN BİÇİM ŞART: "background" KISAYOLU background-clip'i başlangıç
     değerine (border-box) DÖNDÜRÜR — nerede yazılırsa yazılsın. Önce
     kısayolun önüne koydum, olmadı; sonra arkasına, yine olmadı, çünkü
     .aktif kuralındaki "background:#fff" onu tekrar sıfırlıyordu.
     Çözüm: her iki kuralda da background-color (uzun biçim). */
  background-color:rgba(255,255,255,.4);background-clip:content-box;
  transition:background-color var(--hiz),transform var(--hiz)}
.slayt-noktalar button.aktif{background-color:#fff;transform:scale(1.35)}

/* yan kampanya afişleri */
.yan-afisler{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.yan-afis{display:flex;flex-direction:column;justify-content:flex-start;gap:7px;padding:20px;
  border-radius:var(--r-l);background:#fff;border:1px solid var(--cizgi);
  transition:transform var(--hiz),box-shadow var(--hiz)}
.yan-afis:hover{transform:translateY(-2px);box-shadow:var(--golge-2)}
.ya-ustlik{font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--tx-3)}
.yan-afis b{font-family:var(--basli);font-size:20px;line-height:1.18;color:var(--navy);
  text-transform:uppercase}
.ya-alt{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:var(--kirmizi);margin-top:auto}
.ya-alt svg{width:15px;height:15px}
.yan-afis.kirmizi{background:var(--kirmizi);border-color:var(--kirmizi)}
.yan-afis.kirmizi .ya-ustlik{color:rgba(255,255,255,.72)}
.yan-afis.kirmizi b{color:#fff}
.yan-afis.kirmizi .ya-alt{color:#fff}
.ya-liste,.ya-adim{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px}
.ya-liste li,.ya-adim li{position:relative;padding-left:24px;font-size:12.5px;line-height:1.45;
  font-weight:500;color:var(--tx-2)}
.ya-liste li::before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px;
  border-radius:50%;background:rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.ya-liste li::after{content:"";position:absolute;left:4px;top:7.5px;width:6px;height:3px;
  border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg)}
.yan-afis.kirmizi .ya-liste li{color:rgba(255,255,255,.92)}
.ya-adim{counter-reset:ya}
.ya-adim li{counter-increment:ya}
.ya-adim li::before{content:counter(ya);position:absolute;left:0;top:1px;width:16px;height:16px;
  border-radius:5px;background:var(--zemin-alt);color:var(--navy);font-size:10px;font-weight:800;
  display:grid;place-items:center;font-family:var(--basli)}

/* ── marka sayfası banner'ı ──────────────────────── */
.marka-banner{position:relative;border-radius:var(--r-l);overflow:hidden;margin-bottom:6px;
  min-height:210px;background:var(--navy) var(--bg,none) center/cover no-repeat}
.marka-banner::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,14,20,.95) 0%,rgba(10,14,20,.75) 52%,rgba(10,14,20,.3) 100%)}
.marka-banner.sade{background:var(--navy);min-height:150px}
.mb-govde{position:relative;z-index:1;padding:28px 32px;max-width:62%}
.mbn-logo{width:auto;height:38px;object-fit:contain;object-position:left;
  filter:brightness(0) invert(1);margin-bottom:16px}
.marka-banner h1{font-size:27px;color:#fff;line-height:1.15;margin-bottom:8px}
.marka-banner p{font-size:14px;color:var(--cizgi-koyu);margin:0 0 18px;max-width:56ch}

/* ── marka kampanya afişleri (ikili) ─────────────── */
/* 12 Eylül: grid+auto-fit iken marka sayısı 5'e çıkınca son satırda boş hücre
   kalıyordu (önce 4+1 öksüz, sonra 3+2 delikli). Flex'te son satırdaki afişler
   kalan genişliği paylaşarak BÜYÜYOR → hangi marka sayısında olursa olsun
   satır doluyor, nth-child hilesi gerekmiyor. */
.marka-afis-ikili{display:flex;flex-wrap:wrap;gap:16px}
.marka-afis-ikili>*{flex:1 1 380px}
.marka-afis{position:relative;border-radius:var(--r-l);overflow:hidden;min-height:270px;
  background:var(--navy-3);transition:transform var(--hiz),box-shadow var(--hiz)}
.marka-afis::before{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(420px 300px at 88% 62%,rgba(182,33,38,.20),transparent 70%),
             linear-gradient(90deg,rgba(10,14,20,.97) 0%,rgba(10,14,20,.80) 46%,rgba(10,14,20,.15) 100%)}
.marka-afis:hover{transform:translateY(-3px);box-shadow:var(--golge-3)}
.ma-ic{position:relative;z-index:2;padding:24px 26px;display:flex;flex-direction:column;
  height:100%;max-width:78%}
.ma-logo{width:auto;height:34px;object-fit:contain;object-position:left;
  filter:brightness(0) invert(1);margin-bottom:16px}
.ma-ad{font-family:var(--basli);font-size:26px;color:#fff;text-transform:uppercase;
  margin-bottom:14px}
.marka-afis h3{font-size:20px;color:#fff;line-height:1.2;margin-bottom:8px}
.marka-afis p{font-size:13px;color:var(--ters-tx-2);line-height:1.6;margin:0 0 18px;max-width:68%}
.ma-ozellik{display:flex;gap:14px;flex-wrap:nowrap;margin-bottom:auto;padding-bottom:18px}
.ma-ozellik span{display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:10.5px;color:var(--ters-tx-2);text-align:center;max-width:66px;line-height:1.3}
.ma-ozellik i{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);color:#fff}
.ma-ozellik i svg{width:16px;height:16px}
.ma-dugme{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--kirmizi);color:#fff;padding:10px 18px;border-radius:var(--r);
  font-size:13px;font-weight:600;transition:gap var(--hiz)}
.ma-dugme svg{width:15px;height:15px}
.marka-afis:hover .ma-dugme{gap:12px}

/* ── kategori rafı: sol kampanya görseli + yatay ürün şeridi ── */
.raf-duzen{display:grid;grid-template-columns:250px 1fr;gap:14px;align-items:stretch}
/* tek sıradaki raflarda afiş sağa geçer — sayfa boyunca sol/sağ ritmi kurar */
.raf-duzen.ters{grid-template-columns:1fr 250px}
.raf-duzen.ters .raf-afis{order:2}
.raf-duzen.ters .raf-sarma{order:1}
/* ⚠️ MOBİL KIRILMA — 16 Eyl'de ana kategori sayfasını bu desene geçirirken
   ölçülerek bulundu, ama hata ANASAYFADA DA VARDI (aynı bileşen):
   .raf-duzen'in hiç kırılma noktası yoktu, afiş 250px'i koruyordu ve
   375px ekranda ÜRÜN RAFINA 71px kalıyordu. Sayfa yatay kaymadığı için
   (raf kendi içinde kayıyor) gözden kaçmış; sütun genişliği ölçülünce
   çıktı. 760px = .raf kartlarının 2'li düzene geçtiği nokta. */
@media (max-width:760px){
  .raf-duzen,.raf-duzen.ters{grid-template-columns:1fr}
  /* Mobilde DİKEY poster gizli — 26 Eyl (Erhan: "dikey afişler fazla büyük,
     düzen yok"). İki gerekçe: (1) 3:4 görsel tam-genişlikte 447px = ekranın
     yarısı, ~10 bölümde toplam ~4500px sırf poster → "fazla büyük"; (2) poster
     başlığı ("RAY KLEMENSLER" + "Ürünleri incele") zaten bölüm başlığıyla
     (.bolum-bas: aynı ad + "Tümü →") MÜKERRER → "düzen yok". Mobil düzen artık
     temiz: başlık + "Tümü" + yatay ürün rafı (standart mobil e-ticaret).
     Poster masaüstünde (yan yana 250px sütun) korunur. */
  .raf-afis{display:none}
}
.raf-afis{position:relative;border-radius:var(--r-l);overflow:hidden;min-height:280px;
  background:var(--navy);transition:transform var(--hiz)}
.raf-afis::before{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(280px 220px at 70% 34%,rgba(182,33,38,.18),transparent 72%),
             linear-gradient(180deg,rgba(10,14,20,.30) 0%,rgba(10,14,20,.72) 52%,rgba(10,14,20,.97) 100%)}
.raf-afis:hover{transform:translateY(-2px)}
.ra-ic{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:22px}
.ra-ikon{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r);
  background:var(--kirmizi);color:#fff;margin-bottom:12px}
.ra-ikon svg{width:22px;height:22px}
.raf-afis h3{font-size:21px;color:#fff;line-height:1.15;margin-bottom:12px}
.ra-dugme{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:#fff;transition:gap var(--hiz)}
.ra-dugme svg{width:14px;height:14px}
.raf-afis:hover .ra-dugme{gap:11px}

.raf-sarma{position:relative;min-width:0}
/* Kart genişliği SABİT 172px'ti: 5 kart + 4 boşluk = 900px, şerit alanı 1016px →
   116px artıyordu. Düz düzende bu boşluk sağ kenarda, ters düzende afişle kartlar
   arasında birikiyor, iki bölüm asimetrik duruyordu (Erhan). Genişlik alandan
   hesaplanır: kartlar alanı tam doldurur, boşluk her iki yönde de aynı. */
.raf{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * 14px) / 5);
  gap:14px;justify-content:start;
  overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:2px}
@media (max-width:1180px){.raf{grid-auto-columns:calc((100% - 3 * 14px) / 4)}}
@media (max-width:960px){.raf{grid-auto-columns:calc((100% - 2 * 14px) / 3)}}
/* 26 Eyl (Erhan "hepsi 3'lü olacak"): kategori rafları da mobilde 3'lü (2 değil). */
@media (max-width:760px){.raf{grid-auto-columns:calc((100% - 2 * 10px) / 3);gap:10px}}
.raf::-webkit-scrollbar{display:none}
.raf-ok{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;
  border:1px solid var(--cizgi);border-radius:50%;background:#fff;color:var(--navy);
  font-size:20px;line-height:1;cursor:pointer;box-shadow:var(--golge-2);
  transition:background var(--hiz),transform var(--hiz)}
.raf-ok:hover{background:var(--navy);color:#fff}
.raf-ok.sol{left:-14px}
.raf-ok.sag{right:-14px}

/* güven şeridi */
.guven-serit{background:#fff;border-bottom:1px solid var(--cizgi)}
.guven-serit .kap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:16px 20px}
.guven-serit div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:1px 11px;align-items:center}
.guven-serit svg{width:22px;height:22px;color:var(--kirmizi);grid-row:1/3}
.guven-serit b{font-size:13.5px;color:var(--navy)}
.guven-serit span{font-size:12px;color:var(--tx-3)}

/* marka blokları */
.marka-blok{padding:26px 0}
.marka-blok.yumusak{background:var(--zemin-yumusak)}
.mb-ic{display:grid;grid-template-columns:222px 1fr;gap:18px;align-items:stretch}
.mb-kimlik{background:var(--navy);border-radius:var(--r-l);padding:22px;display:flex;
  flex-direction:column;position:relative;overflow:hidden;
  transition:transform var(--hiz)}
.mb-kimlik::before{content:'';position:absolute;inset:0;
  background:radial-gradient(320px 220px at 12% 0%,rgba(182,33,38,.35),transparent 65%)}
.mb-kimlik > *{position:relative;z-index:1}
.mb-kimlik:hover{transform:translateY(-2px)}
.mb-kimlik img{width:auto;height:44px;object-fit:contain;object-position:left;
  filter:brightness(0) invert(1);margin-bottom:14px}
.mb-kimlik > b{font-family:var(--basli);font-size:24px;color:#fff;text-transform:uppercase;
  margin-bottom:12px}
.mb-sayi{font-family:var(--basli);font-size:28px;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums}
.mb-kat{font-size:12px;color:var(--ters-tx-2);line-height:1.55;margin-top:8px}
.mb-link{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;
  font-size:12.5px;font-weight:600;color:#fff;transition:gap var(--hiz)}
.mb-link svg{width:15px;height:15px}
.mb-kimlik:hover .mb-link{gap:11px}
.mb-raf{grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}

/* fırsat bloğu */
.firsat{background:var(--zemin-yumusak);border-top:1px solid var(--kirmizi-solgun);border-bottom:1px solid var(--kirmizi-solgun)}
.firsat-bas h2{color:var(--kirmizi)}

/* logo şeridi */
.logo-serit{background:var(--navy);padding:34px 0}
.logo-serit h2{font-size:13px;letter-spacing:.11em;color:var(--ters-tx-2);text-align:center;
  margin-bottom:18px}
.logolar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.logolar a{display:grid;place-items:center;height:92px;padding:20px 24px;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-l);background:#fff;
  transition:border-color var(--hiz),transform var(--hiz),box-shadow var(--hiz)}
.logolar a:hover{border-color:#fff;transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(0,0,0,.35)}
/* max-height PX olmalı: grid item içinde yüzde çözümlenmiyor, logolar taşıyordu.
   40px, en uzun logoyu (300x146) da kutuya sığdıran ortak tavan. */
.logolar img{max-width:100%;max-height:40px;width:auto;height:auto;object-fit:contain;
  opacity:.9;transition:opacity var(--hiz)}
.logolar a:hover img{opacity:1}
@media (max-width:1080px){.logolar{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.logolar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logolar a{height:78px;padding:16px}}
.logolar span{font-family:var(--basli);font-size:17px;color:var(--tx-3);text-transform:uppercase}

/* etiket bulutu */
.etiket-bulut{display:flex;gap:8px;flex-wrap:wrap}
.etiket-bulut a{padding:7px 14px;background:#fff;border:1px solid var(--cizgi);
  border-radius:100px;font-size:13px;color:var(--tx-2);
  transition:border-color var(--hiz),color var(--hiz)}
.etiket-bulut a:hover{border-color:var(--navy);color:var(--navy)}

/* anasayfa SSS + rehber şeridi */
/* SSS 900px'e sıkışıp sağda 420px boşluk bırakıyordu (Erhan: düzen sorunu).
   Tam genişlikte iki sütuna dağılır; sütunlar bağımsız açılır. */
.anasayfa-sss{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;
  align-content:start}
@media (max-width:860px){.anasayfa-sss{grid-template-columns:1fr}}
.rehber-serit{background:var(--navy-2);color:#fff;padding:26px 0}
.rehber-serit .kap{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.rs-metin h2{font-size:20px;color:#fff;margin-bottom:5px}
.rs-metin p{margin:0;font-size:13.5px;color:var(--ters-tx-2)}
.rs-linkler{display:flex;gap:9px;flex-wrap:wrap}
.rs-linkler a{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r);font-size:13px;
  font-weight:600;transition:background var(--hiz),border-color var(--hiz),gap var(--hiz)}
.rs-linkler a svg{width:14px;height:14px}
.rs-linkler a:hover{background:rgba(255,255,255,.1);border-color:#fff;gap:11px}

/* seo metni */
/* dama: SSS beyaz → SEO KOYU → e-bülten açık → footer koyu.
   ⚠ Marka kırmızısı (#B62126) bu zeminde 2.52:1 kalıyor (FAIL); koyu blokta
   bağlantı rengi var(--kirmizi-acik) (6.20:1). Ölçüm: WCAG kontrast hesabı. */
.seo-metin{background:var(--navy);padding:40px 0 44px;color:var(--ters-tx)}
.seo-metin h2{font-size:21px;color:#fff;margin-bottom:12px}
.seo-metin h3{font-size:15px;color:#fff;margin:22px 0 8px}
.seo-metin a{color:var(--kirmizi-acik)}
.seo-metin a:hover{color:var(--kirmizi-acik-2)}
/* "daha fazla göster" etiketi: açıkken ikinci metin görünür */
.seo-detay > summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;
  gap:7px;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--kirmizi-acik)}
.seo-detay > summary::-webkit-details-marker{display:none}
/* Ok CSS border-chevron'uyla çiziliyordu, tarayıcıda çarpı gibi render oldu →
   inline SVG. Açıkken 180 derece döner. */
.seo-detay > summary svg{width:15px;height:15px;flex:none;
  transition:transform var(--hiz)}
.seo-detay[open] > summary svg{transform:rotate(180deg)}
.seo-detay > summary:hover{color:var(--kirmizi-acik-2)}
.sd-kapat{display:none}
.seo-detay[open] .sd-ac{display:none}
.seo-detay[open] .sd-kapat{display:inline}
.seo-detay{margin-top:14px}
.seo-detay summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--kirmizi-acik);
  list-style:none;display:inline-flex;align-items:center;gap:7px;padding:8px 0}
.seo-detay summary::-webkit-details-marker{display:none}
.seo-metin section{margin-bottom:4px}
.seo-giris{font-size:14px !important;color:var(--ters-tx) !important}
.seo-link{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px !important}
.seo-link a{padding:5px 12px;background:rgba(255,255,255,.09);border-radius:100px;
  border:1px solid rgba(255,255,255,.14);
  font-size:12.5px;font-weight:600;color:var(--cizgi) !important;
  transition:background var(--hiz),color var(--hiz),border-color var(--hiz)}
.seo-link a:hover{background:#fff;border-color:#fff;color:var(--navy) !important}
/* koyu zeminde ayırıcı çizgi ve bağlantı rengi: marka kırmızısı 2.52:1 (FAIL),
   var(--kirmizi-acik) 6.20:1 */
.seo-iletisim{margin-top:20px !important;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14)}
.seo-iletisim a{color:var(--kirmizi-acik) !important}
.seo-iletisim a:hover{color:var(--kirmizi-acik-2) !important}
/* SEO bloğu 1000px'lik dar kapta duruyordu, üstündeki bölümlerle hizası
   tutmuyordu. Kural kaldırıldı → genel .kap genişliği (1320px) geçerli;
   metin gazete tipi iki sütuna akar, satır boyu okunur kalır. */
.seo-metin .seo-giris{max-width:78ch}
.seo-detay[open] > section{break-inside:avoid}
@media (min-width:1080px){
  .seo-detay[open]{column-count:2;column-gap:38px}
  .seo-detay > summary{column-span:all}
}
.seo-metin p{font-size:13.5px;line-height:1.85;color:var(--ters-tx);margin:0 0 10px}
.seo-metin a{color:var(--kirmizi);font-weight:600}


/* align-self:start — kutu grid satırına GERİLMESİN (14 Eyl). Liste 24'ten
   10'a inince kutu içeriğinden uzun kalıyor, altında ~111px ölü beyaz alan
   oluşuyordu; kart içinde boşluk "bozuk" görünür, kartın erken bitmesi
   kasıtlı görünür. Kap .kap align-items:stretch olduğu için tek tek geçilir. */
.kat-ray{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);
  overflow:hidden;align-self:start}
.kat-ray h2{font-size:12px;letter-spacing:.11em;color:var(--tx-3);padding:13px 15px;
  border-bottom:1px solid var(--cizgi);background:var(--zemin-yumusak)}
.kat-ray ul{list-style:none;margin:0;padding:4px 0}
/* "Tüm kategoriler" satırı — listenin sonunda, kırmızı ve ayraçlı ki
   kategori satırlarından ayrılsın (14 Eyl). */
.kr-tumu{border-top:1px solid var(--cizgi);margin-top:4px;padding-top:2px}
.kr-tumu a{color:var(--kirmizi);font-weight:600;justify-content:space-between}
.kr-tumu a svg{width:15px;height:15px;flex:none}
.kat-ray a{display:flex;align-items:center;gap:10px;padding:8px 15px;font-size:13.5px;
  color:var(--tx-2);transition:background var(--hiz),color var(--hiz)}
.kat-ray a i{width:18px;height:18px;color:var(--tx-3);flex:none;transition:color var(--hiz)}
.kat-ray a i svg{width:100%;height:100%;display:block}
.kat-ray a span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kat-ray a em{font-style:normal;font-size:11.5px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.kat-ray a:hover{background:var(--zemin-yumusak);color:var(--navy)}
.kat-ray a:hover i{color:var(--kirmizi)}

.vitrin-sag{display:grid;gap:14px;min-width:0}
.afis{background:var(--navy);border-radius:var(--r-l);overflow:hidden;position:relative;
  display:grid;grid-template-columns:1fr 232px}
.afis::before{content:'';position:absolute;inset:0;
  background:radial-gradient(680px 320px at 8% 0%,rgba(182,33,38,.34),transparent 62%),
             radial-gradient(520px 380px at 92% 110%,rgba(56,96,150,.30),transparent 60%)}
.afis-ic{position:relative;z-index:1;padding:30px 28px}
.afis-etiket{display:inline-block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ters-tx-2);font-weight:700;margin-bottom:12px}
.afis h1{font-size:clamp(23px,2.3vw,31px);color:#fff;line-height:1.16;margin-bottom:11px}
.afis p{font-size:14px;line-height:1.65;color:var(--ters-tx-2);max-width:48ch;margin:0 0 20px}
.afis-dugmeler{display:flex;gap:10px;flex-wrap:wrap}
.dugme.seffaf{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.dugme.seffaf:hover{background:rgba(255,255,255,.1);border-color:#fff}
.afis-markalar{position:relative;z-index:1;display:grid;align-content:center;gap:1px;
  background:rgba(255,255,255,.09);border-left:1px solid rgba(255,255,255,.11)}
.afis-markalar a{background:var(--navy);padding:13px 18px;transition:background var(--hiz)}
.afis-markalar a:hover{background:var(--navy-2)}
.afis-markalar b{display:block;font-family:var(--basli);font-size:16px;color:#fff;
  text-transform:uppercase;letter-spacing:.01em}
.afis-markalar span{font-size:11.5px;color:var(--ters-tx-2)}

.hizli{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);padding:16px 18px}
.hizli-bas{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:11px}
.hizli-bas h3{font-size:15px;color:var(--navy)}
.hizli-bas span{font-size:12.5px;color:var(--tx-3)}
.hizli-bas code{background:var(--zemin-alt);padding:1px 6px;border-radius:3px;
  font-size:11.5px;font-family:ui-monospace,Menlo,monospace}
.hizli-ic{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.hizli-ic textarea{font-family:ui-monospace,Menlo,monospace;font-size:13px;line-height:1.7}
.hizli-ic button{height:44px}
.hizli-sonuc{margin-top:11px;font-size:13px}
.liste-hizli{margin-top:22px}
.hs-ok{color:var(--basari);font-weight:600;margin-bottom:5px}
.hs-satir{color:var(--tx-3);font-size:12.5px;padding:2px 0}
.hs-yok{color:var(--kirmizi);font-weight:600;margin-top:7px}

/* kategori kartları */

/* ── kategori banner ──────────────────────────── */
.kat-banner{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);
  overflow:hidden;margin-bottom:6px}

/* ── görselli kategori banner'ı ──────────────────
   İlk sürüm beyaz zemine görseli yatırıp üstünden beyaz gradient geçiriyordu:
   fotoğraf ne net görünüyordu ne gizleniyordu — solgun ve kirli duruyordu.
   Beğenilen marka afişi deseni koyu zemin + NET ürün fotoğrafı; kategori
   banner'ı da ona çekildi. Fotoğraf sağ yarıda tam doygunlukta durur, sola
   doğru navy'ye erir; metin daima düz koyu zemin üstündedir. */
.kat-banner.gorselli{position:relative;border-color:transparent;min-height:236px;
  background:linear-gradient(120deg,var(--navy-3) 0%,var(--navy) 46%,var(--navy-2) 100%)}
.kat-banner.gorselli .kb-ic{min-height:inherit}
.kat-banner.gorselli .kb-sol{align-items:center}
.kat-banner.gorselli::before{content:'';position:absolute;inset:0 0 0 30%;
  background:var(--bg) 78% center/cover no-repeat}
/* Soldan sağa erime: metin bölgesi %100 opak, fotoğraf %62'den sonra tamamen açık */
.kat-banner.gorselli::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy-3) 0%,var(--navy-3) 30%,
    rgba(10,14,20,.82) 44%,rgba(10,14,20,.30) 62%,transparent 82%)}
.kat-banner.gorselli .kb-ic{position:relative;z-index:1}

/* Koyu zeminde metin kademeleri — hepsi paletten, ölçülmüş kontrastla */
.kat-banner.gorselli .kb-sol h1{color:#fff}
.kat-banner.gorselli .kb-sol p{color:var(--ters-tx)}
.kat-banner.gorselli .kb-ustlik{color:var(--kirmizi-acik)}
.kat-banner.gorselli .kb-sol > i{background:var(--kirmizi);
  box-shadow:0 8px 20px -8px rgba(182,33,38,.75)}

/* "Seçerken bakılan" — camlı koyu kutu, fotoğrafın üstünde okunur kalır */
.kat-banner.gorselli .kb-sag{background:rgba(10,14,20,.62);backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);border-left:1px solid var(--ters-cizgi)}
.kat-banner.gorselli .kb-sag h2{color:var(--ters-tx-2)}
.kat-banner.gorselli .kb-sag li{color:var(--ters-tx)}
.kat-banner.gorselli .kb-sag li::before{background:var(--kirmizi-acik)}

/* Dar ekranda fotoğraf metnin arkasına düşer; okunabilirlik için karartılır. */
@media(max-width:860px){
  .kat-banner.gorselli::before{inset:0;opacity:.42}
  .kat-banner.gorselli::after{background:linear-gradient(180deg,
    rgba(10,14,20,.72) 0%,rgba(10,14,20,.88) 100%)}
  .kat-banner.gorselli .kb-sag{background:rgba(10,14,20,.5)}
}
.kb-ic{display:grid;grid-template-columns:1fr 300px}
.kb-sol{display:flex;gap:16px;padding:22px 24px}
.kb-sol > i{width:46px;height:46px;flex:none;display:grid;place-items:center;
  border-radius:var(--r);background:var(--navy);color:#fff}
.kb-sol > i svg{width:26px;height:26px}
.kb-ustlik{display:block;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--kirmizi);font-weight:700;margin-bottom:5px}
.kb-sol h1{font-size:27px;color:var(--navy);margin-bottom:9px}
.kb-sol p{margin:0;font-size:14px;line-height:1.7;color:var(--tx-2);max-width:66ch}
.kb-sag{background:var(--zemin-yumusak);border-left:1px solid var(--cizgi);padding:20px 22px}
.kb-sag h2{font-size:12px;letter-spacing:.1em;color:var(--tx-3);margin-bottom:10px}
.kb-sag ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.kb-sag li{font-size:12.5px;color:var(--tx-2);line-height:1.5;padding-left:14px;position:relative}
.kb-sag li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--kirmizi)}
.liste-basit-bas{padding:6px 0 14px}
.liste-basit-bas h1{font-size:27px;color:var(--navy)}
.liste-basit-bas p{margin:6px 0 0;color:var(--tx-3);font-size:14px}

/* ── bölüm ─────────────────────────────────────── */
.bolum{padding:56px 0}
.bolum.yumusak{background:var(--zemin-yumusak)}
.bolum-bas{display:flex;align-items:flex-end;gap:20px;margin-bottom:26px}
.bolum-bas h2{font-size:29px;color:var(--navy)}
.bolum-bas p{margin:6px 0 0;color:var(--tx-3);font-size:14px}
.bolum-bas .link{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--kirmizi);
  display:inline-flex;align-items:center;gap:6px;transition:gap var(--hiz)}
.bolum-bas .link:hover{gap:11px}

/* ── marka kartları ────────────────────────────── */
.markalar{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.marka-k{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);
  padding:22px;position:relative;overflow:hidden;
  transition:transform var(--hiz),box-shadow var(--hiz),border-color var(--hiz)}
.marka-k::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--kirmizi);transform:scaleY(0);transform-origin:bottom;
  transition:transform var(--hiz)}
.marka-k:hover{transform:translateY(-3px);box-shadow:var(--golge-2);border-color:var(--cizgi-koyu)}
.marka-k:hover::after{transform:scaleY(1)}
.marka-k b{font-family:var(--basli);font-size:23px;color:var(--navy);display:block;
  text-transform:uppercase;letter-spacing:-.01em}
.marka-k span{font-size:12.5px;color:var(--tx-3);display:block;margin-top:5px}
.marka-k .ok{position:absolute;right:20px;bottom:20px;color:var(--cizgi-koyu);
  transition:color var(--hiz),transform var(--hiz)}
.marka-k:hover .ok{color:var(--kirmizi);transform:translateX(3px)}

/* ── ürün ızgarası ─────────────────────────────── */
/* auto-fill kaç sütun açacağını ekran genişliğine bırakıyordu → 1320px'lik
   kapta 7 sütun çıkıyor, 10 ürünlük vitrin ikinci satırda 4 boş hücre
   bırakıyordu (denetim 1 Eyl). Sütun sayısı SABİT: ürün adedi sütunun tam
   katı seçilebiliyor, satır hiç yarım kalmıyor. */
.izgara{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.izgara.sik{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media (max-width:1180px){.izgara{grid-template-columns:repeat(3,minmax(0,1fr))}
  .izgara.sik{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:920px){.izgara,.izgara.sik{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Az öğeli ızgara sütunları boş bırakıyordu: ürün sayfasındaki "… serisi"
   bölümü 1 kart için 5 sütun açıp sağda %80 boşluk yaratıyordu (denetim 1 Eyl).
   Öğe sayısı 4'ün altındaysa sütun sayısı öğe sayısına iner.
   ⚠ 22 Eki 2026 (Erhan, telefon ekranı: "ürüne girince alttaki önerilen
   ürünlerde büyük problem"): bu kurallar medya sorgusuz yazılmıştı ve :has
   özgüllüğü (0,3,0) mobildeki 3 sütun kuralını eziyordu → ürün sayfasındaki
   4 kartlık şeritler 360px'te 4 × 74px sütun oluyordu, rozetler ve "Sepete
   ekle" kesiliyordu. Yalnız masaüstünde geçerli; mobil 3 sütun kararında kalır. */
@media (min-width:921px){
  .izgara:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .izgara:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .izgara:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .izgara:has(> :only-child){grid-template-columns:minmax(0,264px)}
}

/* ── giriş hareketi (scroll-reveal) ──────────────
   Bölümler görüş alanına girerken yumuşak yükselir. Yalnızca transform ve
   opacity — layout tetiklemez, 60fps'te kalır. Yay eğrisi (cubic-bezier'in
   sonu 1'i aşar) hareketi mekanik değil canlı yapar.
   .gorundu sınıfını istemci.js'teki IntersectionObserver ekler; JS çalışmazsa
   .ac sınıfı hiç basılmaz ve içerik zaten görünür kalır (aşamalı iyileştirme).
   NOT: bu dosya String.raw template'i — YORUMDA BİLE ters tırnak kullanma. */
.ac{opacity:0;transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.22,.68,.32,1),
             transform .62s cubic-bezier(.22,1.2,.36,1)}
.ac.gorundu{opacity:1;transform:none}
/* Izgara içindeki kartlar sırayla girsin — hepsi birden zıplamasın */
.ac-sira > *{opacity:0;transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.22,.68,.32,1),
             transform .5s cubic-bezier(.22,1.2,.36,1)}
.ac-sira.gorundu > *{opacity:1;transform:none}
.ac-sira.gorundu > *:nth-child(1){transition-delay:.02s}
.ac-sira.gorundu > *:nth-child(2){transition-delay:.06s}
.ac-sira.gorundu > *:nth-child(3){transition-delay:.10s}
.ac-sira.gorundu > *:nth-child(4){transition-delay:.14s}
.ac-sira.gorundu > *:nth-child(5){transition-delay:.18s}
.ac-sira.gorundu > *:nth-child(6){transition-delay:.22s}

/* Bölüm başlığı: altındaki marka çizgisi görünürken soldan açılır */
.bolum-bas h2{position:relative;padding-bottom:11px}
.bolum-bas h2::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;
  background:var(--kirmizi);border-radius:2px;
  transition:width .55s cubic-bezier(.22,.9,.3,1) .12s}
.gorundu .bolum-bas h2::after,.bolum-bas.gorundu h2::after{width:44px}

/* Butonlarda basılma geri bildirimi — tıklama "kayıt" edilmiş hissi versin */
.dugme,.serit-ok,.mini{transition:transform .16s cubic-bezier(.34,1.5,.64,1),
  background-color var(--hiz),border-color var(--hiz),color var(--hiz),box-shadow var(--hiz)}
.dugme:active,.serit-ok:active,.mini:active{transform:scale(.96)}

/* Kart görseli: hover'da yumuşak yakınlaşma zaten var; parlama katmanı ekler */
.kart-gorsel{position:relative;overflow:hidden}
.kart-gorsel::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .7s cubic-bezier(.3,.7,.35,1)}
.kart:hover .kart-gorsel::after{transform:translateX(120%)}

/* ── sol alt WhatsApp ────────────────────────────
   Ana sitedeki yüzen buton deseni. Hover'da genişleyip "Destek" yazısını
   açar — sürekli metin göstermek mobilde içeriği kapatıyordu. */
.wa-yuzen{position:fixed;left:24px;bottom:24px;z-index:900;height:56px;
  display:flex;align-items:center;gap:0;padding:0 16px;border-radius:999px;
  background:var(--whatsapp);color:#fff;font-weight:700;font-size:14px;
  box-shadow:0 6px 22px -6px rgba(37,211,102,.55);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,gap .25s,padding .25s}
.wa-yuzen svg{width:27px;height:27px;flex:none}
.wa-yuzen span{max-width:0;overflow:hidden;white-space:nowrap;
  transition:max-width .28s cubic-bezier(.34,1.4,.64,1)}
.wa-yuzen:hover,.wa-yuzen:focus-visible{gap:9px;padding:0 20px;
  transform:translateY(-3px);box-shadow:0 12px 30px -8px rgba(37,211,102,.7)}
.wa-yuzen:hover span,.wa-yuzen:focus-visible span{max-width:80px}
.wa-yuzen:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Nabız halkası — dikkat çeksin ama göz yormasın diye yavaş ve soluk */
.wa-yuzen::before{content:'';position:absolute;inset:-4px;border-radius:999px;
  border:2px solid rgba(37,211,102,.45);animation:waNabiz 2.6s ease-out infinite;
  pointer-events:none}
@keyframes waNabiz{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@media(max-width:760px){.wa-yuzen{left:16px;bottom:16px;height:50px;padding:0 13px}
  .wa-yuzen svg{width:24px;height:24px}}

/* ── mağazadaki markalar şeridi ──────────────────
   Hero'nun hemen altında: müşteri ilk ekranda hangi markaları satın
   alabileceğini görsün. Marquee'den farkı — orası Karsen'in çalıştığı 12 marka
   (tedarik gücü), burası mağazada ürünü OLAN markalar, doğrudan tıklanır. */
.magaza-marka{background:var(--zemin);border-bottom:1px solid var(--cizgi);padding:16px 0}
.magaza-marka .kap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.mgm-etiket{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--tx-3);flex:none}
/* Erhan (12 Eyl): 'marka seridinde direkt 6 taneyi yan yana diz, solundaki
   MAGAZADAKI MARKALAR yazisini kaldir'. Etiket 170px + sagdaki baglanti
   200px yiyordu, listeye 950px kaliyordu; 6 oge icin 1142px gerekiyordu
   (olculdu) -> 5+1 kiriliyordu. Etiket gidince liste tam genisligi alir. */
.mgm-liste{display:flex;gap:10px;flex-wrap:wrap;flex:1;justify-content:center}
.mgm-oge{display:flex;align-items:center;justify-content:center;gap:10px;
  /* min-width = icerigin gercek genisligi (logo 96 + bosluk + 'N urun' +
     dolgu). Daha dusuk verilince tablet genisliginde icerik kutuyu tasiyordu
     (900px te 2 oge tasti, olculdu). Etiket kalktigi icin liste 1142px
     aliyor -> 6x168+5x10=1058, alti da MASAUSTUNDE TEK SATIRA siger. */
  padding:9px 14px;border-radius:var(--r);flex:1 1 168px;min-width:168px;
  /* 12 Eylul: Oznur eklenince marka sayisi 5>6 oldu ve son oge tek basina
     alt satira dusup 950px e yayildi (olculdu). grow sinirsizdi. max-width
     + justify-content:center ile oksuz oge dogal genisligini koruyup
     ortalaniyor; marka sayisi ileride degisse de bozulmaz. */

  border:1px solid var(--cizgi);background:var(--zemin-yumusak);
  transition:border-color var(--hiz),transform var(--hiz),box-shadow var(--hiz)}
.mgm-oge:hover{border-color:var(--kirmizi);transform:translateY(-2px);
  box-shadow:0 8px 18px -12px rgba(182,33,38,.5)}
.mgm-oge:focus-visible{outline:2px solid var(--kirmizi);outline-offset:2px}
.mgm-oge img{max-height:var(--oy,26px);max-width:96px;width:auto;height:auto;
  object-fit:contain;flex:none}
.mgm-oge b{font-size:13.5px;color:var(--navy);font-weight:700}
.mgm-oge em{font-style:normal;font-size:11.5px;color:var(--tx-3);flex:none;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mgm-tumu{font-size:13px;font-weight:600;color:var(--kirmizi);white-space:nowrap;flex:none}
.mgm-tumu:hover{color:var(--kirmizi-koyu)}
@media(max-width:760px){
  /* Mobilde 'Tum kategoriler' baglantisi 120px calip listeye 188px birakiyordu
     -> markalar 1'er 1'er 6 satir oluyordu (olculdu 360px te). Baglanti kendi
     satirina alinca liste tam genisligi alir, markalar 2'li dizilir. */
  .magaza-marka .kap{gap:12px}
  .mgm-liste{flex:1 1 100%}
  .mgm-tumu{flex:1 1 100%;text-align:center}
  /* Masaustunde 6 marka tek satir (nowrap); dar ekranda o 6 oge 60px e
     sikisirdi -> mobilde sarmaya izin ver. (.mgm-etiket kurali kaldirildi,
     etiket 12 Eyl de markup tan cikti.) */
  .mgm-liste{flex-wrap:wrap}
  .mgm-oge{padding:7px 11px;gap:8px;flex-basis:140px;min-width:140px}
  .mgm-oge img{max-height:24px;max-width:80px}
}

/* ── marka marquee ayracı ────────────────────────
   Karsen'in çalıştığı 12 markanın orijinal logosu; liste iki kez basılır ve
   şerit %50 kaydırılır → dikişsiz sonsuz akış. Logolar beyaz kutuda durur,
   çünkü markaların kendi renkleri koyu zeminde okunmuyor. */
.marka-serit{background:var(--navy);padding:26px 0;overflow:hidden;position:relative}
.marka-serit::before,.marka-serit::after{content:'';position:absolute;top:0;bottom:0;
  width:120px;z-index:2;pointer-events:none}
.marka-serit::before{left:0;background:linear-gradient(90deg,var(--navy),transparent)}
.marka-serit::after{right:0;background:linear-gradient(270deg,var(--navy),transparent)}
.ms-baslik{text-align:center;margin-bottom:18px}
.ms-baslik span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ters-tx-2)}
.ms-yol{display:flex;width:100%}
.ms-akis{display:flex;align-items:center;gap:14px;flex:none;
  animation:msKay 42s linear infinite}
.marka-serit:hover .ms-akis{animation-play-state:paused}
.ms-oge{flex:none;display:grid;place-items:center;width:176px;height:78px;padding:15px 18px;
  background:#fff;border-radius:var(--r-l);border:1px solid var(--ters-cizgi);
  transition:transform var(--hiz),box-shadow var(--hiz)}
.ms-oge:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(0,0,0,.55)}
.ms-oge:focus-visible{outline:2px solid var(--kirmizi-acik);outline-offset:3px}
/* Yükseklik logoya özel (--oy): sabit değerde mürekkep alanı 6,7 kat oynuyordu.
   Değerler gorunum.js LOGO_YUKSEKLIK'te, ölçümle belirlendi. */
.ms-oge img{max-width:100%;max-height:var(--oy,38px);width:auto;height:auto;
  object-fit:contain;opacity:.92;transition:opacity var(--hiz)}
.ms-oge:hover img{opacity:1}
@keyframes msKay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:760px){
  /* 26 Eyl (Erhan): logo kartlarını küçült, aynı anda 3-4 marka görünsün.
     132px'te ~2.5 görünüyordu; 98px + 12px gap → 390px'te ~3.5 marka. */
  .ms-oge{width:98px;height:50px;padding:8px 11px}
  .ms-oge img{max-height:24px}
  .ms-akis{gap:12px}
  .marka-serit::before,.marka-serit::after{width:44px}
}

/* ── tek satır ürün şeridi (fırsat ürünleri) ─────
   6 kart görünür, kalanı oklarla kayar. Iki satıra yayılan ızgara altında
   boşluk bırakıyordu. */
.urun-serit{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5 * 10px) / 6);
  gap:10px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:2px}
.urun-serit::-webkit-scrollbar{display:none}
.urun-serit > *{scroll-snap-align:start}
.serit-araclar{display:flex;align-items:center;gap:8px}
.serit-ok{width:32px;height:32px;border-radius:50%;border:1px solid var(--cizgi);
  background:#fff;color:var(--navy);font-size:17px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:background var(--hiz),border-color var(--hiz),color var(--hiz)}
.serit-ok:hover{background:var(--kirmizi);border-color:var(--kirmizi);color:#fff}
.serit-ok[disabled]{opacity:.35;cursor:default}
.serit-ok[disabled]:hover{background:#fff;border-color:var(--cizgi);color:var(--navy)}
@media (max-width:1180px){.urun-serit{grid-auto-columns:calc((100% - 3 * 10px) / 4)}}
@media (max-width:920px){.urun-serit{grid-auto-columns:calc((100% - 2 * 10px) / 3)}}
@media (max-width:640px){.urun-serit{grid-auto-columns:calc((100% - 2 * 10px) / 3)}
  .serit-ok{display:none}}
/* 26 Eyl (Erhan 2. kez "3'lü yap dedim"): fırsat rafı HER mobil genişlikte 3'lü
   (360px dahil). 360'ta kart ~95px'e düşüyor → içerik ölçekli ufaltılır ki
   sıkışık değil KOMPAKT dursun (rozet/sku/ad/fiyat/buton), bkz ≤430 bloğu. */
.kart{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  transition:transform var(--hiz),box-shadow var(--hiz),border-color var(--hiz)}
.kart:hover{transform:translateY(-4px);box-shadow:var(--golge-3);border-color:var(--cizgi-koyu)}
.kart-gorsel{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;
  padding:10px;border-bottom:1px solid var(--cizgi);position:relative}
/* Görsel kutuyu MUTLAK doldurur; object-fit:contain her en-boy oranını
   kırpmadan sığdırır. yükseklik:% grid+aspect-ratio kutusunda çözülmediği
   için (yalnız genişlik çözülür → kare foto dikeyde taşıp kırpılıyordu)
   abs-pos + inset ile kutuya sabitlenir. */
.kart-gorsel img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);
  max-width:none;max-height:none;object-fit:contain;object-position:center;
  z-index:0;transition:transform var(--hiz)}
.kart:hover .kart-gorsel img{transform:scale(1.04)}
/* z-index:2 — transform:scale alan görsel yeni bir yığın bağlamı oluşturup
   rozetlerin üstüne biniyordu (hover'da etiketler kayboluyordu) */
.rozet-sol{position:absolute;z-index:2;left:0;top:10px;background:var(--navy);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;padding:4px 9px 4px 10px;
  border-radius:0 var(--r-s) var(--r-s) 0;text-transform:uppercase;
  font-variant-numeric:tabular-nums}
.rozet-sag{position:absolute;z-index:2;right:0;top:10px;background:var(--kirmizi);color:#fff;
  font-size:12px;font-weight:800;padding:4px 10px 4px 9px;
  border-radius:var(--r-s) 0 0 var(--r-s);font-variant-numeric:tabular-nums}
/* FOTOGRAFSIZ URUN KARTI — olculerek duzeltildi (15 Eyl).
   Onceki hali: 44px ikon, rengi var(--cizgi-koyu) = #C8D2DE. Beyaz uzerinde
   kontrast 1.51:1 olcildu (UI bileseni alt siniri 3:1). 446px yuksekligindeki
   kartin icinde 44px'lik, neredeyse gorunmez bir leke duruyordu; kart BOS
   gorunuyordu. Katalogun %60'i (3.294 aktif urunun 1.978'i) su an fotografsiz,
   yani bu "kenar durum" degil, sitenin cogunlugu.
   --cizgi-koyu bir CIZGI rengiydi: ince cizgide yeterli, 44px'lik simgede degil.
   Yeni: 96px simge + var(--ikon-yedek) #6B7A90.
   Olcum: #6B7A90 uzerinde beyaz 4.36:1, --zemin-yumusak 4.07:1,
   --zemin-alt 3.85:1 → hepsi 3:1 esigini gecti. */
.gorsel-yok{display:grid;place-items:center;width:96px;height:96px;
  color:var(--ikon-yedek)}
/* Kablo kesit diyagrami (kabloGorseli): kablonun TEK gorseli bu, o yuzden
   yedek-ikon kutusundan (44px) cok daha buyuk cizilir. Kesit farki ancak bu
   olcekte okunuyor - 44px te noktaya donusuyordu (ekran goruntusuyle gorildu). */
.gorsel-yok:has(.kablo-kesit){width:132px;height:132px}
.gorsel-yok.buyuk:has(.kablo-kesit){width:260px;height:260px}
.gorsel-yok svg{width:100%;height:100%}
/* Urun DETAY sayfasinda gorsel kutusu ~620px; 96px simge orada kayboluyordu,
   150px de kucuk kaliyordu (olcildi: kutunun %24'u). 220px ~ %36. */
.gorsel-yok.buyuk{width:220px;height:220px}
.kart-varyant{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--tx-3);
  flex-wrap:wrap}
.kart-varyant b{font-weight:700;color:var(--navy);background:var(--zemin-alt);
  padding:1px 7px;border-radius:100px;font-size:11px}
.kart-varyant i{width:11px;height:11px;border-radius:50%;background:var(--r,var(--cizgi-koyu));
  border:1px solid rgba(0,0,0,.18);display:inline-block}
/* İskontosuz üründe fiyat satırını hizada tutan boş yer.
   DİKKAT: sınıf adı "bos" OLAMAZ — .bos boş-durum bileşeninin sınıfı ve
   74px padding'i buraya sızıp kartlarda 166px görünmez boşluk yapıyordu. */
.f-liste.yer-tut{visibility:hidden}
.f-teklif{font-family:var(--basli);font-size:17px;color:var(--kirmizi);line-height:1.2;
  text-transform:uppercase;letter-spacing:-.01em}
.kart-govde{padding:9px 10px 10px;display:flex;flex-direction:column;gap:4px;flex:1}
/* ⚠ 22 Eyl — DOKUNMA HEDEFİ. Ölçüm (375px mobil): kutu 141×17px, en yakın
   bağlantıya 9px. WCAG 2.5.8 asgari 24px ister; 9px boşlukla "aralık"
   muafiyeti de geçmiyordu — parmakla marka yerine ürün adına basılıyordu
   (anasayfada 57 kart). Dikey dolgu hedefi 25px'e çıkarır, negatif marj
   düzeni AYNI bırakır: hiçbir kart kaymaz. */
.kart-marka{font-size:10.5px;font-weight:700;letter-spacing:.13em;color:var(--kirmizi);
  text-transform:uppercase;padding-block:4px;margin-block:-4px}
.kart-sku{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:12px;
  color:var(--tx-3);letter-spacing:.01em}
/* min-height YOK: tek satırlık isimlerde kartın ortasında boşluk bırakıyordu.
   Fiyat bloğu zaten margin-top:auto ile alta yaslanıyor, satırdaki kartlar hizalı. */
/* Tek satırlık ürün adlarında kutu 18px kalıyordu (ölçüm: 141×18). Dolgu
   hedefi 24px'in üstüne çıkarır, negatif marj düzeni aynı bırakır. */
/* ⚠ 22 Eki 2026: alt dolgu (padding-bottom) overflow:hidden'ın kırptığı alanın
   İÇİNDE kalıyordu → kesilen satırın üst 4px'i adın altında yarım harf olarak
   görünüyordu (mobilde 2 satır sınırında belirgin). Alt 4px şeffaf KENARLIK:
   kutu boyu ve dokunma alanı aynı, kırpma kenarlığın içinden yapılır. */
.kart-ad{font-size:12.5px;line-height:1.4;color:var(--tx);font-weight:500;
  padding-block:4px 0;border-bottom:4px solid transparent;margin-block:-4px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kart-fiyat{margin-top:auto;padding-top:9px}
.f-liste{font-size:12px;color:var(--tx-3);text-decoration:line-through;
  font-variant-numeric:tabular-nums;line-height:1.3}
.f-net{font-family:var(--basli);font-size:20px;font-weight:700;color:var(--navy);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.15}
.f-alt{font-size:11px;color:var(--tx-3);font-variant-numeric:tabular-nums;margin-top:1px}
/* birim fiyat satır sonunda "9,78 / ₺" diye bölünmesin (412px'te ölçüldü) */
.f-birim{white-space:nowrap}
.kart-alt{display:flex;gap:8px;padding:0 10px 10px}
.kart-alt .dugme{flex:1;justify-content:center;height:33px;font-size:12px}

/* ── liste düzeni ──────────────────────────────── */
.duzen{display:grid;grid-template-columns:262px 1fr;gap:28px;align-items:start;padding:28px 0 60px}
.duzen.tam{grid-template-columns:1fr}
/* Izgara hucresinin varsayilan min-width:auto degeri ICERIGE gore belirlenir;
   tablonun min-content genisligi (1155px) oldugu gibi duzene gecti ve 768px
   ekranda TUM SAYFA yatay kaydi (olculdu: kap 1154 / ekran 768). Hucre 0'a
   inebilmeli ki tasmayi .tb-sar kendi icinde kaydirsin. */
.duzen > section{min-width:0}
.filtre{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);
  position:sticky;top:96px;max-height:calc(100vh - 116px);
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;scrollbar-width:thin}
/* Uygula/Temizle HEP GÖRÜNÜR: panelin dibine yapışık sticky bar — uzun filtre
   listesinde "en aşağıya in" derdi biter (Erhan 30 Eyl). margin-top:auto kısa
   listede bara dibe iter; sticky bottom uzun listede kaydırırken sabitler. */
.filtre-islem{position:sticky;bottom:0;margin-top:auto;display:flex;gap:8px;
  padding:12px 16px;background:#fff;border-top:1px solid var(--cizgi);z-index:3}
.filtre-islem .dugme{flex:1;justify-content:center}
.filtre-islem .filtre-temiz{flex:0 0 auto;background:transparent;color:var(--tx-3);
  border:1px solid var(--cizgi)}
.filtre-islem .filtre-temiz:hover{color:var(--kirmizi);border-color:var(--kirmizi)}
/* Mobil filtre acici: masaustunde yok, 1080 altinda panelin anahtari. */
.filtre-ac{display:none}
@media (max-width:1080px){
  .filtre-ac{display:flex;align-items:center;gap:9px;width:100%;height:46px;padding:0 15px;
    background:#fff;border:1.5px solid var(--cizgi-koyu);border-radius:var(--r);
    font-family:var(--basli);font-size:16px;font-weight:600;text-transform:uppercase;
    letter-spacing:.03em;color:var(--navy);cursor:pointer;
    transition:border-color var(--hiz),background var(--hiz)}
  .filtre-ac svg{width:17px;height:17px}
  .filtre-ac b{margin-left:auto;display:grid;place-items:center;min-width:22px;height:22px;
    padding:0 6px;border-radius:999px;background:var(--kirmizi);color:#fff;
    font-family:var(--govde);font-size:12px}
  .filtre-ac[aria-expanded="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
  .filtre{display:none}
  .filtre.acik{display:flex;position:static;max-height:min(72vh,560px)}
}
.filtre h3{font-size:13px;font-weight:700;letter-spacing:.09em;color:#fff;padding:14px 18px;background:var(--kirmizi)}
.filtre-grup{padding:15px 18px;border-bottom:1px solid var(--cizgi)}
.filtre-grup:last-child{border-bottom:0}
.filtre-grup h4{font-size:14px;color:var(--navy);margin-bottom:11px;
  display:flex;align-items:center;gap:6px}
.filtre-grup h4 em{font-style:normal;font-size:11px;color:var(--tx-3);font-family:var(--govde);
  font-weight:500;text-transform:none;letter-spacing:0}
.secim{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13.5px;
  color:var(--tx-2);cursor:pointer}
.secim input{width:16px;height:16px;accent-color:var(--kirmizi);cursor:pointer;flex:none}
.secim span{flex:1}
.secim b{font-weight:500;color:var(--tx-3);font-size:12px;font-variant-numeric:tabular-nums}
.secim:hover span{color:var(--tx)}
.filtre-daha{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:0;
  background:none;border:0;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--kirmizi);
  transition:color var(--hiz)}
.filtre-daha:hover{color:var(--kirmizi-koyu);text-decoration:underline;text-underline-offset:3px}

/* ── FİLTRE PANELİ — PREMIUM (30 Eyl · Erhan "güzelce" · ui-pro gate'leri) ──
   Renk rolü net: KIRMIZI = bölüm başlığı + Uygula CTA + aktif göstergesi ·
   NAVY = metin/aktif etiket · GRİ = sayım + yapı. Başlık/alt-etiket Barlow
   Condensed (endüstriyel/premium; jenerik body-uppercase yerine). */
.filtre{box-shadow:var(--golge-1)}
.filtre h3{font-family:var(--basli);font-size:15px;font-weight:700;letter-spacing:.05em;
  padding:9px 16px;line-height:1.15}
.filtre .aile-oge{padding:8px 10px}
.filtre .aile-oge:hover{background:var(--zemin-yumusak);color:var(--navy)}
.filtre .aile-oge.aktif{background:var(--zemin-alt);color:var(--navy);font-weight:700;
  box-shadow:inset 3px 0 0 var(--kirmizi)}
.filtre .aile-oge.aktif b{color:var(--kirmizi)}
.filtre-grup h4{font-family:var(--basli);font-size:13.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--navy)}
.filtre-grup h4 em{font-family:var(--govde);text-transform:none}
.filtre-islem button.dugme{background:var(--kirmizi);border:1px solid var(--kirmizi);color:#fff}
.filtre-islem button.dugme:hover{background:var(--kirmizi-koyu);border-color:var(--kirmizi-koyu)}

.liste-bas{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.liste-bas h1{font-size:27px;color:var(--navy)}
.liste-bas .adet{color:var(--tx-3);font-size:13.5px;font-variant-numeric:tabular-nums}
.liste-bas select{margin-left:auto;height:40px;padding:0 34px 0 13px;border:1.5px solid var(--cizgi-koyu);
  border-radius:var(--r);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2355606E' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size:13.5px;appearance:none;cursor:pointer;transition:border-color var(--hiz)}
.liste-bas select:hover{border-color:var(--navy)}
/* ── liste araç çubuğu: görünüm seçici + filtre çipleri ──────────────────
   16 Eylül. Sıralama kutusu tek başına sağdaydı; yanına görünüm seçici
   geldiği için ikisi tek bir sağ bloğa alındı. */
.lb-sag{display:flex;align-items:center;gap:10px;margin-left:auto}
.liste-bas .lb-sag select{margin-left:0}

.gorunum{display:inline-flex;background:#fff;border:1.5px solid var(--cizgi-koyu);
  border-radius:var(--r);overflow:hidden}
.gorunum a{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;
  font-size:13px;font-weight:600;color:var(--tx-3);
  transition:background var(--hiz),color var(--hiz)}
.gorunum a+a{border-left:1.5px solid var(--cizgi-koyu)}
.gorunum svg{width:15px;height:15px;flex:none}
.gorunum a:hover{background:var(--zemin-yumusak);color:var(--navy)}
.gorunum a.etkin{background:var(--navy);color:#fff}

/* Seçili filtreler listenin üstünde; her çip tek tıkla kalkar. */
.cipler{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:-4px 0 16px}
.cip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 6px 0 12px;
  background:#fff;border:1px solid var(--cizgi-koyu);border-radius:999px;
  font-size:12.5px;color:var(--tx-2);
  transition:border-color var(--hiz),color var(--hiz)}
.cip i{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--zemin-alt);color:var(--tx-3);
  transition:background var(--hiz),color var(--hiz)}
.cip i svg{width:9px;height:9px}
.cip:hover{border-color:var(--kirmizi);color:var(--kirmizi)}
.cip:hover i{background:var(--kirmizi);color:#fff}
.cip-temiz{font-size:12.5px;color:var(--tx-3);text-decoration:underline;text-underline-offset:3px;
  transition:color var(--hiz)}
.cip-temiz:hover{color:var(--kirmizi)}

/* ── ÜRÜN TABLOSU (kategori sayfasının varsayılan görünümü) ──────────────
   Gerekçe ve referans ölçümleri: src/gorunum.js > urunTablosu +
   KATEGORI_TASARIM_DNA.md. Kısaca: alıcı pano imalatçısı, teknik sütunları
   yan yana görmeden seçemiyor.

   Zebra şerit YOK — kılcal çizgi + hoverda sol kırmızı kenar yeterli.
   Zebra 9 sütunlu tabloda göze ikinci bir ritim daha basıyor. */
.tb-sar{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);
  overflow:auto;overscroll-behavior-x:contain}
.tb-sar:focus-visible{outline:2px solid var(--kirmizi);outline-offset:2px}
.tb{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}

.tb thead{position:relative;z-index:3}
.tb thead th{background:var(--navy);color:#fff;
  font-family:var(--basli);font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.055em;line-height:1.2;
  text-align:left;vertical-align:middle;height:44px;padding:8px 9px}
.tb thead th i{font-family:var(--govde);font-style:normal;font-size:11.5px;font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--ters-tx-2)}
.tb-s{display:inline-flex;align-items:center;gap:7px;color:inherit;
  transition:color var(--hiz)}
.tb-s:hover{color:var(--kirmizi-acik-2)}
.tb-ok{flex:none}
.tb-ok .y,.tb-ok .a{fill:var(--ters-tx-3)}
.tb-s:hover .tb-ok .y,.tb-s:hover .tb-ok .a{fill:var(--ters-tx)}
.tb-s.artan .tb-ok .y,.tb-s.azalan .tb-ok .a{fill:#fff}
.tb-s.artan .tb-ok .a,.tb-s.azalan .tb-ok .y{fill:rgba(255,255,255,.22)}

.tb tbody td{border-top:1px solid var(--cizgi);padding:9px 9px;
  vertical-align:middle;color:var(--tx-2)}
.tb tbody tr:first-child td{border-top:0}
.tb tbody tr:hover td{background:var(--zemin-yumusak)}
/* hoverda satırın sol ucunda ince kırmızı işaret: 9 sütunlu tabloda göz
   satırı kaybetmesin (RS'te satır vurgusu var, biz marka rengiyle yapıyoruz) */
.tb tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--kirmizi)}

/* Ürün sütunu yatay kaydırmada sabit kalır — hangi satıra baktığın
   kaybolmasın. Sticky hücrenin kendi zemini olmak ZORUNDA, yoksa altındaki
   sütunlar üstünden geçer. */
.tb .tb-b-urun,.tb .tb-urun{position:sticky;left:0;background:#fff;
  border-right:1px solid var(--cizgi)}
.tb .tb-urun{z-index:2}
.tb .tb-b-urun{z-index:4;background:var(--navy)}
.tb tbody tr:hover .tb-urun{background:var(--zemin-yumusak)}
.tb-urun{min-width:180px}
/* Artan genislik TAMAMEN urun sutununa gider. Aksi halde bos yer tum
   sutunlara orantili dagiliyor ve ozelligi olmayan kategoride (aydinlatma:
   Urun|Marka|Fiyat) marka ile fiyat arasinda genis bir bosluk kaliyordu.
   width:100% + table-layout:auto = digerleri max-content, kalan buraya. */
.tb .tb-b-urun{width:100%}
/* Foto + ad yan yana: hucreye dogrudan flex verilemez (td tablo duzeninden
   cikar), ic sarmalayici kullaniliyor. Once inline-block idi ve uzun WAGO
   adlarinda foto alt satira dusup satiri 120px yapiyordu (olculdu 16 Eyl). */
.tb-urun-ic{display:flex;align-items:center;gap:9px}
.tb-foto{display:grid;place-items:center;width:46px;height:46px;flex:none;
  padding:3px;background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-s)}
.tb-foto img{max-width:100%;max-height:100%;object-fit:contain}
.tb-foto .gorsel-yok{width:26px;height:26px;color:var(--ikon-yedek)}
.tb-ad{flex:1;min-width:0}
.tb-ad a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--navy);font-weight:600;line-height:1.3;transition:color var(--hiz)}
.tb-ad a:hover{color:var(--kirmizi)}
.tb-ad b{display:block;margin-top:2px;font-weight:500;font-size:11.5px;
  color:var(--tx-3);letter-spacing:.03em}

.tb-marka{white-space:nowrap}
.tb-marka a{font-weight:500;transition:color var(--hiz)}
.tb-marka a:hover{color:var(--kirmizi)}

/* Metin degerleri sarabilir: "Sari-Yesil (Topraklama)" tek satirda 160px
   istiyor ve tabloyu yatay kaydirmaya zorluyordu (olculdu: /marka/wago
   ?kategori=ray-klemensler 44px tasma). Sayisal degerler sarmaz. */
/* Urun sutunu width:100% ile bosluk emdigi icin auto-table digerlerine
   min-content veriyor; "Beyaz isik" gibi iki kelimelik degerler gereksiz
   yere iki satira duesuyordu. Taban genislik veriliyor: kisa degerler tek
   satirda kalir, uzun olanlar ("Sari-Yesil (Topraklama)") yine sarar. */
.tb .tb-oz:not(.sayi){min-width:92px}
.tb-oz{color:var(--tx)}
.tb-oz.sayi{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.tb-yok{color:var(--tx-3)}
/* Renk kutucuğu ÜRÜN VERİSİ (klemensin gerçek rengi), arayüz aksanı değil —
   marka paleti kuralı buraya işlemez. Hex yoksa kutucuk hiç basılmaz. */
.tb-renk-ic{display:flex;align-items:center;gap:7px}
.tb-renk{display:block;flex:none;width:11px;height:11px;
  background:var(--r,var(--zemin-alt));border:1px solid rgba(22,32,48,.22);border-radius:50%}

.tb-fiyat{text-align:right;white-space:nowrap;min-width:156px;padding-right:14px}
.tb-liste{display:block;font-size:11.5px;line-height:1.4;color:var(--tx-3)}
.tb-liste em{font-style:normal;font-weight:700;color:var(--kirmizi);margin-left:5px}
.tb-fiyat b{display:block;font-family:var(--basli);font-size:19px;font-weight:700;
  line-height:1.15;color:var(--navy);font-variant-numeric:tabular-nums}
.tb-alt{display:block;font-size:10.5px;line-height:1.45;color:var(--tx-3);white-space:nowrap}
.tb-teklif{font-weight:600;color:var(--kirmizi)}

/* Islem sutunu SAGA yapisik: tablo yatay kaydiginda "Ekle" dugmesi
   kirpiliyordu (sirala=oz_kesit- ekran goruntusu, 16 Eyl — degerler
   uzayinca tablo kabi asiyor). Urun sutunu solda, islem sagda sabit;
   arada ne kadar teknik sutun olursa olsun kimlik ve eylem hep gorunur. */
.tb{--islem-en:164px}
.tb .tb-b-islem,.tb .tb-islem{position:sticky;right:0;width:var(--islem-en);
  min-width:var(--islem-en);background:#fff;border-left:1px solid var(--cizgi)}
/* Fiyat da sagda sabit: yatay kaydirmada kirpilan sey FIYAT olmamali —
   alici karari oradan veriyor. Islem sutunu sabit genislikte oldugu icin
   fiyatin sag ofseti hesaplanabiliyor. Ortada kalan teknik sutunlar kayar. */
.tb .tb-b-fiyat,.tb .tb-fiyat{position:sticky;right:var(--islem-en)}
.tb .tb-fiyat{z-index:2;background:#fff}
.tb .tb-b-fiyat{z-index:4;background:var(--navy)}
.tb tbody tr:hover .tb-fiyat{background:var(--zemin-yumusak)}
.tb .tb-islem{z-index:2}
.tb .tb-b-islem{z-index:4;background:var(--navy)}
.tb tbody tr:hover .tb-islem{background:var(--zemin-yumusak)}
.tb-islem{white-space:nowrap;text-align:right;padding-right:12px}
.tb-ekle{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.tb-adet{width:46px;height:32px;padding:0 3px;text-align:center;
  background:#fff;border:1.5px solid var(--cizgi-koyu);border-radius:var(--r-s);
  font-size:13px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.tb-adet::-webkit-outer-spin-button,.tb-adet::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tb-adet:focus{border-color:var(--navy);outline:none}
.tb-islem .dugme{height:32px;padding:0 11px;font-size:12.5px}
.tb-favori{display:inline-grid;place-items:center;width:32px;height:32px;margin-left:5px;
  vertical-align:middle;background:#fff;border:1.5px solid var(--cizgi);border-radius:var(--r-s);
  color:var(--tx-3);cursor:pointer;transition:color var(--hiz),border-color var(--hiz)}
.tb-favori svg{width:16px;height:16px}
.tb-favori:hover,.tb-favori[aria-pressed="true"]{color:var(--kirmizi);border-color:var(--kirmizi)}

/* 760px altında site başlığı sarıyor ve yüksekliği sabit değil — sticky
   başlık satırı 76px'e yapıştırılamaz, yapıştırılırsa başlığın altında
   kalır. O ölçüde tablo başlığı akışta kalıyor. */
@media (max-width:760px){
  .tb thead th{position:static}
  .tb-urun{min-width:190px}
  .tb-foto{width:38px;height:38px}
  .lb-sag{width:100%;margin-left:0}
  .lb-sag select{flex:1;min-width:0}
}


.iz{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--tx-3);
  padding:14px 0;flex-wrap:wrap}
.iz a{transition:color var(--hiz)}
.iz a:hover{color:var(--kirmizi)}
.iz i{font-style:normal;color:var(--cizgi-koyu)}

.sayfalar{display:flex;gap:6px;justify-content:center;padding:34px 0 0;flex-wrap:wrap}
.sayfalar a,.sayfalar span{min-width:40px;height:40px;display:grid;place-items:center;
  border:1.5px solid var(--cizgi);border-radius:var(--r);font-size:13.5px;font-weight:600;
  padding:0 12px;font-variant-numeric:tabular-nums;transition:border-color var(--hiz),background var(--hiz)}
.sayfalar a:hover{border-color:var(--navy);background:var(--zemin-yumusak)}
.sayfalar .simdi{background:var(--navy);border-color:var(--navy);color:#fff}

.bos{text-align:center;padding:74px 20px;background:#fff;border:1px dashed var(--cizgi-koyu);
  border-radius:var(--r-l)}
.bos h3{font-size:21px;color:var(--navy);margin-bottom:8px}
.bos p{color:var(--tx-3);font-size:14.5px;margin:0 0 18px}

/* ── ürün detay ────────────────────────────────── */
.detay{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:18px 0 20px;align-items:start}
.detay-gorsel{background:#fff;border:1px solid var(--cizgi);
  border-radius:var(--r-l);aspect-ratio:1;display:grid;place-items:center;padding:44px}
.detay-gorsel img{max-height:100%;width:auto;object-fit:contain}
.kucukler{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.kucuk{width:62px;height:62px;padding:5px;border:1.5px solid var(--cizgi);border-radius:var(--r);
  background:#fff;cursor:pointer;display:grid;place-items:center;
  transition:border-color var(--hiz),transform var(--hiz)}
.kucuk img{max-width:100%;max-height:100%;object-fit:contain}
.kucuk:hover{border-color:var(--cizgi-koyu);transform:translateY(-2px)}
.kucuk.secili{border-color:var(--navy)}

/* varyant seçiciler */
.varyant{margin-bottom:16px}
.v-baslik{display:flex;gap:8px;align-items:baseline;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx-3);font-weight:700;margin-bottom:8px}
.v-baslik b{font-family:var(--govde);font-size:13px;letter-spacing:0;text-transform:none;
  color:var(--navy);font-weight:600}
.v-secenekler{display:flex;gap:7px;flex-wrap:wrap}
.v-secenekler a{padding:8px 14px;border:1.5px solid var(--cizgi-koyu);border-radius:var(--r);
  font-size:13.5px;font-weight:600;color:var(--tx-2);background:#fff;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--hiz),background var(--hiz),color var(--hiz)}
.v-secenekler a:hover{border-color:var(--navy);color:var(--navy)}
.v-secenekler a.secili{background:var(--navy);border-color:var(--navy);color:#fff}
.v-renkler{display:flex;gap:9px;flex-wrap:wrap}
.v-renk{width:34px;height:34px;border-radius:50%;background:var(--r,var(--cizgi-koyu));
  border:2px solid #fff;box-shadow:0 0 0 1.5px var(--cizgi-koyu);
  transition:box-shadow var(--hiz),transform var(--hiz)}
.v-renk:hover{transform:scale(1.08);box-shadow:0 0 0 1.5px var(--navy)}
.v-renk.secili{box-shadow:0 0 0 2.5px var(--navy)}

/* metin + iç link */
.metin-duzen{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start}
.metin-duzen h2{font-size:21px;color:var(--navy);margin:0 0 12px}
.metin-duzen h2#sss{margin-top:30px}
.metin-duzen article > p{font-size:15px;line-height:1.8;color:var(--tx-2);margin:0}
.sss{display:grid;gap:8px}
.sss details{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r)}
.sss summary{padding:14px 16px;font-size:14.5px;font-weight:600;color:var(--navy);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:'+';color:var(--kirmizi);font-size:19px;line-height:1;flex:none}
.sss details[open] summary::after{content:'−'}
.sss details p{margin:0;padding:0 16px 15px;font-size:14px;line-height:1.7;color:var(--tx-2)}
.ic-link{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);padding:16px;
  position:sticky;top:96px}
.ic-link h3{font-size:12px;letter-spacing:.1em;color:var(--tx-3);margin-bottom:11px}
.ic-link a{display:block;padding:9px 0;border-bottom:1px solid var(--zemin-alt);
  font-size:13.5px;font-weight:600;color:var(--navy);transition:color var(--hiz)}
.ic-link a:last-child{border-bottom:0}
.ic-link a em{display:block;font-style:normal;font-size:11.5px;font-weight:400;
  color:var(--tx-3);margin-top:2px}
.ic-link a:hover{color:var(--kirmizi)}

/* resmî metinler */
.resmi{max-width:820px;margin:10px auto 60px;background:#fff;border:1px solid var(--cizgi);
  border-radius:var(--r-l);padding:38px 42px}
.resmi h1{font-size:30px;color:var(--navy);margin-bottom:8px}
.resmi-ozet{color:var(--tx-3);font-size:14px;margin:0 0 26px;padding-bottom:18px;
  border-bottom:1px solid var(--cizgi)}
.resmi section{margin-bottom:26px}
.resmi h2{font-size:17px;color:var(--navy);margin-bottom:10px}
.resmi p{font-size:14.5px;line-height:1.8;color:var(--tx-2);margin:0 0 11px}
/* ── İLETİŞİM SAYFASI (16 Eyl) ───────────────────────────────────────────
   /iletisim 404 donuyordu ve kategori metninden oraya link veriliyordu.
   Ticari sitede iletisim sayfasi hem guven hem mevzuat gerekliligi. */
.il-kutular{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin:22px 0 30px}
.il-kutu{display:flex;flex-direction:column;gap:3px;padding:18px 20px;
  background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);
  transition:border-color var(--hiz),box-shadow var(--hiz)}
.il-kutu:hover{border-color:var(--navy);box-shadow:var(--golge-2)}
.il-ust{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--kirmizi);
  font-weight:600}
.il-kutu b{font-family:var(--basli);font-size:22px;line-height:1.1;color:var(--navy);
  letter-spacing:-.01em}
.il-deger{font-size:13px;color:var(--tx-2)}
.il-not{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--tx-3)}

.resmi-tarih{font-size:12.5px;color:var(--tx-3);border-top:1px solid var(--cizgi);
  padding-top:16px;margin-top:30px}
.detay h1{font-size:29px;color:var(--navy);margin:10px 0 14px;line-height:1.18}
.detay .ust{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.detay .ust .marka{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--kirmizi);
  text-transform:uppercase}
.detay .ust .sku{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--tx-3);
  background:var(--zemin-alt);padding:3px 9px;border-radius:var(--r-s)}
.detay .ozet{color:var(--tx-2);font-size:14.5px;line-height:1.7;margin:0 0 22px}

.fiyat-kutu{background:var(--zemin-yumusak);border:1px solid var(--cizgi);
  border-radius:var(--r-l);padding:22px;margin-bottom:18px}
.fiyat-kutu .satir{display:flex;justify-content:space-between;align-items:baseline;
  padding:7px 0;font-size:14px;color:var(--tx-2);font-variant-numeric:tabular-nums}
.fiyat-kutu .satir.buyuk{border-top:1px solid var(--cizgi-koyu);margin-top:9px;padding-top:14px}
.fiyat-kutu .satir.buyuk b{font-family:var(--basli);font-size:34px;color:var(--navy);
  line-height:1}
/* Google adet fiyatı (15 Eki 2026) — 16 Eki MAXEL MODELİ: kutudaki TEK büyük fiyat bu
   (adet/metre KDV dahil = feed = JSON-LD). Koli toplamı ve KDV dökümü sepette. */
.fiyat-kutu .satir.g-birim{padding:0 0 6px;color:var(--tx-1);font-weight:600;align-items:baseline}
.fiyat-kutu .satir.g-birim b{font-family:var(--basli);font-size:34px;color:var(--navy);line-height:1}
.fiyat-kutu .f-kdv-not{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--tx-3)}
.sepet-sat .adet-birim{flex:none;align-self:center;font-size:13.5px;font-weight:700;color:var(--tx-2)}
.fiyat-kutu .g-asgari{margin:8px 0 6px;padding:10px 0;border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--kirmizi);text-transform:uppercase}
.fiyat-kutu .cizik{text-decoration:line-through;color:var(--tx-3)}
.fiyat-kutu .isk{color:var(--kirmizi);font-weight:700}
.sepet-sat{display:flex;gap:10px;align-items:stretch;margin-top:16px}
/* ⚠ flex:none ŞART. Sepet tablosundaki hücre kontrolden dar olduğunda butonlar
   40px'ten 23px'e eziliyor, "+" düğmesi kadraj dışında kalıyordu (Erhan: bug).
   Kutu kendi genişliğini korur, hücre ona göre yer açar. */
.adet-kutu{display:inline-flex;align-items:center;border:1.5px solid var(--cizgi-koyu);
  border-radius:var(--r);overflow:hidden;background:#fff;width:max-content;flex:none}
.adet-kutu button{flex:none;width:40px;height:46px;border:0;background:transparent;
  font-size:19px;line-height:1;cursor:pointer;color:var(--tx-2);
  transition:background var(--hiz)}
.adet-kutu button:hover{background:var(--zemin-alt)}
.adet-kutu input{flex:none;width:52px;height:46px;border:0;text-align:center;font-weight:700;
  font-variant-numeric:tabular-nums;background:transparent;
  -moz-appearance:textfield;appearance:textfield}
.adet-kutu input::-webkit-outer-spin-button,
.adet-kutu input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sepet-sat .dugme{flex:1;justify-content:center;height:46px;font-size:14.5px}

.uyari{display:flex;gap:11px;padding:13px 15px;background:var(--zemin-yumusak);border:1px solid var(--uyari-zemin);
  border-radius:var(--r);font-size:13px;color:var(--uyari);line-height:1.55}
.uyari b{color:var(--uyari)}

.ozellik-tablo{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px}
.ozellik-tablo tr{border-bottom:1px solid var(--cizgi)}
.ozellik-tablo td{padding:11px 4px}
.ozellik-tablo td:first-child{color:var(--tx-3);width:44%}
.ozellik-tablo td:last-child{font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums}

/* ── alt bilgi ─────────────────────────────────── */
.alt{background:var(--navy);color:var(--ters-tx-2);margin-top:20px;font-size:13.5px}
.alt .kap{display:grid;grid-template-columns:1.25fr 1.6fr 1fr 1fr;gap:30px 48px;padding:52px 20px 44px}
.alt-marka-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.alt h4{color:#fff;font-size:15px;letter-spacing:.06em;margin-bottom:14px}
.alt a{display:block;padding:5px 0;transition:color var(--hiz)}
.alt-unvan{color:var(--ters-tx);font-size:13.5px;max-width:30ch}
/* iletişim: etiket | değer satırları (8 Eki) */
.alt-iletisim{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.alt-iletisim li{display:grid;grid-template-columns:62px 1fr;align-items:baseline;gap:10px}
.alt-iletisim span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ters-tx-3)}
.alt .alt-iletisim a{display:inline;padding:0;min-height:0;color:var(--ters-tx)}
.alt .alt-iletisim a:hover{color:#fff}
.alt-iletisim em{font-style:normal;font-size:12.5px;line-height:1.6;color:var(--ters-tx-2)}
.alt-sosyal{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.alt-sosyal a{padding:6px 13px;border:1px solid rgba(255,255,255,.18);border-radius:100px;
  font-size:12.5px;transition:border-color var(--hiz),background var(--hiz)}
.alt-sosyal a:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.alt a:hover{color:#fff}
.alt .logo{color:#fff;margin-bottom:12px}
.alt .logo small{color:var(--ters-tx-3)}
.alt p{margin:0 0 8px;line-height:1.7}
.alt-linkler{border-top:1px solid rgba(255,255,255,.11)}
.alt-linkler .kap{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:22px 20px;
  grid-template-rows:none}
.alt-linkler h5{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ters-tx-3);margin-bottom:10px;font-weight:700}
.al-liste{display:flex;gap:7px;flex-wrap:wrap}
.al-liste a{padding:0;font-size:12.5px;color:var(--ters-tx-2);display:inline}
.al-liste a::after{content:' ·';color:var(--tx-3)}
.al-liste a:last-child::after{content:''}
.al-liste a:hover{color:#fff}
.alt-bar{border-top:1px solid rgba(255,255,255,.11);position:relative}
.alt-bar .kap{display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;font-size:12.5px;grid-template-columns:none}
.limegraf{position:absolute;left:50%;transform:translateX(-50%);display:flex;
  align-items:center;gap:8px;font-size:11.5px;opacity:.5;transition:opacity var(--hiz)}
.limegraf:hover{opacity:1}
.limegraf img{height:15px;width:auto;filter:brightness(0) invert(1)}

/* ── bildirim ──────────────────────────────────── */
.bildirim{position:fixed;left:50%;bottom:26px;z-index:300;background:var(--navy);color:#fff;
  padding:13px 22px;border-radius:var(--r);box-shadow:var(--golge-3);font-size:14px;font-weight:600;
  opacity:0;transform:translate(-50%,14px);transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.3,1)}
.bildirim.gir{opacity:1;transform:translate(-50%,0)}
.bildirim.hata{background:var(--kirmizi)}

/* ── sepet ─────────────────────────────────────── */
.sepet-duzen{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start;padding:6px 0 60px}
.s-baslik{font-size:28px;color:var(--navy);margin-bottom:18px;display:flex;align-items:baseline;gap:12px}
.s-baslik span{font-family:var(--govde);font-size:14px;font-weight:500;color:var(--tx-3)}
.sepet-tablo{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--cizgi);
  border-radius:var(--r-l);overflow:hidden}
.sepet-tablo th{text-align:left;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-3);padding:13px 14px;background:var(--zemin-yumusak);border-bottom:1px solid var(--cizgi);
  font-weight:700}
.sepet-tablo td{padding:14px;border-bottom:1px solid var(--cizgi);vertical-align:middle}
.sepet-tablo tr:last-child td{border-bottom:0}
.s-urun{display:flex;gap:13px;align-items:flex-start;min-width:280px}
.s-gorsel{width:64px;height:64px;flex:none;background:var(--zemin-yumusak);border-radius:var(--r);
  display:grid;place-items:center;padding:6px}
.s-gorsel img{max-width:100%;max-height:100%;object-fit:contain}
.s-ad{display:block;font-size:14px;font-weight:500;color:var(--tx);margin:3px 0;line-height:1.4;
  transition:color var(--hiz)}
.s-ad:hover{color:var(--kirmizi)}
.s-birim{display:block;font-size:11.5px;color:var(--tx-3);margin-top:3px}
/* Ürün bazlı iskonto satırı (sepet): liste üstü çizili + kırmızı % */
.s-iskonto{display:block;font-size:11.5px;color:var(--tx-3);margin-top:3px;font-variant-numeric:tabular-nums}
.s-iskonto s{color:var(--tx-3)}
.s-iskonto b{color:var(--kirmizi);font-weight:700}
.s-fiyat{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.s-fiyat small{display:block;font-weight:500;color:var(--tx-3);font-size:11px}
.s-toplam{font-family:var(--basli);font-size:19px;color:var(--navy);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.s-sil{border:0;background:transparent;color:var(--tx-3);cursor:pointer;padding:6px;border-radius:var(--r-s);
  transition:color var(--hiz),background var(--hiz)}
.s-sil svg{width:17px;height:17px}
.s-sil:hover{color:var(--kirmizi);background:var(--zemin-alt)}
.adet-kutu.kucuk button{width:30px;height:36px;font-size:16px}
.adet-kutu.kucuk input{width:40px;height:36px}
/* sepet tablosunda miktar sütununa kontrol kadar yer ayrılır */
.sepet-tablo td:has(.adet-kutu){min-width:112px}

.ozet{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);padding:20px;
  position:sticky;top:96px}
.ozet h3{font-size:17px;color:var(--navy);margin-bottom:14px}
.o-satir{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;
  font-size:14px;color:var(--tx-2);font-variant-numeric:tabular-nums;gap:14px}
.o-satir.kucuk-satir{font-size:12.5px;border-bottom:1px dashed var(--cizgi);padding:9px 0}
.o-satir.kucuk-satir em{font-style:normal;color:var(--tx-3);font-size:11.5px}
.o-satir .cizik{text-decoration:line-through;color:var(--tx-3)}
.o-satir .isk{color:var(--kirmizi);font-weight:600}
.o-satir.buyuk{border-top:1px solid var(--cizgi-koyu);margin-top:9px;padding-top:13px}
.o-satir.buyuk b{font-family:var(--basli);font-size:26px;color:var(--navy)}
.genis-dugme{width:100%;justify-content:center;margin-top:12px;height:46px}
.o-not{font-size:12px;color:var(--tx-3);line-height:1.55;margin:12px 0 0}
.kupon-kutu{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--cizgi)}
.kupon-kutu input[name=kupon_kod]{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--cizgi-koyu);
  border-radius:var(--r-s);font-size:13px}
.kupon-kutu .dugme,.kupon-kutu .mini{flex:none}
.kupon-uygulandi{flex:1;font-size:13px;color:var(--basari);font-weight:600;display:flex;align-items:center}
.o-guven{display:grid;grid-template-columns:auto 1fr;gap:7px 10px;align-items:center;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--cizgi);font-size:12px;color:var(--tx-3)}
.o-guven svg{width:16px;height:16px;color:var(--navy)}

/* ── formlar ───────────────────────────────────── */
.form-duzen{display:grid;grid-template-columns:330px 1fr;gap:38px;align-items:start;padding:6px 0 60px}
.form-yan h1{font-size:30px;color:var(--navy);margin-bottom:12px}
.form-yan p{color:var(--tx-2);font-size:14.5px;line-height:1.7;margin:0 0 20px}
.madde{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.madde li{display:flex;gap:12px;align-items:flex-start}
.madde svg{width:20px;height:20px;color:var(--kirmizi);flex:none;margin-top:2px}
.madde b{display:block;font-size:14px;color:var(--navy)}
.madde span{font-size:13px;color:var(--tx-3);line-height:1.55}

.dar-form{max-width:440px;margin:34px auto 70px}
.dar-form h1{font-size:28px;color:var(--navy);margin-bottom:10px}
.dar-form p{color:var(--tx-3);font-size:14px;margin:0 0 20px}
.dar-form a{color:var(--kirmizi);font-weight:600}

.form{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);padding:24px}
.form h3{font-size:15px;color:var(--navy);margin:22px 0 12px;padding-bottom:8px;
  border-bottom:1px solid var(--cizgi)}
.form h3:first-child{margin-top:0}
.alanlar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.alan{display:flex;flex-direction:column;gap:6px}
.alan.genis{grid-column:1/-1}
.alan label{font-size:12.5px;font-weight:600;color:var(--tx-2)}
.alan label i{color:var(--kirmizi);font-style:normal}
.alan input,.alan select,.alan textarea,textarea,.adim select{height:44px;padding:0 13px;border:1.5px solid var(--cizgi-koyu);
  border-radius:var(--r);background:#fff;font-size:14px;width:100%;
  transition:border-color var(--hiz),box-shadow var(--hiz)}
.alan textarea,textarea{height:auto;padding:11px 13px;line-height:1.6;resize:vertical;font-family:inherit}
.alan input:focus,.alan select:focus,.alan textarea:focus,textarea:focus,.adim select:focus{
  border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(22,32,48,.08)}
.alan small{font-size:11.5px;color:var(--tx-3)}
.alan small.hata{color:var(--kirmizi);font-weight:600}
.alan.hatali input{border-color:var(--kirmizi)}
.form-hata{background:var(--zemin-yumusak);border:1px solid var(--hata-cizgi);color:var(--hata);padding:12px 15px;
  border-radius:var(--r);font-size:13.5px;margin-bottom:18px;font-weight:500}
.form-basari,.form-bilgi{background:var(--zemin-yumusak);border:1px solid var(--basari-cizgi);color:var(--basari);padding:12px 15px;
  border-radius:var(--r);font-size:13.5px;margin-bottom:18px;font-weight:500}
/* form altındaki ikincil bağlantı (şifremi unuttum / girişe dön) */
.form-alt{margin:14px 0 0;text-align:center;font-size:13px}
.form-alt a{color:var(--tx-2);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
.form-alt a:hover{color:var(--kirmizi)}
.form-not{font-size:12.5px;color:var(--tx-3);line-height:1.6;margin:14px 0 0}
.form-not a{color:var(--kirmizi);font-weight:600}

.adim{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);padding:20px;margin-bottom:16px}
.adim h3{font-size:15px;color:var(--navy);margin-bottom:13px}
.secenekler{display:grid;gap:9px}
.secenek{display:flex;gap:12px;align-items:flex-start;padding:13px;border:1.5px solid var(--cizgi);
  border-radius:var(--r);cursor:pointer;transition:border-color var(--hiz),background var(--hiz)}
.secenek:hover{border-color:var(--cizgi-koyu);background:var(--zemin-yumusak)}
.secenek input{margin-top:3px;accent-color:var(--kirmizi);flex:none}
.secenek:has(input:checked){border-color:var(--navy);background:var(--zemin-yumusak)}
.secenek.pasif{opacity:.5;cursor:not-allowed}
.secenek b{display:block;font-size:14px;color:var(--navy)}
.secenek span{display:block;font-size:12.5px;color:var(--tx-3);margin-top:2px}
/* ⚠ Erhan bulgusu (4 Eylül): adres kartında "Teslim alacak" metni 62×62px
   kare kutuya sıkışmış, telefon numarası taşıyordu — kök neden ".kucuk" adı
   İKİ AYRI yerde kullanılmış: ürün galerisi küçük resmi (yukarıda, satır 1205,
   62×62px kare) ve burada "küçük metin" (font-size). Aynı isim, aynı özgüllük
   → ikisi de aynı elemana biniyordu. Metin tarafı ".metin-kucuk" oldu, galeri
   ".kucuk" kalıyor (istemci.js'te data-gorsel seçici olarak canlı kullanılıyor). */
.metin-kucuk{font-size:12.5px;color:var(--tx-3)}
.onay{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--tx-2);
  line-height:1.6;margin:16px 0 4px;cursor:pointer}
.onay input{margin-top:3px;accent-color:var(--kirmizi);width:16px;height:16px;flex:none}
.onay a{color:var(--kirmizi);font-weight:600}
/* 17 Eki - kayit formu: hata ozeti (ustte, baglantili liste), sozlesme hatasi,
   firma turu secimi (iki kart yan yana), sevk-ayni kutusu. Siniflar yeni ve
   tekil: hata-ozet / onay-hata / firma-tur-sec / sevk-ayni-kutu (cakisma aranmistir). */
.hata-ozet b{display:block;margin-bottom:6px}
.hata-ozet ul{margin:0;padding-left:18px;line-height:1.7;font-weight:400}
.hata-ozet a{color:var(--hata);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.hata-ozet a:hover{color:var(--navy)}
.hata-ozet a:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:2px}
.hata-ozet small{display:block;margin-top:8px;font-weight:400;color:var(--tx-2)}
.onay.hatali span{color:var(--hata)}
.onay.hatali input{outline:2px solid var(--kirmizi);outline-offset:2px}
.onay-hata{display:block;color:var(--kirmizi);font-weight:600;font-size:12px;margin:0 0 6px 26px}
.firma-tur-sec{grid-template-columns:1fr 1fr;border:0;padding:0;margin:0 0 16px;min-width:0}
.firma-tur-sec .secenek input{width:16px;height:16px}
.firma-tur-sec .secenek:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,32,48,.08)}
.firma-tur-sec .secenek:active{transform:scale(.99)}
.sevk-ayni-kutu{margin:0 0 14px}
[data-sevk-alanlari][hidden]{display:none}
@media (max-width:640px){.firma-tur-sec{grid-template-columns:1fr}}

/* ── hesap ─────────────────────────────────────── */
.hesap-duzen{display:grid;grid-template-columns:236px 1fr;gap:28px;align-items:start;padding:6px 0 60px}
.hesap-yan{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);overflow:hidden;
  position:sticky;top:96px}
.hesap-firma{padding:17px;border-bottom:1px solid var(--cizgi);background:var(--zemin-yumusak)}
.hesap-firma b{display:block;font-size:14.5px;color:var(--navy);line-height:1.35}
.hesap-firma span{font-size:12px;color:var(--tx-3)}
.hesap-yan nav a{display:block;padding:12px 17px;font-size:14px;color:var(--tx-2);
  border-bottom:1px solid var(--zemin-alt);transition:background var(--hiz),color var(--hiz)}
.hesap-yan nav a:hover{background:var(--zemin-yumusak);color:var(--navy)}
.hesap-yan nav a[aria-current]{background:var(--navy);color:#fff;font-weight:600}
.hesap-yan nav .cikis{color:var(--kirmizi)}
.kutu-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px}
.bilgi-kutu{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);padding:17px}
.bilgi-kutu span{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-3);font-weight:600;margin-bottom:6px}
.bilgi-kutu b{font-family:var(--basli);font-size:22px;color:var(--navy);line-height:1.2}
.adres-kart{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);padding:17px}
.adres-kart b{display:block;font-size:15px;color:var(--navy);margin:8px 0 6px}
.adres-kart p{margin:0;font-size:13.5px;color:var(--tx-2);line-height:1.6}
.adres-kart p.metin-kucuk{margin-top:8px;padding-top:8px;border-top:1px solid var(--cizgi)}

.etiket{display:inline-block;padding:3px 9px;border-radius:100px;font-size:11px;font-weight:700;
  background:var(--zemin-alt);color:var(--tx-2);text-transform:uppercase;letter-spacing:.04em}
.etiket.onaylandi,.etiket.aktif,.etiket.onayli{background:var(--basari-zemin);color:var(--basari)}
.etiket.bekliyor{background:var(--uyari-zemin);color:var(--uyari)}
.etiket.basarisiz,.etiket.kara_liste,.etiket.red,.etiket.iptal{background:var(--hata-zemin);color:var(--hata)}
.etiket.odendi{background:var(--basari-zemin);color:var(--basari)}
.etiket.askida{background:var(--uyari-zemin);color:var(--uyari)}
.uyari-etiket{background:var(--uyari-zemin);color:var(--uyari)}

.basari-kutu{max-width:520px;margin:60px auto;text-align:center;background:#fff;
  border:1px solid var(--cizgi);border-radius:var(--r-l);padding:44px 32px}
.basari-ikon{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;background:var(--basari-zemin);
  display:grid;place-items:center;color:var(--basari)}
.basari-ikon svg{width:30px;height:30px}
.basari-kutu h1{font-size:27px;color:var(--navy);margin-bottom:10px}
.basari-kutu p{color:var(--tx-2);font-size:14.5px;margin:0 0 20px}
.basari-toplam{background:var(--zemin-yumusak);border-radius:var(--r);padding:15px;
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
.basari-toplam b{font-family:var(--basli);font-size:26px;color:var(--navy)}
.basari-dugmeler{display:flex;gap:10px;justify-content:center}

.odeme-kutu{max-width:560px;margin:44px auto;background:#fff;
  border:1px solid var(--cizgi);border-radius:var(--r-l);padding:32px}
.odeme-kutu iframe{border-radius:var(--r)}

/* ── panel ─────────────────────────────────────── */
.panel-govde{background:var(--zemin-alt)}
.panel-duzen{display:grid;grid-template-columns:222px 1fr;min-height:100vh}
.panel-yan{background:var(--navy);color:var(--ters-tx-2);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh}
.panel-logo{font-family:var(--basli);font-size:20px;font-weight:800;color:#fff;padding:20px 18px;
  letter-spacing:-.01em;border-bottom:1px solid rgba(255,255,255,.1)}
.panel-logo span{color:var(--kirmizi)}
.panel-yan nav{flex:1;padding:10px 0;overflow-y:auto}
.panel-yan nav a{display:block;padding:10px 18px;font-size:13.5px;color:var(--ters-tx-2);
  transition:background var(--hiz),color var(--hiz);border-left:3px solid transparent}
.panel-yan nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.panel-yan nav a[aria-current]{background:var(--navy-2);color:#fff;border-left-color:var(--kirmizi);font-weight:600}
/* 21 Eki: okunmamış form rozeti (menü öğesinin sağında kırmızı "! N") */
.panel-yan nav .menu-bildirim{display:inline-flex;align-items:center;gap:3px;margin-left:8px;padding:1px 7px 1px 6px;
  border-radius:999px;background:var(--kirmizi);color:#fff;font-size:11px;font-weight:700;line-height:16px;
  vertical-align:1px;box-shadow:0 0 0 2px rgba(182,33,38,.28)}
.panel-yan nav .menu-bildirim i{font-style:normal;font-weight:800}
.panel-alt{padding:15px 18px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px}
.panel-alt span{display:block;color:#fff;margin-bottom:5px}
.panel-alt a{color:var(--kirmizi)}
.panel-ana{padding:22px 26px 50px;min-width:0}
.panel-bas{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.panel-bas h1{font-size:25px;color:var(--navy);flex:1}
.panel-kart{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);padding:20px;
  margin-bottom:18px;overflow-x:auto}
.panel-kart h2{font-size:17px;color:var(--navy);margin-bottom:12px}
.panel-kart h2 small{font-family:var(--govde);font-size:13px;color:var(--tx-3);font-weight:500}
.kart-not{font-size:12.5px;color:var(--tx-3);line-height:1.6;margin:0 0 14px}
/* Asgari sipariş notu — ambalaj iddiası DEĞİL, ticari kuralımız. */
.min-not{font-size:12.5px;color:var(--tx-3);line-height:1.55;margin:8px 0 0}
.min-not strong{color:var(--tx-1);font-weight:600}
/* panel özet sayıları — rakam ve etiket ayrı satırda, bitişik okunmasın */
.panel-sayilar{display:flex;flex-wrap:wrap;gap:14px}
.panel-sayilar>div{flex:1 1 160px;background:var(--zemin-alt);border-radius:var(--r);
  padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.panel-sayilar b{font-family:var(--basli);font-size:26px;color:var(--navy);line-height:1}
.panel-sayilar span{font-size:12px;color:var(--tx-3);font-weight:600}
.kart-not a{color:var(--kirmizi);font-weight:600}
.panel-ikili{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.kpi-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:13px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);padding:16px}
.kpi span{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx-3);font-weight:600;margin-bottom:7px}
.kpi b{font-family:var(--basli);font-size:29px;color:var(--navy);line-height:1;
  font-variant-numeric:tabular-nums}
.kpi.vurgu{border-color:var(--kirmizi)}
.kpi.vurgu b{color:var(--kirmizi)}
.panel-tablo{width:100%;border-collapse:collapse;font-size:13.5px}
.panel-tablo th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-3);padding:9px 10px;border-bottom:1.5px solid var(--cizgi);font-weight:700;white-space:nowrap}
.panel-tablo td{padding:10px;border-bottom:1px solid var(--zemin-alt);vertical-align:top}
.panel-tablo tr:hover td{background:var(--zemin-yumusak)}
.panel-tablo small{color:var(--tx-3);font-size:11.5px}
.panel-tablo a{color:var(--navy)}
.panel-tablo a:hover{color:var(--kirmizi)}
.sade-liste{list-style:none;margin:0;padding:0}
.sade-liste li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--zemin-alt);font-size:13.5px;color:var(--tx-2)}
.sade-liste b{font-variant-numeric:tabular-nums;color:var(--navy)}
.bos-satir{color:var(--tx-3);font-size:13.5px;padding:16px 0;margin:0}
.panel-filtre{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.panel-filtre a{padding:7px 14px;border-radius:100px;background:#fff;border:1px solid var(--cizgi);
  font-size:13px;color:var(--tx-2);transition:background var(--hiz),color var(--hiz),border-color var(--hiz)}
.panel-filtre a:hover{border-color:var(--cizgi-koyu)}
.panel-filtre a.aktif{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.panel-arama{display:flex;gap:9px;margin-bottom:16px}
.panel-arama input{flex:1;max-width:400px;height:42px;padding:0 13px;border:1.5px solid var(--cizgi-koyu);
  border-radius:var(--r);font-size:14px}
.mini{padding:5px 11px;border-radius:var(--r-s);border:1px solid var(--cizgi-koyu);background:#fff;
  font-size:12px;font-weight:600;cursor:pointer;color:var(--tx-2);
  transition:background var(--hiz),color var(--hiz),border-color var(--hiz)}
.mini:hover{border-color:var(--navy)}
.mini.acik{background:var(--basari-zemin);border-color:var(--basari-cizgi);color:var(--basari)}
.mini.sil{color:var(--kirmizi);border-color:var(--hata-cizgi)}
.mini.sil:hover{background:var(--hata-zemin)}
.toplam-blok{margin-top:14px;padding-top:14px;border-top:1px solid var(--cizgi)}
.toplam-blok div{display:flex;justify-content:space-between;padding:5px 0;font-size:14px;
  color:var(--tx-2);font-variant-numeric:tabular-nums}
.toplam-blok .buyuk{border-top:1px solid var(--cizgi);margin-top:7px;padding-top:11px}
.toplam-blok .buyuk b{font-family:var(--basli);font-size:23px;color:var(--navy)}
.adres-oku b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx-3);margin-top:11px}
.adres-oku p{margin:3px 0 0;font-size:13.5px;color:var(--tx-2);line-height:1.6}
.yorum-kart{border:1px solid var(--cizgi);border-radius:var(--r);padding:15px;margin-bottom:12px}
.yorum-bas{display:flex;gap:11px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--tx-3)}
.yorum-bas b{color:var(--uyari);font-size:14px}
.yorum-bas em{font-style:normal;margin-left:auto}
.yorum-kart h4{font-size:14.5px;color:var(--navy);margin:9px 0 5px}
.yorum-kart p{margin:0;font-size:13.5px;color:var(--tx-2);line-height:1.6}
.yorum-dugmeler{display:flex;gap:8px;margin-top:11px}
.panel-kart .sayfalar{padding-top:16px}
/* panel ÜRÜN İLGİSİ (16 Eki) — gün gün tablo, mini seri, seçili satır. Palet: navy + kırmızı + gri.
   NOT: bu dosyada YORUMA BACKTICK YAZILMAZ. */
.kpi-alt{display:block;margin-top:7px;font-size:11.5px;line-height:1.4;color:var(--tx-3);font-weight:500}
.kpi-alt a{color:var(--kirmizi);font-weight:600}
.ilgi-cubuk{display:inline-block;vertical-align:middle;width:72px;height:6px;margin-right:9px;
  background:var(--zemin-alt);border-radius:3px;overflow:hidden}
.ilgi-cubuk i{display:block;height:100%;background:var(--navy);border-radius:3px}
.ilgi-gunler td,.ilgi-tek{white-space:nowrap}
.ilgi-gunler tr.ilgi-sessiz td{color:var(--tx-3)}
.panel-tablo tr.secili td{background:var(--zemin-yumusak)}
.panel-tablo tr.secili td:first-child{box-shadow:inset 3px 0 0 var(--kirmizi)}
.ilgi-seri{display:inline-flex;align-items:flex-end;gap:2px;height:26px;vertical-align:middle}
.ilgi-seri i{display:block;width:6px;background:var(--cizgi-koyu);border-radius:1px}
.ilgi-seri i.var{background:var(--navy)}
.ilgi-seri i.sep{background:var(--kirmizi)}
.ilgi-alt-bas{font-family:var(--govde);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-3);font-weight:700;margin:0 0 8px}
.ilgi-alt-bas small{text-transform:none;letter-spacing:0;font-weight:500}
.ilgi-alt-bas:not(:first-child){margin-top:20px}
.ilgi-notlar{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--tx-2)}
.ilgi-notlar li{margin-bottom:7px}

/* ── PANEL v2 (17 Eki 2026) — Erhan: "anasının ... kadar aşağı iniyoruz".
   Ortak parçalar: sekme, araç çubuğu + filtre çipi, tablo alt çubuğu
   (göster 10/20/30/50 + aralık + sayfalar), daha fazla göster, geri,
   iletişim düğmeleri, sepet hücreleri, huni. Palet: navy + kırmızı + gri;
   tek istisna WhatsApp yeşili. Yalnız transform/opacity/renk geçişi.
   NOT: bu dosyada YORUMA BACKTICK YAZILMAZ. */
/* 17 Eki HATA (Erhan ekran görüntüsü): overflow-x:auto dikeyi de "auto" yapar; sekmenin
   margin-bottom:-1.5px'i alt çizgiyi kutudan 1px taşırıyordu → Windows Chrome'da her sekme
   çubuğunda dikey kaydırma çubuğu. Gri çizgi artık kutunun İÇİNDE (inset gölge), sekme taşmaz;
   kırmızı alt kenar gölgenin üstüne biner. overflow-y:hidden ikinci güvence. */
.panel-sekme{display:flex;gap:2px;box-shadow:inset 0 -1.5px 0 var(--cizgi);margin:0 0 18px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.panel-sekme a{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;font-size:13.5px;
  font-weight:600;color:var(--tx-3);border-bottom:2.5px solid transparent;
  white-space:nowrap;transition:color var(--hiz),border-color var(--hiz)}
.panel-sekme a:hover{color:var(--navy)}
.panel-sekme a.secili,.panel-sekme a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--kirmizi)}
.panel-sekme a b{font-size:11px;padding:1px 7px;border-radius:100px;background:var(--zemin-alt);
  color:var(--tx-2);font-weight:700;font-variant-numeric:tabular-nums}
.panel-sekme a.secili b,.panel-sekme a[aria-current="page"] b{background:var(--navy);color:#fff}
.panel-sekme a:focus-visible{outline:2px solid var(--kirmizi);outline-offset:-2px}
.panel-sekme a:active{color:var(--kirmizi)}
.panel-kart>.panel-sekme{margin-top:-4px}

.panel-arac{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.panel-arac input[type=search],.panel-arac input[type=text],.panel-arac select{height:38px;padding:0 12px;
  border:1.5px solid var(--cizgi-koyu);border-radius:var(--r);font-size:13.5px;background:#fff;color:var(--tx)}
.panel-arac input[type=search],.panel-arac input[type=text]{flex:1 1 220px;max-width:340px}
.panel-arac .dugme{height:38px}
.panel-arac .sag{margin-left:auto}
.cip-dizi{display:flex;gap:6px;flex-wrap:wrap}
.cip-dizi a{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:100px;background:#fff;
  border:1px solid var(--cizgi);font-size:12.5px;color:var(--tx-2);font-weight:600;white-space:nowrap;
  transition:background var(--hiz),color var(--hiz),border-color var(--hiz)}
.cip-dizi a b{font-weight:700;color:var(--tx-3);font-variant-numeric:tabular-nums}
.cip-dizi a:hover{border-color:var(--cizgi-koyu);color:var(--navy)}
.cip-dizi a.aktif{background:var(--navy);border-color:var(--navy);color:#fff}
.cip-dizi a.aktif b{color:#C8D2DE}
.cip-dizi a:focus-visible{outline:2px solid var(--kirmizi);outline-offset:2px}
.cip-dizi a:active{transform:scale(.97)}

.tablo-alt{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding-top:14px;margin-top:6px;
  border-top:1px solid var(--zemin-alt);font-size:13px;color:var(--tx-3)}
.tablo-alt .boy{display:flex;align-items:center;gap:4px}
.tablo-alt .boy em{font-style:normal;margin-right:4px;font-weight:600}
.tablo-alt .boy a,.tablo-alt .boy span,.tablo-alt .sayfa-no a,.tablo-alt .sayfa-no span{min-width:32px;height:32px;
  padding:0 9px;display:grid;place-items:center;border-radius:var(--r-s);border:1px solid var(--cizgi);
  color:var(--tx-2);font-weight:600;font-size:12.5px;background:#fff;font-variant-numeric:tabular-nums;
  transition:background var(--hiz),color var(--hiz),border-color var(--hiz)}
.tablo-alt .boy span,.tablo-alt .sayfa-no span.simdi{background:var(--navy);border-color:var(--navy);color:#fff}
.tablo-alt .sayfa-no{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.tablo-alt .sayfa-no span.bosluk{border:0;background:transparent;min-width:16px;padding:0}
.tablo-alt .sayfa-no span.pasif{opacity:.4}
.tablo-alt a:hover{border-color:var(--navy);color:var(--navy)}
.tablo-alt a:focus-visible{outline:2px solid var(--kirmizi);outline-offset:2px}
.tablo-alt a:active{transform:scale(.95)}
.tablo-alt .aralik{font-variant-numeric:tabular-nums}
.tablo-alt .aralik b{color:var(--tx)}

tr[data-gizli]{display:none}
.daha-fazla{display:flex;justify-content:center;gap:8px;padding-top:12px}
.daha-fazla button{height:34px;padding:0 16px;border-radius:var(--r);border:1px solid var(--cizgi-koyu);background:#fff;
  font-size:12.5px;font-weight:600;color:var(--tx-2);cursor:pointer;
  transition:background var(--hiz),color var(--hiz),border-color var(--hiz)}
.daha-fazla button:hover{border-color:var(--navy);color:var(--navy)}
.daha-fazla button:focus-visible{outline:2px solid var(--kirmizi);outline-offset:2px}
.daha-fazla button:active{transform:scale(.97)}

.geri-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--tx-2);
  margin:-8px 0 14px -6px;padding:6px 10px 6px 6px;border-radius:var(--r);
  transition:background var(--hiz),color var(--hiz)}
.geri-link svg{width:16px;height:16px}
.geri-link:hover{color:var(--navy);background:#fff}
.geri-link:focus-visible{outline:2px solid var(--kirmizi);outline-offset:2px}
.geri-link:active{transform:translateX(-2px)}

.kart-bas{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.kart-bas h2{margin:0}
details.ekle-form{border:1px dashed var(--cizgi-koyu);border-radius:var(--r);padding:0 14px;margin:0 0 16px;
  background:var(--zemin-yumusak)}
details.ekle-form>summary{cursor:pointer;padding:11px 0;font-weight:700;color:var(--navy);font-size:13.5px;
  list-style:none;display:flex;align-items:center;gap:8px}
details.ekle-form>summary::-webkit-details-marker{display:none}
details.ekle-form>summary::before{content:"+";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--kirmizi);color:#fff;font-size:14px;line-height:1;transition:transform var(--hiz)}
details.ekle-form[open]>summary::before{transform:rotate(45deg)}
details.ekle-form>summary:focus-visible{outline:2px solid var(--kirmizi);outline-offset:2px}
details.ekle-form[open]{background:#fff;padding-bottom:14px}
details.bilgi-ac{margin-top:4px}
details.bilgi-ac>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--tx-3);padding:4px 0}
details.bilgi-ac>summary:hover{color:var(--navy)}

.etiket.acik-etiket{background:var(--basari-zemin);color:var(--basari)}
.etiket.sil{background:var(--hata-zemin);color:var(--hata)}
.etiket.notr{background:var(--zemin-alt);color:var(--tx-2)}

.iletisim-dizi{display:flex;gap:6px;flex-wrap:wrap}
.ilt{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:var(--r-s);
  border:1px solid var(--cizgi-koyu);background:#fff;font-size:12px;font-weight:600;color:var(--tx-2);white-space:nowrap;
  transition:background var(--hiz),color var(--hiz),border-color var(--hiz)}
.ilt svg{width:14px;height:14px;flex:none}
.ilt:hover{border-color:var(--navy);color:var(--navy)}
.ilt:focus-visible{outline:2px solid var(--kirmizi);outline-offset:2px}
.ilt:active{transform:scale(.96)}
.ilt.wa{color:#0B6B37;border-color:#9ED9B7}
.ilt.wa:hover{background:#E8F7EE;border-color:#0B6B37;color:#0B6B37}
.ilt.buyuk{height:40px;padding:0 15px;font-size:13.5px}
.ilt.buyuk svg{width:17px;height:17px}
.iletisim-yok{font-size:12px;color:var(--tx-3);white-space:nowrap}
.panel-tablo td.musteri-hucre{min-width:190px}

.sepet-urunler{font-size:12.5px;color:var(--tx-2);line-height:1.5;max-width:360px}
.sepet-urunler small{color:var(--tx-3)}
.urun-kucuk{width:44px;height:44px;object-fit:contain;border-radius:6px;background:#fff;border:1px solid var(--cizgi);
  display:block}
.panel-tablo td.sag,.panel-tablo th.sag{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.panel-tablo td.dar{white-space:nowrap}
.panel-tablo tr.tik{cursor:pointer}
.panel-tablo .ana-link{font-weight:700;color:var(--navy)}
.panel-tablo .ana-link:hover{color:var(--kirmizi)}
.panel-tablo tr.dusuk td{color:var(--tx-3)}

.huni{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin:0 0 18px;
  background:#fff;border:1px solid var(--cizgi);border-radius:var(--r-l);overflow:hidden}
.huni>div{padding:15px 16px;border-right:1px solid var(--cizgi);position:relative}
.huni>div:last-child{border-right:0}
.huni span{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3);
  font-weight:600;margin-bottom:6px}
.huni b{font-family:var(--basli);font-size:27px;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.huni small{display:block;margin-top:6px;font-size:12px;color:var(--tx-3)}
.huni .oran{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:700;color:var(--tx-2);
  background:var(--zemin-alt);border-radius:100px;padding:2px 8px}
.huni>div.vurgu b{color:var(--kirmizi)}

.ozet-satir{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.ozet-satir>div{background:var(--zemin-yumusak);border-radius:var(--r);padding:12px 14px}
.ozet-satir>div>span{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3);
  font-weight:600;margin-bottom:5px}
.ozet-satir b{font-family:var(--basli);font-size:21px;color:var(--navy);line-height:1.1;font-variant-numeric:tabular-nums}
/* "kucuk" ADI KULLANILMAZ: mağazada .kucuk = 62px ürün küçük resmi kutusu (çakıştı, 17 Eki) */
.ozet-satir .ozet-metin{font-size:14px;font-weight:700;color:var(--navy);line-height:1.45}
.ozet-satir .ozet-metin small{display:block;font-weight:500;color:var(--tx-3);font-size:12px}
.panel-tablo .etiket{white-space:nowrap}
.bos-satir a{color:var(--kirmizi);font-weight:600}
.bos-satir a:hover{text-decoration:underline}
.panel-tablo .tek-satir{display:block;max-width:380px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iletisim-dizi.ikon{flex-wrap:nowrap}
/* position:relative ŞART — gizli yazı (absolute) yoksa tablonun kaydırma kutusundan
   kaçıp sayfayı mobilde 924px'e genişletiyordu (ölçüldü 17 Eki) */
.iletisim-dizi.ikon .ilt{width:32px;padding:0;justify-content:center;position:relative}
.iletisim-dizi.ikon .ilt svg{width:15px;height:15px}
.iletisim-dizi.ikon .yazi{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.panel-iki-uc{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:18px;align-items:start}
.panel-tablo.bilgi th{width:38%;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--tx-3);font-weight:600;
  border-bottom:1px solid var(--zemin-alt)}
.zaman-cizgi{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--cizgi)}
.zaman-cizgi li{position:relative;padding:0 0 12px 10px;font-size:13px;color:var(--tx-2);line-height:1.5}
.zaman-cizgi li::before{content:"";position:absolute;left:-21px;top:5px;width:10px;height:10px;border-radius:50%;
  background:#fff;border:2px solid var(--cizgi-koyu)}
.zaman-cizgi li.onemli::before{border-color:var(--kirmizi);background:var(--kirmizi)}
.zaman-cizgi li small{display:block;color:var(--tx-3);font-size:11.5px}
.ozel-fiyat-form{display:flex;gap:5px;align-items:center}
.ozel-fiyat-form input{width:96px;height:30px;padding:0 8px;border:1px solid var(--cizgi-koyu);border-radius:var(--r-s);
  font-size:12.5px}
/* ── ZİYARETÇİLER (17 Eki 2026) — menü grupları, canlı gösterge, dağılım, zaman çizelgesi ── */
.panel-yan nav .menu-grup{display:block;padding:14px 18px 4px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#8C98A8;font-weight:700}
.panel-yan nav .menu-grup:first-child{padding-top:4px}
.canli{display:inline-flex;align-items:center;gap:7px}
.canli i{width:9px;height:9px;border-radius:50%;background:var(--kirmizi);display:block;
  animation:canliNabiz 1.6s ease-in-out infinite}
@keyframes canliNabiz{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.dagilim{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:18px}
.dagilim .panel-kart{margin-bottom:0}
.dagilim-satir{display:grid;grid-template-columns:minmax(0,1fr) 54px 58px;gap:8px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--zemin-alt);font-size:13px;color:var(--tx-2)}
.dagilim-satir:last-child{border-bottom:0}
.dagilim-satir span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dagilim-satir b{text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
.dagilim-satir small{text-align:right;color:var(--tx-3);font-size:11.5px}
.olay-tablo td{padding:8px 10px}
.olay-tablo .saat{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--tx-3);font-size:12.5px}
.olay-tur{display:inline-block;min-width:118px;font-weight:600;color:var(--navy);font-size:13px}
.olay-tablo tr.vurgu td{background:var(--zemin-yumusak)}
.olay-tablo tr.vurgu td:first-child{box-shadow:inset 3px 0 0 var(--kirmizi)}
.olay-tablo tr.vurgu .olay-tur{color:var(--kirmizi)}
.olay-tablo tr.ara td{padding:4px 10px;font-size:11.5px;color:var(--tx-3);background:var(--zemin-yumusak)}
.ip-not{display:inline-block;padding:2px 8px;border-radius:var(--r-s);background:var(--uyari-zemin);color:var(--uyari);
  font-size:11.5px;font-weight:700}
.not-form{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.not-form input{flex:1 1 220px;height:36px;padding:0 11px;border:1.5px solid var(--cizgi-koyu);border-radius:var(--r);font-size:13px}
.ziyaretci-kod{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--tx-3)}
@media (max-width:1080px){.panel-yan nav .menu-grup{display:none}}
@media (max-width:1100px){.panel-iki-uc{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .tablo-alt .sayfa-no{margin-left:0}
  .huni>div{border-right:0;border-bottom:1px solid var(--cizgi)}
  .huni b{font-size:21px}
  .panel-arac input[type=search],.panel-arac input[type=text]{max-width:none}
}

/* ── duyarlı ───────────────────────────────────── */
/* ── klavye odağı geri kazanımı ─────────────────────
   Denetim (1 Eyl): Tab ile input'a geçince görünür halka YOKTU. Sebep özgüllük:
   ".alan input:focus{outline:none}" (0,2,0) genel ":focus-visible" kuralını
   (0,1,0) eziyordu; geriye kalan box-shadow %8 opaklıkta, pratikte görünmez.
   Fare tıklamasında halka istemiyoruz (":focus"), klavyede ZORUNLU
   (":focus-visible") — bu blok o ayrımı özgüllüğü eşitleyerek kurar.
   NOT: bu dosyada YORUMA BACKTICK YAZILMAZ, template literal kırılır. */
.alan input:focus-visible,.alan select:focus-visible,.alan textarea:focus-visible,
textarea:focus-visible,.ara input:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--kirmizi);outline-offset:2px}
/* koyu zeminli bülten şeridinde kırmızı halka okunmuyor → beyaz */

/* ── KABLO SEÇİM ARACI (/kablo-secici) ──────────────────────────────────
   Tezgâh mantığı: solda seçim paneli yapışkan, sağda biriken sipariş
   listesi. Elektrikçi tek oturuşta 5-10 kalem giriyor, sihirbaz değil.
   NOT: bu dosyada YORUMA BACKTICK YAZILMAZ. */
.ks-bas{padding:26px 0 18px;border-bottom:1px solid var(--cizgi);margin-bottom:22px}
.ks-bas h1{font:800 34px/1.1 var(--basli);letter-spacing:.01em;margin:0 0 8px;
  text-transform:uppercase}
.ks-bas p{margin:0;max-width:72ch;color:var(--tx-2);font-size:14px}
.ks-bas a{color:var(--kirmizi);font-weight:600;text-decoration:underline}

.ks-duzen{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:26px;align-items:start;margin-bottom:46px}

.ks-panel{position:sticky;top:96px;background:var(--zemin);
  border:1px solid var(--cizgi);border-radius:var(--r-l);padding:20px;
  box-shadow:var(--golge-1)}
.ks-adim{margin-bottom:18px}
.ks-etiket{display:flex;align-items:baseline;gap:8px;font:700 11.5px/1 var(--govde);
  letter-spacing:.09em;text-transform:uppercase;color:var(--tx-3);margin-bottom:9px}
.ks-etiket small{font-weight:500;letter-spacing:0;text-transform:none;font-size:11.5px;
  color:var(--tx-3)}

.ks-segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;
  background:var(--zemin-alt);border-radius:var(--r);padding:4px}
.ks-seg{display:flex;flex-direction:column;align-items:center;gap:1px;border:0;
  background:transparent;border-radius:var(--r-s);padding:8px 4px;cursor:pointer;
  transition:background var(--hiz),color var(--hiz)}
.ks-seg b{font:800 15px/1 var(--basli);letter-spacing:.03em}
.ks-seg small{font-size:10.5px;color:var(--tx-3)}
.ks-seg:hover{background:rgba(22,32,48,.06)}
.ks-seg.secili{background:var(--navy);color:#fff;box-shadow:var(--golge-1)}
.ks-seg.secili small{color:var(--ters-tx)}
.ks-ozet{margin:9px 0 0;font-size:12.5px;color:var(--tx-2);min-height:2.6em}

.ks-cipler{display:flex;flex-wrap:wrap;gap:6px}
.ks-cip{border:1.5px solid var(--cizgi-koyu);background:var(--zemin);border-radius:var(--r-s);
  padding:7px 10px;font:600 13px/1 var(--govde);cursor:pointer;color:var(--tx);
  transition:border-color var(--hiz),background var(--hiz),color var(--hiz)}
.ks-cip:hover{border-color:var(--navy)}
.ks-cip.secili{background:var(--navy);border-color:var(--navy);color:#fff}

.ks-renkler{display:flex;flex-wrap:wrap;gap:6px}
.ks-renk{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--cizgi-koyu);
  background:var(--zemin);border-radius:var(--r-s);padding:6px 10px 6px 7px;
  font:600 12.5px/1 var(--govde);cursor:pointer;color:var(--tx);
  transition:border-color var(--hiz),background var(--hiz),color var(--hiz)}
.ks-renk:hover{border-color:var(--navy)}
.ks-renk.secili{background:var(--navy);border-color:var(--navy);color:#fff}
.ks-top{width:15px;height:15px;border-radius:50%;flex:none;
  border:1px solid rgba(22,32,48,.28);display:block}

.ks-secim{display:flex;gap:13px;align-items:center;background:var(--zemin-yumusak);
  border:1px solid var(--cizgi);border-radius:var(--r);padding:11px;margin-bottom:16px}
.ks-foto{width:70px;height:70px;flex:none;background:#fff;border:1px solid var(--cizgi);
  border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.ks-foto img{width:100%;height:100%;object-fit:contain}
.ks-secim-bilgi{display:flex;flex-direction:column;gap:2px;min-width:0}
.ks-secim-bilgi b{font:700 15px/1.25 var(--govde)}
.ks-birimfiyat{font-size:12.5px;color:var(--tx-2)}
.ks-birimfiyat s{color:var(--tx-3);margin-right:5px}
.ks-birimfiyat em{font-style:normal;color:var(--kirmizi);font-weight:700}

.ks-miktar{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.ks-miktar .ks-etiket{width:100%;margin-bottom:0}
.ks-cevrim{font-size:12.5px;color:var(--tx-2);font-weight:600}
.ks-ekle{margin-top:4px}
.ks-ekle:disabled{opacity:.45;cursor:not-allowed}
.ks-not{margin:9px 0 0;font-size:12px;color:var(--tx-3);min-height:1.2em}

.ks-liste{background:var(--zemin);border:1px solid var(--cizgi);
  border-radius:var(--r-l);padding:20px}
.ks-liste h2{font:800 20px/1.15 var(--basli);letter-spacing:.02em;margin:0 0 14px;
  text-transform:uppercase;display:flex;align-items:baseline;gap:9px}
.ks-liste h2 span{font:500 12.5px/1 var(--govde);color:var(--tx-3);letter-spacing:0;
  text-transform:none}
.ks-bos{text-align:center;padding:36px 16px;color:var(--tx-2)}
.ks-bos p{margin:0 0 6px;font-weight:600}
.ks-bos-alt{font-weight:400 !important;font-size:13px;color:var(--tx-3);max-width:44ch;
  margin:0 auto !important}

.ks-tablo{width:100%;border-collapse:collapse}
.ks-tablo th{text-align:left;font:700 11px/1 var(--govde);letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx-3);padding:0 10px 9px 0;
  border-bottom:1px solid var(--cizgi)}
.ks-tablo th:last-child{width:34px}
.ks-tablo td{padding:11px 10px 11px 0;border-bottom:1px solid var(--cizgi);
  vertical-align:middle;font-size:13.5px}
.ks-kalem-ad{display:flex;align-items:center;gap:9px}
.ks-kalem-ad b{font-weight:700}
.ks-kalem-alt{display:block;font-size:11.5px;color:var(--tx-3);margin-top:2px}
.ks-tablo .ks-tutar{text-align:right;font-weight:700;white-space:nowrap}
.ks-sil{border:0;background:transparent;cursor:pointer;color:var(--tx-3);
  width:30px;height:30px;border-radius:var(--r-s);line-height:1;font-size:17px;
  transition:background var(--hiz),color var(--hiz)}
.ks-sil:hover{background:var(--hata-zemin);color:var(--hata)}
.ks-toplam{margin-top:16px;border-top:2px solid var(--navy);padding-top:12px}
.ks-toplam .dugme{margin-top:12px}

/* Kablo kategorisinin sol sütunundaki araç girişi. Koyu zemin: filtre
   panelinin beyaz kutuları arasında tek koyu blok, göz oraya gider. */
.ks-giris{display:block;background:var(--navy);color:#fff;border-radius:var(--r);
  padding:15px;margin-bottom:16px;transition:background var(--hiz)}
.ks-giris:hover{background:var(--navy-2)}
.ks-giris b{display:block;font:800 17px/1.15 var(--basli);letter-spacing:.03em;
  text-transform:uppercase;margin-bottom:5px}
.ks-giris span{display:block;font-size:12.5px;line-height:1.5;color:var(--ters-tx)}
.ks-giris i{display:inline-block;margin-top:9px;font-style:normal;font-weight:700;
  font-size:12.5px;color:var(--kirmizi-acik)}

/* Sepet/sipariş satırındaki renk rozeti — araçtan gelen kablo kalemleri */
.s-renk{display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:12px;font-weight:700;color:var(--tx-2)}

.ks-bilgi{border-top:1px solid var(--cizgi);padding:26px 0 52px}
.ks-bilgi h2{font:800 22px/1.15 var(--basli);letter-spacing:.02em;margin:0 0 16px;
  text-transform:uppercase}
.ks-bilgi-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px}
.ks-bilgi-izgara h3{font:700 14px/1.2 var(--govde);margin:0 0 6px;color:var(--navy)}
.ks-bilgi-izgara p{margin:0;font-size:13px;color:var(--tx-2);line-height:1.6}
.ks-kaynak{margin:18px 0 0;font-size:12px;color:var(--tx-3)}

@media (max-width:1080px){
  .vitrin .kap{grid-template-columns:1fr;gap:34px;padding:48px 20px}
  .duzen{grid-template-columns:1fr}
  .filtre{position:static}
  /* Araçta iki sütun sığmıyor: panel üste, liste altına. Panel yapışkanlığı
     da kalkar, yoksa liste kayarken panel ekranı kaplıyor. */
  .ks-duzen{grid-template-columns:1fr}
  .ks-panel{position:static}
  .detay{grid-template-columns:1fr;gap:26px}
  .alt .kap{grid-template-columns:1fr 1fr}
  .alt-resmi{grid-template-columns:1fr 1fr;flex-basis:100%}
  .alt-resmi .alt-resmi-adres{grid-column:1/-1}
  .vitrin-blok .kap{grid-template-columns:1fr}
  .kat-ray ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));padding:8px}
  /* Izgara modunda "Tüm kategoriler"in üst çizgisi TEK hücrenin üstünde
     kalıyor, rastgele bir ayraç gibi duruyordu (14 Eyl). Tek sütunlu
     listede anlamlı, ızgarada değil. */
  .kr-tumu{border-top:0;margin-top:0;padding-top:0}
  .afis{grid-template-columns:1fr}
  .afis-markalar{grid-template-columns:repeat(4,1fr);border-left:0;
    border-top:1px solid rgba(255,255,255,.11)}
  .kb-ic{grid-template-columns:1fr}
  .kb-sag{border-left:0;border-top:1px solid var(--cizgi)}
  .metin-duzen{grid-template-columns:1fr}
  .ic-link{position:static}
  .sepet-duzen,.form-duzen,.hesap-duzen{grid-template-columns:1fr}
  .ozet,.hesap-yan,.filtre{position:static}
  .panel-ikili{grid-template-columns:1fr}
  /* 8 Eki: 1fr = minmax(auto,1fr) → sütun, menü şeridinin min-content'inden
     (tek satır linkler, 1.575px) daralamıyordu; 29 panel sayfasının HEPSİ mobilde
     yana taşıyordu ve nav'daki overflow-x hiç devreye girmiyordu. minmax(0,1fr)
     sütunu ekrana sabitler, menü yatay kaydırılan şerit olur. */
  .panel-duzen{grid-template-columns:minmax(0,1fr)}
  .panel-yan{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;min-width:0}
  .panel-yan nav{display:flex;overflow-x:auto;padding:0;min-width:0;flex:1 1 100%;order:3}
  .panel-yan nav a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent}
  .panel-yan nav a[aria-current]{border-left:0;border-bottom-color:var(--kirmizi)}
  .panel-alt{border-top:0;margin-left:auto}
}
/* 14 Eyl: üst grup 8 -> 10 olunca (Tesisat ve Priz, Diafon) masaüstü menü
   1081-1230 arasında satıra sığmayıp SAYFAYI YATAY KAYDIRIYORDU. Sıkıştırmak
   yerine hamburger'e daha erken düşüyoruz — 10 başlık o genişlikte zaten
   okunaksız oluyordu. Doğrulama: puppeteer, 15 kırılma noktasında
   scrollWidth === clientWidth. */
@media (max-width:1240px){
  .mm-liste{display:none}
  .mm-tum{display:none}
  .mm-hamburger{display:flex}
}
@media (max-width:760px){
  .bas .kap{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px;gap:12px}
  .ara{order:3;flex:1 0 100%;max-width:none}
  /* Araç: dar ekranda başlık küçülür, tablo başlıkları gizlenip satırlar
     blok olur (sepet tablosundaki desenin aynısı). */
  .ks-bas h1{font-size:27px}
  .ks-panel,.ks-liste{padding:15px}
  .ks-tablo thead{display:none}
  .ks-tablo,.ks-tablo tbody,.ks-tablo tr,.ks-tablo td{display:block;width:100%}
  .ks-tablo tr{border-bottom:1px solid var(--cizgi);padding:7px 0}
  .ks-tablo td{border:0;padding:4px 0}
  .ks-tablo .ks-tutar{text-align:left}
  .gizle-dar{display:none}
  .bas-sag .dugme{padding:0 13px}
  /* yatay taşmayı kesen kurallar — bu bloklar mobilde sabit genişlikteydi */
  .rehber-serit .kap{grid-template-columns:1fr}
  .alt-linkler .kap{grid-template-columns:1fr}
  /* 48 kartlık anasayfa mobilde tek sütunda 28.000px oluyordu → 2 sütun */
  /* 26 Eyl (Erhan "kategori sayfalarında da 3 olacak"): grid 2→3 sütun. */
  .izgara,.izgara.sik,.mb-raf{grid-template-columns:repeat(3,1fr);gap:8px}
  /* Mobil ürün kartı — masaüstünden ölçekli ufaltıldı (26 Eyl). Ölçüldü
     (390px): kart 163×402, gövde 236px = kartın %59'u → tall+text-heavy
     "kaba" duruyordu. Ad 3→2 satır, fiyat/chip/sku sıkı, dolgu+gap kısık →
     gövde ~180px, kart ~345px. Dokunma hedefleri KORUNUR: kart-marka ve
     kart-ad padding-block:4px'e dokunulmaz (WCAG 2.5.8, 22 Eyl KANUN). */
  .kart-govde{padding:8px 9px 9px;gap:3px}
  .kart-sku{font-size:11px}
  .kart-ad{font-size:12px;line-height:1.35;-webkit-line-clamp:2}
  .kart-varyant{font-size:11px;gap:5px}
  .kart-varyant b{font-size:10.5px;padding:1px 6px}
  .kart-fiyat{padding-top:6px}
  .f-liste{font-size:11px}
  .f-net{font-size:18px}
  .f-alt{font-size:10px}
  .kart-alt{padding:0 9px 9px}
  .rozet-sol{font-size:9.5px;padding:2px 7px 2px 8px;letter-spacing:.01em}
  .rozet-sag{font-size:10px;padding:2px 7px}
  .guven-serit .kap{grid-template-columns:1fr 1fr;gap:14px}
  .mb-ic{grid-template-columns:1fr;gap:12px}
  .mb-kimlik{padding:16px;flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
  .mb-kimlik img{margin-bottom:0;height:32px}
  .mb-link{margin-top:0;padding-top:0;margin-left:auto}
  .mb-kat{display:none}
  /* 26 Eyl (Erhan "mobilden bunu kaldır"): KATALOG kartı (parça kodundan sipariş)
     mobilde gizli; sadece kırmızı "Firma kaydı" kartı kalır → daha nizami. */
  .yan-afisler{grid-template-rows:auto}
  .yan-afis:not(.kirmizi){display:none}
  /* 14 satırlık kategori rayı mobilde ilk ekranı yiyordu; hamburger menü zaten var */
  .kat-ray{display:none}
  /* Mobilde ürün fotoğrafı metnin yanına giriyor, metin 1 kelimelik kolona
     sıkışıp başlık taşıyordu. Dar ekranda görsel arka plana alınır, metin tam
     genişlik olur. */
  .slayt-alan,.slaytlar{min-height:360px}
  /* Banner görselli slayt da (.slayt-metin) dar ekranda tam genişlik olmalı —
     kural yalnızca yedek slayta (.sy-metin) yazılmıştı, metin 1 kelimelik
     kolona sıkışıp CTA ekrandan taşıyordu. */
  .sy-metin,.slayt-metin{max-width:none;padding:20px 18px}
  .sy-metin h2,.slayt-metin h2{font-size:25px;margin-bottom:10px}
  .slayt-metin{background:linear-gradient(180deg,rgba(8,12,18,.55) 0%,rgba(8,12,18,.86) 55%,rgba(8,12,18,.95) 100%)}
  .slayt-fayda{margin-bottom:16px}
  .slayt-fayda li{font-size:12.5px}
  .sy-gorsel{right:-6%;top:auto;bottom:-4%;width:52%;height:56%;opacity:.28}
  .ma-gorsel{display:none}
  .marka-afis p,.ma-ozellik{max-width:none}
  /* Oklar dar ekranda dikey ortada metnin üstüne biniyordu → alt köşelere */
  .slayt-ok{top:auto;bottom:10px;transform:none;width:34px;height:34px}
  .slayt-ok.sol{left:12px}
  .slayt-ok.sag{right:12px}
  .slayt-yedek{padding:0}

  .serit .kap{height:auto;padding-top:7px;padding-bottom:7px}
  .serit .sag{margin-left:0;width:100%;gap:14px}
  .etiket-bulut a,.serit a,.bolum-bas .link{min-height:24px;display:inline-flex;
    align-items:center}
  /* footer linkleri (.alt a) block KALMALI — inline-flex kolonları yapıştırıyordu
     (WAGOSiemensCata…). Dokunma hedefi min-height ile korunur. */
  .alt a{min-height:24px}
  .on-cta{padding:46px 0}
  .on-cta h2{font-size:32px}
  .on-cta-dugmeler{width:100%}
  .on-cta-btn{flex:1 1 auto;justify-content:center}
  .bolum{padding:38px 0}
  /* 26 Eyl (Erhan "kategori sayfalarında da 3 olacak"): eskiden auto-fill 160px
     dar ekranda 1-2 sütun veriyordu; sabit 3 sütun. (Aynı ≤760 bloğundaki
     üstteki .izgara kuralını bu satır eziyordu — ikisi de 3 olmalı.) */
  .izgara{grid-template-columns:repeat(3,1fr);gap:8px}
  .alt .kap{grid-template-columns:1fr}
  /* 26 Eyl (Erhan "footerda mobilde sorun"): Kategoriler + Kurumsal link
     kolonları tek sütunda uzuyordu (Markalar 2 sütunken tutarsız + footer
     ~1400px). İkisini de 2 sütuna al (h4 ve "Tüm kategoriler" tam satır) →
     footer belirgin kısalır. Şirket-bilgi ve Markalar (kendi grid'i) hariç. */
  .alt .kap > div:has(> h4):not(:has(.alt-marka-grid)):not(:has(.alt-logo)){
    display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
  .alt .kap > div:has(> h4):not(:has(.alt-marka-grid)):not(:has(.alt-logo)) > h4,
  .alt .kap > div:has(> h4):not(:has(.alt-marka-grid)):not(:has(.alt-logo)) > .alt-tumu{grid-column:1/-1}
  /* 26 Eyl footer küçültme: PayTR + ETBİS rozetleri sarıp 195px alıyordu →
     gap kısılınca yan yana sığar (~90px). Alt bar dolgusu da azaltıldı. */
  .alt-guven .alt-rozetler{gap:14px}
  .alt .alt-guven .kap{padding:20px 20px;gap:18px}
  .alt-resmi{grid-template-columns:1fr 1fr;gap:12px 18px;flex-basis:100%}
  .alt-resmi .alt-resmi-adres{grid-column:1/-1}
  .alt-odeme span,.alt-etbis>span{margin-bottom:5px}
  .alt .etbis-yer{padding:7px 11px}
  /* 8 Eki: absolute "Designed by" dar ekranda "Fiyatlar KDV hariçtir" ile
     üst üste biniyordu → mobilde akışa alındı (sütun ortasında, yine ortalı). */
  .alt-bar .kap{flex-direction:column;gap:9px;padding-bottom:18px;padding-top:14px}
  .limegraf{position:static;transform:none;order:3}
  /* rozetler yan yana 335px'e sığmıyor, ETBİS kutusu taşıyordu (yatay kaydırma) */
  .alt-guven .alt-rozetler{flex:1 1 100%;gap:14px 24px}
  .alt-guven .alt-odeme a{min-height:0}
  .vitrin h1{font-size:32px}
  .alanlar{grid-template-columns:1fr}
  /* 26 Eyl (Erhan "sepet kocaman"): mobilde tablo satırı 5 hücreyi alt alta
     yığıp 407px oluyordu (üstelik td{display:block} .s-urun'un flex'ini de
     bozup görseli bilginin ÜSTÜNE atıyordu). Kompakt 2-satırlık kart:
       satır1: [görsel] [marka/ad/sku/birim]      × (sağ-üst köşe)
       satır2: [− adet +] ................ [satır toplamı]
     s-fiyat gizli (birim fiyat zaten bilgi bloğunda "1 koli = ... ₺/adet"). ~130px. */
  .sepet-tablo thead{display:none}
  .sepet-tablo,.sepet-tablo tbody{display:block;width:100%}
  .sepet-tablo tr{display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"urun urun" "adet toplam";
    align-items:center;gap:12px 10px;padding:14px 14px 16px;
    border-bottom:1px solid var(--cizgi);position:relative}
  .sepet-tablo td{display:block;border:0;padding:0;width:auto}
  /* ⚠ .sepet-tablo td (0,1,1) bare .s-urun/.s-fiyat'ı (0,1,0) ezer → görsel
     yine yığılırdı; hücre override'ları td.<class> ile daha spesifik. */
  .sepet-tablo td.s-urun{grid-area:urun;display:flex;gap:11px;align-items:flex-start;min-width:0;padding-right:26px}
  .s-gorsel{width:56px;height:56px}
  .sepet-tablo td:has(.adet-kutu){grid-area:adet;justify-self:start;min-width:0}
  .sepet-tablo td.s-toplam{grid-area:toplam;justify-self:end;text-align:right}
  .sepet-tablo td.s-fiyat{display:none}
  .sepet-tablo td:has(.s-sil){position:absolute;top:9px;right:7px}
  .panel-ana{padding:16px 14px 40px}
}

/* ═══════════════════════════════════════════════════════════════════════
   YARDIM KÖŞESİ — İKİ AYRI ÜRÜN (Erhan 4 Eki 2026)
     .ky-kutu   → KARSEN DESTEK     : kompakt köşe kutusu, güdümlü bot
     .ky-drawer → KARSEN YAPAY ZEKA : sağdan açılan geniş panel, kısıtlı AI
   İç öğeler (.kd-balon, .kd-urun, .kd-cip…) İKİSİ ARASINDA PAYLAŞILIR —
   aynı sohbet dili, farklı kabuk. Kabuk sınıfları ky-, içerik sınıfları kd-.
   Palet: navy + #B62126 + gri (başka aksan YOK). WhatsApp float solda z-900.
   ═══════════════════════════════════════════════════════════════════════ */
.ks-yardim{position:fixed;right:24px;bottom:24px;z-index:950;font-family:var(--govde)}
.ky-butonlar{display:flex;flex-direction:column;align-items:flex-end;gap:10px}

.ky-ac{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 20px 0 16px;
  border:0;border-radius:999px;cursor:pointer;color:#fff;
  font:600 14.5px/1 var(--govde);box-shadow:var(--golge-3);
  transition:transform var(--hiz),background var(--hiz)}
.ky-ac svg{width:22px;height:22px;stroke:currentColor;flex:none}
.ky-ac:hover{transform:translateY(-2px)}
.ky-ac:focus-visible{outline:3px solid var(--kirmizi-acik);outline-offset:3px}
/* YAPAY ZEKA kırmızı (marka aksanı, dikkat çeker) · DESTEK navy (sakin, bilgi) */
.ky-ac-ai{background:var(--kirmizi)}
.ky-ac-ai:hover{background:var(--kirmizi-koyu)}
.ky-ac-bot{background:var(--navy);height:46px;font-size:14px}
.ky-ac-bot:hover{background:var(--navy-2)}
/* Biri açıkken butonlar kaybolur; perde zaten ekranı kaplıyor. */
.ks-yardim.acik .ky-butonlar{opacity:0;pointer-events:none}

/* ⚠ YIĞIN BAĞLAMI TUZAĞI (19 Eyl'de bir kez yaşandı): .ks-yardim
   position:fixed + z-index ile KENDİ yığın bağlamını yaratır. Perde body'ye
   eklenir, yani kardeş bağlamdadır; panel perdenin ÜSTÜNDE kalsın diye
   açıkken konteynerin z-index'i perdeninkinin üstüne çıkarılır. */
.ks-yardim.acik{z-index:980}
.ky-perde{position:fixed;inset:0;z-index:960;background:rgba(10,14,20,.45);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* ── 1) KARSEN DESTEK — köşe kutusu ──────────────────────────────────── */
.ky-kutu{position:fixed;right:24px;bottom:24px;z-index:970;
  width:min(390px,calc(100vw - 32px));max-height:min(640px,calc(100dvh - 48px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--zemin);border:1px solid var(--cizgi);border-radius:18px;box-shadow:var(--golge-3)}

/* ── 2) KARSEN YAPAY ZEKA — sağdan açılan panel ──────────────────────── */
.ky-drawer{position:fixed;right:0;top:0;z-index:970;
  width:min(460px,100vw);height:100dvh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--zemin);border-left:1px solid var(--cizgi);box-shadow:var(--golge-3)}

/* ── Ortak kabuk: başlık · akış · giriş ──────────────────────────────── */
.ky-bas{display:flex;align-items:center;gap:12px;padding:15px 17px;color:#fff;flex:none}
.ky-bas-bot{background:var(--navy)}
.ky-bas-ai{background:var(--navy);border-bottom:3px solid var(--kirmizi)}
.ky-logo{display:grid;place-items:center;width:36px;height:36px;flex:none;
  background:rgba(255,255,255,.12);border-radius:50%}
.ky-logo svg{width:20px;height:20px;stroke:#fff}
.ky-bas-ai .ky-logo{background:var(--kirmizi)}
.ky-bas-yazi{flex:1;min-width:0;line-height:1.25}
.ky-bas-yazi b{display:block;font:700 16px var(--basli);letter-spacing:.2px}
.ky-bas-yazi small{color:var(--ters-tx-2);font-size:11.5px}
/* Yenilik vurgusu (8 Eki): başlıkta BETA rozeti, açma düğmesinde YENİ etiketi.
   Yalnız palet token'ları (navy + kırmızı + beyaz) — yeni renk YOK. */
.ky-beta{display:inline-block;vertical-align:2px;margin-left:6px;padding:2px 7px;border-radius:999px;
  font:700 10px/1.3 var(--govde);letter-spacing:.08em;text-transform:uppercase;
  color:#fff;border:1px solid rgba(255,255,255,.45)}
.ky-yeni{margin-left:2px;padding:3px 7px;border-radius:999px;background:#fff;color:var(--kirmizi);
  font:700 10px/1 var(--govde);font-style:normal;letter-spacing:.08em;text-transform:uppercase}
/* Günlük hak göstergesi ("coin", Erhan 4 Eki). Başlıkta, kapat butonunun
   solunda. Hak azalınca kırmızıya döner — müşteri bitmeden görsün. */
.ky-hak{flex:none;padding:4px 10px;border-radius:999px;
  font:600 12px/1 var(--tekno,var(--govde));font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2)}
.ky-hak.az{background:var(--kirmizi);border-color:var(--kirmizi)}
.ky-kapat{flex:none;width:32px;height:32px;display:grid;place-items:center;background:transparent;
  border:0;border-radius:8px;color:#fff;cursor:pointer;transition:background var(--hiz)}
.ky-kapat svg{width:18px;height:18px;stroke:currentColor}
.ky-kapat:hover{background:rgba(255,255,255,.14)}
.ky-kapat:focus-visible{outline:2px solid #fff;outline-offset:2px}

.ky-akis{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;
  background:var(--zemin-yumusak)}

.ky-giris{display:flex;gap:8px;padding:11px;background:var(--zemin);border-top:1px solid var(--cizgi);flex:none}
.ky-metin{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--cizgi-koyu);border-radius:999px;
  font:400 14px var(--govde);color:var(--tx);background:var(--zemin-yumusak)}
.ky-metin:focus{outline:0;border-color:var(--navy);background:#fff}
.ky-gonder{flex:none;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;
  background:var(--kirmizi);color:#fff;cursor:pointer;transition:background var(--hiz),transform var(--hiz)}
.ky-gonder svg{width:20px;height:20px;stroke:currentColor}
.ky-gonder:hover{background:var(--kirmizi-koyu);transform:scale(1.05)}
.ky-gonder:focus-visible{outline:3px solid var(--kirmizi-acik);outline-offset:2px}

/* ── PAYLAŞILAN İÇERİK (iki üründe de aynı) ──────────────────────────── */
.kd-balon{max-width:88%;padding:12px 15px;border-radius:15px;font-size:14.5px;line-height:1.58;
  white-space:pre-wrap;word-wrap:break-word}
.kd-bot{align-self:flex-start;background:var(--zemin);border:1px solid var(--cizgi);color:var(--tx);border-bottom-left-radius:5px}
.kd-ben{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:5px}
.kd-link{color:var(--kirmizi);font-weight:600;word-break:break-all}
.kd-ben .kd-link{color:var(--kirmizi-acik)}

.kd-yaziyor{display:flex;gap:4px;align-items:center;min-width:0}
.kd-yaziyor i{width:7px;height:7px;border-radius:50%;background:var(--tx-3);animation:kdNokta 1s infinite ease-in-out}
.kd-yaziyor i:nth-child(2){animation-delay:.15s}
.kd-yaziyor i:nth-child(3){animation-delay:.3s}
@keyframes kdNokta{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.kd-cipler{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;max-width:100%}
.kd-cip{padding:7px 12px;border:1px solid var(--cizgi-koyu);border-radius:999px;background:var(--zemin);
  color:var(--tx-2);font:500 13px var(--govde);cursor:pointer;
  transition:border-color var(--hiz),color var(--hiz)}
.kd-cip:hover{border-color:var(--navy);color:var(--navy)}

/* Menü butonları — Karsen Destek'in ana iskeleti. Sol hizalı, geniş vuruş alanı. */
.kd-menu{display:flex;flex-direction:column;gap:8px;align-self:stretch;margin:2px 0}
.kd-menu-btn{display:flex;align-items:flex-start;flex-direction:column;gap:2px;width:100%;
  padding:12px 15px;border:1px solid var(--cizgi-koyu);border-radius:12px;background:var(--zemin);
  color:var(--tx);font:600 14.5px var(--govde);text-align:left;cursor:pointer;
  transition:border-color var(--hiz),background var(--hiz),transform var(--hiz)}
.kd-menu-btn small{font:400 12.5px var(--govde);color:var(--tx-3)}
.kd-menu-btn:hover{border-color:var(--navy);background:var(--zemin-yumusak);transform:translateX(2px)}
.kd-menu-btn:focus-visible{outline:3px solid var(--kirmizi-acik);outline-offset:2px}
/* Geri ve "diğer ürüne aktar" — menüden görsel olarak ayrışır. */
.kd-geri{align-self:flex-start;padding:6px 12px;border:0;border-radius:999px;background:transparent;
  color:var(--tx-3);font:600 13px var(--govde);cursor:pointer}
.kd-geri:hover{color:var(--navy);background:var(--zemin-yumusak)}
.kd-aktar{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:11px 16px;
  border:0;border-radius:999px;background:var(--kirmizi);color:#fff;font:600 14px var(--govde);
  cursor:pointer;transition:background var(--hiz),transform var(--hiz)}
.kd-aktar svg{width:18px;height:18px;stroke:currentColor;flex:none}
.kd-aktar:hover{background:var(--kirmizi-koyu);transform:translateY(-1px)}

.kd-soru{align-self:flex-start;max-width:92%;display:flex;gap:9px;padding:11px 13px;
  background:var(--zemin);border:1px dashed var(--cizgi-koyu);border-radius:12px;
  font-size:13.5px;line-height:1.5;color:var(--tx-2)}
.kd-soru b{color:var(--navy);font-weight:600;flex:none}

/* Hesap kutusu — mühendislik hesabının adımları. Sohbet balonundan ayrışır:
   müşteri bunun bir SAYI değil bir HESAP olduğunu görmeli. */
.kd-hesap{align-self:stretch;padding:14px 16px;background:var(--zemin);
  border:1px solid var(--cizgi);border-left:3px solid var(--kirmizi);border-radius:10px;
  font-size:13.5px;line-height:1.6;color:var(--tx)}
.kd-hesap b{display:block;margin-bottom:6px;font:700 14px var(--basli);color:var(--navy)}
.kd-hesap ul{margin:6px 0 0;padding-left:18px;color:var(--tx-2)}
.kd-hesap li{margin:3px 0}
.kd-hesap-not{margin-top:9px;padding-top:9px;border-top:1px solid var(--cizgi);
  font-size:12.5px;color:var(--tx-3)}

.kd-butonlar{display:flex;flex-direction:column;gap:7px;align-self:flex-start;max-width:92%}
.kd-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 14px;border:0;
  border-radius:10px;background:var(--kirmizi);color:#fff;font:600 13.5px var(--govde);
  text-decoration:none;cursor:pointer;transition:background var(--hiz),transform var(--hiz)}
.kd-btn:hover{background:var(--kirmizi-koyu);transform:translateY(-1px)}
.kd-wa{background:var(--whatsapp);color:#0A3D1F}
.kd-wa:hover{background:var(--whatsapp-acik)}
.kd-ai{background:var(--navy)}
.kd-ai:hover{background:var(--navy-2)}

.kd-urunler{display:flex;flex-direction:column;gap:8px;align-self:stretch}
.kd-urun{display:flex;align-items:center;gap:11px;padding:9px;border:1px solid var(--cizgi);border-radius:var(--r);
  background:var(--zemin);text-decoration:none;color:var(--tx);transition:border-color var(--hiz),box-shadow var(--hiz)}
.kd-urun:hover{border-color:var(--navy);box-shadow:var(--golge-1)}
.kd-urun img{width:46px;height:46px;object-fit:contain;flex:none;background:#fff;border-radius:6px}
.kd-urun-ic{min-width:0;display:flex;flex-direction:column;gap:2px}
.kd-urun-ic b{font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kd-urun-f{font-size:13px;font-weight:700;color:var(--kirmizi)}

@media (max-width:640px){
  .ks-yardim{right:14px;bottom:14px}
  .ky-ac span{display:none}
  .ky-ac{padding:0;width:52px;justify-content:center}
  .ky-ac-bot{width:46px}
  /* Mobilde düğme yalnız ikon: "Yeni" etiketi köşede beyaz nokta olur. */
  .ky-ac-ai{position:relative}
  .ky-yeni{position:absolute;top:2px;right:2px;width:12px;height:12px;padding:0;margin:0;
    font-size:0;border:2px solid var(--kirmizi)}
  /* ⚠ MOBİLDE İKİSİ DE TAM EKRAN. Eski köşe-baloncuk kuralı
     (right:12px; width:calc(100vw - 24px)) paneli 390px ekranda 366px'e
     düşürüp sağda boşluk bırakıyordu (ölçüldü, 3 Eki). Tek kural, iki panel. */
  .ky-kutu,.ky-drawer{right:0;left:0;top:0;bottom:0;width:100vw;height:100dvh;
    max-height:100dvh;border:0;border-radius:0}
}

/* ═══════════════════════════════════════════════════════════════════════
   KAYIT KODU KAMPANYASI ETİKETİ (15 Eki 2026, PAXEND3)
   Sağ kenarda dikey ortada sabit. z 940: yardım köşesinin (950) ve açılan
   panellerin/perdenin (960-980) ALTINDA — panel açılınca üstüne binmez.
   1700px üstü: içerik 1320px, sağ boşluk 190px+ → kart boşlukta durur,
   ürünü örtmez. Altında: yalnız kenara yapışık dikey sekme.
   Palet: navy + kırmızı (aksan YOK).
   ═══════════════════════════════════════════════════════════════════════ */
.kk-etiket{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:940;
  font-family:var(--govde)}
.kk-kart{display:none}
.kk-sekme{display:flex;flex-direction:column;align-items:center;gap:6px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  padding:16px 9px;background:var(--kirmizi);color:#fff;text-decoration:none;
  border-radius:0 var(--r) var(--r) 0;box-shadow:var(--golge-3);
  transition:background var(--hiz)}
.kk-sekme span{font:700 15px/1 var(--basli);letter-spacing:.08em}
.kk-sekme small{font:600 11px/1 var(--govde);letter-spacing:.02em}
.kk-sekme:hover{background:var(--kirmizi-koyu)}
.kk-sekme:focus-visible,.kk-kart:focus-visible{outline:3px solid var(--kirmizi-acik);outline-offset:3px}
.kk-sekme:active{background:var(--navy)}

@media(min-width:1700px){
  .kk-sekme{display:none}
  .kk-etiket{right:16px}
  .kk-kart{display:flex;flex-direction:column;gap:6px;width:190px;padding:16px 16px 14px;
    background:var(--navy);color:#fff;text-decoration:none;border-radius:var(--r-l);
    border-top:4px solid var(--kirmizi);box-shadow:var(--golge-3);
    transition:transform var(--hiz)}
  .kk-kart:hover{transform:translateY(-3px)}
  .kk-kart:active{transform:translateY(0)}
  .kk-kod{align-self:flex-start;padding:5px 9px;border:2px dashed rgba(255,255,255,.55);
    border-radius:var(--r-s);font:700 18px/1 var(--basli);letter-spacing:.08em}
  .kk-baslik{font:700 19px/1.1 var(--basli);text-transform:uppercase;letter-spacing:.02em;margin-top:4px}
  .kk-metin{font-size:13px;line-height:1.45;color:var(--ters-tx)}
  .kk-metin strong{color:#fff}
  .kk-sure{font-size:12px;color:var(--ters-tx-2)}
  .kk-dugme{display:inline-flex;align-items:center;justify-content:center;gap:6px;
    margin-top:6px;height:38px;border-radius:var(--r);background:var(--kirmizi);
    font:600 13.5px/1 var(--govde);transition:background var(--hiz)}
  .kk-dugme svg{width:15px;height:15px;stroke:currentColor}
  .kk-kart:hover .kk-dugme{background:var(--kirmizi-koyu)}
}
@media(max-width:760px){
  .kk-sekme{padding:12px 7px}
  .kk-sekme span{font-size:13px}
  .kk-sekme small{font-size:10px}
}

/* Kampanya rozeti — ürün kartı / ürün sayfası fiyatının yanında */
.kk-rozet{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:var(--r-s);
  background:var(--kirmizi);color:#fff;font:700 11px/1 var(--govde);letter-spacing:.04em;
  vertical-align:middle;white-space:nowrap}

/* Kampanya sayfası (/kampanya/<kod>) — üst bant */
.kk-bant{background:var(--navy);color:#fff;border-radius:var(--r-l);padding:28px 32px;
  margin:8px 0 28px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  border-left:6px solid var(--kirmizi)}
.kk-bant h1{font:800 clamp(28px,4vw,44px)/1.02 var(--basli);letter-spacing:-.01em;
  text-transform:uppercase;margin:0 0 8px}
.kk-bant h1 em{font-style:normal;background:var(--kirmizi);padding:0 8px}
.kk-bant p{margin:0;color:var(--ters-tx);font-size:15px;line-height:1.6;max-width:62ch}
.kk-bant .kk-kod{display:inline-block;padding:8px 14px;border:2px dashed rgba(255,255,255,.6);
  border-radius:var(--r-s);font:700 26px/1 var(--basli);letter-spacing:.08em}
.kk-bant-sag{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.kk-bant-sag small{color:var(--ters-tx-2);font-size:13px}
.kk-durum{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px}
.kk-durum svg{width:18px;height:18px;flex:none;stroke:currentColor}
/* Kayıt formu üstü: kampanya linkiyle gelen firmaya kodun tanımlandığını söyler */
.kk-form-not{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:12px 14px;
  background:var(--navy);color:#fff;border-radius:var(--r);border-left:4px solid var(--kirmizi);font-size:14px;line-height:1.5}
.kk-form-not b{font:700 17px/1 var(--basli);letter-spacing:.08em;padding:4px 8px;
  border:2px dashed rgba(255,255,255,.55);border-radius:var(--r-s);flex:none}
@media(max-width:760px){
  .kk-bant{grid-template-columns:1fr;padding:22px 20px}
  .kk-bant-sag{align-items:flex-start;text-align:left}
}
/* KAYIT KODU KAMPANYASI POPUP'I (15 Eki gece) — oturum başına bir kez.
   z 985: yardım panelleri/perdesi (960-980) üstünde, çerez bandı (990) altında. */
.kk-popup{position:fixed;inset:0;z-index:985;display:flex;align-items:center;justify-content:center;padding:16px}
.kk-popup[hidden]{display:none}
.kk-popup-perde{position:absolute;inset:0;background:rgba(10,14,20,.58)}
.kk-popup-kutu{position:relative;width:100%;max-width:440px;display:flex;flex-direction:column;gap:10px;
  padding:30px 26px 22px;background:var(--navy);color:#fff;border-radius:var(--r-l);
  border-top:5px solid var(--kirmizi);box-shadow:var(--golge-3);font-family:var(--govde);
  animation:kk-gir .24s cubic-bezier(.2,.8,.3,1)}
@keyframes kk-gir{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.kk-popup .kk-kod{align-self:flex-start;padding:6px 11px;border:2px dashed rgba(255,255,255,.6);
  border-radius:var(--r-s);font:700 20px/1 var(--basli);letter-spacing:.08em}
.kk-popup h2{margin:6px 0 0;font:800 28px/1.05 var(--basli);text-transform:uppercase;letter-spacing:.01em}
.kk-popup p{margin:0;font-size:15px;line-height:1.55;color:var(--ters-tx)}
.kk-popup p strong,.kk-popup p b{color:#fff}
.kk-popup-sure{padding:10px 12px;border-radius:var(--r);background:rgba(255,255,255,.07)}
.kk-popup p.kk-popup-onay{font-size:13.5px}
.kk-popup-onay a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.kk-popup-git{justify-content:center;margin-top:6px;min-height:46px;text-align:center}
.kk-popup-git svg{width:16px;height:16px;stroke:currentColor;flex:none}
.kk-popup-sonra{align-self:center;padding:8px 12px;border:0;background:none;color:var(--ters-tx-2);
  font:500 13.5px/1 var(--govde);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  transition:color var(--hiz)}
.kk-popup-sonra:hover{color:#fff}
.kk-popup-sonra:active{color:var(--ters-tx)}
.kk-popup-x{position:absolute;top:10px;right:10px;width:38px;height:38px;display:inline-flex;align-items:center;
  justify-content:center;border:0;border-radius:var(--r);background:transparent;color:var(--ters-tx);cursor:pointer;
  transition:background var(--hiz),color var(--hiz)}
.kk-popup-x svg{width:18px;height:18px;stroke:currentColor}
.kk-popup-x:hover{background:rgba(255,255,255,.1);color:#fff}
.kk-popup-x:active{background:rgba(255,255,255,.16)}
.kk-popup-x:focus-visible,.kk-popup-sonra:focus-visible,.kk-popup-git:focus-visible{outline:3px solid var(--kirmizi-acik);outline-offset:3px}
@media(max-width:480px){.kk-popup-kutu{padding:26px 18px 18px}.kk-popup h2{font-size:24px}}

/* Ürün sayfası: kampanyanın açık cümlesi (fiyat kutusu, iskonto satırı altı) */
.kk-urun-not{margin:6px 0 10px;padding:10px 12px;border-radius:var(--r);background:var(--kirmizi-solgun);
  border-left:4px solid var(--kirmizi);color:var(--tx);font-size:13.5px;line-height:1.5}
.kk-urun-not b{color:var(--kirmizi-koyu)}

/* ── MOBİL KALİTE GEÇİŞİ (22 Eki 2026) ──────────────
   Erhan: "insanların çoğu mobilden geliyor, mobili ele al" — reklam
   ziyaretçilerinin 81/82'si telefondan. Ölçüm aracı: scripts/mobil_denetim.mjs
   (360/390/412 px, gerçek telefon emülasyonu). */

/* Slider: nokta şeridi tam genişlikte (left:0;right:0) ve okların üstündeydi →
   mobilde alt köşedeki oklara dokunuş noktalara gidiyordu. Şerit dokunuşu
   geçirir, yalnız noktaların kendisi yakalar. Yatay hareket JS'e kalır,
   dikey kaydırma ve yakınlaştırma tarayıcıda. */
.slayt-noktalar{pointer-events:none}
.slayt-noktalar button{pointer-events:auto}
#slider{touch-action:pan-y pinch-zoom}

/* Ürün sayfasındaki öneri şeritleri ("… serisi", "Bu kategoriden diğer
   ürünler") 4 kart. Mobilde 3 sütuna 4 kart = alt satırda tek kart kalıyordu;
   anasayfa raflarıyla aynı davranış: 3 kart görünür, dördüncüsü parmakla kayar.
   ⚠ Sınıf adı "oneri" DEĞİL: .oneri arama kutusunun açılır listesi
   (position:absolute) — ilk denemede çakıştı, kartlar bölümün dışına uçtu. */
@media (max-width:920px){
  .izgara.urun-oneri{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:calc((100% - 2 * 10px) / 3);gap:10px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scrollbar-width:none;padding-bottom:2px}
  .izgara.urun-oneri::-webkit-scrollbar{display:none}
  .izgara.urun-oneri > *{scroll-snap-align:start}
}

@media (max-width:760px){
  /* oklar 34px'ti → mobil dokunma hedefi */
  .slayt-ok{width:42px;height:42px;bottom:8px;z-index:4}
  /* dokunma hedefi < 24px olan bağlantılar (WCAG 2.5.8; ölçüldü: içerik
     yolu 21px, footer telefon/e-posta 22px, KEP 16px, PayTR 20px) */
  .iz a{display:inline-flex;align-items:center;min-height:24px}
  .alt .alt-iletisim a,.alt .alt-resmi a{display:inline-flex;align-items:center;min-height:24px}
  .alt .alt-odeme a{display:inline-flex;align-items:center;min-height:24px}
}

/* 360px'te 3'lü kart ~100px: "Sepete ekle" düğmesinin 18px yan dolgusu yazıyı
   kartın dışına itiyordu (ölçüldü: 7px taşma, "Sepete ek" diye kesik). */
@media (max-width:430px){
  .urun-serit .kart-alt .dugme,.raf .kart-alt .dugme,.izgara .kart-alt .dugme{
    padding:0 4px;min-width:0;white-space:nowrap}
  /* 100px kartta 10px görsel dolgusu fotoğrafı 79×53'e indiriyordu → 6px
     (ürün fotoğrafı mobilde ürünü tanıtan ana öğe; ~%17 büyür, kart boyu aynı) */
  .urun-serit .kart-gorsel img,.raf .kart-gorsel img,.izgara .kart-gorsel img{
    inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
}
/* iOS Safari 16px'ten küçük giriş alanına dokunulunca SAYFAYI YAKINLAŞTIRIR
   (kullanıcı geri uzaklaştırmak zorunda kalır). Ölçüldü (390px): arama 14,5 ·
   kayıt formunun 18 alanı 14 · giriş 14 · sohbet 14 · sıralama 13,5 · adet 15 ·
   hızlı sipariş 13px — hepsi yakınlaştırıyordu. Mobil ziyaretçilerin ~%16'sı iOS.
   !important bilinçli: her formun kendi font-size kuralı var (özgüllükleri
   farklı); bu bir platform koruması, tek tek ezilmez. */
@media (max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
  select,textarea{font-size:16px !important}
}
/* kayıt/sevk onay kutusu 16px: etiket zaten tıklanır ama kutunun kendisi de
   parmakla rahat bulunsun (satır yüksekliği 13px × 1,6 = 21px, hizası korunur) */
@media (max-width:760px){.onay input{width:20px;height:20px;margin-top:1px}}
/* ürün sayfası marka bağlantısı 18px yüksekti (dokunma hedefi); satır yüksekliği
   zaten SKU rozetinden geliyor, düzen değişmez */
.detay .ust .marka{display:inline-flex;align-items:center;min-height:24px}