/* ═══════════════ KAPASİTE · stiller (29.09.2026) ═══════════════
   Bütün kurallar `.kp*` önekli ve `.kpEkran` altında (sezonsallik.css
   emsali); `index.html`deki tek `<link>` satırı silinince modül kalkar.
   `marka.css`e YAZILMADI — birden çok oturumun ortak dosyası.

   DÜZEN PBI'dan (kullanıcı: *"pbi raporlarından örnek alabilirsin"*):
   lacivert başlık bandı (`.kpUst`, PBI `.ukUst` renkleri) + altında
   açılıp kapanan süzgeç paneli (`.kpSuzgec`, PBI `.ukSuzgec` zemini).
   PBI sınıfları KULLANILMADI — renkler burada token olarak kopyalandı;
   PBI'ın CSS'i değişince bu ekran kırılmasın.

   ⚠️ KOYU TEMA: renk YALNIZ token olarak tanımlanır, karanlık karşılığı
   `:root[data-theme="dark"] .kpEkran` içinde (CLAUDE.md → "KOYU TEMA").
   Kural gövdesine hex yazma. Her doluluk bandı için ÜÇ ayrı token:
     -D dolgu (çubuk) · -Y yazı · -Z seçili zemin
   Yazı ile dolgu aynı token olsaydı koyu temada okunmazdı (Ürün
   Satışları'nda yaşandı).

   Doluluk bantları (oran = stok ÷ kapasite) — ÜÇ KADEME (30.09.2026):
     ust  ≥ %100  %100 üzeri   ·   dolu  %80–100   ·   bos  < %80
     (`orta` tokenları duruyor ama hiçbir bant onu kullanmıyor)
   ═════════════════════════════════════════════════════════════════ */

.kpEkran{
  --kpUstZemin:#16294d; --kpUstYazi:#ffffff;          /* PBI bandı */
  --kpSeritZ:#eef1f7;   --kpSeritKenar:#cfd5de;       /* PBI süzgeç şeridi */
  --kpUstD:#d9483b;  --kpUstY:#a3261b;  --kpUstZ:#fbe9e7;
  --kpDoluD:#2f9e64; --kpDoluY:#15653d; --kpDoluZ:#e5f4ec;
  --kpOrtaD:#d8a03a; --kpOrtaY:#7a4d0a; --kpOrtaZ:#fbf0dc;
  --kpBosD:#8d9bb0;  --kpBosY:#465569;  --kpBosZ:#eceff3;
  --kpIz:#e9ecf1;    --kpCizgiR:#1b2c4f; --kpYolY:#1f5fae;
}
:root[data-theme="dark"] .kpEkran{
  --kpUstZemin:#22304a; --kpUstYazi:#eef3fa;
  --kpSeritZ:#1b2534;   --kpSeritKenar:#3a4759;
  --kpUstD:#ef7a6c;  --kpUstY:#f6a89e;  --kpUstZ:#3a1d1a;
  --kpDoluD:#4fbf85; --kpDoluY:#86dfb0; --kpDoluZ:#132c22;
  --kpOrtaD:#e3b04b; --kpOrtaY:#f1ca7f; --kpOrtaZ:#2e2410;
  --kpBosD:#7d8ca3;  --kpBosY:#b8c4d5;  --kpBosZ:#1c232d;
  --kpIz:#243044;    --kpCizgiR:#dbe6f5; --kpYolY:#8fb8f0;
}
.kpB-ust{--kpBantD:var(--kpUstD);--kpBantY:var(--kpUstY);--kpBantZ:var(--kpUstZ)}
.kpB-dolu{--kpBantD:var(--kpDoluD);--kpBantY:var(--kpDoluY);--kpBantZ:var(--kpDoluZ)}
.kpB-orta{--kpBantD:var(--kpOrtaD);--kpBantY:var(--kpOrtaY);--kpBantZ:var(--kpOrtaZ)}
.kpB-bos{--kpBantD:var(--kpBosD);--kpBantY:var(--kpBosY);--kpBantZ:var(--kpBosZ)}
.kpY-ust{color:var(--kpUstY)}
.kpY-dolu{color:var(--kpDoluY)}
.kpY-orta{color:var(--kpOrtaY)}
.kpY-bos{color:var(--kpBosY)}

/* ---- başlık bandı (PBI `.ukUst`) ----
   ⚠️ Başlığın rengi AÇIKÇA verilir: app.css h2'ye kendi rengini koyuyor,
   lacivert bantta görünmez olurdu (PBI'da 01.09.2026'da yaşandı). */
.kpUst{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;
  background:var(--kpUstZemin);color:var(--kpUstYazi);padding:10px 14px;border-radius:10px 10px 0 0}
