/* ============ /aku — MUTLU AKÜ vitrini (Sefa, 31.07.2026) ============
   Renk/yazı tipi b2b.css'ten gelir (--brand koyu bordo). Burada yalnız bu
   sayfaya özgü düzen var. */

/* ---------- üst başlık bandı ---------- */
.aku-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);
}
.aku-basi .rozet{
  display:inline-flex; align-items:center; gap:9px; font-weight:900; font-size:19px;
  letter-spacing:.3px; color:var(--brand);
}
.aku-basi .rozet svg{width:24px;height:24px;flex:0 0 auto}
.aku-basi .alt{font-size:12.5px;color:var(--faint);margin-top:2px;font-weight:600}
.aku-basi .sag{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.aku-ara{display:flex;height:40px;min-width:220px}
.aku-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);
}
.aku-ara input:focus{border-color:var(--brand-cizgi)}
.aku-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;
}
.aku-ara button:not(.qsil):hover{background:var(--brand-dark)}
.aku-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;
}
.aku-sirala:focus{outline:none;border-color:var(--brand-cizgi)}

/* ---------- iki sütun ---------- */
.aku-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. */
.aku-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;
}
.aku-yan::-webkit-scrollbar{width:8px}
.aku-yan::-webkit-scrollbar-track{background:transparent}
.aku-yan::-webkit-scrollbar-thumb{background:#c3ccd8;border-radius:8px}
.aku-yan::-webkit-scrollbar-thumb:hover{background:var(--faint)}

.aku-kutu{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden;
}
.aku-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;
}
.aku-kutu>summary::-webkit-details-marker{display:none}
.aku-kutu>summary:hover{background:var(--line2)}
.aku-kutu>summary .ok{
  margin-left:auto;width:16px;height:16px;color:var(--faint);transition:transform .15s;
}
.aku-kutu[open]>summary .ok{transform:rotate(180deg)}
.aku-kutu>summary .say{
  font-size:11px;font-weight:800;background:var(--brand);color:#fff;
  border-radius:20px;padding:1px 7px;
}
.aku-secenek{padding:2px 8px 10px}
.aku-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;
}
.aku-secenek a:hover{background:var(--line2)}
.aku-secenek a .tik{
  width:17px;height:17px;flex:0 0 auto;border:2px solid #c3ccd8;border-radius:5px;
  background:#fff;position:relative;
}
.aku-secenek a.on .tik{background:var(--brand);border-color:var(--brand)}
.aku-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);
}
.aku-secenek a.on{font-weight:800}
.aku-secenek a .n{margin-left:auto;font-size:11.5px;color:var(--faint);font-weight:700}
.aku-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 */
.aku-secenek.uzun{max-height:236px;overflow-y:auto;scrollbar-width:thin}
.aku-secenek.uzun::-webkit-scrollbar{width:7px}
.aku-secenek.uzun::-webkit-scrollbar-thumb{background:#cfd8e3;border-radius:6px}
.aku-secenek.uzun::-webkit-scrollbar-track{background:transparent}

.aku-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;
}
.aku-temizle:hover{background:#f6e0e3}

/* seçili süzgeç rozetleri (sonuçların üstünde) */
.aku-secililer{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.aku-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;
}
.aku-secililer .r:hover{background:var(--brand-soft)}
.aku-secililer .r b{font-size:14px;line-height:1}

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

/* ---------- ürün ızgarası ---------- */
.aku-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.akart{
  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;
}
.akart:hover{box-shadow:var(--shadow-lg);border-color:var(--brand-cizgi)}
.akart .foto{
  height:158px;background:linear-gradient(180deg,#fafbfc,#eef1f5);
  display:flex;align-items:center;justify-content:center;padding:10px;position:relative;
}
.akart .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" */
.akart .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;
}
.akart .fotobtn:hover img{transform:scale(1.06)}
.akart .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;
}
.akart .fotobtn:hover .buyut,.akart .fotobtn:focus-visible .buyut{opacity:1}
.akart .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. */
.akart .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;
}
.akart .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. */
.akart .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);
}
.akart .markar.mk-inci{background:#0b3d91;color:#fff;border-color:#0b3d91}
.akart .markar.mk-mutlu{background:#e30613;color:#fff;border-color:#e30613}
/* Halk Akü etiketinin kendi kırmızısı — Mutlu'nunkinden koyu, ayırt edilsin */
.akart .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) */
.akart .markar.mk-magneti{background:#111418;color:#ffd400;border-color:#111418}
/* ⭐ 06.08 Bosch — markanın kendi turkuazı (kırmızılardan ve laciverttten ayrı) */
.akart .markar.mk-bosch{background:#00a1d6;color:#fff;border-color:#0089b8}
/* ⭐ 07.08 Varta — markanın kendi lacivert/sarısı (İnci lacivertinden koyu) */
.akart .markar.mk-varta{background:#00287a;color:#ffdd00;border-color:#001d5c}
/* ⭐ 14.08 Esan — markanın kendi yeşili. Sayfadaki tek yeşil rozet, üç
   kırmızıdan ve iki lacivertten kesin ayrışır. */
.akart .markar.mk-esan{background:#0f8a3d;color:#fff;border-color:#0b6e30}
/* ⭐ 14.08 Doping — Esan'la aynı PDF'ten gelir ama AYRI MARKA; turuncu
   seçildi ki müşteri iki markayı kartta karıştırmasın. */
.akart .markar.mk-doping{background:#e8720c;color:#fff;border-color:#c25d06}
/* Üreticinin kataloğunda fotoğrafı olmayan model (İnci: Tank + araç besleme) */
.akart .fotoyok{
  display:flex;flex-direction:column;align-items:center;gap:6px;color:#b6bfcc;
}
.akart .fotoyok svg{width:96px;height:72px}
.akart .fotoyok i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.3px}
.akart .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 */
.akart .kodlar{display:flex;flex-direction:column;gap:2px}
.akart .ksat{display:flex;gap:6px;align-items:baseline;line-height:1.35}
.akart .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;
}
.akart .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;
}
.akart .ksat.ana b{font-size:12px;color:var(--ink)}
.akart .ad{font-weight:800;font-size:14px;line-height:1.3;margin:5px 0 8px}
.akart .cip{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.akart .cip span{
  font-size:11px;font-weight:700;background:var(--line2);color:var(--muted);
  border-radius:6px;padding:3px 7px;white-space:nowrap;
}
.akart .cip span.vurgu{background:var(--brand-soft);color:var(--brand)}
.akart .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. */
.akart .alt{
  margin-top:auto;border-top:1px solid var(--line2);padding:10px 13px 12px;
  display:flex;flex-direction:column;align-items:stretch;gap:9px;
}
.akart .fsatir{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.akart .fiyat{font-weight:900;font-size:17px;color:var(--ink);line-height:1.1}
.akart .fnot{font-size:10.5px;color:var(--faint);font-weight:600}
.akart form{display:flex;align-items:center;gap:7px;width:100%}
.akart .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;
}
.akart .adet:focus{border-color:var(--brand-cizgi)}
.akart .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;
}
.akart .ekle:hover{background:var(--brand-dark)}
.akart .ekle svg{width:16px;height:16px}

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

.aku-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 */
.aku-suzbtn{display:none}

/* ---------- telefon ---------- */
@media (max-width:900px){
  .aku-duzen{grid-template-columns:1fr}
  .aku-yan{position:static;display:none;max-height:none;overflow:visible;padding-right:0}
  .aku-yan.acik{display:block}
  .aku-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;
  }
  .aku-suzbtn svg{width:17px;height:17px;color:var(--brand)}
  .aku-suzbtn .say{
    font-size:11px;font-weight:800;background:var(--brand);color:#fff;
    border-radius:20px;padding:1px 7px;
  }
  .aku-basi{padding:12px 14px;gap:11px}
  .aku-basi .sag{width:100%;margin-left:0}
  .aku-ara{flex:1}
}
@media (max-width:520px){
  .aku-izgara{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .akart .foto{height:120px}
  .akart .ad{font-size:13px}
  .akart .ksat i{display:none}          /* dar ekranda etiketler gizlenir, kodlar kalır */
  .akart .ksat b{font-size:10.5px}
  .aku-basi .rozet{font-size:17px}
  .aku-sirala{flex:1;min-width:0}
}

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

/* =====================================================================
   ⭐ 08.08 (Sefa) LİSTE GÖRÜNÜMÜ — /yag ve /aksesuar ile ORTAK desen.
   Kartın HTML'i DEĞİŞMEZ, aynı kutular yatay dizilir. Tercih
   <html data-gorunum="liste"> ile gelir (b2bGorunum · _taban.html).
   ⛔ Kural eklerken üç CSS dosyasını birlikte güncelle.
   ===================================================================== */
html[data-gorunum="liste"] .aku-izgara{display:flex;flex-direction:column;gap:9px}
html[data-gorunum="liste"] .akart{flex-direction:row;align-items:stretch}
html[data-gorunum="liste"] .akart .foto{
  flex:0 0 132px;width:132px;height:auto;min-height:112px;padding:8px;
}
/* ⛔ Rozetler kart modundaki boyutta kalırsa 132 px'lik fotoğrafta taşıyor */
html[data-gorunum="liste"] .akart .tipr,
html[data-gorunum="liste"] .akart .markar{font-size:9px;padding:2px 5px}
html[data-gorunum="liste"] .akart .tipr{left:6px;top:6px}
html[data-gorunum="liste"] .akart .markar{left:6px;bottom:6px}
html[data-gorunum="liste"] .akart .buyut{right:5px;bottom:5px;width:22px;height:22px}
html[data-gorunum="liste"] .akart .fotoyok svg{width:54px;height:40px}
html[data-gorunum="liste"] .akart .fotoyok i{display:none}
html[data-gorunum="liste"] .akart .govde{padding:11px 16px;justify-content:center;min-width:0}
html[data-gorunum="liste"] .akart .ad{margin:4px 0 7px}
html[data-gorunum="liste"] .akart .cip{margin-bottom:6px}
html[data-gorunum="liste"] .akart .olcu{margin-bottom:0}
html[data-gorunum="liste"] .akart .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"] .akart{flex-wrap:wrap}
  html[data-gorunum="liste"] .akart .govde{flex:1 1 150px}
  html[data-gorunum="liste"] .akart .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.
   ===================================================================== */
.aku-ara .qwrap{flex:1;min-width:0}
.aku-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 */
  .aku-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);
  }
  .aku-suzbtn svg{width:18px;height:18px;color:#fff}
  .aku-suzbtn .say{background:#fff;color:var(--brand)}
  .aku-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 */
  .aku-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);
  }
  .aku-yan.acik .aku-kutu{border-color:var(--brand-cizgi)}
  .aku-yan.acik .aku-kutu>summary{background:#fff;font-size:14.5px}
}

/* ---------------------------------------- ARSIV KARTI (01.09, CODE TASK 08) */
.akart.aarsiv{opacity:.92;border-style:dashed}
.akart.aarsiv .govde{padding:14px}
.aarsiv-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}

/* -------------------------------------- SAYFA GEZINMESI (01.09, TASK 12)
   361 kart tek sayfada 932 KB ediyordu -> 120 kart/sayfa.
   Bicim /yag ve /aksesuar ile BIREBIR ayni. */
.aku-sayfalar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;
  margin:22px 0 4px}
.aku-sayfalar a,.aku-sayfalar b,.aku-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)}
.aku-sayfalar a:hover{border-color:var(--brand,#7a1220);color:var(--brand,#7a1220)}
.aku-sayfalar b{background:var(--brand,#7a1220);border-color:var(--brand,#7a1220);color:#fff}
.aku-sayfalar .pasif{opacity:.4;border-style:dashed}
.aku-sayfalar .ara{border:0;background:transparent;min-width:0;padding:8px 2px;opacity:.6}
@media (max-width:520px){
  .aku-sayfalar a,.aku-sayfalar b,.aku-sayfalar span{min-width:34px;padding:7px 8px;font-size:13px}
}