/* AKSESUAR VİTRİNİ — /aksesuar (Sefa, 07.08.2026)
   ⚠️ Bu dosya aku.css'in KOPYASIDIR (sınıf önekleri aks- oldu): Sefa'nın
   /aku ve /yag'da yerleşen düzenini birebir korumak için. Renkler yine
   b2b.css'ten gelir; burada YALNIZ bu sayfanın yerleşimi vardır.
   ⛔ Düzen değişikliği yaparken /aku ve /yag'a da uygula (pattern yayılımı). */


/* ---------- üst başlık bandı ---------- */
.aks-basi{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 18px; margin:16px 0 14px; box-shadow:var(--shadow);
}
.aks-basi .rozet{
  display:inline-flex; align-items:center; gap:9px; font-weight:900; font-size:19px;
  letter-spacing:.3px; color:var(--brand);
}
.aks-basi .rozet svg{width:24px;height:24px;flex:0 0 auto}
.aks-basi .alt{font-size:12.5px;color:var(--faint);margin-top:2px;font-weight:600}
.aks-basi .sag{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.aks-ara{display:flex;height:40px;min-width:220px}
.aks-ara input{
  flex:1;min-width:0;border:2px solid var(--line);border-right:0;border-radius:10px 0 0 10px;
  padding:0 14px;font:inherit;font-size:14px;outline:none;color:var(--ink);
}
.aks-ara input:focus{border-color:var(--brand-cizgi)}
.aks-ara button:not(.qsil){
  border:0;background:var(--brand);color:#fff;font-weight:700;font-size:14px;
  padding:0 18px;border-radius:0 10px 10px 0;cursor:pointer;
}
.aks-ara button:not(.qsil):hover{background:var(--brand-dark)}
.aks-sirala{
  height:40px;border:2px solid var(--line);border-radius:10px;padding:0 10px;
  font:inherit;font-size:13.5px;color:var(--ink);background:var(--card);cursor:pointer;
}
.aks-sirala:focus{outline:none;border-color:var(--brand-cizgi)}

/* ---------- iki sütun ---------- */
.aks-duzen{display:grid;grid-template-columns:262px minmax(0,1fr);gap:18px;align-items:start}
/* ⛔ 31.07 (Sefa): süzgeç sütunu ekrana yapışıktı (sticky) ve ekrandan uzunsa
   ALT KUTULARA HİÇ İNİLEMİYORDU — sayfa kaydıkça sütun yerinde duruyor,
   taşan kısmı görünmez oluyordu. Artık sütun KENDİ İÇİNDE kayıyor. */
.aks-yan{
  position:sticky;top:130px;
  max-height:calc(100vh - 146px);overflow-y:auto;
  /* ⚠️ overscroll-behavior KOYMA: sütunun sonuna gelince tekerlek KİLİTLENİR,
     Sefa "aşağı inemiyorum" der. Varsayılan davranış sayfaya devreder. */
  padding-right:5px;scrollbar-width:thin;scrollbar-color:#c3ccd8 transparent;
}
.aks-yan::-webkit-scrollbar{width:8px}
.aks-yan::-webkit-scrollbar-track{background:transparent}
.aks-yan::-webkit-scrollbar-thumb{background:#c3ccd8;border-radius:8px}
.aks-yan::-webkit-scrollbar-thumb:hover{background:var(--faint)}

.aks-kutu{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden;
}
.aks-kutu>summary{
  list-style:none;cursor:pointer;padding:12px 14px;font-weight:800;font-size:13.5px;
  display:flex;align-items:center;gap:8px;user-select:none;
}
.aks-kutu>summary::-webkit-details-marker{display:none}
.aks-kutu>summary:hover{background:var(--line2)}
.aks-kutu>summary .ok{
  margin-left:auto;width:16px;height:16px;color:var(--faint);transition:transform .15s;
}
.aks-kutu[open]>summary .ok{transform:rotate(180deg)}
.aks-kutu>summary .say{
  font-size:11px;font-weight:800;background:var(--brand);color:#fff;
  border-radius:20px;padding:1px 7px;
}
.aks-secenek{padding:2px 8px 10px}
.aks-secenek a{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;
  font-size:13px;color:var(--ink);line-height:1.3;
}
.aks-secenek a:hover{background:var(--line2)}
.aks-secenek a .tik{
  width:17px;height:17px;flex:0 0 auto;border:2px solid #c3ccd8;border-radius:5px;
  background:#fff;position:relative;
}
.aks-secenek a.on .tik{background:var(--brand);border-color:var(--brand)}
.aks-secenek a.on .tik::after{
  content:"";position:absolute;left:4px;top:0;width:5px;height:10px;
  border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(43deg);
}
.aks-secenek a.on{font-weight:800}
.aks-secenek a .n{margin-left:auto;font-size:11.5px;color:var(--faint);font-weight:700}
.aks-secenek .not{padding:0 8px 8px;font-size:11.5px;color:var(--faint);line-height:1.4}
/* uzun seçenek listesi (kapasite: 46 farklı Ah) kendi içinde kayar */
.aks-secenek.uzun{max-height:236px;overflow-y:auto;scrollbar-width:thin}
.aks-secenek.uzun::-webkit-scrollbar{width:7px}
.aks-secenek.uzun::-webkit-scrollbar-thumb{background:#cfd8e3;border-radius:6px}
.aks-secenek.uzun::-webkit-scrollbar-track{background:transparent}

.aks-temizle{
  display:block;text-align:center;padding:9px;border-radius:10px;font-size:13px;
  font-weight:700;color:var(--brand);background:var(--brand-soft);margin-bottom:12px;
}
.aks-temizle:hover{background:#f6e0e3}

/* seçili süzgeç rozetleri (sonuçların üstünde) */
.aks-secililer{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.aks-secililer .r{
  display:inline-flex;align-items:center;gap:6px;background:var(--card);
  border:1px solid var(--brand-cizgi);color:var(--brand);border-radius:20px;
  padding:4px 11px;font-size:12.5px;font-weight:700;
}
.aks-secililer .r:hover{background:var(--brand-soft)}
.aks-secililer .r b{font-size:14px;line-height:1}

.aks-sonuc-basi{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px;
  font-size:13.5px;color:var(--muted);
}
.aks-sonuc-basi b{font-size:16px;color:var(--ink)}

/* ---------- ürün ızgarası ---------- */
.aks-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.akskart{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow .15s,border-color .15s;
}
.akskart:hover{box-shadow:var(--shadow-lg);border-color:var(--brand-cizgi)}
.akskart .foto{
  height:158px;background:linear-gradient(180deg,#fafbfc,#eef1f5);
  display:flex;align-items:center;justify-content:center;padding:10px;position:relative;
}
.akskart .foto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transition:transform .18s}
/* ⭐ 31.07 (Sefa): "resme tıklayınca büyük ekran gelsin" */
.akskart .fotobtn{
  position:absolute;inset:0;width:100%;height:100%;border:0;background:none;padding:10px;
  cursor:zoom-in;display:flex;align-items:center;justify-content:center;z-index:1;
}
.akskart .fotobtn:hover img{transform:scale(1.06)}
.akskart .buyut{
  position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:8px;
  background:#ffffffd9;border:1px solid var(--line);color:var(--muted);
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;
}
.akskart .fotobtn:hover .buyut,.akskart .fotobtn:focus-visible .buyut{opacity:1}
.akskart .buyut svg{width:15px;height:15px}
/* ⛔ 31.07 (Sefa): rozet fotoğrafın ARKASINDA kalıyordu — foto butonu (z-index:1)
   DOM'da rozetten sonra geldiği için üstüne biniyordu. Rozet hep ÖNDE. */
.akskart .tipr{
  position:absolute;left:10px;top:10px;z-index:2;font-size:10.5px;font-weight:900;
  letter-spacing:.5px;background:var(--brand);color:#fff;border-radius:6px;padding:3px 8px;
  box-shadow:0 1px 4px rgba(16,24,40,.22);pointer-events:none;
}
.akskart .tipr.ss{background:#12a150}
/* ⭐ 05.08 (Sefa): sayfa çok markalı (Mutlu + İnci) → kartta MARKA rozeti.
   Tip rozetinin karşısında durur, o da fotoğrafın ÖNÜNDE (z-index kuralı). */
/* ⛔ 05.08: rozet ÜST SAĞDA iken 375 px'te "AGM · START-STOP" etiketiyle
   çakışıyordu (19 kartta ölçüldü) → tip rozetinin ALTINA, sol köşeye alındı;
   sağ alt köşede zaten "büyüt" düğmesi var. */
.akskart .markar{
  position:absolute;left:10px;bottom:8px;z-index:2;font-size:10px;font-weight:900;
  letter-spacing:.3px;border-radius:6px;padding:3px 8px;pointer-events:none;
  background:#fff;color:var(--muted);border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(16,24,40,.12);
}
.akskart .markar.mk-inci{background:#0b3d91;color:#fff;border-color:#0b3d91}
.akskart .markar.mk-mutlu{background:#e30613;color:#fff;border-color:#e30613}
/* Halk Akü etiketinin kendi kırmızısı — Mutlu'nunkinden koyu, ayırt edilsin */
.akskart .markar.mk-halk{background:#b4141c;color:#fff;border-color:#b4141c}
/* ⭐ 06.08 Magneti Marelli — markanın kendi sarı/siyahı (üç kırmızıdan ayrışsın) */
.akskart .markar.mk-magneti{background:#111418;color:#ffd400;border-color:#111418}
/* ⭐ 06.08 Bosch — markanın kendi turkuazı (kırmızılardan ve laciverttten ayrı) */
.akskart .markar.mk-bosch{background:#00a1d6;color:#fff;border-color:#0089b8}
/* ⭐ 07.08 Varta — markanın kendi lacivert/sarısı (İnci lacivertinden koyu) */
.akskart .markar.mk-varta{background:#00287a;color:#ffdd00;border-color:#001d5c}
/* Üreticinin kataloğunda fotoğrafı olmayan model (İnci: Tank + araç besleme) */
.akskart .fotoyok{
  display:flex;flex-direction:column;align-items:center;gap:6px;color:#b6bfcc;
}
.akskart .fotoyok svg{width:96px;height:72px}
.akskart .fotoyok i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.3px}
.akskart .govde{padding:11px 13px 0;flex:1;display:flex;flex-direction:column}
/* ⭐ 31.07 (Sefa): "pdfdeki iki kodu da" — Katalog No + Malzeme No alt alta */
.akskart .kodlar{display:flex;flex-direction:column;gap:2px}
.akskart .ksat{display:flex;gap:6px;align-items:baseline;line-height:1.35}
.akskart .ksat i{
  font-style:normal;font-size:9px;font-weight:800;letter-spacing:.4px;color:var(--faint);
  text-transform:uppercase;flex:0 0 auto;width:48px;
}
.akskart .ksat b{
  font-family:ui-monospace,"Consolas",monospace;font-size:11px;font-weight:700;
  color:var(--muted);letter-spacing:-.2px;word-break:break-all;min-width:0;
}
.akskart .ksat.ana b{font-size:12px;color:var(--ink)}
.akskart .ad{font-weight:800;font-size:14px;line-height:1.3;margin:5px 0 8px}
.akskart .cip{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.akskart .cip span{
  font-size:11px;font-weight:700;background:var(--line2);color:var(--muted);
  border-radius:6px;padding:3px 7px;white-space:nowrap;
}
.akskart .cip span.vurgu{background:var(--brand-soft);color:var(--brand)}
.akskart .olcu{font-size:11.5px;color:var(--faint);margin-bottom:10px}
/* ⛔ 31.07 (Sefa): "Sepete" butonu dar kartta sığmıyordu — fiyat ÜSTTE tek satır,
   adet + buton ALTTA tam genişlik. Buton hiçbir genişlikte kırpılmaz. */
.akskart .alt{
  margin-top:auto;border-top:1px solid var(--line2);padding:10px 13px 12px;
  display:flex;flex-direction:column;align-items:stretch;gap:9px;
}
.akskart .fsatir{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.akskart .fiyat{font-weight:900;font-size:17px;color:var(--ink);line-height:1.1}
.akskart .fnot{font-size:10.5px;color:var(--faint);font-weight:600}
.akskart form{display:flex;align-items:center;gap:7px;width:100%}
.akskart .adet{
  width:54px;flex:0 0 auto;height:38px;border:2px solid var(--line);border-radius:9px;
  text-align:center;font:inherit;font-weight:700;font-size:14px;color:var(--ink);outline:none;
}
.akskart .adet:focus{border-color:var(--brand-cizgi)}
.akskart .ekle{
  flex:1;min-width:0;height:38px;border:0;background:var(--brand);color:#fff;border-radius:9px;
  padding:0 10px;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
}
.akskart .ekle:hover{background:var(--brand-dark)}
.akskart .ekle svg{width:16px;height:16px}

.aks-bos{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 20px;text-align:center;color:var(--muted);
}
.aks-bos .ico{font-size:34px;margin-bottom:8px}

.aks-dipnot{
  margin:16px 0 8px;font-size:12px;color:var(--faint);line-height:1.6;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 15px;
}

/* süzgeç aç/kapa düğmesi — yalnız telefonda görünür */
.aks-suzbtn{display:none}

/* ---------- telefon ---------- */
@media (max-width:900px){
  .aks-duzen{grid-template-columns:1fr}
  .aks-yan{position:static;display:none;max-height:none;overflow:visible;padding-right:0}
  .aks-yan.acik{display:block}
  .aks-suzbtn{
    display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;
    border:2px solid var(--line);background:var(--card);border-radius:10px;
    font:inherit;font-weight:700;font-size:13.5px;color:var(--ink);cursor:pointer;
  }
  .aks-suzbtn svg{width:17px;height:17px;color:var(--brand)}
  .aks-suzbtn .say{
    font-size:11px;font-weight:800;background:var(--brand);color:#fff;
    border-radius:20px;padding:1px 7px;
  }
  .aks-basi{padding:12px 14px;gap:11px}
  .aks-basi .sag{width:100%;margin-left:0}
  .aks-ara{flex:1}
}
@media (max-width:520px){
  .aks-izgara{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .akskart .foto{height:120px}
  .akskart .ad{font-size:13px}
  .akskart .ksat i{display:none}          /* dar ekranda etiketler gizlenir, kodlar kalır */
  .akskart .ksat b{font-size:10.5px}
  .aks-basi .rozet{font-size:17px}
  .aks-sirala{flex:1;min-width:0}
}

/* ---------- büyük görsel penceresi (resme tıklayınca) ---------- */
.modal-bg.aksmod .modal{max-width:680px}
.modal-bg.aksmod .mb{padding:16px;min-height:300px;flex-direction:column;gap:14px}
.modal-bg.aksmod .mb img{max-width:100%;max-height:56vh;object-fit:contain}
.aks-mbilgi{width:100%;border-top:1px solid var(--line2);padding-top:12px}
.aks-mbilgi .msat{display:flex;gap:8px;align-items:baseline;line-height:1.5;font-size:12.5px}
.aks-mbilgi .msat i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.4px;
  color:var(--faint);text-transform:uppercase;flex:0 0 auto;width:74px}
.aks-mbilgi .msat b{font-family:ui-monospace,"Consolas",monospace;font-weight:700;
  color:var(--ink);word-break:break-all}
.aks-mbilgi .msat span{color:var(--ink)}
.aks-mcip{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.aks-mcip span{font-size:11px;font-weight:700;background:var(--line2);color:var(--muted);
  border-radius:6px;padding:3px 7px}
.aks-mcip span.vurgu{background:var(--brand-soft);color:var(--brand)}
@media (max-width:520px){
  .modal-bg.aksmod .mb img{max-height:42vh}
  .aks-mbilgi .msat{flex-direction:column;gap:0}
  .aks-mbilgi .msat i{width:auto}
}

/* ---------------------------------------------------------------- stok durumu
   ⛔ Tedarikçi ADET vermiyor, yalnız durum: var / sorunuz / yok.
   Rozet fotoğrafın SOL ÜSTÜNDE; marka rozeti sol altta (akü sayfasında 05.08'de
   sağ üstte çakışma yaşandığı için ikisi aynı köşeye KONMAZ). */
.akskart .durumr{position:absolute;top:8px;left:8px;z-index:2;pointer-events:none;
  font-size:10.5px;font-weight:800;letter-spacing:.2px;padding:3px 8px;border-radius:999px;
  border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.akskart .durumr.d-var{background:#e7f7ec;color:#12692f}
.akskart .durumr.d-sor{background:#fff4e0;color:#8a5200}
.akskart .durumr.d-yok{background:#fdeaea;color:#96201d}

/* Sol süzgeçte de aynı renkler (aynı dili konuşsun) */
.aks-secenek a.d-var span:nth-child(2){color:#12692f;font-weight:700}
.aks-secenek a.d-sor span:nth-child(2){color:#8a5200;font-weight:700}
.aks-secenek a.d-yok span:nth-child(2){color:#96201d;font-weight:700}

/* Marka rozeti — aksesuarda 112 marka var, adları uzun olabiliyor → kırpılır */
.akskart .markar{max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

/* Fotoğraf ucumuzdan geliyor (PNG/JPEG karışık) → kutuya sığdır, taşırma */
.akskart .foto img{object-fit:contain;background:#fff}

/* ------------------------------------------------------------- sayfa gezinmesi
   7.820 urun tek sayfaya sigmaz (24 MB HTML) -> sayfa basina 120 kart.
   Baglantilar duz LINK: JS yok, geri tusu ve "yeni sekmede ac" dogru calisir. */
.aks-sayfalar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;
  margin:22px 0 4px}
.aks-sayfalar a,.aks-sayfalar b,.aks-sayfalar span{
  min-width:38px;padding:8px 11px;border-radius:9px;text-align:center;font-size:13.5px;
  font-weight:700;text-decoration:none;border:1px solid var(--cizgi,#dcdfe4);background:#fff;
  color:var(--metin,#25292e)}
.aks-sayfalar a:hover{border-color:var(--brand,#7a1220);color:var(--brand,#7a1220)}
.aks-sayfalar b{background:var(--brand,#7a1220);border-color:var(--brand,#7a1220);color:#fff}
.aks-sayfalar .pasif{opacity:.4;border-style:dashed}
.aks-sayfalar .ara{border:0;background:transparent;min-width:0;padding:8px 2px;opacity:.6}
@media (max-width:520px){
  .aks-sayfalar a,.aks-sayfalar b,.aks-sayfalar span{min-width:34px;padding:7px 8px;font-size:13px}
}

/* ------------------------------------------------------- kategori AGACI (08.08)
   Sefa: "o sitedeki soldaki filtrelemenin aynisi bizde de olsun."
   Kok secilince alt dallari onun ALTINDA girintili cikar. */
.aks-secenek a.dal{padding-left:26px;position:relative}
.aks-secenek a.dal::before{content:"";position:absolute;left:13px;top:0;bottom:0;
  width:1px;background:var(--cizgi,#dcdfe4)}
.aks-secenek a.dal span:nth-child(2){font-size:12.5px;opacity:.92}

/* ------------------------------------------------- YONETICI KATALOG KUTUSU
   Yalnizca yoneticide basilir (sablon `yonetim` bagi). CenkOto giris bilgisi
   ve elle cekim dugmeleri burada. Kapali gelir; giris bilgisi yoksa acik. */
.aks-yonetim{border:1px solid var(--cizgi,#dcdfe4);border-radius:12px;background:#fff;
  margin:0 0 14px;overflow:hidden}
.aks-yonetim>summary{list-style:none;cursor:pointer;padding:11px 14px;display:flex;
  align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px}
.aks-yonetim>summary::-webkit-details-marker{display:none}
.aks-yonetim>summary::before{content:"B8";font-size:11px;opacity:.55;transition:transform .15s}
.aks-yonetim[open]>summary::before{transform:rotate(90deg)}
.aks-yonetim .rz{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px}
.aks-yonetim .rz.ok{background:#e7f7ec;color:#12692f}
.aks-yonetim .rz.uyari{background:#fff4e0;color:#8a5200}
.aks-yonetim .ince{margin-left:auto;font-size:12.5px;opacity:.7}
.aks-yonetim .govde{padding:0 14px 14px;border-top:1px solid var(--cizgi,#eceef1)}
.aks-yonetim .bilgi{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;
  opacity:.85;margin:11px 0}
.aks-yonetim .bilgi .son{flex-basis:100%;opacity:.75}
.aks-yonetim .satir{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.aks-yonetim input{padding:8px 10px;border:1px solid var(--cizgi,#dcdfe4);
  border-radius:8px;font-size:13px;font-family:inherit}
.aks-yonetim button{padding:8px 15px;border:0;border-radius:8px;font-weight:700;
  font-size:13px;cursor:pointer;background:var(--brand,#7a1220);color:#fff}
.aks-yonetim button.ikincil{background:#48515c}
.aks-yonetim button[disabled]{opacity:.45;cursor:not-allowed}
.aks-yonetim .not{font-size:12px;opacity:.7;margin-top:10px;line-height:1.5}
@media (max-width:520px){ .aks-yonetim .ince{margin-left:0;flex-basis:100%} }

/* Tedarikcinin fiyat girmedigi kayit: rakam yerine "Fiyat sorunuz" */
.akskart .fiyat.sorunuz{font-size:14px;color:#8a5200;letter-spacing:0}

/* ---------------------------------------------------- TASARIM 08.08 duzeltmeleri
   Sefa gorselinde kategori etiketi KARTIN DISINA TASIYORDU (uzun "KOK>DAL"
   adlari tek satira sigmiyor, kirpilmiyordu). Etiketler artik kart genisligini
   asamaz; sigmayan ad ucu uc nokta ile kesilir, tamami title'da durur. */
.akskart .cip{display:flex;flex-wrap:wrap;gap:5px;max-width:100%;overflow:hidden}
.akskart .cip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;box-sizing:border-box}
/* Urun adi da tasmasin: en fazla 2 satir, gerisi uc nokta */
.akskart .ad{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word}
/* Kod satiri uzun kodlarda tasmasin */
.akskart .ksat b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.akskart .govde{min-width:0}
.akskart{min-width:0}

/* ------------------------------------------------- GENIS SOL SUTUN (08.08)
   Sefa: "soldaki filtreleme olayi biraz daha genis olsun, firfir ile asagi
   cekmede alan cok kucuk kaliyor."
   - Sutun 262px -> 320px (uzun kategori adlari tek satira sigsin)
   - Kutu ici kaydirma alani 236px -> 400px (273 dal ve 112 marka arasinda
     tek tek asagi cekmek zorunda kalmasin)
   - Sutunun kendi yuksekligi de artti; ekran kisaysa yine kendi icinde kayar.
   ⛔ overscroll-behavior:contain KOYMA — sutun sonunda tekerlek kilitlenir,
      /aku'da 31.07'de ayni sikayet gelmisti. */
.aks-duzen{grid-template-columns:320px minmax(0,1fr)}
/* ⛔⛔ 08.08 (Sefa: "sagdaki ekran en asagi inmeden soldaki ekranin en
   altina inemiyoruz") — SEBEP: sutun `top:130px` ile yapisik ama
   yuksekligi `100vh - 108px` verilmisti → alt ucu ekranin 22 px DISINDA
   kaliyordu, oraya inmek icin sayfayi kaydirmak gerekiyordu.
   KURAL: max-height = 100vh - top - kucuk bir pay. top 130 → 144.
   ⚠️ `top` degistirilirse burayi da degistir, yoksa ayni sikayet doner. */
.aks-yan{max-height:calc(100vh - 144px)}
.aks-secenek.uzun{max-height:400px}
@media (max-width:1200px){ .aks-duzen{grid-template-columns:280px minmax(0,1fr)} }
@media (max-width:900px){ .aks-duzen{grid-template-columns:1fr} }

/* ------------------------------- SOL SUTUN — SON HAL (08.08, Sefa'nin tarifi)
   Sefa: "kategorilerin hepsini acik birak demiyorum, ESKI HALINE GETIR;
   soldaki filtreleme ekrani ile sagdaki filtrelenen ekran arasinda BOSLUK
   istiyorum cunku firfir ile asagi inecek alan kalmiyor; soldaki filtreleme
   alani BIRAZ DAHA GENIS olsun."
   → 1) Kutu ici kaydirma GERI GELDI (uzun listeler kendi icinde kayar,
        kutu basliklari alt alta erisilebilir kalir).
     2) Sutun ile urun izgarasi arasi 40 px — kaydirma cubugunu tutacak
        gercek bir bosluk var.
     3) Sutun 320 → 360 px.
   ⛔ Kutu ici kaydirmayi TEKRAR KALDIRMA: 08.08'de denendi, Sefa geri
      istedi (kutular uc uca uzayip liste bitmiyor). */
.aks-secenek.uzun{max-height:400px;overflow-y:auto;scrollbar-width:thin}
.aks-kutu>summary{position:static;box-shadow:none}
/* ⭐ Sefa (yesil isaret): kutu ile kaydirma cubugu arasindaki serit
   GENISLESIN — cubugu tutmak icin rahat bir alan olsun.
   padding-right kutulari sola iter, cubuk sagda tek basina kalir. */
.aks-yan{padding-right:22px;scrollbar-width:auto}
.aks-yan::-webkit-scrollbar{width:16px}
.aks-yan::-webkit-scrollbar-thumb{background:#a9b5c4;border-radius:9px;
  border:4px solid transparent;background-clip:content-box}
.aks-yan::-webkit-scrollbar-thumb:hover{background:#8c99a9;background-clip:content-box}
/* ⚠️ Sefa'nin ekrani ~1265 px: genis olculer 1100 px'ten YUKARISINDA
   gecerli olsun ki onun ekraninda da 360 px + 40 px bosluk cikssin.
   (Ilk denemede esik 1280 idi, 1265'te dar olcuye dusuyordu.) */
.aks-duzen{grid-template-columns:360px minmax(0,1fr);gap:40px}
@media (max-width:1100px){ .aks-duzen{grid-template-columns:300px minmax(0,1fr);gap:24px} }
@media (max-width:900px){ .aks-duzen{grid-template-columns:1fr;gap:16px} }

/* --------------------------------------------------- SAYAC BOSLUGU (08.08)
   Sefa: "hala cok yakinlar birbirlerine." Secenek satirindaki adet sayisi
   sutunun kaydirma cubuguna yapisiyordu. Satirin sagina bosluk birakildi. */
.aks-secenek a{padding-right:12px}
.aks-secenek a .n{padding-left:8px;min-width:26px;text-align:right}
.aks-kutu{margin-right:2px}

/* =====================================================================
   ⭐ 08.08 (Sefa) LİSTE GÖRÜNÜMÜ — "akü yağ aksesuar bu 3 sayfada
   listeleme şeklinde de isteyen tasarımı değiştirebilmeli".
   Kartın HTML'i DEĞİŞMEZ, aynı kutular yatay dizilir. Tercih
   <html data-gorunum="liste"> ile gelir (b2bGorunum · _taban.html),
   /aku ve /yag ile ORTAK. ⛔ Kural eklerken üç dosyayı birlikte güncelle.
   ===================================================================== */
html[data-gorunum="liste"] .aks-izgara{display:flex;flex-direction:column;gap:9px}
html[data-gorunum="liste"] .akskart{flex-direction:row;align-items:stretch}
html[data-gorunum="liste"] .akskart .foto{
  flex:0 0 132px;width:132px;height:auto;min-height:106px;padding:8px;
}
/* ⛔ Rozetler kart modundaki boyutta kalırsa 132 px'lik fotoğrafta taşıyor */
html[data-gorunum="liste"] .akskart .durumr,
html[data-gorunum="liste"] .akskart .markar{font-size:9px;padding:2px 5px}
html[data-gorunum="liste"] .akskart .durumr{left:6px;top:6px}
html[data-gorunum="liste"] .akskart .markar{left:6px;bottom:6px}
html[data-gorunum="liste"] .akskart .buyut{right:5px;bottom:5px;width:22px;height:22px}
html[data-gorunum="liste"] .akskart .fotoyok svg{width:54px;height:40px}
html[data-gorunum="liste"] .akskart .fotoyok i{display:none}
html[data-gorunum="liste"] .akskart .govde{padding:11px 16px;justify-content:center;min-width:0}
html[data-gorunum="liste"] .akskart .ad{margin:4px 0 7px}
html[data-gorunum="liste"] .akskart .cip{margin-bottom:0}
html[data-gorunum="liste"] .akskart .alt{
  margin-top:0;border-top:0;border-left:1px solid var(--line2);
  flex:0 0 238px;justify-content:center;padding:11px 14px;
}
/* Dar ekranda fiyat/sepet bloğu alt satıra iner — yan yana sıkışmasın */
@media (max-width:760px){
  html[data-gorunum="liste"] .akskart{flex-wrap:wrap}
  html[data-gorunum="liste"] .akskart .govde{flex:1 1 150px}
  html[data-gorunum="liste"] .akskart .alt{
    flex:1 0 100%;border-left:0;border-top:1px solid var(--line2);
  }
}

/* =====================================================================
   ⭐ 08.08 (Sefa) "filtrelemeye SÜZGEÇLER demesin FİLTRELER desin, farklı
   renkte daha belirgin olsun · tıklayınca açılan filtreleme de belirgin
   olsun" + arama kutusunda × ile temizleme. Üç sayfada AYNI.
   ===================================================================== */
.aks-ara .qwrap{flex:1;min-width:0}
.aks-ara .qwrap input{padding-right:38px;border-radius:10px 0 0 10px}
@media (max-width:900px){
  /* Düğme: çerçeveli-beyaz değil, DOLU marka rengi */
  .aks-suzbtn{
    height:44px;padding:0 18px;border:0;background:var(--brand);color:#fff;
    font-weight:800;font-size:14.5px;letter-spacing:.2px;
    box-shadow:0 3px 10px rgba(139,0,32,.30);
  }
  .aks-suzbtn svg{width:18px;height:18px;color:#fff}
  .aks-suzbtn .say{background:#fff;color:var(--brand)}
  .aks-suzbtn.on{background:var(--brand-dark);box-shadow:0 2px 6px rgba(139,0,32,.40)}
  /* Açılan panel: sayfanın geri kalanından net ayrılsın */
  .aks-yan.acik{
    display:block;border:2px solid var(--brand);border-radius:14px;
    background:var(--brand-soft);padding:10px 10px 4px;margin-top:4px;
    box-shadow:0 6px 20px rgba(16,24,40,.13);
  }
  .aks-yan.acik .aks-kutu{border-color:var(--brand-cizgi)}
  .aks-yan.acik .aks-kutu>summary{background:#fff;font-size:14.5px}
}

/* ---------------------------------------- ARSIV KARTI (01.09, CODE TASK 08) */
.akskart.aksarsiv{opacity:.92;border-style:dashed}
.akskart.aksarsiv .govde{padding:14px}
.aksarsiv-not{margin-top:8px;display:inline-block;font-size:12px;font-weight:700;
  background:#fff7ed;border:1px solid #fdba74;color:#9a3412;border-radius:8px;padding:5px 9px}