.kpEkran.kpSuzKapali .kpUst{border-radius:10px;margin-bottom:12px}
.kpBaslik{font-size:19px;font-weight:650;margin:0;letter-spacing:-.01em;color:var(--kpUstYazi)}
.kpUstSuz,.kpUstBtn{display:inline-flex;align-items:center;gap:6px;min-width:0;font:inherit;font-size:13px;
  line-height:1.2;cursor:pointer;color:var(--kpUstYazi);padding:6px 12px;border-radius:999px;min-height:32px;
  background:color-mix(in srgb,var(--kpUstYazi) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--kpUstYazi) 30%,transparent)}
.kpUstSuz:hover,.kpUstBtn:hover{background:color-mix(in srgb,var(--kpUstYazi) 22%,transparent)}
.kpUstSuz:focus-visible,.kpUstBtn:focus-visible,.kpUstLink:focus-visible{outline:2px solid var(--kpUstYazi);outline-offset:2px}
.kpUstBtn{font-weight:600}
.kpUstBtn:disabled{opacity:.5;cursor:default}
.kpUstSuzOk{font-size:11px;opacity:.85}
.kpUstSuzEt{font-weight:600}
.kpUstSuzOzet{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:min(48vw,620px);font-variant-numeric:tabular-nums}
.kpUstLink{font:inherit;font-size:12.5px;font-weight:600;color:var(--kpUstYazi);background:none;border:0;
  padding:6px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;opacity:.9}
.kpUstSag{margin-left:auto;display:flex;align-items:center;gap:10px}
.kpGunc{font-size:12px;color:color-mix(in srgb,var(--kpUstYazi) 75%,transparent);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ---- süzgeç paneli (PBI `.ukSuzgec`) · 2×2: Gün | Mağaza / Stok | Ürün ---- */
.kpSuzgec{background:var(--kpSeritZ);border:1px solid var(--kpSeritKenar);border-top:0;
  border-radius:0 0 10px 10px;padding:12px 14px;margin-bottom:12px}
.kpSuzgec:empty,.kpEkran.kpSuzKapali .kpSuzgec{display:none}
.kpSuzIzgara{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 30px;align-items:start}
.kpGrup{display:flex;flex-direction:column;gap:6px;min-width:0}
.kpGrupAd{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-aa)}
.kpGrupIc{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kpSeg{display:inline-flex;background:var(--surface);border:1px solid var(--kpSeritKenar);border-radius:9px;padding:3px;gap:2px}
.kpSeg button{border:0;background:transparent;color:var(--muted-aa);font:inherit;font-size:12.5px;
  padding:6px 12px;border-radius:6px;cursor:pointer;white-space:nowrap;min-height:30px}
.kpSeg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);font-weight:600}
/* Kapasite geçmişinin ilk gününden önceki "Dün" — pasif (ipucu `title`da) */
.kpSeg button:disabled{opacity:.45;cursor:not-allowed}
/* `width:auto` şart: app.css bütün girdileri %100 yapıyor, tarih kutusu
   şeridi kaplayıp düğmeleri alt satıra itiyordu (tezgâhta görüldü). */
.kpTarihG{font:inherit;font-size:12.5px;font-weight:550;color:var(--ink);background:var(--surface);
  border:1px solid var(--kpSeritKenar);border-radius:9px;padding:6px 10px;min-height:38px;color-scheme:light;
  width:auto;margin:0}
:root[data-theme="dark"] .kpEkran .kpTarihG{color-scheme:dark}
.kpKutu{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:550;color:var(--ink);
  background:var(--surface);border:1px solid var(--kpSeritKenar);border-radius:9px;padding:7px 12px;
  min-height:38px;cursor:pointer;user-select:none}
.kpKutu:hover{border-color:var(--navy4)}
.kpKutu input{width:16px;height:16px;margin:0;accent-color:var(--accent);cursor:pointer;flex:none}

/* ---- süzgeç düğmeleri · açılır liste (Sezon Analizi deseni) ----
   Düğmede "Tümü" yazmaz: yalnız ad; seçim varsa değer + dolu görünüm. */
.kpDD{position:relative}
.kpDDBtn{display:flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;
  min-height:38px;padding:5px 12px;cursor:pointer;border:1px solid var(--kpSeritKenar);
  border-radius:9px;background:var(--surface);color:var(--ink2);white-space:nowrap}
.kpDDBtn:hover{border-color:var(--navy4)}
.kpDDBtn::after{content:"";width:0;height:0;border:4px solid transparent;
  border-top-color:currentColor;margin-top:3px;opacity:.55}
.kpDD.acik .kpDDBtn{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.kpDDAd{font-weight:650;color:var(--ink2)}
.kpDDDeg{font-weight:550;color:var(--ink);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpDDDeg:empty{display:none}
.kpDDBtn.dolu{background:var(--accent-soft);border-color:var(--accent-line)}
.kpDDBtn.dolu .kpDDAd,.kpDDBtn.dolu .kpDDDeg{color:var(--accent-ink)}
.kpDDBtn.dolu .kpDDAd::after{content:":"}
.kpDDPanel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;
  width:max(240px,100%);max-width:min(330px,calc(calc(100vw / var(--ekranZ,1)) - 32px));
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 10px 28px rgba(0,0,0,.14);padding:10px}
.kpAra{width:100%;font:inherit;font-size:12.5px;color:var(--ink);background:var(--surface2);
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;min-height:36px;margin-bottom:8px}
.kpDDNot{font-size:11px;color:var(--muted-aa);margin-bottom:7px;line-height:1.35}
.kpDDArac{display:flex;align-items:center;gap:10px;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--line2)}
.kpDDSay{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted-aa);font-variant-numeric:tabular-nums}
.kpDDListe{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.kpDDSatir{display:flex;align-items:center;gap:9px;padding:6px;border-radius:7px;
  font-size:12.5px;font-weight:550;color:var(--ink2);cursor:pointer;min-height:34px}
.kpDDSatir:hover{background:var(--surface2)}
.kpDDSatir input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;flex:none}
.kpDDSatir span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpDDBos{font-size:12px;color:var(--muted-aa);padding:10px 6px}

/* ---- özet: rakamlar + doluluk bantları (bantlar süzgeçtir) ---- */
.kpOzet{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin-bottom:10px}
.kpRakamlar{display:flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:8px 4px}
.kpRakam{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:2px 16px;min-width:0}
.kpRakam+.kpRakam{border-left:1px solid var(--line2)}
.kpRAd{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-aa);white-space:nowrap}
.kpRakam b{font-size:19px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
/* `.kpRakam b` rengi ezdiği için bant yazı rengi burada yeniden verilir */
.kpRakam b.kpY-ust{color:var(--kpUstY)}
.kpRakam b.kpY-dolu{color:var(--kpDoluY)}
.kpRakam b.kpY-orta{color:var(--kpOrtaY)}
.kpRakam b.kpY-bos{color:var(--kpBosY)}
.kpBantlar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-left:auto}
.kpBant{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:12.5px;font-weight:550;
  min-height:40px;padding:6px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink2);cursor:pointer}
.kpBant:hover{border-color:var(--kpBantD)}
.kpBant i{width:10px;height:10px;border-radius:3px;background:var(--kpBantD);flex:none}
.kpBant b{font-size:15px;font-weight:700;color:var(--kpBantY);font-variant-numeric:tabular-nums}
.kpBant.secili{background:var(--kpBantZ);border-color:var(--kpBantD);box-shadow:inset 0 0 0 1px var(--kpBantD)}

/* ---- tablo ----
   Kaydırma kabı `overflow-x:auto`: `core.js > yapiskanTablolar` uzun
   tabloda başlığı üst çubuğun altına kendisi yapıştırır (ev kuralı).
   Kendi yapışkan kolonumuz YOK — katman sırasına dokunulmaz. */
.kpKart{padding:4px 10px 10px}
.kpKaydir{overflow-x:auto}
.kpTablo{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.kpTablo th{font-size:11.5px;font-weight:600;color:var(--muted-aa);text-align:right;
  padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
.kpTablo th.kpTh-ad,.kpTablo th.kpTh-depo,.kpTablo th.kpTh-oran{text-align:left}
.kpTablo th.kpTh-sira{text-align:center;width:34px}
.kpTablo th.kpTh-oran{min-width:230px}
.kpSiralanir{cursor:pointer}
.kpSiralanir:hover,.kpTablo th.secili{color:var(--ink)}
.kpSiralanir:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.kpTablo td{padding:7px 10px;border-bottom:1px solid var(--line2);font-size:13px}
.kpTablo tbody tr:hover td{background:var(--surface2)}
.kpSira{text-align:center;color:var(--muted-aa);font-size:12px}
.kpAd{font-weight:600;color:var(--ink);white-space:nowrap}
.kpKod{color:var(--muted-aa);font-size:12px;white-space:nowrap}
.kpSay{text-align:right;color:var(--ink);white-space:nowrap}
.kpGs{font-weight:650}
.kpYol{color:var(--kpYolY);font-weight:600}
.kpSifir{color:var(--muted-aa);font-weight:400}
.kpOranIc{display:flex;align-items:center;gap:10px}
.kpBar{position:relative;flex:1;min-width:120px;height:10px;border-radius:5px;background:var(--kpIz)}
.kpBar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--kpBantD,var(--kpBosD))}
/* %100 kapasite çizgisi — ölçek JS'te (`--kpCizgi`) */
.kpBar::after{content:"";position:absolute;left:var(--kpCizgi,80%);top:-3px;bottom:-3px;width:2px;
  border-radius:1px;background:var(--kpCizgiR);opacity:.5}
.kpBarBos{visibility:hidden}
.kpOranIc b{min-width:58px;text-align:right;font-size:13px;font-weight:700}
/* Toplam satırı başlığın altında (thead) ve başlıkla birlikte yapışık.
   Ayırıcı çizgi `box-shadow`: yapışık hücrede `border-collapse` kenarlığı
   kaydırınca kayboluyor (marka.css `.ytTablo` da aynı yolu kullanıyor).
   Zemin OPAK olmalı — altından satırlar geçiyor. */
.kpTablo thead tr.kpToplam td{font-weight:700;font-size:13px;color:var(--ink);background:var(--surface2);
  border-bottom:0;box-shadow:inset 0 -2px 0 var(--line);white-space:nowrap}
.kpTablo thead tr.kpToplam td.kpKod{font-weight:600;color:var(--muted-aa)}
.kpBosKart{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ---- dar masaüstü (701–1.200 px) ----
   1.024 px'te yolda açıkken 11 kolon sığmıyor, EN ÖNEMLİ kolon (oran)
   sağda kesiliyordu (tezgâhta görüldü). Depo kolonu gizlenir — kod satırın
   ipucunda kalır; oran çubuğu daralır. Telefon (≤700) kart görünümünde. */
@media (min-width:701px) and (max-width:1200px){
  .kpTablo th.kpTh-depo,.kpTablo td.kpKod{display:none}
  .kpTablo th,.kpTablo td{padding-left:7px;padding-right:7px}
  .kpTablo th.kpTh-oran{min-width:150px}
  .kpBar{min-width:60px}
}

/* ---- ana ekran kartı (vitrin) — anahtarı `kapasite` ---- */
.avR-kapasite{--avZ:#f3e8f1;--avV:#9c3b7c;--avY:#5a1f47}
:root[data-theme="dark"] .avR-kapasite{--avZ:#2e1828;--avV:#e592c8;--avY:#f6dcee}
/* Ana ekran mozaiği — doluluk bantlarının renkleri (raporla aynı) */
.avR-kapasite{--kUst:#d9483b;--kUstY:#a3261b;--kDolu:#2f9e64;--kBos:#8d9bb0}
:root[data-theme="dark"] .avR-kapasite{--kUst:#ef7a6c;--kUstY:#f6a89e;--kDolu:#4fbf85;--kBos:#7d8ca3}

/* ---- telefon ----
   Panel KAPALI açılır (JS); açılınca gruplar alt alta, Stok en sonda.
   Tablo `table.kart` → satır kart olur (app.css + mobil.js): ad başlık,
   oran çubuğu tam genişlik, ikincil kolonlar "Ayrıntı"da. Toplam satırı
   kartta gizli — aynı rakamlar özet kutularında. */
@media (max-width:700px){
  .kpUst{padding:9px 12px}
  /* Bant iki satır: ad + Excel üstte, Filtreler (özetle) + Temizle altta.
     Önce üç satıra yayılıyordu (375 px'te görüldü). */
  .kpBaslik{flex:1 1 auto}
  .kpUstSag{order:1}
  .kpUstSuz{order:2;flex:1 1 60%}
  .kpUstLink{order:3}
  .kpUstSuzOzet{max-width:none;min-width:0}
  .kpGunc{display:none}
  .kpSuzgec{padding:10px 12px}
  .kpSuzIzgara{grid-template-columns:minmax(0,1fr)}
  .kpGrupStok{order:9}
  /* Liste düğmenin değil GRUBUN altına açılır: sağa/sola taşmaz. */
  .kpGrup{position:relative}
  .kpDD{position:static}
  .kpDDPanel{left:0;right:0;width:auto;max-width:none}
  .kpDDDeg{max-width:120px}
  /* Tarih kutusu kısılıp "28.09" diye kesiliyordu (375 px'te ölçüldü). */
  .kpTarihG{flex:1 1 140px;min-width:140px}
  .kpKutu{width:100%}
  .kpRakamlar{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:6px 0}
  .kpRakam{padding:6px 12px}
  .kpRakam+.kpRakam{border-left:0}
  .kpRakam:nth-child(even){border-left:1px solid var(--line2)}
  .kpBantlar{width:100%;margin-left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpBant b{margin-left:auto}
  .kpTablo tr.kpToplam{display:none}
  .kpAd{white-space:normal}
  .kpBar{min-width:0}
}