/* =====================================================================
   BLUEMINT MARKA KATMANI — koyu lacivert vurgular
   18.08.2026 · kullanıcı isteği: "kurumsal rengimiz olan koyu laciverti
   birazcık raporlara başlıklara serpmen, bir tık daha profesyonel dursun"

   NEDEN AYRI DOSYA
     `app.css` bu iş sırasında BAŞKA BİR OTURUMDA açıktı (durum tahtası).
     Üzerine yazmak onun işini bozardı. Bu katman `app.css`'ten SONRA
     yükleniyor, yalnızca RENK geçersiz kılıyor; ölçü, boşluk, yerleşim
     hiç değişmiyor. İki oturum da bittiğinde istenirse `app.css` içine
     taşınabilir — davranış aynı kalır.

   KURAL — ne yapılır, ne yapılmaz
     ✔ Başlıklar, tablo başlık satırı, seçili sekme, ince ayraçlar
     ✘ Rakamlar, grafik/gauge renkleri, fotoğraflar, durum renkleri
       (yeşil/sarı/kırmızı) — onlar ANLAM taşıyor, markaya feda edilmez
     ✘ Ölçü, dolgu, yazı boyutu, yerleşim — hiçbiri
   ===================================================================== */

/* --- Başlıklar -------------------------------------------------------
   Hem sayfa başlıkları hem kart içi bölüm başlıkları. Kendi rengini
   satır içinde veren başlıklar (Düzeltme sarısı, hata kırmızısı gibi)
   etkilenmez — satır içi stil zaten üste çıkar.                       */
h1, h2 { color: var(--navy); }

/* --- Tablo başlık satırı ---------------------------------------------
   Yalnız YAZI rengi. Zemine dokunulmuyor: Hedef Takip'te başlık satırı
   yapışkan ve kendi zeminini taşıyor, Best Seller tablosunun da kendi
   zemini var — zemin verilirse ikisi de bozulurdu.                    */
th { color: var(--navy2); }
thead th { border-bottom-color: var(--navy4); }

/* --- Seçili sekme ----------------------------------------------------
   Önce neredeyse siyahtı (`--ink`). Lacivert hem markaya ait hem üst
   şeritteki logoyla aynı dili konuşuyor.                              */
.seg button.on, .seg a.on { background: var(--navy); }
.seg button:hover:not(.on), .seg a:hover:not(.on) { color: var(--navy2); }

/* --- Bağlantı görünümlü butonlar ------------------------------------ */
.link { color: var(--navy2); }

/* --- Kart üstü ince vurgu --------------------------------------------
   KPI kartlarının üstünde 2px lacivert çizgi. Rakama dokunmuyor,
   yalnız kartı markaya bağlıyor.                                      */
.card.kpi { border-top: 2px solid var(--navy); }

/* --- Bölüm ayracı ----------------------------------------------------
   Kart içinde başlığı gövdeden ayıran çizgi biraz lacivere çalsın.    */
.card > .pad > h2 + .small.muted { color: var(--muted); }

/* =====================================================================
   SORULAR EKRANI (Mağaza Checklist → Sorular)
   18.08.2026 · ikinci tur — kullanıcı: "çok çirkin, bir tık daha sade
   ve kullanışlı olsun."

   TASARIM ÖLÇÜSÜ — tek tabloda, satır içi `font-size` YAZILMAZ:
     22/650  ekran başlığı (h2, app.css'ten)
     15/650  checklist adı (h3)
     13,5    soru metni — okunması gereken asıl metin
     12,5    puan rozeti, düğmeler
     11,5    alt bilgi, rozetler
     11/700  ray başlığı, harf aralıklı

   Renk: yalnız marka laciverti (--navy*) + durum renkleri. Ağırlık
   çubuğu dışında hiçbir yerde dolgu renk yok; sadelik oradan geliyor.
   Stiller `app.css`te değil burada, çünkü o dosya bu iş sırasında başka
   bir oturumun kilidindeydi (bkz. dosya başındaki not).
   ===================================================================== */

/* --- KONTRAST — bu ekranda `--muted` koyultuldu ------------------------
   Ev tokenı `#7a828c` beyaz üstünde 3,89 : WCAG AA'nın (4,5) altında ve
   bu ekranda küçük punto çok (sıra no, ray sayısı, rozet, ipucu).
   `#666d77` ölçüldü: beyaz 5,23 · `--surface2` 5,04 · rozet zemini
   (`--line2`) 4,57 — üçü de geçiyor. Kalite raporundaki (`.krRapor`)
   aynı çözüm. **`:root` DEĞİŞTİRİLMEZ**, öteki ekranlar aynı kalsın. */
.sqBas,.sqDuzen,.sqMenuKutu,.sqHavuzDlg{--muted:var(--muted-aa)}

.sqBas{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.sqBas h2{margin:0}
.sqAlt{font-size:11.5px;color:var(--muted);font-weight:400}

/* --- ortak küçük düğme: çerçevesiz, sade, hover'da beliriyor --- */
.sqDus{font:inherit;font-size:12.5px;font-weight:600;color:var(--navy2);cursor:pointer;
  background:none;border:1px solid transparent;border-radius:8px;padding:6px 10px;white-space:nowrap}
.sqDus:hover:not(:disabled){background:var(--navy-soft,rgba(27,44,79,.07));border-color:transparent}
.sqDus:disabled{opacity:.45;cursor:default}
.sqDus.tehlike{color:#b23c2c}
.sqDus.tehlike:hover{background:rgba(178,60,44,.08)}
.sqIkon{font-size:17px;line-height:1;padding:4px 10px;color:var(--muted)}
/* Pencere altındaki düğmeler tam genişlik olmasın (app.css `.btn` 100%) */
.btn.sqBtn{width:auto;padding:10px 18px}

/* --- iki kolon: dar ray + geniş düzenleyici -----------------------
   `minmax(0,1fr)` şart: örtük `min-width:auto` yüzünden kolon,
   içindeki geniş kutuların min-content genişliğine kilitleniyor ve
   telefonda sayfa yana kayıyordu (375px ekranda 397px ölçüldü).  */
.sqDuzen{display:grid;grid-template-columns:238px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:860px){ .sqDuzen{grid-template-columns:minmax(0,1fr)} }
.sqRay,.sqAna{min-width:0}

/* --- sol ray --- */
.sqRay{display:flex;flex-direction:column;gap:2px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px}
.sqRayBas{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;padding:4px 8px 8px}
.sqRayOge{display:grid;grid-template-columns:1fr auto;gap:2px 6px;text-align:left;width:100%;
  background:none;border:0;border-radius:9px;padding:9px 10px 10px;cursor:pointer;color:var(--ink)}
.sqRayOge:hover{background:var(--surface2)}
.sqRayOge.on{background:var(--navy);color:var(--on-accent)}
.sqRayAd{font-size:13px;font-weight:600;line-height:1.3}
.sqRaySay{grid-column:1/-1;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.sqRayOge.on .sqRaySay{color:rgba(255,255,255,.72)}
.sqNokta{padding:0 5px;opacity:.5}

/* Ağırlık çubuğu — eski kırmızı "≠100" şeridinin yerine geçti.
   Tek bakışta "tam mı" der, düzenleme sırasında bağırmaz.        */
.sqCubuk{grid-column:1/-1;display:block;height:3px;border-radius:2px;background:var(--line);margin-top:5px;overflow:hidden}
.sqCubuk i{display:block;height:100%;border-radius:2px;background:var(--navy3)}
.sqCubuk.tam i{background:#2e7d4f}
.sqCubuk.asti i{background:#b23c2c}
.sqRayOge.on .sqCubuk{background:rgba(255,255,255,.22)}
.sqRayOge.on .sqCubuk i{background:var(--on-accent)}
.sqCubuk.buyuk{height:5px;border-radius:3px;margin:0;flex:1;min-width:80px}

.sqYeni{margin-top:6px;border-top:1px solid var(--line2);padding:11px 10px 4px;text-align:left;
  background:none;border-left:0;border-right:0;border-bottom:0;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--navy2)}
.sqYeni:hover{color:var(--navy)}

/* --- seçili checklist başlığı --- */
.sqUst{padding:14px 16px}
.sqUstSatir{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sqUstAd{display:flex;align-items:center;gap:8px;min-width:0}
.sqUstAd h3{margin:0;font-size:15px;font-weight:650;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sqEtiket{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:20px;
  background:var(--line2);color:var(--muted);white-space:nowrap}

.sqOlcu{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.sqOlcuSay{font-size:20px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.sqOlcuSay small{font-size:11.5px;font-weight:500;color:var(--muted);margin-left:3px}
.sqOlcuSay.asti{color:#b23c2c}
.sqOlcuAlt{font-size:11.5px;color:var(--muted);white-space:nowrap}
/* "100'e tamamla": yalnız toplam bozukken çıkan bağlamsal düzeltme.
   "Eşit dağıt" ⋯ menüsünde — toplam 100 iken de gerekebiliyor, satır
   içinde olsaydı tam da o durumda kaybolurdu. */
.sqDenkle{margin-left:auto;border:1px solid var(--line)}

/* --- tek ekleme kutusu (ara + yeni soru bir arada) --- */
.sqEkleKap{position:relative;margin:14px 0 10px}
.sqEkle{display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:11px;padding:0 10px}
.sqEkle:focus-within{border-color:var(--navy3);box-shadow:0 0 0 3px rgba(27,44,79,.09)}
.sqEkleIkon{display:flex;color:var(--muted);flex:0 0 auto}
.sqEkle input{border:0;background:none;padding:12px 0;border-radius:0}
.sqEkle input:focus{border:0;box-shadow:none}
.sqTemizle{border:0;background:none;color:var(--muted);cursor:pointer;font-size:19px;line-height:1;padding:0 4px}
.sqTemizle:hover{color:var(--ink)}

.sqOneri{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 5px);
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 14px 34px rgba(12,18,28,.14);overflow:hidden;max-height:340px;overflow-y:auto}
.sqOneriBas{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;padding:9px 14px 5px}
.sqOneriBas b{color:var(--navy)}
.sqOneriOge{display:block;width:100%;text-align:left;background:none;border:0;
  padding:8px 14px 9px;cursor:pointer;border-top:1px solid var(--line2)}
.sqOneriBas + .sqOneriOge{border-top:0}
.sqOneriOge:hover{background:var(--surface2)}
.sqOneriMetin{display:block;font-size:13px;color:var(--ink);line-height:1.35}
.sqOneriMetin b{color:var(--navy);font-weight:700}
.sqOneriYer{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.sqOneriOge.yeni .sqOneriMetin{color:var(--navy2);font-weight:600}
.sqOneriBos{padding:14px;font-size:12.5px;color:var(--muted)}

/* --- soru satırları: tablo değil, satır listesi ---------------------
   Tablo başlığı (Soru / Ağırlık / Foto / Sıra) kaldırıldı: dört
   kolonun ne olduğu zaten ikonlardan belli ve başlık satırı ekranın
   en gürültülü parçasıydı.                                        */
.sqListe{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sqSatir{display:grid;grid-template-columns:26px 26px minmax(0,1fr) auto auto auto;
  align-items:center;gap:8px;padding:7px 10px 7px 6px;border-bottom:1px solid var(--line2);background:var(--surface)}
.sqSatir:last-child{border-bottom:0}
.sqSatir:hover{background:var(--surface2)}
.sqSatir.duzende{background:var(--surface2);align-items:start}

.sqTutamac{display:flex;align-items:center;justify-content:center;height:28px;
  border:0;background:none;color:var(--line);cursor:grab;border-radius:6px;touch-action:none}
.sqSatir:hover .sqTutamac{color:var(--muted)}
.sqTutamac:focus-visible{outline:2px solid var(--navy3);color:var(--navy2)}
.sqSira{font-size:11.5px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}

.sqMetinKap{min-width:0}
.sqMetin{display:block;width:100%;text-align:left;background:none;border:0;cursor:text;
  font:inherit;font-size:13.5px;line-height:1.4;color:var(--ink);padding:5px 6px;border-radius:7px}
.sqMetin:hover{background:var(--line2)}
.sqMetinIn{font:inherit;font-size:13.5px;line-height:1.4;resize:vertical;margin:2px 0}
.sqIpucu{font-size:11px;color:var(--muted);margin:4px 0 6px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sqIpucu b{color:var(--ink2)}

/* Puan: normalde yazı, tıklanınca alan. Sürekli duran number input
   satırı ağırlaştırıyordu.                                        */
.sqPuan{font:inherit;font-size:12.5px;font-weight:700;color:var(--navy);cursor:pointer;
  background:var(--line2);border:1px solid transparent;border-radius:7px;padding:4px 9px;
  min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
.sqPuan:hover{border-color:var(--navy4);background:var(--surface)}
.sqPuanIn{width:70px;padding:5px 7px;text-align:right;font-variant-numeric:tabular-nums}

/* Fotoğraf zorunluluğu: onay kutusu değil basılı kalan düğme —
   "açık mı" tek bakışta görünsün.                                 */
.sqFoto{display:flex;align-items:center;justify-content:center;width:30px;height:28px;
  border:1px solid transparent;background:none;border-radius:8px;cursor:pointer;color:var(--line)}
.sqSatir:hover .sqFoto{color:var(--muted)}
.sqFoto:hover{border-color:var(--line);color:var(--ink2)}
.sqFoto.on,.sqSatir:hover .sqFoto.on{background:var(--navy);border-color:var(--navy);color:var(--on-accent)}

.sqCikar{width:26px;height:26px;border:0;background:none;color:transparent;border-radius:7px;
  cursor:pointer;font-size:17px;line-height:1}
.sqSatir:hover .sqCikar{color:var(--muted)}
.sqCikar:hover{background:rgba(178,60,44,.1);color:#b23c2c}

/* sürüklerken */
.sqListe.suruklerken{user-select:none}
.sqListe.suruklerken .sqSatir{transition:none}
.sqSatir.suruklenen{position:relative;z-index:5;background:var(--surface);
  box-shadow:0 8px 22px rgba(12,18,28,.16);border-radius:9px;opacity:.96}
.sqSatir.hedef{box-shadow:inset 0 2px 0 var(--navy3)}

/* --- kaydet çubuğu: yalnız değişiklik varken --- */
.sqKaydet{display:flex;align-items:center;justify-content:flex-end;gap:10px;
  position:sticky;bottom:0;margin-top:12px;padding:11px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 -4px 18px rgba(12,18,28,.06)}
.sqKaydet.bilgi{justify-content:flex-start;border-color:#bfe0cb;background:#f2f9f4}
.sqKirli{flex:1;font-size:12px;color:#a2650a;font-weight:600}
.sqTamam{font-size:12.5px;color:#2e7d4f;font-weight:600}

.sqBosKart{padding:26px 16px;text-align:center;font-size:13px;color:var(--ink2);line-height:1.7}

/* --- kategori ⋯ menüsü --- */
.sqMenuKutu{position:absolute;z-index:210;width:190px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:5px;
  box-shadow:0 14px 34px rgba(12,18,28,.18)}
.sqMenuKutu button{display:block;width:100%;text-align:left;background:none;border:0;
  font:inherit;font-size:12.5px;color:var(--ink);padding:9px 10px;border-radius:7px;cursor:pointer}
.sqMenuKutu button:hover{background:var(--surface2)}
.sqMenuKutu button.tehlike{color:#b23c2c}
.sqMenuKutu button.tehlike:hover{background:rgba(178,60,44,.08)}

/* --- soru havuzu penceresi --- */
.sqHavuzDlg{max-width:760px;width:calc(94vw / var(--ekranZ,1))}
.sqHavuzAra{display:flex;align-items:center;gap:8px;padding:10px 18px;border-bottom:1px solid var(--line2)}
.sqHavuzAra input{border:0;padding:6px 0}
.sqHavuzAra input:focus{border:0;box-shadow:none}
.sqHSatir{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2)}
.sqHSatir:last-child{border-bottom:0}
.sqHSatir.pasif{opacity:.55}
.sqHMetin{flex:1;min-width:0}
.sqHIn{font-size:13px;padding:8px 10px}
.sqHYer{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}
.sqHIslem{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.sqRoz{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 8px;border-radius:20px;
  background:var(--line2);color:var(--ink2);white-space:nowrap}
.sqRoz b{color:var(--navy);font-variant-numeric:tabular-nums}
.sqRoz svg{opacity:.7}

/* --- telefon --- */
@media (max-width:860px){
  .sqRay{flex-direction:row;overflow-x:auto;gap:6px;padding:8px}
  .sqRayBas{display:none}
  .sqRayOge{min-width:170px;flex:0 0 auto}
  .sqYeni{border-top:0;border-left:1px solid var(--line2);padding:8px 12px;white-space:nowrap;flex:0 0 auto}
  .sqSatir{grid-template-columns:24px 22px minmax(0,1fr) auto auto;
    grid-template-areas:"tut sira metin metin metin" ". . puan foto cikar";
    row-gap:2px;padding-bottom:9px}
  .sqTutamac{grid-area:tut}.sqSira{grid-area:sira}.sqMetinKap{grid-area:metin}
  .sqPuan,.sqPuanIn{grid-area:puan;justify-self:start}
  .sqFoto{grid-area:foto}.sqCikar{grid-area:cikar;color:var(--muted)}
  .sqTutamac,.sqFoto{color:var(--muted)}
  /* Dokunma hedefleri: masaüstünde 28px yeter, parmakla değil.
     Telefonda 36px'e çıkıyor — 30px'lik kamera düğmesi ıskalanıyordu. */
  .sqFoto{width:36px;height:36px}
  .sqPuan{padding:8px 12px;min-width:52px}
  .sqCikar{width:34px;height:34px}
  .sqTutamac{height:36px}
  .sqHSatir{flex-direction:column;gap:6px}
  .sqHIslem{flex-direction:row}
}

/* =====================================================================
   GERİ BİLDİRİM — yazma penceresi + Yönetim → Geri Bildirim
   21.08.2026 · kullanıcı isteği: "bir şey istediklerinde yazabilseler"

   TİP ÖLÇEĞİ (satır içi `font-size` yazılmaz):
     15/650  pencere ve ekran başlığı (app.css `.dlg-h h3` / h2)
     14      geri bildirim metni — okunacak asıl içerik
     13      tür kartı adı, düğmeler
     11,5    alt bilgi, rozetler, bağlam
   ===================================================================== */

/* --- KONTRAST: `--muted` bu ekranda koyultuldu -----------------------
   Ev tokenı `#7a828c` beyaz üstünde 3,89 — WCAG AA'nın (4,5) altında.
   `#666d77`: beyaz 5,23 · `--surface2` 5,04 · rozet zemini 4,57.
   Sorular ekranı ve kalite raporundaki aynı çözüm. `:root` DEĞİŞMEZ. */
.gbDlg,.gbyBas,.gbySuzgec,#gbyListe{--muted:var(--muted-aa)}

/* ---------------- yazma penceresi ---------------- */
.gbDlg{max-width:520px}
.gbTurler{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 12px}
.gbTur{display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.gbTur:hover{border-color:var(--navy4)}
.gbTur.on{border-color:var(--navy);background:var(--navy);color:var(--on-accent)}
.gbTurAd{font-size:13px;font-weight:650}
.gbTurAlt{font-size:11px;color:var(--muted);line-height:1.3}
.gbTur.on .gbTurAlt{color:rgba(255,255,255,.75)}
#gbMetin{font-size:14px;line-height:1.5;resize:vertical}
.gbAlt{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.gbAnonim{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2);cursor:pointer}
.gbAnonim input{width:auto}
.gbSayac{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.gbNot{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.45}
.btn.gbBtn{width:auto;padding:10px 18px}

.gbTesekkur{padding:34px 24px;text-align:center}
.gbTik{width:46px;height:46px;margin:0 auto 12px;border-radius:50%;background:#e8f4ec;color:#2e7d4f;
  font-size:24px;line-height:46px;font-weight:700}
.gbTesekkur h3{margin:0 0 6px;font-size:16px;color:var(--navy)}
.gbTesekkur p{margin:0 0 18px;font-size:13px;color:var(--muted)}

/* ---------------- yönetim ekranı ---------------- */
.gbyBas{margin-bottom:12px}
.gbyBas h2{margin:0}
.gbyAlt{font-size:11.5px;color:var(--muted)}
.gbyYeniSay{color:#a2650a}

.gbySuzgec{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.gbySagSuz{display:flex;gap:8px;flex-wrap:wrap}
.gbySagSuz select{width:auto;min-width:130px;padding:8px 10px}
.gbySagSuz input{width:auto;min-width:180px;padding:8px 10px}
.gbyRakam{display:inline-block;font-size:10.5px;padding:1px 5px;border-radius:9px;
  background:var(--line2);color:var(--ink2);margin-left:3px;font-variant-numeric:tabular-nums}
.seg.sub button.on .gbyRakam,.seg.sub a.on .gbyRakam{background:var(--accent-soft);color:var(--accent)}

/* Kart listesi — tablo DEĞİL: asıl içerik serbest metin, tabloya
   sıkıştırılınca okunmuyor.                                       */
.gbyKart{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;margin-bottom:10px;border-left:3px solid var(--line)}
.gbyKart.yeni{border-left-color:#c8901f}
.gbyKart.bakiliyor{border-left-color:var(--navy3)}
.gbyKart.yapildi{border-left-color:#2e7d4f}
.gbyKart.yapilmayacak{border-left-color:var(--line);opacity:.72}

.gbyUst{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.gbyTur{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 8px;border-radius:20px;background:var(--line2);color:var(--ink2)}
.gbyTur.t-hata{background:#fbecea;color:#a53a2a}
.gbyTur.t-soru{background:#eef2f9;color:var(--navy2)}
.gbyKim{color:var(--ink2);font-weight:600}
.gbyAnonim{font-style:italic;color:var(--muted);font-weight:400}
.gbyNokta{padding:0 5px;opacity:.5}
.gbyZaman{margin-left:auto;font-variant-numeric:tabular-nums}
.gbyDurumRoz{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--line2);color:var(--ink2)}
.gbyDurumRoz.d-yeni{background:#fdf3e3;color:#8a5a12}
.gbyDurumRoz.d-yapildi{background:#e8f4ec;color:#2e7d4f}

/* Kullanıcının yazdığı metin: satır sonları korunur (madde madde
   yazanlar oluyor), uzun kelimeler taşmasın diye kırılır.         */
.gbyMesaj{font-size:14px;line-height:1.55;color:var(--ink);margin:9px 0 10px;
  white-space:pre-wrap;overflow-wrap:anywhere}

.gbyBaglam{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.gbyRoz{padding:2px 8px;border-radius:20px;background:var(--surface2);border:1px solid var(--line2);white-space:nowrap}
.gbyNotRoz{padding:2px 8px;border-radius:6px;background:#fdf9ee;border:1px solid #f0e2c4;color:#7a5a14}

.gbyIslem{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--line2)}
.gbyDus{font:inherit;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;
  background:none;border:1px solid transparent;border-radius:8px;padding:5px 10px;white-space:nowrap}
.gbyDus:hover:not(:disabled){background:var(--surface2);color:var(--navy2)}
.gbyDus.on{background:var(--navy);border-color:var(--navy);color:var(--on-accent)}
.gbyDus.tehlike{color:#b23c2c}
.gbyDus.tehlike:hover{background:rgba(178,60,44,.08);color:#b23c2c}
.gbyDus:disabled{opacity:.45;cursor:default}
.gbyBos{padding:30px 16px;text-align:center;font-size:13px;color:var(--muted)}

@media (max-width:640px){
  .gbTurler{grid-template-columns:minmax(0,1fr)}
  .gbTur{flex-direction:row;align-items:baseline;gap:8px}
  .gbySagSuz{width:100%}
  .gbySagSuz select,.gbySagSuz input{flex:1 1 130px;min-width:0}
  .gbyZaman{margin-left:0;width:100%}
  /* Parmakla basılacak kadar: masaüstündeki 12px yazı 26px yükseklik veriyor */
  .gbyDus{padding:8px 12px}
}

/* =====================================================================
   HEDEF TAKİP — ÜST ÖZET (27.08.2026 · yeniden tasarlandı)
   Önce üç şerit vardı (Bugün / Ay / LFL-Ziyaretçi), on rakam aynı
   büyüklükteydi. Kullanıcı: "sabah kısa bakılıp günlük ve aylık durumu
   görmek amaç… tek soru: ay sonu nereye geleceğiz, hedefin kaçını
   yapacağız… çok rakam var, sade ve net değil."

   Şimdi İKİ EŞ KART + iki katman (Detay · Mağazalar).
   İki kart BİREBİR aynı kalıptan üretiliyor — kullanıcı: "günlük ve
   aylıktaki tasarımın farklı olması kafa karıştırıcı."

   ⚠️ 15.09.2026 — KART TASARIMI CLAUDE DESIGN'DAN GELDİ.
   Kaynak: Claude Design projesi 408ae758 → "Hedef Kart.dc.html"
   (kanvasta yön **2a · Sade: anlık · gün sonu · hedef**).
   Şartname: `tasarim/hedef_kart_TASARIM.md`. Renkler, tip ölçeği ve
   sütun oranları oradan BİREBİR alındı — göz kararı değiştirme.

     BUGÜN                                 10:18 · canlı
     ANLIK          GÜN SONU      HEDEF
     100.081 ₺      4,4 M ₺       3,8 M ₺
     25 adet        1.100 adet
     [█░░░░░░░░▕░]                      HGO %116,3

   ⛔ GERİ EKLENMEYECEKLER: lejant satırı (`.hd2Ef`) · geçen yıl satırı
   (`.hd2Gy`) · büyük rakamın yanındaki yüzde (`.hd2Pay`/`.hd2Oran`) ·
   "hedefe N ₺ kalıyor" rozeti (`.hd2Rozet`) · çubuğun üstündeki HEDEF
   etiketi. Hepsi aynı olguyu ikinci kez yazıyordu.

   TIP ÖLÇEĞİ (satır içi font-size yazılmaz — tasarımdan birebir):
     36/600  ANLIK rakamı (dar 30)   24/600  tahmin · hedef · HGO (dar 20)
     13      adet satırı             11/500  kart etiketi + damga (mono)
     10      sütun etiketi (mono, harf aralığı .14em)
   ===================================================================== */
.hd2Iki,.hd2Kat,.hd2Katman{--muted:var(--muted-aa)}

.hd2Iki{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-bottom:14px}

/* ---------- kart gövdesi ---------- */
/* ⚠️ EKRANIN KENDİ PALETİ — ev kuralı: token aç, karanlık karşılığını
   ver, `:root`a dokunma. Hex'ler tasarımın THEME tablosundan birebir.
   Ölçüldü (15.09.2026): aydınlıkta en düşük kontrast 5,08 (silik yazı),
   karanlıkta 7,12 — 18 ölçümün 18'i AA'yı geçiyor.                 */
.hd2Kart{--hkInk:#16294d;--hkMut:#5c6a85;--hkBd:#e2e5ea;
  --hkRay:#edeff3;--hkHayalet:#c2cad8;--hkArti:#0f7a52;--hkEksi:#8a5a06}
:root[data-theme="dark"] .hd2Kart{--hkInk:#eef2f8;--hkMut:#9dabc3;--hkBd:#28334c;
  --hkRay:#1f2840;--hkHayalet:#3f4d6b;--hkArti:#4ec98a;--hkEksi:#e3ab52}

.hd2Kart{display:flex;flex-direction:column;gap:18px;padding:22px;border-radius:16px;
  border-color:var(--hkBd);color:var(--hkInk);font-variant-numeric:tabular-nums}
.hd2Bas{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0}
/* ⚠️ MONO YAZI TIPI DIŞARIDAN ÇEKİLMİYOR. Tasarım IBM Plex Mono'yu
   Google Fonts'tan yüklüyordu; CSP `self` ve "dış bağımlılık yok" kuralı
   gereği aile listede duruyor (kuruluysa kullanılır), değilse sistem
   mono'suna düşüyor — Ürün Satışları'ndaki kararla aynı.        */
.hd2Et,.hd2Damga,.hd2Kes{font-family:"IBM Plex Mono",ui-monospace,Consolas,"Courier New",monospace}
/* ⛔ `text-transform:uppercase` YAZILMAZ — sayfa `lang="tr"` ve tarayıcı
   "Bluemint"i "BLUEMİNT" yapıyor. Etiketler HTML'de zaten büyük yazılı. */
.hd2Et{font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--hkInk);text-transform:none}
.hd2Damga{font-size:11px;letter-spacing:.1em;color:var(--hkMut)}

/* ÜÇ SÜTUN = ÜÇ AN: anlık · tahmin · hedef. İlk sütun 1,15fr — en
   büyük rakam orada. Tahmin yoksa (kapanmış ay) iki sütun kalır.   */
.hd2Uc{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px}
.hd2Uc.iki{grid-template-columns:1.15fr 1fr}
.hd2Huc{display:flex;flex-direction:column;gap:5px;min-width:0}
.hd2Kes{font-size:10px;letter-spacing:.14em;color:var(--hkMut)}
.hd2Huc b{font-size:24px;font-weight:600;line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
/* ⚠️ EN BÜYÜK RAKAM GERÇEKLEŞEN SATIŞTIR, TAHMİN DEĞİL (15.09.2026).
   Ölçüldü: ekranda 6,2 M ₺ yazıyordu, gerçek satış 1,3 M ₺ idi.   */
.hd2Anlik b{font-size:36px;line-height:1;letter-spacing:-.02em}
.hd2Adt{font-size:13px;color:var(--hkMut)}
/* Karar rengi YALNIZ tahmin rakamında, çubuğun dolu diliminde ve HGO'da.
   Kartın başka hiçbir yeri renklenmez — "iyi gidiyor muyuz"un cevabı
   tek bir yerde okunsun.                                              */
.hd2Tah.ust b,.hd2Hgo.ust b{color:var(--hkArti)}
.hd2Tah.alt b,.hd2Hgo.alt b{color:var(--hkEksi)}

.hd2Alt{display:flex;align-items:center;gap:18px}
/* ÇUBUĞUN SONU HEDEF DEĞİL — ölçek max(hedef,tahmin,anlık), hedef bir
   ÇİZGİ. Çubuk hedefte bitseydi tahmin hedefi aştığında tepeye dayanır
   ve "geride" gibi okunurdu (kullanıcı 24.08.2026'da yakaladı).
   ⚠️ RENKLİ DOLGU ANLIK SATIŞ, tahmin arkada gri hayalet dolgu.     */
.hd2Cub{flex:1;min-width:0;position:relative;height:14px;border-radius:999px;background:var(--hkRay)}
.hd2Dolgu{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:999px}
.hd2Tahmin{background:var(--hkHayalet)}
.hd2Simdi{z-index:2}
.hd2Simdi.ust{background:var(--hkArti)} .hd2Simdi.alt{background:var(--hkEksi)}
.hd2Cizgi{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--hkInk);z-index:3}
.hd2Hgo{display:flex;align-items:baseline;gap:7px;flex:none}
.hd2Hgo b{font-size:24px;font-weight:600;line-height:1}

/* ---------- katmanlar ---------- */
.hd2Kat{overflow:hidden}
.hd2Ok{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;border-top:1px solid var(--line2);cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:650;color:var(--navy2);padding:14px 20px;text-align:left}
.hd2Kat>.hd2Ok:first-child{border-top:0}
.hd2Ok:hover{background:var(--surface2)}
.hd2Isaret{font-size:16px;transition:transform .18s}
.hd2Ok.acik .hd2Isaret{transform:rotate(90deg)}
.hd2Katman{display:none}
.hd2Katman.gor{display:block}
.hd2Kat .hd2Katman{padding:2px 20px 14px;border-top:1px solid var(--line2);background:var(--surface2)}
.hd2Olculer{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 24px}
.hd2Olculer .bHucre{padding:11px 0;border-bottom:1px solid var(--line2)}
.hd2Uyari{font-size:11.5px;color:#b23c2c;padding-top:8px}

/* Mağaza bölümü katmanın kendisi; kart çerçevesi burada.
   `overflow:hidden` YOK — içindeki .hdKaydir kendi kaydırma kabında
   ve yapışkan başlık satırı taşıyor.                                */
.hd2Mag{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-top:14px}

/* ⚠️ DAR DÜZEN EŞİĞİ 1250px — 820 DEĞİL, ÖLÇÜLDÜ 15.09.2026.
   Kartlar `.hd2Iki` içinde İKİŞER duruyor ve gövde `min(1200px,95vw)`
   (GENIS). Yani kart ≈ (gövde − 14) / 2:

     pencere 1600 → kart 593 → ANLIK sütunu 187px
     pencere 1250 → kart 586 → 187px
     pencere 1100 → kart 516 → **158px**  ← sığmıyor

   36px'lik en uzun rakam ("124,1 M ₺") **168px**. Eşik 1100'de
   bırakılsaydı 1100-1250 arasında rakam komşu sütuna taşardı.
   Mağaza rolünde gövde 560px (tek kolon) → sütun 175px, yine sığıyor.
   Tasarımın "narrow" ölçüleri: pad 16 · gap 14 · hero 30 · orta 20 ·
   iki kolon, ANLIK iki kolonu birden kaplar.                        */
@media (max-width:1250px){
  .hd2Kart{padding:16px;gap:14px}
  .hd2Uc,.hd2Uc.iki{grid-template-columns:1fr 1fr;gap:14px}
  .hd2Anlik{grid-column:span 2}
  .hd2Anlik b{font-size:30px}
  .hd2Huc b{font-size:20px}
  .hd2Alt{gap:14px}
  .hd2Hgo b{font-size:20px}
}

/* =====================================================================
   CANLI SATIŞ (27.08.2026)
   Üç kırılım (Mağazalar · Ürünler · Danışmanlar) AYNI tabloyu kullanır;
   yalnız satırın ne olduğu değişir. Power BI'da her sayfanın kolonları
   farklıydı — aynı tutmak "hangi rakam neydi" sorusunu kaldırıyor.

   TİP ÖLÇEĞİ (satır içi font-size yazılmaz):
     19/650  ekran başlığı (h2)        22/750  özet rakamı
     13      tablo satırı              12,5    grup satırı (kalın)
     11/700  ETİKET · kolon başlığı    11,5    alt bilgi
   ===================================================================== */
.csBas,.csOzet,.csListe{--muted:var(--muted-aa)}

.csBas{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:14px}
.csBas h2{margin:0}
.csAlt{font-size:11.5px;color:var(--muted)}
.csNokta{padding:0 6px;opacity:.5}
.csAlt .link{font-size:11.5px;margin-left:8px}

/* --- özet şeridi --- */
/* ⚠️ SABİT 6 KOLON DEĞİL. Önce `repeat(6,1fr)` yazıyordu; dar kapta her
   kutu ~90px'e düşüyor, "225.058 ₺" → "22…" ve "%42,9" → "%4…" diye
   kırpılıyordu (kullanıcı 27.08.2026 ekran görüntüsüyle bildirdi).
   `auto-fit` + 148px alt sınır: sığmayan kutu alt satıra iner, KIRPILMAZ.
   Rakam da artık ellipsis taşımıyor — yer yoksa satır kayar, sayı
   yarım gösterilmez.                                                  */
.csOzet{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  padding:2px 0;margin-bottom:14px}
.csKutu{padding:13px 16px;border-right:1px solid var(--line2);min-width:0}
.csKutu:last-child{border-right:0}
.csEt{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;white-space:nowrap}
.csNo{font-size:21px;font-weight:750;line-height:1.15;margin-top:3px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.csAltNo{font-size:11px;color:var(--muted);margin-top:1px}
@media (max-width:560px){ .csKutu{padding:11px 13px} .csNo{font-size:18px} }

/* --- HİYERARŞİK LİSTE (28.08.2026) ---
   Önce `<table>` vardı; dar ekranda her satır ayrı bir çerçeveli karta
   dönüşüp "ADET 30 / NET 140.073 ₺ / ORT. FİYAT 4.669 ₺" diye alt alta
   diziliyordu. Kullanıcı: *"çok çirkin listeleme biçimi, bunu
   profesyonel hale getirir misin."*

   Artık tek bir liste var, her satır İKİ SATIRLIK bir blok:
       ›  ARTHUS STRETCH                        140.073 ₺
          30 adet · ort. 4.669 ₺
   Kolon başlığı olmadığı için "sığmıyor" sorunu da yok; sıralama tek
   bir açılır kutuyla yapılıyor (telefonda da kullanılabilir).

   ⚠️ ÜÇ SEVİYE GÖZLE AYRILIR (kullanıcı 28.08: *"cinsiyeti modellerden
   ayırabilmeliyim, aynı şekilde modeli renklerden"*). Ayrım üç şeyle
   birden yapılır — yalnız girintiye bırakılmaz:
     sv0  cinsiyet / kanal   BÖLÜM BANDI: tonlu zemin, VERSAL, lacivert
     sv1  model / mağaza     normal satır, beyaz zemin
     sv2  renk / kişi        girintili, silik zemin, küçük punto
   Ayrıca her alt satır bir üst seviyenin girintisinde ince bir dikey
   KILAVUZ ÇİZGİSİ taşır (arka plan degradesiyle çiziliyor).

   TİP ÖLÇEĞİ (satır içi font-size yazılmaz):
     12/750 versal  bölüm adı      15/750  bölüm tutarı
     14/600         model adı      14,5/700 model tutarı
     13/500         renk adı       13/600  renk tutarı
     11,5           ikincil satır (adet · ort. fiyat · UPT · dönüşüm)   */

.csArac{display:flex;justify-content:flex-end;margin-bottom:8px}
.csSiraSec{display:flex;align-items:center;gap:8px;font-size:11.5px;
  font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.csSiraSec select{width:auto;font-size:13px;padding:7px 10px;
  font-weight:500;color:var(--ink);text-transform:none;letter-spacing:0}

/* Hiyerarsik listenin zemin tonlari. Karanlikta ayni ISI korunur:
   bolum > alt > hover sirasi bozulmaz, yalnizca kutup doner. */
:root[data-theme="dark"] .csListe{--csGrup:#1a2434;--csAlt:#141d2a;--csHover:#202c3f}
.csListe{--csGrup:#f1f4f9;--csAlt:#f7f9fb;--csHover:#eaeff6;
  overflow:hidden;padding:0}

/* Satır: ok · ad · tutar / ikincil satır adın altında.
   `--sv` derinliktir, girintiyi o veriyor.                            */
.csSat{display:grid;grid-template-columns:18px minmax(0,1fr) auto;
  grid-template-areas:"ok isim net" ". ikincil ikincil";
  column-gap:8px;align-items:baseline;
  padding:9px 16px 9px calc(16px + var(--sv) * 22px);
  border-bottom:1px solid var(--line2)}
.csListe .csSat:last-child{border-bottom:0}
.csOkA{grid-area:ok}
.csIsim{grid-area:isim;min-width:0;overflow-wrap:anywhere}
.csNet{grid-area:net;white-space:nowrap;font-variant-numeric:tabular-nums}
.csIkincil{grid-area:ikincil;font-size:11.5px;color:var(--muted);
  margin-top:2px;font-variant-numeric:tabular-nums}

.csOk{display:inline-block;font-size:14px;line-height:1;color:var(--navy3);
  transition:transform .16s}
.csOk.acik{transform:rotate(90deg)}
.csSat.acilir{cursor:pointer;user-select:none}
.csSat.acilir:hover{background-color:var(--csHover)}

/* ⚠️ BİÇİM DERİNLİKTEN DEĞİL ROLDEN GELİR — `t*` sınıfları.
   Model, ürün görünümünde 2., mağaza görünümünde 3. seviyede duruyor;
   derinliğe bağlansa aynı şey iki ekranda iki türlü görünür, üstelik
   mağaza görünümünde model ile renk aynı biçime düşerdi (kullanıcı
   28.08.2026: *"cinsiyeti modellerden ayırabilmeliyim, aynı şekilde
   modeli renklerden"*). Girintiyi `--sv` verir, biçimi `tip`.       */

/* tbolum — BÖLÜM BANDI: cinsiyet · kanal · (personelde) mağaza */
.csSat.tbolum{background-color:var(--csGrup);border-top:1px solid var(--navy4);
  border-bottom:0;padding-top:11px;padding-bottom:11px}
.csListe .csSat.tbolum:first-child{border-top:0}
.csSat.tbolum .csIsim{font-size:12px;font-weight:750;color:var(--navy);
  text-transform:uppercase;letter-spacing:.07em}
.csSat.tbolum .csNet{font-size:15px;font-weight:750;color:var(--navy)}
.csSat.tbolum .csOk{color:var(--navy2)}

/* torta — MAĞAZA (kanalın altında, modellerin üstünde): lacivert yazı
   ve ince üst çizgi ile modellerden ayrılır.                        */
.csSat.torta{border-top:1px solid var(--line)}
.csSat.torta .csIsim{font-size:14px;font-weight:650;color:var(--navy2)}
.csSat.torta .csNet{font-size:14.5px;font-weight:750;color:var(--navy2)}

/* tana — MODEL: sayfanın asıl satırı, beyaz zemin, koyu yazı */
.csSat.tana .csIsim{font-size:14px;font-weight:600;color:var(--ink)}
.csSat.tana .csNet{font-size:14.5px;font-weight:700;color:var(--ink)}

/* talt — RENK · KİŞİ: silik zemin, küçük punto */
.csSat.talt{background-color:var(--csAlt)}
.csSat.talt .csIsim{font-size:13px;font-weight:500;color:var(--ink2)}
.csSat.talt .csNet{font-size:13px;font-weight:600;color:var(--ink2)}
.csSat.talt .csIkincil{font-size:11px}

/* talt2 — RENGİN ALTINDAKİ MAĞAZALAR (08.09.2026)
   Kullanıcı: "üründen sonra renge girdiğimde bir alt kırılım daha
   istiyorum: en çok satan 3 mağaza."
   `talt`ten bir tık daha silik: dördüncü seviye, okunurken hiyerarşinin
   dibi olduğu belli olsun. Girintiyi zaten `--sv` veriyor. */
.csSat.talt2{background-color:var(--csAlt)}
.csSat.talt2 .csIsim{font-size:12.5px;font-weight:500;color:var(--muted-aa)}
.csSat.talt2 .csNet{font-size:12.5px;font-weight:600;color:var(--muted-aa)}
.csSat.talt2 .csIkincil{font-size:11px}
.csKalan{color:var(--muted-aa)}

/* Kılavuz çizgisi: her alt satır BİR ÜST seviyenin girintisinde ince bir
   dikey çizgi taşır — hangi grubun altında olduğu okunur. Kenarlık
   yerine arka plan degradesi: `--sv` ile konumlanabiliyor.            */
.csSat:not(.tbolum){background-image:linear-gradient(var(--navy4),var(--navy4));
  background-repeat:no-repeat;background-size:1px 100%;
  background-position:calc(16px + (var(--sv) - 1) * 22px + 6px) 0}

.csBos{padding:30px 16px;text-align:center;font-size:13px;color:var(--muted)}

@media (max-width:560px){
  .csSat{padding-left:calc(12px + var(--sv) * 16px);padding-right:12px}
  .csSat:not(.tbolum){background-position:calc(12px + (var(--sv) - 1) * 16px + 5px) 0}
  .csSat.tbolum .csNet{font-size:14px}
  .csSat.torta .csNet,.csSat.tana .csNet{font-size:13.5px}
}

/* --- CANLI SATIŞ TABLOSU — BİREBİR PBI (16.09.2026) -----------------
   Kaynak: Ürün ekranı `.uk*` (marka.css) + `urunkiyas.js > ukGorunur`.
   Kullanıcı: *"koyu lacivert, tipi birebir PBI"* · *"iki tablonun
   duruşuna bak, alakası var mı"* · *"renklerde bir sorun var"*.
   Tek bilinçli fark: değişim ayrı kolon DEĞİL, rakamın ALTINDA dolu rozet
   (kullanıcı seçti 16.09.2026).
     başlık        açık şerit · iki kat · 2px lacivert alt çizgi
     zBant         derinlik 0 bölüm: lacivert (#16294d / almaşan #22375f)
     zSonukBant    başka dal açıkken kapalı bölüm: #e4eaf3, lacivert yazı
     zYol          açık ata: beyaz, solda 3px lacivert çizgi, kalın
     zOdak         en derin açık düğüm: #2f4a78 bant, beyaz yazı
     zZebA/B       aktif seviye: #c2d5ee / #e7effa
     zSonuk        bir dal açıkken kalan: beyaz, soluk yazı
   Satır sınıfı JS'ten (`sales.js > csBoya`).
   ⚠️ Dar ekranda tablo kap içinde yana kayar, ad kolonu sabit.        */
.ctKap{padding:0;overflow-x:auto;margin-bottom:14px;--muted:var(--muted-aa);
  --ctSerit:#eef1f7;--ctYazi:#16294d;--ctAltYazi:#4c5a72;--ctAyrac:#c3cbd8;--ctCizgi:#e6e9ee;--ctUst:#ffffff;
  --ctBantA:#16294d;--ctBantB:#22375f;--ctOdak:#2f4a78;--ctZebA:#c2d5ee;--ctZebB:#e7effa;
  --ctSonukBant:#e4eaf3;--ctSonukYazi:#5c6a80;--ctBeyaz:#ffffff;--ctKenar:#cfd5de;--ctYol:#22375f}
:root[data-theme="dark"] .ctKap{--ctSerit:#1b2534;--ctYazi:#eef3fa;--ctAltYazi:#b3c0d2;--ctAyrac:#3f4d61;
  --ctCizgi:#2b374a;--ctUst:#eef3fa;--ctBantA:#22304a;--ctBantB:#2b3b58;--ctOdak:#3a5a91;
  --ctZebA:#2b3b58;--ctZebB:#1e293c;--ctSonukBant:#1d2738;--ctSonukYazi:#93a0b2;--ctBeyaz:#151e2c;--ctKenar:#3a4759;--ctYol:#24365a}
/* 📌 Yapışma yalnız GENİŞ EKRANDA (17.09.2026): `overflow-x:auto` sticky'yi
   kaba hapseder, satırlar yapışmaz. Tablo en çok 900 px istiyor; 1.024 üstünde
   kap kaymaya gerek duymuyor. `sales.js > csYapistir` taşma değerine bakar. */
@media (min-width:1024px){ .ctKap{overflow-x:visible} }
.ctTablo tr.ctYapisik > th,.ctTablo tr.ctYapisik > td{position:sticky;top:var(--ctTop,0);z-index:4}
.ctTablo tr.ctYapisik > th.ctAd,.ctTablo tr.ctYapisik > td.ctAd{z-index:5}
.ctTablo thead tr.ctYapisik > th{z-index:6}
/* 🔎 Arama + Personel seçimi aynı satırda (17.09.2026). */
/* 🔁 Arama başlıkta, görünüm düğmelerinin SOLUNDA (kullanıcı 17.09.2026: "bu
   kadar ortaya koymayalım"). Alt satırda yalnız Personel'in ikinci seçimi kalır. */
.csSag{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.csArac{display:flex;justify-content:flex-end;margin:0 0 10px}
.csArac:has(#csKisiKap:empty){display:none}
.csAra{width:240px;min-width:0;font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--card,#fff);color:var(--ink)}
.csAra:focus{outline:2px solid var(--accent);outline-offset:-1px}
/* Filtreleri temizle — aramanın solunda, sade çerçeveli düğme (17.09.2026). */
.csTemizle{font:inherit;font-size:12.5px;font-weight:600;padding:6px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--card,#fff);color:var(--ink);cursor:pointer;white-space:nowrap}
.csTemizle:hover{border-color:var(--ink)}
.csTemizle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:560px){ .csSag{width:100%} .csAra{flex:1 1 0;width:auto} }
/* ⚠️ `.ctKap .ctTablo` — tek sınıf YETMEZ: app.css'teki `.card table{min-width:100%}`
   daha özgül ve min-width'i eziyordu; telefonda kolonlar üst üste biniyordu. */
.ctKap .ctTablo{width:100%;border-collapse:collapse;table-layout:fixed;min-width:900px}
.ctKap .ctTablo[data-n="3"]{min-width:520px}
.ctKap .ctTablo[data-n="4"]{min-width:620px}
.ctTablo thead th{background:var(--ctSerit);color:var(--ctYazi);white-space:nowrap;text-align:right;border-bottom:0}
/* Grup adı dar kolonda KESİLMEZ, iki satıra iner ("Ortalama Fiyat (VD)"). */
.ctTablo .ctGrupBas th{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:9px 12px 3px;white-space:normal;line-height:1.2;vertical-align:bottom}
.ctGrupBas th.ctAd{text-align:left;vertical-align:bottom;font-size:14px;font-weight:600;padding:9px 12px 7px;
  border-bottom:2px solid var(--ctYazi)}
.ctAltBas th{font-size:13px;font-weight:600;color:var(--ctAltYazi);padding:2px 12px 7px;text-transform:none;letter-spacing:0;
  border-bottom:2px solid var(--ctYazi)}
.ctAltBas th.ctSirali{color:var(--ctYazi);font-weight:700}
.ctTablo thead th.ctIlk{border-left:2px solid var(--ctAyrac)}
.ctTablo th.ctSirala{cursor:pointer;user-select:none}
.ctSiraOk{font-size:10px}
.ctTablo td{padding:3px 12px;border-top:1px solid var(--ctCizgi);vertical-align:middle;background:var(--ctBeyaz)}
.ctTablo td.ctSay{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ctTablo td.ctIlk{border-left:2px solid var(--ctAyrac)}
.ctB{font-size:14px;font-weight:500;color:var(--ink);line-height:1.2}
/* Değişim: ZEMİNSİZ, rakam renkli (kullanıcı 16.09.2026). Açık zeminde
   koyu tonlar; lacivert/odak bandında açık tonlar (uk Sev1 ile aynı). */
.ctD{font-size:12px;font-weight:700;line-height:1.1;margin-top:1px}
.ctD.art{color:#0c7f41} .ctD.azl{color:#b3261e} .ctD.sif{color:#b9791c}
:root[data-theme="dark"] .ctKap .ctD.art{color:#4ec27f}
:root[data-theme="dark"] .ctKap .ctD.azl{color:#ef8b83}
:root[data-theme="dark"] .ctKap .ctD.sif{color:#e3b04b}
.ctSat.zBant .ctD.art,.ctSat.zOdak .ctD.art{color:#79d3a1}
.ctSat.zBant .ctD.azl,.ctSat.zOdak .ctD.azl{color:#f2a9a4}
.ctSat.zBant .ctD.sif,.ctSat.zOdak .ctD.sif{color:#f5d77a}
/* Ad kolonu sabit — yatay kayınca satırın ne olduğu kaybolmasın. */
.ctTablo td.ctAd,.ctTablo th.ctAd{position:sticky;left:0;z-index:1}
/* 🔴 SOLDAKİ BEYAZ ÇUBUK (17.09.2026, kullanıcı ekran görüntüsüyle): ad
   hücresinin `border-left:3px transparent`i `border-collapse`ta kolonun sol
   kenarını 3-4 px açıyordu; saydam kenardan KARTIN beyazı görünüyor, başlık
   ve renkli satırların solunda beyaz şerit kalıyordu. Yol çizgisi artık
   İÇ GÖLGE (`box-shadow:inset`) — kenar genişliği yok.                */
.ctTablo td.ctAd{padding-left:calc(10px + var(--sv) * 20px);border-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* PBI aç/kapa kutusu [+] [−] */
.ctAc{display:inline-block;width:15px;height:15px;line-height:13px;margin-right:8px;text-align:center;vertical-align:1px;
  border:1px solid var(--ctKenar);border-radius:3px;font-size:12px;color:#5a626d;background:var(--ctBeyaz)}
.ctAc.bos{border-color:transparent;background:none}
/* Büyük harf CSS ile VERİLMEZ: ürün adları Nebim'den zaten büyük geliyor; mağaza/kişi
   adları "FLORENTİA VİLLAGE" diye bozuluyordu. Yalnız bölüm satırı (cinsiyet, toplam). */
.ctIsim{font-size:14px;color:var(--ink)}
.ctKalan{font-size:11px;color:var(--muted);margin-left:6px;text-transform:none}
.ctSat.acilir{cursor:pointer}
.ctSat.acilir:hover td{filter:brightness(.97)}
/* derinliğe göre punto (uk: Sev1 15/700 · Sev2 15/600 · Sev3 14/600 · alt 14/500) */
.ctSat.tbolum .ctIsim{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ctSat.tmagaza .ctIsim,.ctSat.torta .ctIsim,.ctSat.tozet .ctIsim{font-weight:600}
.ctSat.tana .ctIsim{font-weight:600}
.ctSat.talt .ctIsim,.ctSat.talt2 .ctIsim{font-weight:500}
/* --- zeminler (csBoya) --- */
.ctSat.zBant td{background:var(--ctBantA);border-top-color:#0e1c37}
.ctSat.zBantB td{background:var(--ctBantB)}
.ctSat.zBant .ctIsim,.ctSat.zBant .ctB{color:var(--ctUst)}
.ctSat.zBant .ctB{font-weight:600}
.ctSat.zBant .ctAc{background:transparent;border-color:rgba(255,255,255,.5);color:var(--ctUst)}
.ctSat.zBant td.ctAd{padding-top:7px;padding-bottom:7px}
.ctSat.zBant:hover td,.ctSat.zOdak:hover td{filter:brightness(1.18)}
.ctSat.zSonukBant td{background:var(--ctSonukBant)}
.ctSat.zSonukBant .ctIsim,.ctSat.zSonukBant .ctB{color:var(--ctYazi)}
.ctSat.zSonukBant .ctB{font-weight:600}
/* 🔁 AÇIK ATA ARTIK KOYU BANT (17.09.2026 — kullanıcı: "üst başlıkları da
   belirginleştirmesi lazım alta indikçe", Mağazalar'da da aynı). Önce beyaz
   + sol çizgiydi; SETH koyu, üstündeki ERKEK › T-SHIRT beyaz kalıyordu.
   Ata `--ctYol` (koyu), en derin açık düğüm `--ctOdak` (bir ton açık) —
   yol okunur, odak ayrışır. Beyaz yazı kontrastı: #22375f 11,6 · #2f4a78 9,0. */
.ctSat.zYol td{background:var(--ctYol)}
.ctSat.zYol td.ctAd{box-shadow:inset 3px 0 0 #9fb6da}
.ctSat.zYol .ctIsim,.ctSat.zYol .ctB{color:var(--ctUst);font-weight:700}
.ctSat.zYol .ctAc{background:transparent;border-color:rgba(255,255,255,.5);color:var(--ctUst)}
.ctSat.zYol .ctD.art{color:#79d3a1} .ctSat.zYol .ctD.azl{color:#f2a9a4} .ctSat.zYol .ctD.sif{color:#f5d77a}
.ctSat.zYol:hover td{filter:brightness(1.18)}
.ctSat.zOdak td{background:var(--ctOdak)}
.ctSat.zOdak td.ctAd{box-shadow:none}
.ctSat.zOdak .ctIsim,.ctSat.zOdak .ctB{color:var(--ctUst);font-weight:700}
.ctSat.zOdak .ctAc{background:transparent;border-color:rgba(255,255,255,.5);color:var(--ctUst)}
/* Açılmayan satırda kutu GÖRÜNMEZ — bant kuralları kenarlığı geri getiriyordu (Genel toplam'da boş kutu). */
.ctSat .ctAc.bos{border-color:transparent;background:none}
.ctSat.zZebA td{background:var(--ctZebA)} .ctSat.zZebB td{background:var(--ctZebB)}
/* ÜST 3 SATIR — KULLANICININ EXCEL'İ (17.09.2026): GENEL koyu lacivert ·
   LFL/NEW orta mavi · OTHERS/C-O açık mavi; beyaz kalın büyük harf, ad ORTALI.
   Zemin opak → her temada aynı. Beyaz yazı kontrastı: #002060 14,9 ·
   #0070c0 5,2 · #3d85cf 4,0 (kalın 14px). Değişim rakamı açık tonlarda. */
.ctSat.tozGenel td{background:#002060;border-top-color:#002060}
/* 🔁 2. ve 3. satır BEYAZ (17.09.2026 öğleden sonra: "genel toplam lacivert
   kalsın ama new ve c/o beyaz olsun"); lacivert kalın yazı, ad ortalı. */
.ctSat.tozBir td,.ctSat.tozIki td{background:var(--ctBeyaz)}
/* 🔁 AD SOLA DAYALI (17.09.2026 — kullanıcı: "yazılar her zaman sola dayalı
   olmalı"). Önce ortalıydı. Kutu yeri KORUNUR (`visibility:hidden`): ad,
   alt tablodaki ERKEK / mağaza adlarıyla aynı hizada başlar.          */
.ctSat.tozGenel td.ctAd,.ctSat.tozBir td.ctAd,.ctSat.tozIki td.ctAd{text-align:left}
.ctSat.tozGenel .ctAc,.ctSat.tozBir .ctAc,.ctSat.tozIki .ctAc{visibility:hidden}
.ctSat.tozGenel .ctIsim{color:#fff;font-weight:700;letter-spacing:.04em}
.ctSat.tozBir .ctIsim,.ctSat.tozIki .ctIsim{color:var(--ctYazi);font-weight:700;letter-spacing:.04em}
.ctSat.tozGenel .ctB{color:#fff;font-weight:600}
.ctSat.tozBir .ctB,.ctSat.tozIki .ctB{font-weight:600}
.ctSat.tozGenel .ctB{font-weight:700}
.ctSat.tozGenel .ctD.art{color:#b9f5cf}
.ctSat.tozGenel .ctD.azl{color:#ffd0ca}
.ctSat.tozGenel .ctD.sif{color:#ffe38f}
.ctSat.zSonuk td{background:var(--ctBeyaz)}
.ctSat.zSonuk .ctIsim{color:var(--ctSonukYazi);font-weight:500}
.ctSat.zSonuk .ctB{color:var(--ctSonukYazi);font-weight:400}
@media (max-width:560px){
  .ctTablo td{padding:3px 8px}
  .ctTablo td.ctAd{padding-left:calc(6px + var(--sv) * 12px)}
  .ctB,.ctIsim{font-size:13px}
  .ctGrupBas th{font-size:12.5px}
}

/* =====================================================================
   ÜRÜN SATIŞLARI  (.uk*)  ·  Satış Raporları → Ürün Satışları
   ---------------------------------------------------------------------
   Kaynak: Claude Design çıktısı `Urun-Satislari.dc.html` (01.09.2026).
   Kullanıcı önceki tasarımı reddetti (*"hayatımda daha kötü bir rapor
   tasarımı görmedim"*), yerine bu geldi. Renkler, boşluklar, sütun
   genişlikleri ve satır durumları **tasarımdan birebir** alınmıştır —
   göz kararı değiştirme, önce `Urun-Satislari.dc.html`e bak.

   ⚠️ TEK BİLİNÇLİ SAPMA: tasarım Google Fonts'tan **IBM Plex Sans**
   yüklüyordu. Blueprint'in CSP'si `'self'` ve mimarinin ilk kuralı
   "dış bağımlılık YOK" — dışarıdan font çekilmiyor. Yazı tipi ailesi
   listede duruyor: kurulu ise kullanılır, değilse uygulamanın kendi
   yığınına düşer. Tip ÖLÇEĞİ (10-27px) aynen korundu.

   ⚠️ Izgara `--ukSatirGrid` / `--ukGrupGrid` ile JS'ten kurulur.
   Ölçü çipleriyle kolon sayısı değiştiği için sabit `repeat(4,…)`
   yazılamıyordu. Satır içi `font-size` YAZILMAZ — tip ölçeği aşağıdaki
   tek tabloda.
   ===================================================================== */
.ukEkran{
  /* Tip ölçeği bir tık büyütüldü (kullanıcı 01.09.2026: *"puntoları bir tık
     büyütebiliriz, birazcık sönük kalıyor rakamlar ve değişim"*).       */
  /* ⚠️ TİP ÖLÇEĞİ `--ukZ` İLE ÇARPILIR (03.09.2026). Kullanıcı: *"küçük
     ekranda rapor neredeyse tam ekran kaplıyor, biraz küçülmesi lazım…
     telefon yan çevrildiğinde okunaklı olmalı, zoom yapılabilmeli."*
     Tarayıcının kendi zoom'u kullanılamaz: menüyü de büyütüp ekranı
     daraltıyor ve TWA'da çoğu zaman hiç çalışmıyor (Best Seller'da aynı
     karar `--bsZ` ile verilmişti). Kolon genişlikleri ölçümle
     bulunuyor; yazı küçülünce ölçüm de küçüldüğü için tablo tümüyle
     ölçekleniyor.                                                    */
  --ukZ:1;
  --ukFs10:calc(11px * var(--ukZ));  /* mikro etiket / ürün kodu */
  --ukFs11:calc(12px * var(--ukZ));  /* rozet, çip */
  --ukFs12:calc(13px * var(--ukZ));  /* alt başlık, sayaç, süzgeç ikincil */
  --ukFs13:calc(14px * var(--ukZ));  /* gövde sayı, süzgeç */
  --ukFs14:calc(15px * var(--ukZ));  /* model / kategori adı */
  --ukFs15:calc(16px * var(--ukZ));  /* segment */
  --ukFs16:calc(17px * var(--ukZ));  /* toplam satırı */
  --ukFs19:19px;                     /* ekran başlığı — zoom'dan etkilenmez */
  --ukFs27:27px;  /* (KPI şeridi kaldırıldı, ölçek yerinde durur) */

  /* ——— PALET ———
     ⚠️ HEPSİ TOKEN. Aşağıda `:root[data-theme="dark"]` bloğu bunları
     yeniden tanımlıyor; doğrudan hex yazarsan koyu tema BOZULUR.      */
  --ukLacivert:#16294d;   /* bant ZEMİNİ / marka rengi */
  /* ⚠️ YAZI RENGİ AYRI TOKEN. Aydınlıkta ikisi de aynı lacivert, ama
     koyu temada zemin koyu-lacivert kalırken yazı AÇIK olmalı; tek token
     kullanılınca koyuda yazı zeminle aynı renge düşüp görünmez oluyordu
     (01.09.2026'da ölçüldü: rgb(34,48,74) üstünde rgb(34,48,74)).     */
  --ukYazi:#16294d;
  --ukBant:#22375f;       /* açılmamış listede almaşan cinsiyet satırı */
  --ukOdakZ:#2f4a78;      /* AÇILAN düğüm = başlık bandı */
  --ukUstYazi:#ffffff;    /* koyu zemin üstündeki yazı */
  --ukSerit:#eef1f7;      /* süzgeç şeridi ve tablo başlığı zemini */
  --ukKenar:#cfd5de;      /* girdi/düğme kenarlığı */
  --ukAyrac:#c3cbd8;      /* ölçü grupları arasındaki hat */
  --ukCizgi:#e6e9ee;
  --ukCizgiIc:#f0f2f5;
  --ukSilik:#5a626d;      /* T2 rakamı — sönük kalmasın diye koyultuldu */
  --ukSilik2:#4c5a72;     /* alt başlık */
  --ukNotr:#78808b;       /* |Δ| < %3 */
  --ukArti:#0c7f41;
  --ukEksi:#a23b36;
  --ukZemin:#ffffff;
  --ukZemin2:#f6f7f9;
  --ukSev2Z:#b3c7e2; --ukSev3Z:#cfdcee; --ukSev4Z:#e5edf7; --ukSev5Z:#f7f9fc;
  --ukZebraAZ:#c2d5ee; --ukZebraBZ:#e7effa;
  --ukSonukZ:#e4eaf3; --ukSonukYazi:#5c6a80;

  /* ⚠️ `--ukZK` (25.09.2026) = o anki yakınlaştırma ÷ ekranın açılış oranı
     (JS yazar, `ukKolonOlc` dar dalı). 1.121 px altında kolonlar ÖLÇÜLMÜYOR,
     bu sabitlerle çiziliyor; `--ukZ` yalnız yazıyı küçülttüğü için otomatik
     yakınlaştırma tabloyu daraltamıyordu (yatay telefonda çip aç-kapa
     sonrası sağ taraf taşıyordu). Açılış oranında 1 → görünüm birebir aynı.
     Masaüstünde JS bu üç değişkeni zaten eziyor.                        */
  --ukKol:calc(96px * var(--ukZK,1)) calc(82px * var(--ukZK,1)) calc(96px * var(--ukZK,1));      /* D1 · D2 · Δ%  (JS ezebilir) */
  --ukGrup:calc(274px * var(--ukZK,1));
  --ukAdKol:calc(340px * var(--ukZK,1));               /* YALNIZ UZUNLUK — 1fr'yi `UK_AD_IZ` ekler; minmax yazılırsa iç içe minmax geçersiz olur, ızgara çöker (21.09.2026) */
  --ukSatirY:calc(7px * var(--ukZ));
  --ukSatirGrid:var(--ukAdKol) var(--ukKol) var(--ukKol) var(--ukKol) var(--ukKol);
  --ukGrupGrid:var(--ukAdKol) var(--ukGrup) var(--ukGrup) var(--ukGrup) var(--ukGrup);
}
/* T2 KAPALIYKEN DEĞİŞİM DE KAPALI (23.09.2026) — kullanıcı: *"T2'yi
   kapatınca yüzdelik değişim de kapansa mı, daha tatlı olmaz mı."*
   Değişim T1'i T2 ile kıyaslıyor; T2 yokken neye göre olduğu görünmüyor.
   Tek kolon kalır (T1). ⚠️ `--ukGrup` HER ZAMAN `--ukKol` toplamı. */
.ukEkran.ukGizliEski{ --ukKol:calc(118px * var(--ukZK,1)); --ukGrup:calc(118px * var(--ukZK,1)); }
.ukGizliEski .ukFark, .ukGizliEski .ukBsFark{ display:none; }
.ukEkran.ukSik{ --ukSatirY:4px; }

.ukEkran, .ukEkran *{ box-sizing:border-box; }
.ukEkran{
  font-family:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ukYazi); background:var(--ukZemin);
  margin:0 auto; padding:0 0 64px;
  -webkit-font-smoothing:antialiased;
  /* ⚠️ KART TABLOYU SARAR. Ölçüler çoğaldıkça satırlar kabı aşıyor
     (Mağazalar: 7 ölçü × 3 kolon ≈ 2.260 px, kart 1.600 px) ve zeminler
     kartın sağ kenarında kesiliyordu (kullanıcı 02.09.2026: *"hâlâ
     baksana kolonlar yana taşıyor"*). `max-content` ile kartın kendisi
     büyür; dar ekranda SAYFA yatay kayar, üst bloklar `left:0` sticky
     olduğu için yerinde durur. Üst kabın `max-width`i çocuğu
     kısıtlamaz.                                                       */
  width:max-content; min-width:100%;
}
/* Kart ile tablo arasındaki sarmalayıcı da içeriğe göre büyümeli. */
.ukEkran > div{ min-width:100%; }
.ukEkran button{ font-family:inherit; color:inherit; }

/* ——— BAŞLIK BANDI ——— */
.ukUst{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  background:var(--ukLacivert); color:var(--ukUstYazi);
  padding:10px 14px; border-radius:8px 8px 0 0;
  /* 🔒 BANT YAKINLAŞTIRMADAN ETKİLENMEZ (28.09.2026). Yakınlaştırma
     düğmeleri bu bantta (`urunkiyas.js > ukUstAracHtml`); bant her + ile
     büyüseydi düğmeler yine kayardı. Yazı tokenları burada SABİT —
     `.ukEkran`daki `calc(… * var(--ukZ))` hâlleri bandın içinde geçmez. */
  --ukFs10:11px; --ukFs11:12px; --ukFs12:13px; --ukFs13:14px;
  --ukFs14:15px; --ukFs15:16px; --ukFs16:17px;
}
/* ⚠️ Rengi AÇIKÇA veriyoruz: `app.css` başlık etiketlerine kendi
   `color`unu koyuyor ve kalıtımı eziyor — bant lacivert olduğu için
   yazı görünmez oluyordu (kullanıcı 01.09.2026: *"tepedeki yazılar
   rengi çakıştığı için okunmuyor"*).                                 */
/* Sol boşluk: kart taşınca aldığı negatif payın telafisi (`ukKolonOlc` →
   `--ukUstKay`) — bant içeriği sayfa kabının solunda sabit kalır. */
.ukBaslik{ font-size:var(--ukFs19); font-weight:600; letter-spacing:-0.015em;
  margin:0 0 0 var(--ukUstKay, 0px); color:var(--ukUstYazi); }
.ukAltBaslik{ font-size:var(--ukFs12); color:rgba(255,255,255,.72); font-variant-numeric:tabular-nums; }
.ukUstSag{ margin-left:auto; font-size:var(--ukFs11); color:rgba(255,255,255,.6); }

/* ——— SÜZGEÇ ŞERİDİ ——— */
.ukSuzgec{
  /* ⚠️ `stretch` — "ÇİZGİ" kuralı (16.09.2026): tarih kartının boyu
     şeridin boyudur; öteki kolonlar ona hizalanır, altına inmez.
     `center` iken her öge kendi boyunda kalıyor, iki satırlık kolonlar
     kartın üst/alt kenarıyla hizalanmıyordu.                       */
  display:flex; align-items:stretch; gap:7px; flex-wrap:wrap;
  padding:7px 8px; border:1px solid var(--ukCizgi); border-top:none;
  background:var(--ukSerit);
  /* ⚠️ Şeridin yığın sırası tablonun ÜSTÜNDE olmalı: hem şerit hem tablo
     başlığı `position:sticky` ve DOM'da sonra gelen üste biniyordu —
     Satış Noktası paneli "şeffafmış" gibi görünüyordu (01.09.2026).  */
  position:sticky; left:0; z-index:20;
}
.ukDonem{
  display:flex; align-items:center; gap:7px; background:var(--ukZemin);
  border:1px solid var(--ukKenar); border-radius:6px; padding:5px 9px; cursor:pointer;
  font-size:var(--ukFs13); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ukDonem:hover{ border-color:var(--ukYazi); }
.ukD{ font-size:var(--ukFs10); font-weight:700; letter-spacing:0.06em; color:var(--ukUstYazi);
  background:var(--ukLacivert); border-radius:3px; padding:2px 4px; }
.ukD2{ background:#98a0ab; }
.ukEski2{ color:var(--ukSilik); }
.ukKapak{ font-size:var(--ukFs11); color:var(--ukSilik); }
.ukKisayol{ display:flex; gap:0; }
.ukKisayol button{
  font-size:var(--ukFs12); padding:5px 8px; background:var(--ukZemin); cursor:pointer; white-space:nowrap;
  border:1px solid var(--ukKenar); border-left-width:0; color:var(--ukSilik);
}
.ukKisayol button:first-child{ border-left-width:1px; border-radius:6px 0 0 6px; }
.ukKisayol button:last-child{ border-radius:0 6px 6px 0; }

/* ⚠️ TARİH KISAYOLLARI 3+3 IZGARA — YALNIZ `#ukSeritKisayol`
   (kullanıcı 07.09.2026: *"3-3 altlı üstlü koy"*). Altı düğme tek sıra
   flex iken şerit yatayda uzuyor ve tarih kartlarını aşağı itiyordu.
   ⚠️ `.ukKisayol` sınıfını AYNI GRUPTAN sanma: Aylık'ta 12 ay rozeti
   (`#ayAylar`), Toptan'da kanal (`#tpKanal`), Danışman'da kırılım
   (`#sdKirilim`) da bu sınıfı kullanıyor — ızgara oraya uygulansaydı
   12 ay 3 kolonda 4 satıra inerdi. O yüzden kural KİMLİĞE bağlı.
   ⚠️ Köşe yuvarlama kaba ait (`overflow:hidden`): iki satırda
   `:first-child/:last-child` yanlış köşeleri yuvarlıyor.             */
#ukSeritKisayol{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  border:1px solid var(--ukKenar); border-radius:6px; overflow:hidden;
}
#ukSeritKisayol button{
  border:none; border-left:1px solid var(--ukKenar); border-top:1px solid var(--ukKenar);
  border-radius:0;
}
#ukSeritKisayol button:nth-child(3n+1){ border-left:none; }   /* ilk kolon */
#ukSeritKisayol button:nth-child(-n+3){ border-top:none; }    /* ilk satır */
.ukKisayol button:hover{ color:var(--ukYazi); background:var(--ukZemin); }
.ukKisayol button.ukSecili{ background:var(--ukSerit); color:var(--ukYazi); font-weight:500; }

.ukAyrac{ width:1px; align-self:stretch; background:var(--ukCizgi); margin:0 1px; }
.ukRozetler{ display:flex; gap:4px; }
.ukRozet{
  font-size:var(--ukFs12); padding:4px 10px; border-radius:999px;
  border:1px solid var(--ukKenar); background:var(--ukZemin); color:var(--ukSilik); cursor:pointer;
}
.ukRozet.ukSecili{ background:var(--ukLacivert); border-color:var(--ukYazi); color:var(--ukUstYazi); }
.ukSecim{
  font-size:var(--ukFs13); border:1px solid var(--ukKenar); border-radius:6px; background:var(--ukZemin);
  padding:5px 24px 5px 9px; cursor:pointer; appearance:none; color:inherit; max-width:190px;
  background-image:linear-gradient(45deg,transparent 50%,#636b75 50%),linear-gradient(135deg,#636b75 50%,transparent 50%);
  background-position:calc(100% - 13px) 53%, calc(100% - 9px) 53%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.ukAdet{ font-size:var(--ukFs10); font-weight:600; background:var(--ukSerit); border-radius:999px; padding:1px 6px; }
.ukAra{
  flex:1 1 170px; min-width:140px; font-size:var(--ukFs13); color:inherit;
  border:1px solid var(--ukKenar); border-radius:6px; background:var(--ukZemin); padding:5px 10px;
}
.ukAra::placeholder{ color:#98a0ab; }
.ukIkon{
  font-size:var(--ukFs12); color:var(--ukSilik); border:1px solid transparent;
  border-radius:6px; background:transparent; padding:5px 8px; cursor:pointer; white-space:nowrap;
}
.ukIkon:hover{ border-color:#cfd5de; background:var(--ukZemin); color:var(--ukYazi); }

/* ——— TARİH KARTLARI ———
   Kullanıcı 01.09.2026 (ekran görüntüsüyle): *"tıklayıp açılmasın, direkt
   2 tane tarih kartı; içine tıklayınca takvim açılıyor ancak elle yazmak
   da mümkün; sadece altına minik bir tane −364 tuşu."*
   Power BI'daki dilimleyicinin karşılığı: lacivert başlıklı kart, içinde
   başlangıç ve bitiş yan yana.

   ⛔ Açılır panele ÇEVİRME — iki kez yazıldı, iki kez geri alındı.
   ⛔ Ayrı takvim bileşeni YAZMA — `<input type="date">` hem takvimi açıyor
      hem elle yazmaya izin veriyor.                                     */
.ukDonemKap{ flex:0 0 auto; }
/* Kartlar YAN YANA — kullanıcı 01.09.2026: *"tarihleri yan yana alalım,
   üstteki alan biraz daraltılabilir."* Telefonda alt alta iner.        */
.ukDonemler{ display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; height:100%; }
.ukDonemKart{
  border:1px solid var(--ukLacivert); border-radius:6px; overflow:hidden;
  /* 266 → 244 (16.09.2026): şerit tek satıra sığsın diye. Ölçüldü — tarih
     kutusu içeriği ~104 px, 244'lük kartta kutu başına 113 px kalıyor. */
  background:var(--ukLacivert); min-width:244px;
}
.ukDonemBas{
  display:flex; align-items:center; gap:7px;
  padding:4px 8px; color:var(--ukUstYazi); font-size:var(--ukFs12); font-weight:600;
}
.ukDonemBas .ukGunSay{ margin-left:auto; color:rgba(255,255,255,.6); font-weight:400; }
.ukDonemGovde{ display:flex; gap:6px; padding:0 6px 6px; }
.ukDonemGovde input{
  flex:1 1 0; min-width:0; font-size:var(--ukFs13); color:var(--ukYazi);
  border:1px solid var(--ukZemin); border-radius:4px; background:var(--ukZemin); padding:5px 7px;
  font-variant-numeric:tabular-nums;
}
.ukDonemGovde input:focus{ outline:2px solid #6f8fc4; outline-offset:-2px; }
/* −364 düğmesi kartların SAĞINDA, DİKEY (kullanıcı 16.09.2026: *"altındaki
   −364 günü sağına alacağız, yukarıdan aşağı durabilir orada"*).
   ⛔ KARTIN ALTINA GERİ ALMA — orası şeridin çizgisinin altı.         */
/* 17.09.2026: altına **1e1** eklendi (takvim günüyle geçen yıl) — iki düğme
   ÜST ÜSTE, kartın boyunu paylaşır; genişlik artmaz, çizgi taşmaz.       */
.ukDonemYan{ display:flex; flex-direction:column; gap:4px; }
.ukDonemYan .ukMini{ flex:1 1 0; min-width:52px; }
.ukDonemKart{ flex:0 0 auto; }
/* ⚠️ `.ukMini.ukMiniDikey` — `.ukMini` dosyada SONRA geliyor ve hap köşesini
   (999px) ezip düğmeyi oval yapıyordu; özgüllük ikiye çıkarıldı.       */
.ukMini.ukMiniDikey{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; border-radius:6px; padding:3px 7px; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.ukMini{
  font-size:var(--ukFs11); padding:3px 10px; border-radius:999px; cursor:pointer;
  border:1px solid var(--ukKenar); background:var(--ukZemin); color:var(--ukYazi); white-space:nowrap;
}
.ukMini:hover{ border-color:var(--ukYazi); background:var(--ukSerit); }
.ukGunSay{ font-size:var(--ukFs11); font-variant-numeric:tabular-nums; color:var(--ukSilik); }
.ukUyumsuz{ font-size:var(--ukFs11); color:var(--ukEksi); }

/* ——— KOYU TEMA ———
   ⚠️ Uygulamada koyu tema `:root[data-theme="dark"]` ile açılıyor
   (`app.css`). Bu ekranın paleti Claude Design'dan SABİT HEX olarak
   gelmişti ve tema değişince hiç etkilenmiyordu — kullanıcı bildirdi
   01.09.2026. Artık yukarıdaki tokenlar burada yeniden tanımlanıyor.

   ⚠️ YENİ RENK EKLERKEN: doğrudan hex yazma, önce yukarıya token aç ve
   buraya karşılığını yaz. Yoksa koyu temada beyaz leke bırakır.
   Kağıda basarken tokenlar `app.css`teki @media print ile aydınlığa
   döner — burada ayrıca bir şey yapmak gerekmiyor.                    */
:root[data-theme="dark"] .ukEkran{
  --ukLacivert:#22304a;   /* bant ZEMİNİ: koyuda daha açık, yoksa karışır */
  --ukYazi:#eef3fa;       /* YAZI: koyuda açık — zemin tokenıyla aynı olamaz */
  --ukBant:#2b3b58;
  --ukOdakZ:#3a5a91;
  --ukUstYazi:#eef3fa;
  --ukSerit:#1b2534;
  --ukKenar:#3a4759;
  --ukAyrac:#3f4d61;
  --ukCizgi:#2b374a;
  --ukCizgiIc:#233044;
  --ukSilik:#a3b0c2;
  --ukSilik2:#b3c0d2;
  --ukNotr:#8b97a8;
  --ukArti:#4ec27f;
  --ukEksi:#ef8b83;
  --ukZemin:#151e2c;
  --ukZemin2:#18222f;
  /* Seviye tonları: aydınlıkta açıktan koyuya iniyordu, karanlıkta
     koyudan açığa çıkıyor — hiyerarşi hissi korunuyor.               */
  --ukSev2Z:#31425f; --ukSev3Z:#293751; --ukSev4Z:#212d43; --ukSev5Z:#1a2434;
  --ukZebraAZ:#2b3b58; --ukZebraBZ:#1e293c;
  --ukSonukZ:#1d2738; --ukSonukYazi:#93a0b2;
}
/* Yüzde hücresinin zemini JS'ten geliyor (rgba); koyuda biraz daha
   belirgin olsun diye üstüne hafif bir katman.                       */
:root[data-theme="dark"] .ukEkran .ukSay.ukFark{ mix-blend-mode:normal; }

/* ——— SATIŞ NOKTASI AĞACI ———
   PBI'daki "Sales Point" dilimleyicisinin karşılığı; kanal rozetleri,
   Bölge ve Mağaza kutularının ÜÇÜNÜN yerine geçti (kullanıcı 01.09.2026).
   ⚠️ Seçim yalnız satışı değil STOĞU da süzüyor — karar sunucuda.     */
.ukNoktaKap{ position:relative; }
.ukNoktaDugme{ text-align:left; min-width:170px; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ukNoktaPanel{
  display:none; position:absolute; z-index:30; top:calc(100% + 4px); left:0;
  width:290px; max-height:min(calc(60vh / var(--ekranZ,1)),420px); overflow:auto;
  background:var(--ukZemin); border:1px solid var(--ukKenar); border-radius:6px;
  box-shadow:0 6px 20px rgba(22,41,77,.16); padding:8px;
}
.ukNoktaKap.acik .ukNoktaPanel{ display:block; }
.ukNoktaAra{
  width:100%; font-size:var(--ukFs13); color:inherit; margin-bottom:6px;
  border:1px solid var(--ukKenar); border-radius:5px; background:var(--ukZemin); padding:5px 8px;
}
.ukNoktaListe{ font-size:var(--ukFs13); }
/* EXCEL TÜRÜ ARAMA şeridi (21.09.2026) — yalnız arama sürerken görünür:
   "Mevcut seçime ekle" + "Uygula". Panelin altına yapışır ki uzun
   listede kaydırınca da görünsün. Renkler ev tokenı (koyu tema kendiliğinden). */
.ukAraAlt{
  position:sticky; bottom:-8px; margin:6px -8px -8px; padding:8px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--ukZemin); border-top:1px solid var(--ukKenar);
  font-size:var(--ukFs13);
}
/* ⚠️ `.ukNoktaPanel` öneki ŞART — önizlemede ölçüldü (21.09.2026):
   genel `input{width:100%}` kutucuğu 73 px'e yayıp yazıyı üç satıra
   bölüyordu; `.ukEkran button` kuralı da düğme yazısını zeminle AYNI
   laciverde boyuyordu (rgb 22,41,77 üstüne rgb 22,41,77 — yazı yoktu).
   Renk çifti `--accent` / `--on-accent`: koyu temada ikisi birlikte döner. */
.ukNoktaPanel .ukAraEkle{ display:flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; }
.ukNoktaPanel .ukAraEkle input{ width:auto; margin:0; flex:none; }
.ukNoktaPanel .ukAraUygula{
  border:1px solid var(--accent); background:var(--accent); color:var(--on-accent);
  border-radius:5px; padding:4px 12px; font:inherit; font-weight:600; cursor:pointer; white-space:nowrap;
}
.ukNoktaPanel .ukAraUygula:disabled{ opacity:.45; cursor:not-allowed; }
.ukDalBas{
  display:flex; align-items:center; gap:6px; cursor:pointer;
  padding:3px 4px 3px calc(4px + var(--nd,0) * 14px); border-radius:4px;
}
.ukDalBas:hover{ background:var(--ukSerit); }
.ukDalAd{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ukTumu .ukDalAd{ font-weight:600; }
.ukDalOk{
  flex:none; width:14px; height:14px; padding:0; line-height:12px; text-align:center;
  border:none; background:none; cursor:pointer; color:var(--ukSilik);
  font-size:var(--ukFs10); transition:transform .12s;
}
.ukDalOk.on{ transform:rotate(90deg); }
.ukOkBos{ flex:none; width:14px; }
/* Onay kutusu: seçili · kısmen · boş */
.ukKutu{
  flex:none; width:14px; height:14px; border:1px solid #98a0ab; border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--ukFs10); color:var(--ukUstYazi); background:var(--ukZemin);
}
.ukKutu.ukhepsi{ background:var(--ukLacivert); border-color:var(--ukYazi); }
.ukKutu.ukbazi{ background:#98a0ab; border-color:#98a0ab; }

/* KPI ŞERİDİ KALDIRILDI — kullanıcı 01.09.2026: *"2. ekran görüntüsündeki
   boxları komple kaldıralım, gerek yok."* Aynı rakamlar dip TOPLAM
   satırında zaten duruyor. Yeniden ekleme.                            */

/* ——— TABLO ARAÇ ÇUBUĞU ——— */
.ukArac{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--ukCizgi); border-top:none; padding:6px 8px; background:var(--ukZemin);
}
.ukSeviye{ display:flex; align-items:center; gap:0; }
.ukSeviyeEt{ font-size:var(--ukFs10); letter-spacing:0.1em; text-transform:uppercase; color:var(--ukSilik); margin-right:7px; }
.ukSeviye button{
  font-size:var(--ukFs12); width:24px; padding:3px 0; background:var(--ukZemin); cursor:pointer;
  border:1px solid var(--ukKenar); border-left-width:0; color:var(--ukSilik); font-variant-numeric:tabular-nums;
}
.ukSeviye button:first-of-type{ border-left-width:1px; border-radius:5px 0 0 5px; }
.ukSeviye button:last-of-type{ border-radius:0 5px 5px 0; }
.ukSeviye button.ukSecili{ background:var(--ukLacivert); border-color:var(--ukYazi); color:var(--ukUstYazi); }
.ukOlcuSec{ display:flex; align-items:center; gap:4px; margin-left:auto; }
/* İndirim ayracı (22.09.2026) — `.ukSeviye` düğme grubunun geniş hâli;
   tokenlar ondan, koyu temada ayrıca bir şey gerekmez.               */
.ukIndirimSec button{ width:auto; padding:3px 10px; }
/* Aylık: aylar sürükleyerek seçilir (`aylik.js > ayAySurukleBagla`).
   Sezon kutuları da (`urunkiyas.js > ukSezonSurukleBagla`, 24.09.2026). */
#ayAylar, #ukSezonKutu{ touch-action:pan-y; user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none; }   /* iOS: basılı tutunca "kopyala/paylaş" balonu açılmasın */
/* Yakınlaştırma elle ayarlandıysa oran altı çizili — otomatik değil. */
.ukZoomOran.ukZoomElle{ text-decoration:underline; text-underline-offset:3px; }
/* Outlet < liste: indirimli dönem. `--ukEksi` iki temada da tanımlı. */
.ukEkran .ukSatir .ukSay.ukIndirimli{ color:var(--ukEksi); font-weight:600; }
.ukOlcu{
  font-size:var(--ukFs12); padding:3px 9px; border-radius:5px; cursor:pointer;
  border:1px solid var(--ukKenar); background:var(--ukZemin); color:#98a0ab;
}
.ukOlcu.ukSecili{ color:var(--ukYazi); background:var(--ukSerit); border-color:#c3cbd8; font-weight:500; }

/* ——— TABLO ———
   ⚠️ Tablonun İÇİNDE dikey kaydırma YOK (bilinçli): yapışkan başlık ve
   dip toplam sayfa kaydırmasına bağlı. Dashboard'da iç kaydırma denenmiş
   ve "neredeyse yarısı yok verinin" tepkisini almıştı.                  */
/* ⚠️ BURAYA `overflow-x:auto` YAZMA. `overflow` veren her ata, içindeki
   `position:sticky` öğeler için yeni bir kap oluşturur: kolon başlığı ve
   açık başlıklar viewport'a değil bu kaba yapışır — yani hiç yapışmaz
   (01.09.2026'da ölçüldü: başlık 900px kaydırmadan sonra da 273px'te
   duruyordu). Tasarım dosyasında da bu kural YOK; tablo `min-width` ile
   geniş kalır ve gerekirse SAYFA yatay kayar; üst blok `left:0` sticky
   olduğu için yerinde durur. Aynı tuzak kalite raporunda da yaşanmıştı. */
.ukTabloKap{ border:1px solid var(--ukCizgi); border-top:none; border-radius:0 0 8px 8px;
  width:max-content; min-width:100%; }
/* ⚠️ KAP İÇERİĞE GÖRE BÜYÜMELİ. Satırlar sabit genişlikli `grid`;
   kolon toplamı kabın eninden fazlaysa satır kutusu kap eninde kalıyor,
   ZEMİNLER KESİLİYOR ve hücreler karta taşıyordu (Mağazalar ekranında
   7 ölçü × 3 kolon = ~2.260px ile ölçüldü 01.09.2026).
   `width:max-content` ile kart tablonun tamamını sarıyor; dar ekranda
   SAYFA yatay kayıyor, üst blok `left:0` sticky olduğu için yerinde
   duruyor. `min-width:100%` az kolonda kartın daralmasını önler.      */
.ukTablo{ width:max-content; min-width:100%; margin-inline:auto; }
.ukGrupBaslik, .ukSutunBaslik, .ukSatir{
  display:grid; grid-template-columns:var(--ukSatirGrid); align-items:center;
}
.ukGrupBaslik{ grid-template-columns:var(--ukGrupGrid); }

.ukYapisik{ position:sticky; top:0; z-index:6; background:var(--ukZemin); box-shadow:0 1px 0 var(--ukCizgi); }
.ukGrupBaslik{ padding-top:7px; background:var(--ukSerit); }
/* Grup başlıkları büyütüldü — kullanıcı 01.09.2026: *"en tepedeki
   başlıklar büyüyebilir."* 11px → 13px.                              */
.ukGrupAd{
  font-size:var(--ukFs13); letter-spacing:0.1em; text-transform:uppercase; font-weight:700;
  color:var(--ukYazi); text-align:right; padding:0 12px 5px 0; border-left:2px solid var(--ukAyrac);
}
.ukSutunBaslik{ border-bottom:2px solid var(--ukLacivert); background:var(--ukSerit); }
/* ⚠️ BAŞLIK SARABİLİR, KESİLMEZ. Ölçü sayısı arttıkça kolonlar
   daralıyor (`urunkiyas.js > ukSigdir`) ve "Net Sales T1" gibi uzun PBI
   adları 59-69 px'e sığmıyordu — ölçüldü 02.09.2026: 6 başlık taşıyor.
   `nowrap` yerine sarma: geniş ekranda zaten tek satır kalır, dar
   ekranda iki satıra iner. Dolgu da 12 → 8 px.                       */
.ukBs{
  font-size:var(--ukFs12); color:var(--ukSilik2); text-align:right; font-weight:600;
  padding:5px 8px 6px; cursor:pointer;
  white-space:nowrap; line-height:1.2; overflow-wrap:normal; word-break:normal;
}
/* ⚠️ KELİME ORTASINDAN BÖLME YOK (22.09.2026): "Ade t T2" · "Enva nter".
   ⛔ SATIR DA SARMAZ (29.09.2026 · kullanıcı: *"bu T1 T2 yazılarının aşağı
   düşmesini asla kabul etmiyorum"*): `nowrap`, kolon başlığın TAMAMI
   kadar genişliyor (`ukKolonOlc > basEn`). Üstteki 02.09 notu (sarma)
   bu kuralla geçersiz. Dar ekranda (<1.121, sabit kolon) sığdığı
   tezgâhta ölçüldü — PBI.md "ADLAR". */
.ukBs:hover{ color:var(--ukYazi); }
.ukBs.ukKolBas{ border-left:2px solid var(--ukAyrac); }
.ukBs.ukSirali{ color:var(--ukYazi); font-weight:700; }
.ukBsAd{
  font-size:var(--ukFs13); letter-spacing:0.1em; text-transform:uppercase; color:var(--ukYazi); font-weight:600;
  padding:5px 0 6px 10px; position:sticky; left:0; background:var(--ukSerit); z-index:2;
}
.ukKose{ position:sticky; left:0; background:var(--ukSerit); z-index:2; }

.ukSatir{ border-bottom:1px solid var(--ukCizgiIc); align-items:stretch; }
.ukSatir:hover .ukAd, .ukSatir:hover .ukSay{ filter:brightness(0.97); }
.ukSev1:hover .ukAd, .ukSev1:hover .ukSay, .ukToplam:hover .ukAd, .ukToplam:hover .ukSay{ filter:brightness(1.18); }
.ukAd{
  display:flex; align-items:center; gap:7px; min-width:0; background:var(--ukZemin);
  padding:var(--ukSatirY) 16px var(--ukSatirY) 8px;
  position:sticky; left:0; z-index:2; border-left:3px solid transparent;
}
.ukAcilir{ cursor:pointer; }
.ukAdMetin{ font-size:var(--ukFs14); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ukKod{ font-size:var(--ukFs10); color:#63718a; font-variant-numeric:tabular-nums; letter-spacing:0.04em; }
.ukSayac{ font-size:var(--ukFs11); color:#5c6a80; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ukAc{
  flex:none; width:15px; height:15px; padding:0; line-height:13px; text-align:center;
  border:1px solid var(--ukKenar); border-radius:3px; background:var(--ukZemin); cursor:pointer;
  color:var(--ukSilik); font-size:var(--ukFs10);
}
.ukAc:hover{ border-color:var(--ukYazi); color:var(--ukYazi); }
.ukBosAc{ flex:none; width:15px; height:15px; padding:0; border:none; background:none; }
.ukNokta{ flex:none; width:9px; height:9px; border-radius:50%; border:1px solid rgba(22,41,77,.2); }

.ukSay{
  display:flex; align-items:center; justify-content:flex-end;
  text-align:right; padding:var(--ukSatirY) 12px; background:var(--ukZemin);
  font-size:var(--ukFs13); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; white-space:nowrap;
}
/* Kolonlar daraltıldığında (çok ölçü) dolgu kısılır — rakam kesilmesin.
   Sınıfı `ukSigdir` koyar.                                            */
/* ⚠️ DEĞİŞİM HÜCRESİ: DOLU ZEMİN + KOYU KALIN RAKAM (02.09.2026).
   Kullanıcı PBI ile yan yana koyup *"renkleri canlanmalı, rakamlar da
   belirgin olmalı, üzerinde soluk kalmamalı"* dedi. Eskiden zemin yarı
   saydam, yazı yeşil/kırmızıydı — ikisi birbirini yiyordu. Artık zemin
   opak (sarı→yeşil / sarı→kırmızı, `urunkiyas.js > UK_RENK`), yazı tek
   renk KOYU. Zemin opak olduğu için karanlık temada da aynı kalır.
   ⚠️ Bu kural `.ukFarkMetin.ukArti/.ukEksi` renklerini BİLEREK ezer
   (seçici daha özgül); o sınıflar yalnız işareti taşımaya devam eder. */
.ukSay.ukFark .ukFarkMetin{ color:#14213d; font-weight:700; }
:root[data-theme="dark"] .ukEkran .ukSay.ukFark .ukFarkMetin{ color:#14213d; }
/* ---- YAKINLAŞTIRMA KONTROLÜ ----
   ⚠️ `touch-action:pan-x pan-y` OLMADAN PINCH ÇALIŞMAZ: varsayılan
   `auto` iken iki parmak jestini tarayıcı kapıyor ve `touchmove` bize
   hiç gelmiyor (Best Seller'da 01.09.2026'da yaşandı).              */
.ukTabloKap{ touch-action:pan-x pan-y; }
/* ---- ÖLÇÜ SIRASI: grup başlığı sürüklenebilir (03.09.2026) ----
   Kullanıcı: *"bunları dinamik yapmamız mümkün mü, sürükleyerek
   yerlerini değiştirebilmem?"* Sıra `localStorage`ta ekran başına
   saklanır. Sürükleme pointer olaylarıyla — HTML5 drag&drop telefonda
   çalışmıyor.                                                        */
/* ⚠️ SÜRÜKLERKEN `grabbing` KULLANILMIYOR: kullanıcı 03.09.2026 —
   *"ekran beyazken başlıkları tutup sürüklemede mouse cursor da beyaz
   oluyor, görünmüyor."* Windows'un `grabbing` imleci beyaz dolgulu,
   açık zeminde kayboluyor. `move` (dört ok) her temada koyu konturlu.
   İmleç sürükleme boyunca GÖVDEYE de veriliyor (`.ukSurukleAktif`),
   yoksa parmak/fare başlıktan çıkınca varsayılana dönüyor.          */
.ukGrupAd[data-grup]{ cursor:grab; user-select:none; touch-action:none; position:relative; }
.ukGrupAd[data-grup]:active{ cursor:move; }
body.ukSurukleAktif, body.ukSurukleAktif *{ cursor:move !important; }
.ukGrupAd.ukSurukle{ opacity:.45; }
/* Ölçüyü gizle — başlığın içinde, fareyle gelince beliriyor. Dokunmatik
   cihazda hep görünür (hover yok).                                    */
.ukGrupGizle{
  border:none; background:none; color:inherit; opacity:0; cursor:pointer;
  font-size:calc(13px * var(--ukZ)); line-height:1; padding:0 2px; margin-left:4px;
  font-family:inherit;
}
.ukGrupAd:hover .ukGrupGizle, .ukGrupGizle:focus-visible{ opacity:.75; }
.ukGrupGizle:hover{ opacity:1; }
@media (pointer:coarse){ .ukGrupGizle{ opacity:.6; } }
.ukGrupAd.ukHedefSol{ box-shadow:inset 3px 0 0 var(--ukLacivert); }
.ukGrupAd.ukHedefSag{ box-shadow:inset -3px 0 0 var(--ukLacivert); }
.ukZoom{ display:inline-flex; align-items:center; gap:2px; }
.ukZoom button{
  min-width:30px; height:30px; border:1px solid var(--ukCizgi); background:var(--ukZemin);
  color:var(--ukYazi); border-radius:7px; cursor:pointer; font-size:14px; line-height:1;
  font-family:inherit;
}
.ukZoom button:hover{ border-color:var(--ukLacivert); }
.ukZoom .ukZoomOran{
  min-width:44px; text-align:center; font-size:var(--ukFs11); color:var(--ukSilik2);
  font-variant-numeric:tabular-nums; cursor:pointer; background:none; border:none;
}
@media (max-width:760px){
  /* Başparmak bölgesi: dokunma hedefi büyür. */
  .ukZoom button{ min-width:40px; height:40px; font-size:16px; }
}
/* Telefon YATAY: genişlik 760'ı aşıyor ama ekran yine telefon —
   dokunma hedefi burada da büyük olmalı. */
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
  .ukZoom button{ min-width:38px; height:38px; font-size:15px; }
}

/* ——— ŞERİT KOLONLARI (16.09.2026) ———
   Kullanıcı ekran görüntüsünde kırmızı çizgiyle: *"tarih bizim hizamız
   olacak, kalan detaylar onun altına inmeyecek. Satış noktası ve bölge
   yöneticisi barlarını altlı üstlü yapabiliriz. Büyütme küçültmeyi model
   renk arama yerinin üstüne koyabiliriz."*

     .ukSecKol  → Satış Noktası  /  Bölge yöneticisi
     .ukAracKol → [zoom · CSV]   /  arama

   ⚠️ İKİ SATIR, `space-between` — kartın üst ve alt kenarına oturur.
   ⛔ 15.09'daki "zoom mağaza süzgecinin üstünde" (`.ukSagKol`) düzeni
   GEÇERSİZ; o kap kaldırıldı.                                        */
.ukSecKol, .ukAracKol{
  display:flex; flex-direction:column; justify-content:space-between; gap:4px;
  flex:0 0 auto;
}
/* ⚠️ YALNIZ GENİŞ EKRANDA — `display:contents` kabı kaldırır ama torun
   seçicisini KALDIRMAZ; bu kural telefonda da tutup kutuları 230 px'e
   kısıyordu (tezgâhta ölçüldü 16.09.2026).                          */
.ukEkran:not(.ukTelefon) .ukSecKol .ukSecim{ width:100%; max-width:230px; }
.ukEkran:not(.ukTelefon) .ukSecKol .ukNoktaDugme{ width:100%; }
.ukAracKol{ flex:1 1 196px; min-width:196px; }
/* 17.09.2026 — sezon kartları (SS · 4S · AW) ve ürün yılı aramanın
   üstünde; arama 360 px'te durur (tam genişlik 1.920'de gereksiz uzun
   kalıyordu). ⛔ Zoom 28.09.2026'dan beri BURADA DEĞİL — başlık bandında
   (`.ukUst .ukZoom`). */
.ukAracUst{ display:flex; align-items:center; gap:6px; }
/* ⚖️ TEK KUTU KALAN KOLON ŞERİDİN ORTASINDA (02.10.2026 · kullanıcı:
   *"filtreler kısmı hepsinde bozuk, nizami bir şekilde yerleştir"*).
   28.09'da zoom başlık bandına gidince aramanın üst satırı boşaldı;
   mağaza hesabında sezon kutuları ve Bölge yöneticisi de yok. `space-
   between` tek kutuyu üste ya da alta itiyor, Satış Noktası üstte arama
   altta ÇAPRAZ duruyordu. Boş üst satır gizlenir, tek kutu ortalanır. */
.ukAracUst:not(:has(> :not(:empty))){ display:none; }
.ukSecKol:not(:has(> #ukYonKap:not([hidden]))),
.ukAracKol:not(:has(> .ukAracUst > :not(:empty))){ justify-content:center; }
.ukAracKol .ukAra{ flex:0 0 auto; width:100%; max-width:360px; min-width:0; }
.ukUrunSuzKap:empty{ display:none; }
.ukUrunSuz{ display:flex; align-items:center; gap:6px; min-width:0; }
#ukSezonKutu{
  display:inline-grid; grid-template-columns:repeat(3, auto);
  border:1px solid var(--ukKenar); border-radius:6px; overflow:hidden;
}
#ukSezonKutu button{ border:none; border-left:1px solid var(--ukKenar); border-radius:0; padding:4px 10px; }
#ukSezonKutu button:first-child{ border-left:none; }
.ukYilKap .ukYilDugme{ min-width:0; width:auto; max-width:130px; }
.ukYilKap .ukNoktaPanel{ width:150px; }
/* Danışman'da ürün kırılımı yok — görünür ama basılmaz. */
.ukUrunSuz.ukPasif{ opacity:.45; }
.ukUrunSuz.ukPasif button{ cursor:not-allowed; }
/* ⚠️ 1.366 px'TE ÇİZGİ TAŞMASIN (17.09.2026, tezgâhta ölçüldü): sezon +
   yıl + zoom satırı 357 px istiyordu; Ürün 24 px, Mağaza 35 px, Danışman
   140 px sayfayı yatay kaydırıyordu (öncesinde beşi de 0). Dar masaüstünde
   düğmeler sıkışır; Danışman'da (pasif) yıl kutusu hiç çizilmez.
   (28.09.2026: zoom başlık bandına gitti, bu satırdan ~150 px düştü.)   */
@media (max-width:1500px){
  .ukEkran:not(.ukTelefon) #ukSezonKutu button{ padding:4px 6px; }
  .ukEkran:not(.ukTelefon) .ukYilKap .ukYilDugme{ max-width:90px; }
}
/* ⚠️ AYNI KURALLAR `html.ekranDar1500` İLE (ekran ölçeği, 17.09.2026).
   @media GERÇEK pencereye bakar; elle büyütülmüş sayfada (olcek.js) pencere
   1630 px iken sayfanın gördüğü en 1360 px olabilir → sorgu çalışmaz, şerit
   taşar. Sınıfı olcek.js yazar: etkin en <= 1500. Yukarıdaki blok
   değişirse BURASI DA değişir. */
html.ekranDar1500 .ukEkran:not(.ukTelefon) #ukSezonKutu button{ padding:4px 6px; }
html.ekranDar1500 .ukEkran:not(.ukTelefon) .ukYilKap .ukYilDugme{ max-width:90px; }

/* Danışman'ın kırılım seçicisi İKİ düğme — dikey dizilince çizgiye oturur.
   Toptan'ın kanal şeridi tek sıra kalır, dikeyde ortalanır.
   ⚠️ YALNIZ GENİŞ EKRANDA: telefonda bu şeritler tam genişlik tek sıra. */
.ukEkran:not(.ukTelefon) #sdKirilim{ flex-direction:column; }
.ukEkran:not(.ukTelefon) #sdKirilim button{ flex:1; border-left-width:1px; border-top-width:0; }
.ukEkran:not(.ukTelefon) #sdKirilim button:first-child{ border-top-width:1px; border-radius:6px 6px 0 0; }
.ukEkran:not(.ukTelefon) #sdKirilim button:last-child{ border-radius:0 0 6px 6px; }
.ukEkran:not(.ukTelefon) #tpKanal{ align-self:center; }

/* Aylık'ın çizgisi: üstte yıl + Tüm yıl, altta 12 ay. */
.ayDonemKol{ display:flex; flex-direction:column; justify-content:space-between; gap:4px; flex:0 0 auto; }
.ayDonemUst{ display:flex; align-items:center; gap:6px; }

/* ⚠️ TELEFONDA KOLONLAR ORTADAN KALKAR. Dar ekran kuralları
   (`flex:1 1 100%`, `order:9`) şeridin DOĞRUDAN çocuklarına yazılı;
   kolon kapları dururken hiçbiri tutmazdı. `.mnuKap{display:contents}`
   desenin aynısı. Sınıf JS'ten (`ukTelefonMu`) — katlama kuralıyla aynı
   doğruluk kaynağı.                                                  */
.ukEkran.ukTelefon .ukSecKol, .ukEkran.ukTelefon .ukAracKol,
.ukEkran.ukTelefon .ukAracUst, .ukEkran.ukTelefon .ayDonemKol,
.ukEkran.ukTelefon .ayDonemUst{ display:contents; }
/* Telefonda sezon + yıl tam genişlik tek satır; arama da tam genişlik. */
.ukEkran.ukTelefon .ukUrunSuzKap{ flex:1 1 100%; }
.ukEkran.ukTelefon #ukSezonKutu{ flex:1 1 auto; }
.ukEkran.ukTelefon #ukSezonKutu button{ min-height:40px; }
.ukEkran.ukTelefon .ukYilKap{ flex:1 1 auto; }
.ukEkran.ukTelefon .ukYilKap .ukYilDugme{ max-width:none; width:100%; min-height:40px; }
.ukEkran.ukTelefon .ukAracKol .ukAra{ max-width:none; }

/* ⚠️ 2 KOLONLU IZGARA, KİMLİĞE BAĞLI (`#ukMagSuzgec`) — `.ukKisayol`
   sınıfına değil: o sınıfı Aylık'ta 12 ay rozeti, Toptan'da kanal,
   Danışman'da kırılım da kullanıyor (`#ukSeritKisayol`daki 3+3
   kuralının aynı gerekçesi).
   ⚠️ Köşe yuvarlama KABA ait (`overflow:hidden`): iki satırda
   `:first-child/:last-child` yanlış köşeleri yuvarlar.              */
#ukMagSuzgec{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  border:1px solid var(--ukKenar); border-radius:6px; overflow:hidden;
}
#ukMagSuzgec button{
  border:none; border-left:1px solid var(--ukKenar);
  border-top:1px solid var(--ukKenar); border-radius:0; padding:4px 7px;
}
#ukMagSuzgec button:nth-child(2n+1){ border-left:none; }   /* ilk kolon */
#ukMagSuzgec button:nth-child(-n+2){ border-top:none; }    /* ilk satır */
.ukEkran.ukDar .ukSay{ padding-left:6px; padding-right:6px; }
.ukEkran.ukDar .ukBs{ padding-left:6px; padding-right:6px; }
/* Ölçü grupları arasındaki AYRAÇ — kullanıcı 01.09.2026: *"bu bölümler
   arasındaki hat daha anlaşılır olsun, bölündüğünü görelim."*
   1px açık gri idi, 2px koyu griye çıkarıldı.                         */
.ukSay.ukKolBas{ box-shadow:inset 2px 0 0 var(--ukAyrac); }
.ukEski{ color:var(--ukSilik); }
/* ⚠️ İÇERİK KOLONA SIĞMALI. Eskiden çubuk 38 + boşluk 8 + yazı 52 = 98px
   idi, oysa Δ kolonu 96px: fazlalık SOLA taşıp bir önceki kolonun
   rakamının üstüne biniyordu (kullanıcı bildirdi 01.09.2026).
   Şimdi 26 + 6 + 46 = 78px. `overflow:hidden` ikinci emniyet.        */
.ukFark{ display:flex; align-items:center; justify-content:flex-end; overflow:hidden; }
/* Değişim KALIN ve bir tık büyük — çubuk kaldırıldığı için yer açıldı
   (kullanıcı 01.09.2026: *"sadece yüzdeler olsun ve puntosunu bir tık
   daha büyütelim"*).                                                  */
.ukFarkMetin{ font-size:var(--ukFs13); font-weight:700; font-variant-numeric:tabular-nums;
  text-align:right; }
.ukArti{ color:var(--ukArti); }
.ukEksi{ color:var(--ukEksi); }
.ukNotr{ color:var(--ukNotr); }
.ukGizliEski .ukEski{ display:none; }

/* ——— SEVİYELER ——— */
.ukSev1{ border-bottom:1px solid #0e1c37; }
.ukSev1 .ukAd, .ukSev1 .ukSay{ background:var(--ukLacivert); color:var(--ukUstYazi); }
.ukSev1 .ukAdMetin{ font-size:var(--ukFs14); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.ukSev1 .ukSay{ font-weight:600; }
.ukSev1 .ukAd{ padding-top:10px; padding-bottom:10px; }
.ukSev1 .ukEski{ color:rgba(255,255,255,.62); }
.ukSev1 .ukArti{ color:#79d3a1; }
.ukSev1 .ukEksi{ color:#f2a9a4; }
.ukSev1 .ukNotr{ color:rgba(255,255,255,.6); }
.ukSev1 .ukAc{ background:transparent; border-color:rgba(255,255,255,.5); color:var(--ukUstYazi); }
.ukSev1 .ukSayac{ color:rgba(255,255,255,.55); }
.ukSev1 .ukSay.ukKolBas{ box-shadow:inset 2px 0 0 rgba(255,255,255,.28); }

/* Açılmamış listede cinsiyet satırları bir açık bir koyu — düz lacivert
   blok yerine satır bazlı okuma (kullanıcı 01.09.2026).               */
.ukSev1.ukBant .ukAd, .ukSev1.ukBant .ukSay{ background:var(--ukBant); }

.ukSev2{ border-bottom:1px solid #c9d4e6; }
.ukSev2 .ukAd{ padding-left:24px; }
.ukSev2 .ukAdMetin{ font-size:var(--ukFs15); font-weight:600; }
.ukSev2 .ukSay{ font-weight:600; }
.ukSev2 .ukAd, .ukSev2 .ukSay{ background:var(--ukSev2Z); }

.ukSev3{ border-bottom:1px solid #d3dcea; }
.ukSev3 .ukAd{ padding-left:46px; }
.ukSev3 .ukAdMetin{ font-size:var(--ukFs14); font-weight:600; }
.ukSev3 .ukAd, .ukSev3 .ukSay{ background:var(--ukSev3Z); }

.ukSev4 .ukAd{ padding-left:72px; }
.ukSev4 .ukAdMetin{ font-size:var(--ukFs13); font-weight:600; letter-spacing:0.05em; }
.ukSev4 .ukAd, .ukSev4 .ukSay{ background:var(--ukSev4Z); }

.ukSev5 .ukAd{ padding-left:100px; }
.ukSev5 .ukAdMetin{ font-size:var(--ukFs13); color:#3a4557; }
.ukSev5 .ukSay{ color:#3a4557; }
.ukSev5 .ukFarkMetin{ font-size:var(--ukFs12); }
.ukSev5 .ukAd, .ukSev5 .ukSay{ background:var(--ukSev5Z); }

/* ——— ODAK: açılmayan dallar biçimlendirmeden arınır ——— */
.ukSonuk .ukAd, .ukSonuk .ukSay{ background:var(--ukZemin); }
.ukSonuk .ukAdMetin{ color:var(--ukSonukYazi); font-weight:500; }
.ukSonuk .ukSay{ font-weight:400; color:var(--ukSonukYazi); }
.ukSonuk .ukEski{ color:var(--ukNotr); }
.ukSonuk .ukArti{ color:#5f8f74; }
.ukSonuk .ukEksi{ color:#9c7370; }
.ukSonuk .ukAc{ border-color:#d5dae2; }
.ukSev1.ukSonuk .ukAd, .ukSev1.ukSonuk .ukSay{ background:var(--ukSonukZ); color:var(--ukYazi); }
.ukSev1.ukSonuk .ukAdMetin{ color:var(--ukYazi); font-weight:700; }
.ukSev1.ukSonuk .ukSay{ color:var(--ukYazi); font-weight:600; }
.ukSev1.ukSonuk .ukEski{ color:var(--ukSilik); }
.ukSev1.ukSonuk .ukSayac{ color:#5c6a80; }
.ukSev1.ukSonuk .ukAc{ border-color:#9fb0c9; color:var(--ukYazi); }
.ukSev1.ukSonuk .ukArti{ color:var(--ukArti); }
.ukSev1.ukSonuk .ukEksi{ color:var(--ukEksi); }
.ukSev1.ukSonuk /* Ölçü grupları arasındaki AYRAÇ — kullanıcı 01.09.2026: *"bu bölümler
   arasındaki hat daha anlaşılır olsun, bölündüğünü görelim."*
   1px açık gri idi, 2px koyu griye çıkarıldı.                         */
.ukSay.ukKolBas{ box-shadow:inset 2px 0 0 var(--ukAyrac); }

/* ——— ODAK YARDIMCISI ———
   Bakılan seviyeden uzaklaştıkça satır soluklaşır (kullanıcı 01.09.2026:
   *"detaya indikçe kalan her şeyin parlaklığını azaltsın… diğer şeyler
   dikkatimi dağıtmasın"*). Zemin korunur, yalnız opaklık düşer.       */
/* ——— AÇIK DALIN YOLU ——— */
.ukYol .ukAd, .ukYol .ukSay{ background:var(--ukZemin); }
.ukYol .ukAd{ border-left-color:var(--ukYazi); }
.ukYol .ukAdMetin{ color:var(--ukYazi); font-weight:700; }
.ukYol .ukSay{ color:var(--ukYazi); font-weight:600; }
/* ⚠️ AÇILAN DÜĞÜM BİR BAŞLIKTIR, satır değil. Kullanıcı 01.09.2026:
   *"başlık ayırt edilmiyor aşağıdaki satırlardan; gömleğin altındaki
   ürünleri gömlekten ayırt edemiyorum."* Önce açık gri bir zemindi ve
   çocuklarının yarısı beyaz olduğu için sınır kayboluyordu. Artık
   DOLU BANT: kendi lacivert tonu + beyaz yazı.                       */
.ukOdak .ukAd, .ukOdak .ukSay{ background:var(--ukOdakZ); color:var(--ukUstYazi); }
.ukOdak .ukAd{ border-left-width:4px; border-left-color:var(--ukOdakZ); }
.ukOdak .ukAdMetin{ color:var(--ukUstYazi); font-weight:700; }
.ukOdak .ukSay{ font-weight:700; }
.ukOdak .ukEski{ color:rgba(255,255,255,.66); }
/* ⚠️ Koyu bandın üstünde sapma renkleri PARLAK olmalı. `#79d3a1` /
   `#f2a9a4` ile kontrast 4,9 / 4,6 çıkıyordu ve kullanıcı 01.09.2026
   "pantolon başlığındaki değişimler soluk" dedi — bandın rengi
   `#2f4a78`, gövde satırlarındaki `#16294d`den açık olduğu için aynı
   tonlar orada yetmiyor.                                             */
.ukOdak .ukArti{ color:#9ff0c2; }
.ukOdak .ukEksi{ color:#ffbdb7; }

.ukOdak .ukNotr{ color:rgba(255,255,255,.6); }
.ukOdak .ukAc{ background:transparent; border-color:rgba(255,255,255,.55); color:var(--ukUstYazi); }
.ukOdak .ukSay.ukKolBas{ box-shadow:inset 2px 0 0 rgba(255,255,255,.28); }

/* ——— ODAK SEVİYESİ: bir açık bir koyu ——— */
/* ⚠️ Zebranın bir tonu BEYAZ. Kullanıcı 01.09.2026: *"erkeğin altındaki
   kategorilerle en alttaki kadın çocuk gibi başlıklar çok yakın renkte…
   plaj giyim ve footwear beyaz olabilir, sırıtmaz."* Açık mavi ile sönük
   cinsiyet satırının (#e4eaf3) tonu birbirine çok yakındı.            */
/* ⚠️ GEÇİŞ BELİRGİN OLACAK. Kullanıcı 01.09.2026: *"satır bazında bir
   açık bir koyu geçişi daha belirgin hale getirelim; sadece açılan
   kısımda geçiş olacak, kalanlar beyaz olacak başlık hariç."*
   Açık ton `#c2d5ee` (eskiden `#dbe6f5` — fark okunmuyordu), koyu ton
   beyaz. Zebra YALNIZ odak seviyesinde; ötekiler `ukSonuk` = beyaz.  */
.ukZebraA .ukAd, .ukZebraA .ukSay{ background:var(--ukZebraAZ); }
.ukZebraB .ukAd, .ukZebraB .ukSay{ background:var(--ukZebraBZ); }
.ukZebraA{ border-bottom-color:#adc4e2; }
.ukZebraA .ukAdMetin, .ukZebraB .ukAdMetin{ color:var(--ukYazi); font-weight:600; }
.ukZebraA .ukSay, .ukZebraB .ukSay{ color:var(--ukYazi); }

/* Açık başlıklar kaydırırken kolon başlığının altına yapışır.
   `top` ve `z-index` JS'ten (`ukYapistir`) verilir — satır yükseklikleri
   seviyeye göre farklı, kolon başlığının yüksekliği de değişken.      */
/* ⚠️ OPAK ZEMİN ŞART. Satırın kendi zemini yoktu; renk yalnız hücrelerde.
   Δ hücrelerine JS yarı saydam (rgba) zemin basıyor — yapışkan satır
   kaydırılan içeriğin üstünde durduğunda o saydamlıktan alttaki satırlar
   görünüyor ve başlık "karışıyordu" (kullanıcı 01.09.2026 ekran
   görüntüsüyle gösterdi). Satıra opak zemin verilince rgba onun üstünde
   birleşiyor.                                                          */
.ukSatir.ukAcikYol{ position:sticky; background:var(--ukZemin); }
.ukSatir.ukAcikYol.ukSev1{ background:var(--ukLacivert); }
.ukSatir.ukAcikYol.ukOdak{ background:var(--ukOdakZ); }

/* ——— DİP TOPLAM ——— */
.ukToplam{ position:sticky; bottom:0; z-index:7; border-top:2px solid #0e1c37; }
.ukToplam .ukAd, .ukToplam .ukSay{ background:var(--ukLacivert); color:var(--ukUstYazi); }
.ukToplam .ukAd{ z-index:8; padding:11px 16px 11px 12px; }
.ukToplam .ukAdMetin{ font-size:var(--ukFs16); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.ukToplam .ukSay{ font-weight:700; }
.ukToplam .ukEski{ color:rgba(255,255,255,.62); font-weight:500; }
.ukToplam .ukArti{ color:#79d3a1; }
.ukToplam .ukEksi{ color:#f2a9a4; }
.ukToplam .ukNotr{ color:rgba(255,255,255,.6); }
.ukToplam .ukSay.ukKolBas{ box-shadow:inset 2px 0 0 rgba(255,255,255,.28); }

.ukKapan{ padding:12px 10px; font-size:var(--ukFs12); color:var(--ukSilik); font-variant-numeric:tabular-nums; position:sticky; left:0; }
.ukYukleniyor{ padding:34px 12px; text-align:center; color:var(--ukSilik); font-size:var(--ukFs13); }

/* Yatay kaydırmada üst blok yerinde kalır */
/* Üst bloklar yatay kaydırmada yerinde kalır. Genişlikleri kartla aynı
   olsun diye `min-width:100%` — yoksa kaydırınca sağ kenarları bitiyor. */
.ukUst, .ukSuzgec, .ukArac{ position:sticky; left:0; min-width:100%; width:auto; }

/* ——— TELEFON PARÇALARI · masaüstünde gizli ———
   `ukMobilKur` bu iki öğeyi yalnız telefonda DOM'a koyar; yine de
   masaüstü kuralı yazılı — telefon yan çevrilip genişlediğinde öğe bir
   sonraki çizime kadar DOM'da kalıyor, o arada görünmemeli.          */
.ukSuzAc, .ukMobBar{ display:none; }

/* ——— MASAÜSTÜ: şerit başlığın yanındaki düğmeyle katlanır (16.09.2026) ———
   Varsayılan AÇIK, seçim saklanır (`urunkiyas.js > ukMasaSuzgec`).
   ⚠️ Lacivert bant üstünde: renkler `--ukUstYazi` üzerinden türetilir,
   `rgba(255,…)` YAZILMAZ — karanlık temada bant tonu değişiyor.
   ⚠️ Telefonda GİZLİ — orada kendi `.ukSuzAc` şeridi var.           */
.ukUstSuz{
  align-self:center; display:inline-flex; align-items:center; gap:6px; min-width:0;
  font-family:inherit; font-size:var(--ukFs12); line-height:1.2; cursor:pointer;
  color:var(--ukUstYazi); padding:4px 11px; border-radius:999px;
  background:color-mix(in srgb, var(--ukUstYazi) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--ukUstYazi) 30%, transparent);
}
.ukUstSuz:hover{ background:color-mix(in srgb, var(--ukUstYazi) 22%, transparent); }
.ukUstSuz:focus-visible{ outline:2px solid var(--ukUstYazi); outline-offset:2px; }
.ukUstSuzOk{ font-size:var(--ukFs10); opacity:.85; }
.ukUstSuzEt{ font-weight:600; }
.ukUstSuzOzet{
  opacity:.8; font-variant-numeric:tabular-nums; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:calc(46vw / var(--ekranZ,1));
}
.ukEkran.ukSuzKapaliMasa .ukSuzgec{ display:none; }
.ukEkran.ukTelefon .ukUstSuz{ display:none; }

/* ——— EXCEL — başlık bandında, Filtreler'in yanında (17.09.2026) ———
   Aynı hap; telefonda da GÖRÜNÜR (şeritteki eski CSV düğmesi de öyleydi). */
.ukUstExcel{
  align-self:center; display:inline-flex; align-items:center;
  font-family:inherit; font-size:var(--ukFs12); font-weight:600; line-height:1.2; cursor:pointer;
  color:var(--ukUstYazi); padding:4px 11px; border-radius:999px;
  background:color-mix(in srgb, var(--ukUstYazi) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--ukUstYazi) 30%, transparent);
}
.ukUstExcel:hover{ background:color-mix(in srgb, var(--ukUstYazi) 22%, transparent); }
.ukUstExcel:focus-visible{ outline:2px solid var(--ukUstYazi); outline-offset:2px; }

/* ——— YAKINLAŞTIRMA + TAM EKRAN — başlık bandında, Excel'in yanında (28.09.2026) ———
   Kullanıcı: *"+'ya basınca kenara kayıyor, bir daha basamıyorum …
   büyütme küçültmeyi [Excel'in yanına] koyalım, kıpırdamamalı."* Aynı hap
   dili; yazı SABİT px (bant yakınlaştırmayla büyümez). Oran düğmesinin
   eni sabit — "%65" ile "%140" arasında + yerinden oynamasın.
   ⚠️ Taban `.ukZoom button` kuralları (açık zemin) şeritteki eski yer
   içindi; burada lacivert bant üstünde `--ukUstYazi`dan türetilir.   */
.ukUst .ukZoom{ align-self:center; gap:3px; }
.ukUst .ukZoom button{
  min-width:30px; height:28px; padding:0 8px; border-radius:999px;
  font-size:15px; font-weight:600; line-height:1; color:var(--ukUstYazi);
  background:color-mix(in srgb, var(--ukUstYazi) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--ukUstYazi) 30%, transparent);
}
.ukUst .ukZoom button:hover{ background:color-mix(in srgb, var(--ukUstYazi) 22%, transparent);
  border-color:color-mix(in srgb, var(--ukUstYazi) 30%, transparent); }
.ukUst .ukZoom button:focus-visible{ outline:2px solid var(--ukUstYazi); outline-offset:2px; }
.ukUst .ukZoom .ukZoomOran{
  min-width:52px; padding:0 4px; font-size:13px; color:var(--ukUstYazi);
  background:none; border-color:transparent;
}
.ukUst .ukZoom .ukTamDugme{ display:inline-flex; align-items:center; gap:6px;
  margin-left:6px; padding:0 11px; font-size:13px; }
/* Telefonda (dikey + yatay) bant sık: "Tam ekran" yazısı düşer (simge +
   `title` kalır). Yatay telefonda dikey her piksel sayılıyor — düğmeler
   Excel hapından (26 px) yalnız biraz yüksek. */
@media (max-width:760px), (orientation:landscape) and (max-height:520px) and (pointer:coarse){
  .ukUst{ gap:8px; }
  .ukUst .ukZoom{ gap:2px; }
  .ukUst .ukZoom button{ min-width:30px; height:30px; padding:0 6px; }
  /* 46: "%100" ve üstü 42,6 px — 40'ta + düğmesi 2,6 px kayıyordu. */
  .ukUst .ukZoom .ukZoomOran{ min-width:46px; }
  .ukUst .ukZoom .ukTamDugme{ margin-left:2px; }
  .ukUst .ukTamYazi{ display:none; }
}
/* Dikey telefonda −/%/+ bantta YOK: matris kart listesine dönüyor,
   yakınlaştırma orada iki parmakla (`ukDokunBagla`). ↺ ve tam ekran kalır.
   Hepsi dururken 375 px'te bant ikinci satıra düşüp ~54 px yer yiyordu
   (tezgâh; "veri …" tarihi de aynı satırda). Sorgu `ukMobilMi`nin aynısı. */
@media (max-width:760px) and (orientation:portrait){
  .ukUst #ukZoomAz, .ukUst #ukZoomOran, .ukUst #ukZoomArt{ display:none; }
}

/* ——— TAM EKRAN — PBI + FRANCHISE (28.09.2026 · `urunkiyas.js > ukTamEkran`) ———
   Satış Hızı'nın odak modunun aynısı (`body.srTamMod`): sınıf GÖVDEDE
   (ekranın kabı her çizimde yeniden kuruluyor), üst çubuk ve menü gizlenir,
   sayfa kabının 1.600 px sınırı kalkar. `--ustYuk` 0'a iner (`ustYukOlc`
   gizli çubuğu saymaz) → kolon başlığı ekranın tepesine yapışır.       */
body.ukTamMod .top,
body.ukTamMod .mnuKap{ display:none !important; }
body.ukTamMod{ max-width:none !important; }
body.ukTamMod .wrap,
body.ukTamMod #root{ max-width:none !important; }

/* ——— TELEFONDA SÜZGEÇ ŞERİDİ KATLANIR — İKİ YÖNDE DE (07.09.2026) ———
   Kurallar MEDYA SORGUSUYLA değil `.ukTelefon` sınıfıyla açılıyor
   (`urunkiyas.js > ukTelefonMu`). Sebep: katlama durumunu (`UK.suzAcik`)
   JS tutuyor; iki taraf ayrı sorgu yazsaydı biri açık biri kapalı sanır
   ve şerit görünmeden panel kaybolurdu — dikeyde 04.09'da tam bu
   yaşandı. Tek sınıf = tek doğruluk kaynağı.
   Dikeyde 250 px, yatayda 107 px yer kazandırıyor; yatayda 375 px'lik
   ekranda açık şeritle geriye tek satır veri kalmıyordu.             */
.ukEkran.ukTelefon .ukSuzAc{
  /* Yatay kaydırmada öteki üst bloklar gibi yerinde kalır. */
  position:sticky; left:0; z-index:19;
  display:flex; align-items:center; gap:8px; width:100%; min-height:44px;
  padding:8px 12px; text-align:left; cursor:pointer; font-family:inherit;
  font-size:var(--ukFs13); color:var(--ukYazi); background:var(--ukSerit);
  border:none; border-bottom:1px solid var(--ukCizgi);
}
.ukSuzOk{ flex:none; color:var(--ukSilik); font-size:var(--ukFs11); }
.ukSuzEt{ flex:none; font-weight:600; }
.ukSuzOzet{
  margin-left:auto; min-width:0; color:var(--ukSilik); font-size:var(--ukFs12);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
/* `.ukSuzKapali` YALNIZ telefonda konuyor (bkz. `ukMobilKur`). */
.ukEkran.ukSuzKapali .ukSuzgec{ display:none; }

/* ——— SATIR DETAYI · telefon alt sayfası (04.09.2026) ———
   Telefonda aynı anda TEK ölçü gösteriliyor; "peki ötekiler?" sorusunun
   cevabı bu. Satırın RAKAM tarafına dokununca açılır (ad tarafı eskisi
   gibi alt kırılımı açar). İçerik satırın kendi hücrelerinden okunur —
   bkz. `urunkiyas.js > ukDetayAc`.                                    */
.ukDetay{
  position:fixed; inset:0; z-index:70; display:flex; align-items:flex-end;
  background:rgba(9,16,28,.5);
}
.ukDetayIc{
  width:100%; max-height:calc(84vh / var(--ekranZ,1)); overflow:auto; overscroll-behavior:contain;
  background:var(--ukZemin);
  border-radius:14px 14px 0 0; padding-bottom:18px;
  box-shadow:0 -8px 30px rgba(9,16,28,.3);
}
.ukDetayBas{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px;
  padding:12px 14px; background:var(--ukLacivert); color:var(--ukUstYazi);
  border-radius:14px 14px 0 0;
}
.ukDetayAd{
  font-size:var(--ukFs15); font-weight:700; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ukDetayKapat{
  margin-left:auto; flex:none; width:34px; height:34px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(255,255,255,.35); background:transparent; color:var(--ukUstYazi);
  font-size:15px; font-family:inherit; line-height:1;
}
.ukDetayTablo{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
/* ⚠️ `app.css` içinde GENEL bir `th{text-transform:uppercase}` var —
   Dashboard'da da aynı tuzağa düşülmüştü. Ölçü adları zaten büyük
   yazılıyor, satır başlıkları burada normal kalmalı.                 */
.ukDetayTablo th{ text-transform:none; }
.ukDetayTablo thead th{
  font-size:var(--ukFs10); letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ukSilik); font-weight:600; text-align:right; padding:9px 12px 5px;
  background:var(--ukSerit);
}
.ukDetayTablo thead th:first-child{ text-align:left; }
.ukDetayTablo tbody tr{ border-top:1px solid var(--ukCizgiIc); }
.ukDetayTablo tbody th{
  text-align:left; font-size:var(--ukFs12); font-weight:600; color:var(--ukYazi);
  padding:8px 12px; white-space:normal;
}
.ukDetayTablo td{ text-align:right; padding:8px 12px; font-size:var(--ukFs14); }
.ukDetayTablo .ukDt2{ color:var(--ukSilik); font-size:var(--ukFs12); }
.ukDetayTablo .ukDf{ width:80px; padding-left:4px; }
.ukDfIc{
  display:inline-block; min-width:64px; padding:5px 6px; border-radius:6px;
  color:#14213d; font-weight:700; font-size:var(--ukFs12); text-align:center;
}
.ukDetayDip{ padding:10px 12px 0; font-size:var(--ukFs11); color:var(--ukSilik);
  font-variant-numeric:tabular-nums; }
.ukDetayKir{
  display:block; width:calc(100% - 24px); margin:12px 12px 0; min-height:44px;
  border:1px solid var(--ukKenar); border-radius:8px; background:var(--ukSerit);
  color:var(--ukYazi); font-family:inherit; font-size:var(--ukFs13); cursor:pointer;
}

/* ——— MOBİL · DİKEY — TEK ÖLÇÜ ODAĞI (04.09.2026) ———
   Kullanıcı iki ekran görüntüsüyle: *"mobil kısım tam bir fiyasko olmuş…
   bu 4 raporu mobil için inanılmaz verimli ve kullanışlı hale getir;
   çok pratik çok okunaklı bir rapor istiyorum."*

   ⛔ ESKİ DÜZEN (KART LİSTESİ) GERİ GELMEYECEK: her satır karta
   dönüşüyor, ölçü başına bir alt satır açılıyor ve her hücrenin üstüne
   etiketi yazılıyordu ("ADET T1 / ADET T2 / ADET DEĞİŞİM" — her satırda
   yeniden). Ölçüldü: tek kırılım 390 px'lik telefonda 200-470 px, yani
   ekranda 2 satır; pikselin yarısı tekrar eden etiketti.

   BUGÜNKÜ DÜZEN: aynı anda TEK ölçü (üstteki şeritten seçilir), satır
   tek satır — ad · T1 (altında T2) · değişim rozeti. Etiketler
   satırlardan kalktı, YAPIŞKAN kolon başlığında duruyor.

   ⚠️ SORGUDA `orientation:portrait` VAR. Küçük bir telefonun YATAY
   hâli de 760 px'in altında kalıyor (667x375); orada kart/tek-ölçü
   düzeni değil, aşağıdaki "MOBİL · YATAY" kompakt matrisi geçerli.
   `urunkiyas.js > ukMobilMi` AYNI sorguyu kullanır — ikisi ayrışırsa
   şerit görünmeden hücreler gizlenir.                                */
@media (max-width:760px) and (orientation:portrait){
  .ukEkran{ padding:0 0 40px; }
  .ukUst{ border-radius:0; padding:9px 12px; }

  /* SÜZGEÇ ŞERİDİNİN KATLANMASI ORTAK BLOKTA — `.ukEkran.ukTelefon`
     (yukarıda, "TELEFONDA SÜZGEÇ ŞERİDİ KATLANIR"). Yatayda da
     gerektiği için medya sorgusundan çıkarıldı 07.09.2026.          */

  /* ⚠️ AÇIK ŞERİT ÖLÇÜ ŞERİDİNİN ÜSTÜNDE OLMALI. Satış Noktası paneli
     `.ukSuzgec`in içinde; şeridin yığın sırası (20) panelin kendi 30unu
     kapsıyor ve yapışkan ölçü şeridi (21) panelin üstüne biniyordu —
     04.09.2026da telefonda ölçüldü, panelin yarısı kayboluyordu.     */
  .ukSuzgec{ padding:7px 10px; border-left:none; border-right:none; z-index:31; }
  .ukDonemKap{ flex:1 1 100%; }
  .ukNoktaKap{ flex:1 1 100%; }
  .ukNoktaDugme{ max-width:none; width:100%; min-height:44px; }
  .ukNoktaPanel{ width:100%; max-height:min(calc(55vh / var(--ekranZ,1)),380px); }
  .ukDalBas{ min-height:38px; }
  .ukDonemKart{ min-width:0; flex:1 1 100%; }
  .ukDonemGovde input{ min-height:42px; }
  .ukMini{ min-height:38px; }
  .ukKisayol{ flex:1 1 100%; }
  .ukKisayol button{ flex:1; min-height:40px; }
  /* Telefonda −364 düğmesi kartın altında, YATAY (dikey düğme tam
     genişlikte anlamsız). Kolon kapları `.ukTelefon` ile ortadan kalkıyor. */
  .ukDonemYan{ flex:1 1 100%; flex-direction:row; }
  .ukMini.ukMiniDikey{ flex-direction:row; gap:5px; border-radius:999px; }
  #ukMagSuzgec button{ min-height:40px; }

  /* ⚠️ 12 AY ROZETİ TELEFONDA TEK SIRAYA SIĞMAZ — 6×2 IZGARA (10.09.2026)
     `flex:1` flex-basis'i 0 yapar ama `min-width:auto` düğmeyi içeriğinin
     altına indirmez: 12 × ~45px = 540px, 375px'lik telefonda kart 341px
     → SAYFA YATAY KAYIYORDU (kullanıcı ekran görüntüsüyle bildirdi:
     "aylık raporda mobilde aylar kenara taşıyor").
     ⚠️ Yatay kaydırma çözüm DEĞİL: şerit süzgeç kutusunun içinde,
     kaydırılabildiği belli olmuyor ve sayfanın tamamını kaydırıyor.
     ⚠️ Kural KİMLİĞE bağlı (`#ayAylar`), `.ukKisayol` sınıfına değil:
     Toptan'ın kanal (3) ve Danışman'ın kırılım (2) şeritleri de o sınıfı
     kullanıyor, onlar tek sıra kalmalı. `#ukSeritKisayol`daki 3+3
     kuralının aynı gerekçesi.
     ⚠️ Köşe yuvarlama KABA ait (`overflow:hidden`): iki satırda
     `:first-child/:last-child` yanlış köşeleri yuvarlar.            */
  #ayAylar{
    display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
    border:1px solid var(--ukKenar); border-radius:6px; overflow:hidden;
  }
  #ayAylar button{
    border:none; border-left:1px solid var(--ukKenar);
    border-top:1px solid var(--ukKenar); border-radius:0; padding:5px 2px;
  }
  #ayAylar button:nth-child(6n+1){ border-left:none; }   /* ilk kolon */
  #ayAylar button:nth-child(-n+6){ border-top:none; }    /* ilk satır */
  .ukAra{ flex:1 1 100%; order:9; min-height:40px; }
  .ukRozet{ min-height:38px; }
  .ukSecim{ flex:1 1 100%; max-width:none; min-height:42px; }

  /* --- ÖLÇÜ ŞERİDİ (tek seçim) ---
     Araç çubuğundaki çiplerden üretiliyor; asıl çubuk gizli ama DOM'da
     duruyor (şeritteki dokunuş oradaki çipi tıklıyor).               */
  .ukArac{ display:none; }
  /* ⚠️ YAPIŞKAN: raporun telefondaki tek kontrolü bu şerit; kaydırınca
     kaybolsaydı ölçü değiştirmek için hep başa dönmek gerekirdi.
     `top` değeri JS'ten (`ukYapistir`) veriliyor — üstündeki uygulama
     çubuğunun boyu sabit değil. Kolon başlığı bunun altına yapışır. */
  .ukMobBar{
    display:flex; align-items:center; gap:6px; overflow-x:auto;
    padding:6px 10px; background:var(--ukZemin);
    border-bottom:1px solid var(--ukCizgi);
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    position:sticky; top:0; left:0; z-index:21;
  }
  .ukMobBar::-webkit-scrollbar{ display:none; }
  .ukMobOlcu{
    flex:none; min-height:36px; padding:7px 14px; border-radius:999px;
    font-family:inherit; font-size:var(--ukFs13); cursor:pointer; white-space:nowrap;
    border:1px solid var(--ukKenar); background:var(--ukZemin); color:var(--ukSilik);
  }
  .ukMobOlcu.ukSecili{
    background:var(--ukLacivert); border-color:var(--ukLacivert);
    color:var(--ukUstYazi); font-weight:600;
  }
  .ukMobYan{ font-size:var(--ukFs12); padding:8px 11px; }
  .ukMobAyrac{ flex:none; width:1px; align-self:stretch; background:var(--ukCizgi); margin:3px 2px; }

  .ukTabloKap{ border-left:none; border-right:none; border-radius:0; overflow-x:visible; }
  /* Telefonda matris tek ölçüye indiği için yatay kaydırma YOK —
     "kart tabloyu sarsın" kuralı burada geri alınır.                */
  .ukTablo, .ukTabloKap, .ukEkran{ width:auto; min-width:0; }

  /* --- IZGARA: ad · (T1 üstte / T2 altta) · değişim rozeti --- */
  /* Değişim kolonu yakınlaştırmayla birlikte büyür: %140te “+1,2 pp”
     sabit 68 pxe sığmıyordu, %55te 68 px israftı.                    */
  .ukSutunBaslik, .ukSatir{
    grid-template-columns:minmax(0,1fr) auto calc(48px + 20px * var(--ukZ));
    grid-template-rows:auto auto;
    align-items:center; padding:0 10px;
  }
  .ukGrupBaslik{ display:none; }        /* grup adı ölçü şeridinde yazıyor */
  .ukYapisik{ display:block; }

  /* ODAKTAKİ ÖLÇÜ DIŞINDAKİ HER HÜCRE GİZLİ. `ukOdakOlcu` sınıfını
     `urunkiyas.js > ukMobilIsaretle` koyuyor.                       */
  .ukSay, .ukBs{ display:none; }
  .ukSay.ukOdakOlcu{ display:flex; }
  .ukBs.ukOdakOlcu{ display:block; }

  .ukAd, .ukBsAd{ grid-column:1; grid-row:1 / span 2; }
  .ukSay.ukKolBas, .ukBs.ukKolBas{ grid-column:2; grid-row:1; }
  .ukSay.ukEski,   .ukBs.ukEski  { grid-column:2; grid-row:2; }
  .ukSay.ukFark,   .ukBs.ukBsFark{ grid-column:3; grid-row:1 / span 2; }

  /* --- kolon başlığı --- */
  .ukBsAd{ position:static; padding:6px 0; font-size:var(--ukFs11); background:transparent; }
  .ukBs{ padding:3px 0; font-size:var(--ukFs10); white-space:nowrap; letter-spacing:0.04em; }
  .ukBs.ukKolBas{ border-left:none; padding-top:6px; }
  .ukBs.ukBsFark{ text-align:center; align-self:center; }
  .ukSutunBaslik{ background:var(--ukSerit); }
  .ukKose{ display:none; }

  /* --- satır --- */
  .ukSatir{ background:var(--ukZemin); border-bottom:1px solid var(--ukCizgiIc); }
  .ukAd{
    position:static; background:transparent; border-left:none;
    padding:7px 8px 7px 0; gap:6px;
  }
  .ukSev2 .ukAd{ padding-left:14px; }
  .ukSev3 .ukAd{ padding-left:27px; }
  .ukSev4 .ukAd{ padding-left:40px; }
  .ukSev5 .ukAd{ padding-left:53px; }
  .ukAdMetin{ font-size:var(--ukFs14); }
  .ukSev1 .ukAdMetin, .ukToplam .ukAdMetin{ font-size:var(--ukFs14); }
  .ukSev2 .ukAdMetin{ font-size:var(--ukFs14); }
  /* Dokunma hedefi: ok 24 px, yaprakta boşluk dar (ada yer kalsın). */
  .ukAc{ width:24px; height:24px; line-height:22px; font-size:var(--ukFs12); }
  .ukBosAc{ width:10px; height:10px; }

  .ukSay{ background:transparent; box-shadow:none !important; }
  .ukSay.ukKolBas{
    padding:6px 0 1px; font-size:var(--ukFs15); font-weight:600;
    justify-content:flex-end;
  }
  .ukSay.ukEski{ padding:0 0 6px; font-size:var(--ukFs12); justify-content:flex-end; }
  /* Değişim ROZET: iki satırı birden kaplar, ortalanır. Zemini JS
     basıyor (`ukKatman`), yazı rengi `.ukSay.ukFark .ukFarkMetin`.  */
  .ukSay.ukFark{
    margin-left:8px; align-self:center; justify-content:center;
    border-radius:7px; padding:5px 4px; min-height:28px; overflow:visible;
  }
  .ukFarkMetin{ font-size:var(--ukFs12); }

  /* --- seviye zeminleri satıra taşınır (hücreler saydam) --- */
  .ukSev1{ background:var(--ukLacivert); }
  .ukSev1.ukBant{ background:var(--ukBant); }
  .ukSev2{ background:var(--ukSev2Z); }
  .ukSev3{ background:var(--ukSev3Z); }
  .ukSev4{ background:var(--ukSev4Z); }
  .ukSev5{ background:var(--ukSev5Z); }
  .ukSonuk, .ukYol{ background:var(--ukZemin); }
  .ukSev1.ukSonuk{ background:var(--ukSonukZ); }
  .ukZebraA{ background:var(--ukZebraAZ); }
  .ukZebraB{ background:var(--ukZebraBZ); }
  .ukOdak{ background:var(--ukOdakZ); }
  .ukToplam{ background:var(--ukLacivert); }

  /* --- DİP TOPLAM YAPIŞKAN (04.09.2026'da geri geldi) ---
     Kart düzeninde toplam 4 satır yüksekliğindeydi ve ekranın yarısını
     kaplıyordu, o yüzden `position:static` yapılmıştı. Tek ölçüyle
     toplam ~44 px: kaydırırken hep görünmesi doğru olan.            */
  .ukToplam{ position:sticky; bottom:0; z-index:7; }
  .ukToplam .ukAd{ padding:9px 8px 9px 0; z-index:auto; }

  .ukKapan{ padding:12px 10px 20px; }
}

/* ——— MOBİL · YATAY (kompakt matris) ———
   Telefon yan çevrilince kart listesi anlamsızlaşıyor: yükseklik az,
   genişlik çok. Matris geri gelir, eski dönem kolonu gizlenir.        */
@media (orientation:landscape) and (max-height:520px){
  /* ⚠️ T2 KOLONU YATAYDA DA GÖRÜNÜR (07.09.2026). Önce burada
     `.ukEkran .ukEski{display:none}` vardı ve kolonlar iki taneydi
     (78/74): telefon yan çevrilince T2 kullanıcının seçiminden bağımsız
     KAYBOLUYORDU (kullanıcı: *"hâlâ telefonu yan yatırınca T2 kolonu yok
     oluyor"*). Gizleme artık YALNIZ kullanıcının T2 çipine bağlı
     (`.ukGizliEski`, araç çubuğundaki çip yatayda görünüyor).
     Kolonlar üçe çıktığı için daraltıldı: 70+66+62 = 198.
     ⚠️ `--ukGrup` HER ZAMAN `--ukKol` toplamı olmalı — grup başlığı
     ızgarası ondan kuruluyor, tutmazsa başlıklar kayar.
     ⚠️ Tablo genişliyor ve sayfa yatay kayıyor; bu ekranda yatay
     kaydırma SAYFANIN (bkz. `.ukTabloKap`a overflow yazma uyarısı). */
  /* `--ukZK` çarpanı: otomatik yakınlaştırma kolonları da daraltır (25.09.2026). */
  .ukEkran{ --ukKol:calc(70px * var(--ukZK,1)) calc(66px * var(--ukZK,1)) calc(62px * var(--ukZK,1));
    --ukGrup:calc(198px * var(--ukZK,1)); --ukAdKol:calc(190px * var(--ukZK,1)); --ukSatirY:3px; padding:0 0 24px; }
  .ukEkran.ukGizliEski{ --ukKol:calc(96px * var(--ukZK,1)); --ukGrup:calc(96px * var(--ukZK,1)); }

  /* ⚠️ KART, SÜZGEÇ ŞERİDİNİN GENİŞLİĞİNİ ALIYORDU (07.09.2026 · ölçüldü)
     Kullanıcı: *"yan yatırınca telefonu PBI raporu patlıyor."* Ölçüm
     (812x375, Ürün): kart **1.415 px**, tablo **900 px** → tablo
     `margin:auto` ile 257 px sağa kayıyor, sol tarafta kocaman boşluk
     kalıyor, tablonun sağı ekran dışında. Sebep: `.ukEkran` genişliği
     `max-content` ve o hesapta FLEX ÖĞELER SARMIYOR — açık süzgeç
     şeridinin (tarih kartları + kısayollar) tek satırlık doğal eni
     1.415 px. Masaüstünde göze batmıyor çünkü orada tablo zaten daha
     geniş; telefonda yatayda tablo 900'e düşünce şerit öne geçiyor.

     Çözüm: üst bloklara AÇIK bir uzunluk (`100vw`) vermek. `max-content`
     hesabında yüzde/`min-width:%` sayılmaz, açık uzunluk sayılır →
     kartın eni tabloya döner (900). Kullanılan genişlik yine kart
     kadardır (`min-width:100%` taban kuralda), yani bantlar kısalmaz.
     ⚠️ `width:auto`a geri dönme — kart yeniden şeride kilitlenir.    */
  .ukUst, .ukSuzgec, .ukArac, .ukSuzAc{ width:calc(100vw / var(--ekranZ,1)); }

  /* Yatayda ekran 375 px: dikey her piksel sayılıyor. Ölçüldü — üst
     bloklar 235 px yer kaplıyordu, veriye 12 px kalıyordu.          */
  .ukUst{ border-radius:0; padding:5px 12px; }
  .ukBaslik{ font-size:var(--ukFs15); }
  .ukEkran.ukTelefon .ukSuzAc{ min-height:36px; padding:5px 12px; }
  .ukArac{ padding:3px 8px; gap:7px; }

  /* ⚠️ `margin-left:auto` YATAYDA İÇERİĞİ EKRAN DIŞINA İTİYOR.
     Üst bloklar kart kadar geniş (900+), görünen pencere 667-844 →
     sağa yaslanan parçalar (dönem özeti · ölçü çipleri · güncelleme
     saati) ekranın dışında kalıyordu; ölçüldü 07.09.2026: çipler
     x=650, pencere 667. Yatayda hepsi SOLA, okunan yere alınıyor. */
  .ukSuzOzet, .ukArac .ukOlcuSec, .ukUstSag{ margin-left:12px; }

  .ukTablo{ min-width:900px; }
  .ukEkran, .ukTabloKap{ width:max-content; min-width:100%; }
  .ukYapisik{ display:block; }
  .ukSatir{ grid-template-columns:var(--ukSatirGrid); padding:0; background:none; }
  .ukAd{ grid-column:auto; position:sticky; left:0; padding:var(--ukSatirY) 12px var(--ukSatirY) 8px; margin-left:0; }
  .ukSev2 .ukAd{ padding-left:18px; } .ukSev3 .ukAd{ padding-left:34px; }
  .ukSev4 .ukAd{ padding-left:50px; } .ukSev5 .ukAd{ padding-left:66px; }
  .ukSay{ flex-direction:row; align-items:center; justify-content:flex-end; padding:var(--ukSatirY) 10px; }
  .ukSay::before{ content:none; }
  .ukFark{ flex-direction:row; gap:6px; }
}

/* =====================================================================
   YÜKLEME PERDESİ — Bluemint çember logosu · "hız izi"   (22.09.2026)
   ---------------------------------------------------------------------
   Perde 01.09.2026'dan beri var (*"ekranın üzerine bir ekran daha gibi,
   ortasında kocaman dönse, sonra açılınca ekranı görsek"*). Görünüşü
   22.09.2026'da değişti: HER YERDE çember logo; deniz şortu YALNIZ
   Best Seller'da (`.yukIcSort` / `.yukPerdeSort`, `core.js > yukSortMu`).
   Kullanıcı: *"hiçbir yerde o deniz şortu değişiminden iz kalmasın."*

   TEMAYA GÖRE (kullanıcı: *"karanlık modda farklı, aydınlık modda farklı
   olmalı"*): aydınlıkta BEYAZ perde + lacivert logo, karanlıkta
   LACİVERT perde + beyaz logo. Tokenlar `:root` / `:root[data-theme="dark"]`.
   Best Seller perdesi eskisi gibi HER TEMADA KOYU kalır (şortlar koyu
   zeminde tasarlandı).

   İKİ BOYUT, TEK PARÇA:
     .yukPerde  → sayfa üstüne inen koyu katman (ekran açılışı)
     .spin      → satır içi küçük hâli (kısmi yüklemeler; 30 yerde var,
                  hiçbiri değiştirilmedi — sınıf aynı, görünüşü yenilendi)

   ⚠️ GECİKME 400 ms. Perde HEMEN gösterilmez; cevap ondan önce gelirse
   hiç görünmez. Dashboard 0,06 sn'de dönüyor — orada perde inip çıksaydı
   göz tırmalardı. Ölçüm: `node sureler.js`.

   ===================================================================== */
/* Kullanıcı 22.09.2026: *"aydınlıkta beyaz üstüne laci logo, karanlıkta
   laci üzerine beyaz logo"* — perdenin kendisi. */
:root{--yukZemin:238,241,245; --yukSaydam:.62; --yukLogo:#1b2c4f; --yukYaziR:#1b2c4f}
:root[data-theme="dark"]{--yukZemin:27,44,79; --yukSaydam:.7; --yukLogo:#ffffff; --yukYaziR:#ffffff}
.yukPerde{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  /* ⚠️ TAM OPAK — SAYDAM YAPMA, `backdrop-filter` DA EKLEME (02.09.2026).
     Perde önce %93 saydamdı + `backdrop-filter:blur(4px) saturate(.85)`
     vardı. Kullanıcı şortun etrafında silik bir DİKDÖRTGEN görüyordu
     ("hâlâ dışındaki çizgi gözüküyor, tam şeffaf değil"). Görsel ölçüldü
     ve TEMİZ çıktı: saydam bölgenin tamamında zeminden sapma 0, 8 kat
     güçlendirilmiş farkta bile şortun dışı bomboş. Kusur CSS'teydi:
     `drop-shadow`+`will-change` görsele ayrı bir GPU katmanı açıyor,
     katmanın sınırı gölge kadar geniş (her yönde ~40px — kullanıcının
     gördüğü dikdörtgenin ölçüsü tam bu) ve `backdrop-filter` o sınırda
     arkadaki AÇIK renkli raporu farklı sızdırıyor. Zemin opak olunca
     arkadan sızacak bir şey kalmıyor; bulanıklaştıracak bir şey de
     kalmadığı için `backdrop-filter` gereksiz. */
  /* ⚠️ 22.09.2026: logo perdesi YARI SAYDAM + BULANIK — kullanıcı:
     *"perdeleme gibi çalışmıyor; gri olabilir okey ama raporu da bulanık
     görmem lazım arkada."* Aşağıdaki "tam opak" notu ŞORT içindir:
     dikdörtgenin sebebi şort görselindeki `drop-shadow`+`will-change`
     katmanıydı; logoda ikisi de YOK. Şort perdesi (`.yukPerdeSort`,
     yalnız Best Seller) opak kaldı. */
  background:rgba(var(--yukZemin), var(--yukSaydam));
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  /* ⚠️ VARSAYILAN GÖRÜNÜR, animasyon yalnız YUMUŞATIR.
     Önce JS `requestAnimationFrame` ile `.gorunur` sınıfı ekliyordu;
     ölçüldü: sekme arka plandayken rAF HİÇ çalışmıyor, perde DOM'a
     giriyor ama `opacity:0` kalıyordu — yani gösterge görünmüyordu.
     Artık görünürlük CSS'in varsayılanı; animasyon çalışmasa da
     (arka plan sekmesi, "hareketi azalt") perde yerinde olur.      */
  opacity:1; animation:yukPerdeGir .22s ease-out;
}
@keyframes yukPerdeGir{from{opacity:0}}
.yukPerde.kapaniyor{animation:yukPerdeCik .2s ease-in forwards}
@keyframes yukPerdeCik{to{opacity:0}}
/* Best Seller: eski koyu perde, her temada */
.yukPerde.yukPerdeSort{background:rgb(22,27,34);-webkit-backdrop-filter:none;backdrop-filter:none}

/* --olcek boyut */
.yukIc{--olcek:1;
  display:flex; flex-direction:column; align-items:center;
  gap:calc(22px * var(--olcek))}
.spin .yukIcLogo{--olcek:.34; gap:calc(34px * var(--olcek))}

/* ---- ÇEMBER LOGO · HIZ İZİ -----------------------------------------
   Logo `img/bm-cember.png` (şeffaf, 512 px, 10 KB) MASKE olarak; renk
   `--yukLogo`dan gelir, temayla değişir. Üç katman aynı dönüşü yapar,
   arkadaki ikisi 0,07 / 0,14 sn geriden ve silik gelir: iz.
   Dönüş: hızlanıp yavaşlayan tam tur (%70) + kısa duraklama (%30). */
.yukLogo{position:relative;width:calc(150px * var(--olcek));height:calc(150px * var(--olcek))}
.yukLogo i{position:absolute;inset:0;background:var(--yukLogo);
  -webkit-mask:url(/img/bm-cember.png) center/contain no-repeat;
          mask:url(/img/bm-cember.png) center/contain no-repeat;
  animation:yukHiz 2.4s infinite}
.yukLogo .yukIz{opacity:.22;animation-delay:.07s}
.yukLogo .yukIz2{opacity:.1;animation-delay:.14s}
@keyframes yukHiz{
  0%{transform:rotate(0);animation-timing-function:cubic-bezier(.83,0,.17,1)}
  70%,100%{transform:rotate(360deg)}
}

/* ---- DENİZ ŞORTU — YALNIZ BEST SELLER -------------------------------
   --slot bir şortun ekranda kalma süresi (sakin) */
.yukIcSort{--slot:.95s; --adet:15; --sure:calc(var(--slot) * var(--adet));
  gap:calc(20px * var(--olcek))}
.spin .yukIcSort{--olcek:.42; gap:calc(26px * var(--olcek))}

.yukPencere{position:relative; overflow:hidden;
  width:calc(260px * var(--olcek)); height:calc(250px * var(--olcek))}
/* ⚠️ `filter` ve `will-change` YAZMA — ikisi de görsele ayrı bir GPU
   katmanı açtırır ve katman sınırı ekranda dikdörtgen olarak görünür
   (yukarıdaki uzun nota bak). Gölge güzeldi ama üstelik `overflow:hidden`
   olan pencerede kenarından KESİLİYORDU. transform/opacity animasyonunu
   tarayıcı zaten kendiliğinden hızlandırıyor, will-change'e gerek yok. */
.yukKare{position:absolute; inset:0; margin:auto; width:100%; height:100%;
  object-fit:contain; opacity:0;
  animation:yukGec var(--sure) cubic-bezier(.34,.75,.26,1) infinite;
  animation-delay:var(--kay)}

/* ÜST ÜSTE BİNME YOK: çıkan şort yukarı süzülürken giren aşağıdan gelir —
   aynı anda görünürler ama aynı yerde değiller. Küçülme 0,74 (kullanıcı
   "biraz daha küçülüp değişsin" dedi).
   ⚠️ YÜZDELER --adet'E BAĞLI: bir dilim = 100/--adet. 03.09.2026'da
   şort sayısı 10 → 15 oldu (kullanıcı 5 yeni görsel ekledi), dilim
   %10 → %6,667. Dört yüzde de aynı oranla ölçeklendi:
   0 · 0,28 · 0,74 · 1,00 dilim. Şort sayısı yine değişirse bu dördünü
   yeniden hesapla (`--adet` ile birlikte), yoksa animasyon aksar. */
@keyframes yukGec{
  0%     {transform:translateY(54%) scale(.74); opacity:0}
  1.867% {transform:translateY(0)   scale(1);   opacity:1}
  4.933% {transform:translateY(0)   scale(1);   opacity:1}
  6.667% {transform:translateY(-54%) scale(.74);opacity:0}
  100%   {transform:translateY(-54%) scale(.74);opacity:0}
}

.yukYazi{display:flex; align-items:baseline; gap:1px;
  font-size:calc(17px * var(--olcek)); font-weight:600; letter-spacing:.02em}
.yukPerde .yukYazi{color:var(--yukYaziR)}
.yukPerde.yukPerdeSort .yukYazi{color:#eef1f5}   /* Best Seller perdesi her temada koyu */
.spin .yukYazi{color:var(--muted); font-size:13.5px}
.yukNokta{animation:yukNokta 1.35s steps(1,end) infinite; opacity:.3}
.yukNokta:nth-child(2){animation-delay:.34s}
.yukNokta:nth-child(3){animation-delay:.68s}
@keyframes yukNokta{0%,74%{opacity:1}75%,100%{opacity:.3}}

/* Perde açıkken ALTTAKİ satır içi gösterge gizlenir — yoksa yarı saydam
   perdenin arkasında ikinci bir gösterge dönüyor. */
.yukPerdeAcik .spin{visibility:hidden}

/* Satır içi hâl: eski `.spin` kutusunun yerini alıyor, ölçüsü küçük.

   ⚠️ SATIR İÇİ DE GECİKMELİ. Ekranlar kendi `.spin`lerini ANINDA basıyor,
   perde ise 200 ms sonra geliyordu — arada yarım saniyeye yakın bir süre
   satır içi gösterge görünüyordu, sonra perde onun üstüne iniyordu (kullanıcı
   bildirdi 01.09.2026: *"hâlâ yarım saniye falan bu geliyor ekrana"*).
   Artık ikisi de aynı anda: 200 ms boyunca HİÇBİRİ görünmüyor.

   `backwards`: gecikme boyunca `from` durumu (opacity 0) uygulanır.
   Taban `opacity` 1 bırakıldı — animasyon hiç çalışmazsa (azaltılmış
   hareket, eski tarayıcı) gösterge yine görünür, kaybolmaz. */
.spin{text-align:center; color:var(--muted); padding:26px 12px;
  display:flex; flex-direction:column; align-items:center;
  animation:yukSatirGir .18s ease-out 200ms backwards}
@keyframes yukSatirGir{from{opacity:0}}

@media (max-width:700px){
  .yukIc{--olcek:.82}
}
@media (prefers-reduced-motion:reduce){
  .yukKare,.yukNokta,.spin,.yukLogo i{animation:none}
  .yukLogo .yukIz,.yukLogo .yukIz2{display:none}
  .yukKare{opacity:0}
  .yukKare:first-child{opacity:1; transform:none}
  .yukNokta{opacity:1}
  .yukPerde{animation:none}
}


/* =====================================================================
   ANA EKRAN + MOBİL MENÜ  ·  04.09.2026 (2. tur 07.09.2026)
   ---------------------------------------------------------------------
   Ölçüldü (375×812, merkez rolü): üst çubuk 142 + bölüm menüsü 143 +
   alt sekme 93 = **417 px**, ekranın **%51'i**. Bugün 63 px + içerik.

   TİP ÖLÇEĞİ — satır içi `font-size` YAZILMAZ:
     selam            20 / 650      liste satırı adı   14,5 / 600
     tarih            13            satır açıklaması   12
     şerit değeri     22 / 700      bölüm başlığı      12 / 700 · VERSAL
     şerit etiketi    11 / 650      rozet              13 / 700
     çekmece bölümü   15 / 600      çekmece sayfası    14,5

   ⚠️ MASAÜSTÜ HİÇ DEĞİŞMEZ. `.mnuKap` ve `.mnuSag` burada
   `display:contents`; yani `.seg` satırları ve `.topsag` yine bugünkü
   yerlerinde dizilir. Bütün çekmece kuralları `max-width:760px` içinde.
   ===================================================================== */

.mnuKap,.mnuSag{display:contents}
.mnuListe,.mnuAc,.mnuBas,.mnuEkranAd,.mnuSagAc{display:none}

/* ---- ANA SAYFA DÜĞMESİ (09.09.2026) --------------------------------
   Kullanıcı: *"tepedeki BM yazısının orada raporun adının yanına ana
   sayfa butonu kesin koymamız lazım."* Markaya dokunmak zaten ana
   ekrana götürüyordu ama görünür bir işaret yoktu.
   ⚠️ `<a href="#anaekran">` — orta tuşla yeni sekmede de açılır.
   ⚠️ Ana ekrandayken JS hiç çizmiyor.                               */
/* ⚠️ MARKA + ANA SAYFA TEK KÜME (09.09.2026, ikinci tur).
   `.top` `justify-content:space-between`; masaüstünde `.mnuEkranAd`
   gizli olduğu için geriye üç öğe kalıyordu (marka · ev · hesap) ve
   düğme tam ORTAYA, hiçbir şeye ait olmadan düşüyordu — kullanıcı:
   *"şu anasayfa butonunu daha mantıklı bir yere taşır mısın."*
   Artık marka ile aynı kutuda: marka zaten ana ekrana götürüyor,
   ikisi bir arada tek bir "eve dön" kümesi okunuyor.
   ⚠️ Dar ekranda `display:contents` — kutu ORTADAN KALKAR, öğeler
   yine `.top`un doğrudan çocuğu olur ve `.mnuEkranAd`in `flex:1`i
   çalışmaya devam eder. Kutu orada da flex kalsaydı ekran adı
   markanın kutusuna sıkışırdı.                                     */
.topSol{display:flex;align-items:center;gap:12px;min-width:0}

.mnuEv{display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:6px 11px 6px 9px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);color:var(--ink2);font:inherit;font-size:12.5px;
  font-weight:600;text-decoration:none;cursor:pointer;line-height:1;
  white-space:nowrap}
.mnuEv:hover{border-color:var(--accent);color:var(--accent)}
.mnuEv .tbSvg{width:16px;height:16px}
/* Üst çubuk düğmeleri: geniş ekranda YAZI, dar ekranda YAZI + ikon.
   ⚠️ TEK İSTİSNA TEMA: geniş ekranda ikonuyla duruyor (yeri dar, etiket
   "Karanlık moda geç" gibi uzun). Sağ panelde ikisi birden görünür. */
.tbIkon{display:none}
/* ⚠️ İKONLAR SVG — metin glifi DEĞİL (bkz. core.js > IKON).
   `⏻`/`⚿` Android'in yazı tipinde yok, telefonda içi çizgili KARE
   (tofu) çiziliyordu; kullanıcı üç kez bildirdi. */
.tbSvg{width:18px;height:18px;display:block;flex:none}
.tbTema .tbIkon{display:inline-flex}
.tbTema .tbYazi{display:none}

/* =====================================================================
   ANA EKRAN  ·  09.09.2026  (Claude Design "FINAL" uygulaması)
   ---------------------------------------------------------------------
   Kullanıcı: *"ana sayfamızın arayüzünü komple değiştirmek istiyorum,
   çok basit duruyor; daha büyük kartlar halinde daha profesyonel bir
   ana ekran."* Tasarım Claude Design'da yapıldı (proje 3884845f,
   `Blueprint B` / `Blueprint Ana Ekran FINAL`); şartname
   `tasarim/anaekran_PROMPT.md` + `tasarim/anaekran_B_REVIZYON.md`.

   ⚠️ EKRANIN KENDİ PALETİ VAR — hepsi TOKEN, hiçbir kural gövdesinde
   çıplak hex yok (ev kuralı: koyu tema her raporda düşünülür).
   "Kapak" kartları (kahraman · hızlı erişim · bölüm listesi) iki
   temada da LACİVERT ZEMİN + BEYAZ YAZI'dır; değişen tek şey
   lacivertin koyuluğu. Aydınlıkta sayfa açık olduğu için kart daha
   açık bir lacivert, karanlıkta sayfa zaten koyu olduğu için kart
   daha da koyulaşıyor.

   ⚠️ ÖLÇÜLDÜ (09.09.2026 · tarayıcıda hesaplandı, kapak zeminine karşı;
   karartma katmanı bunları daha da yükseltiyor — yani alt sınır):
   aydınlık (#2b4577)  beyaz 9,46 · ikincil (.80) 6,73 · solgun yıldız (.60) 4,56
   karanlık (#1d3055)  beyaz 13,07 · ikincil 8,94 · solgun yıldız 5,74
   Altısı da AA'nın (4,5) üstünde. Rozetin kenarlığı (.28) bilerek düşük:
   dekorasyon, yazı değil — rozetin kendi yazısı beyaz.

   ⚠️ FOTOĞRAF İÇİN HAZIR: kapakların arkasına kampanya görseli
   `--aeFoto` ile konur — `.aeEkran{--aeFoto:url("/img/anaekran/kapak.jpg")}`
   yazmak yeterli, HTML hiç değişmez. Tanımlı değilse lacivert zemin
   kalır (bugünkü hâl). Karartma katmanı (`::before`) fotoğraf olsa da
   olmasa da aynı; yazı kontrastı fotoğrafa bağlı DEĞİL.
   ===================================================================== */
.aeEkran{
  /* ⚠️ LACİVERT 09.09.2026'da AÇILDI (kullanıcı: *"genel lacivertler biraz
     daha parlak olabilir"*). #22375f → #2b4577. Kontrast yeniden ölçüldü,
     aşağıdaki tabloda. Daha da açılırsa solgun yıldız 4,5'in altına iner. */
  --aeZemin:#2b4577;                 /* kapağın taban rengi (foto yoksa görünen) */
  --aeTonAlt:rgba(16,28,52,.78);     /* alttan yukarı karartma */
  --aeTonYan:rgba(16,28,52,.82);     /* yandan karartma */
  --aeYon:90deg;                     /* yan karartma SOLDAN (varsayılan) */
  --aeYanBit:62%;                    /* yan karartmanın bitiş noktası */
  --aeYazi:#fff;
  --aeYazi2:rgba(255,255,255,.80);
  --aeSolgun:rgba(255,255,255,.60);  /* boş yıldız — "burada bir şey var" */
  --aeCizgi:rgba(255,255,255,.28);
  --aeDolgu:rgba(255,255,255,.16);
  --aeHover:rgba(255,255,255,.12);
  /* Büyüme yüzdesi renkleri (17.09.2026). Ev `--ok` tonu (#1f9254) beyaz
     kartta 3,96 — AA ALTI; burada koyultuldu (5,14 · Hedef Takip
     `.hd2Pay.ust` ile aynı ton). Kırmızı ev tokenı beyazda 5,44 — aynen. */
  --aeArti:#1b7d4c;
  --aeEksi:var(--no);
  /* KAMPANYA BANNER'I (09.09.2026, kullanıcının gönderdiği kare).
     Dosya `img/anaekran/banner.jpg` — 2,4:1'e kırpılmış, 1600 px, 80 KB.
     Yalnız HERO'da; kart ve liste kapakları düz lacivert kalıyor (20
     fotoğrafın üzerine yazı basmak listeyi okunmaz yapardı).
     Değiştirmek için dosyayı değiştir; adı sabit kalsın. */
  --aeFotoHero:url("/img/anaekran/banner.jpg");
  --aeHeroKonum:50% 8%;              /* kırpılan bant — modelin başı içeride kalsın */
  padding:2px 0 8px
}
:root[data-theme="dark"] .aeEkran{
  --aeZemin:#1d3055;
  --aeArti:var(--ok);
  --aeTonAlt:rgba(4,8,16,.80);
  --aeTonYan:rgba(4,8,16,.84)
}

/* --- KAPAK: fotoğraf/lacivert zemin + karartma + beyaz yazı --------- */
.aeKapak{position:relative;overflow:hidden;border-radius:16px;
  color:var(--aeYazi);
  background-color:var(--aeZemin);background-image:var(--aeFoto,none);
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* ⚠️ KARARTMA `::before` İLE, ayrı bir <div> ile DEĞİL — satırlar ve
   yıldızlar zaten kapak kartının çocukları; fazladan katman koymak
   tıklama hedeflerini bozardı. Bu yüzden `pointer-events:none`.     */
.aeKapak::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,var(--aeTonAlt),rgba(0,0,0,0) 88%),
             linear-gradient(var(--aeYon),var(--aeTonYan),rgba(0,0,0,0) var(--aeYanBit))}
.aeKapak>*{position:relative;z-index:1}

/* --- ÜST BLOK: kahraman + rakam kartları ---------------------------
   ⚠️ IZGARA DEĞİL FLEX-WRAP. Tasarımda 2fr/1fr bir grid; ama mağaza
   rolünde gövde 560px'te kalırken pencere geniş olabiliyor ve medya
   sorgusu KABI değil PENCEREYİ ölçüyor — grid orada rakam kartlarını
   ~170px'e sıkıştırırdı. `flex-basis` kabın kendi enine bakar.     */
.aeUst{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px;margin:0 0 22px}
/* ⚠️ HERO'NUN KENDİ GÖRSELİ OLABİLİR. `--aeFoto` BÜTÜN kapaklara
   (hero + favori kartı + bölüm listesi) birden basıyor; tek bir banner
   atıldığında 20 yerde tekrar etmesin diye hero ÖNCE `--aeFotoHero`ya
   bakıyor, yoksa ortak `--aeFoto`ya düşüyor. Tek banner:
   .aeEkran{--aeFotoHero:url("/img/anaekran/banner.jpg")}                */
/* ⚠️ YAZILAR SAĞDA (kullanıcı 09.09.2026: *"adam solda ya, o yüzden
   ordaki yazılar sağda olsun"*). Kampanya görselinde model SOL yarıda
   duruyor; yazı solda kalsaydı yüzün üstüne binerdi. `--aeYon:270deg`
   karartmayı da sağ tarafa çeviriyor — yazının arkası koyu, modelin
   üstü açık kalıyor. Görsel değişirse tek satır: `--aeYon` + `justify`. */
/* ⚠️ SÜTUN + `space-between`: MARKA tepede, selam dipte. Ikisi de
   SAĞA hizalı (`align-items:flex-end`) — kampanya karesinde model sol
   yarıda duruyor. */
.aeHero{flex:2 1 420px;min-width:0;min-height:240px;display:flex;
  flex-direction:column;align-items:flex-end;justify-content:space-between;
  --aeYon:270deg;
  background-image:var(--aeFotoHero,var(--aeFoto,none));
  background-position:var(--aeHeroKonum)}
/* MARKA LOGOSU — markanın kendi beyaz SVG'si (`img/bluemint-beyaz.svg`,
   global.bluemint.com'dan alındı, 1,5 KB).
   ⚠️ GÖLGE ŞART: fotoğrafın üst şeridi açık gökyüzü olabiliyor ve yandan
   gelen karartma orada en zayıf. Ölçüldü (09.09.2026, bugünkü banner):
   ham gökyüzünde beyaz **3,23** — AA altı; karartmayla logonun sol ucunda
   **7,94**, sağ kenarında **13,03**. Gölge üçüncü emniyet katmanı.
   ⛔ `text-transform` GEREKMİYOR (artık görsel); metin sürümüne dönülürse
   Türkçe büyütme tuzağı (BLUEMİNT) yeniden geçerli olur. */
.aeHeroMarka{display:block;margin:18px 26px 0;height:15px;width:auto;
  filter:drop-shadow(0 1px 10px rgba(8,14,26,.6))}
.aeHeroYazi{display:flex;flex-direction:column;align-items:flex-end;
  text-align:right;gap:6px;padding:0 26px 22px;max-width:62%}
.aeSelam{font-size:24px;font-weight:700;letter-spacing:-.3px;line-height:1.2}
.aeHeroAlt{font-size:14px;color:var(--aeYazi2)}

.aeKutular{flex:1 1 300px;min-width:0;display:grid;gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
/* ⚠️ İÇERİK ORTALI (kullanıcı 09.09.2026: *"şuraları da ortalayalım"*).
   Önce `justify-content:space-between` ile etiket tepeye, rakam dibe
   yapışıyordu; alt satırı olan ve olmayan kartlar yan yana gelince
   rakamlar farklı yükseklikte duruyor ve ızgara tırtıklı görünüyordu.
   Artık üçü de dikeyde ortada, yatayda ortalı. */
.aeKutu{min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  gap:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px}
.aeEtiket{font-size:11.5px;font-weight:650;letter-spacing:.4px;text-transform:uppercase;
  line-height:1.25;color:var(--muted-aa,var(--muted))}
.aeDeger{font-size:26px;font-weight:700;line-height:1.15;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.aeAlt{font-size:12.5px;line-height:1.3;color:var(--muted-aa,var(--muted))}
/* Büyüme yüzdesi (17.09.2026) — kullanıcı: *"sadece yeşil kırmızı şeklinde
   büyüme yüzdesi olsun, altında çok küçük de olmasın."*
   Renkler `.aeEkran` tokenlarından (`--aeArti` · `--aeEksi`); karanlık
   tema karşılığı orada. `:root` değiştirilmez. */
.aeBuyume{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.aeBuyume.arti{color:var(--aeArti)}
.aeBuyume.eksi{color:var(--aeEksi)}
/* ⚠️ YÜKLEME GÖSTERGESİ KÜÇÜLTÜLÜR. Varsayılan boyutuyla gösterge
   ana ekranın yarısını yiyordu (04.09.2026).                        */
.aeKutularBos{display:flex;align-items:center;gap:10px;min-height:96px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:0 16px}
.aeKutularBos .yukIc{--olcek:.26}
.aeKutularBos .spin{display:flex;align-items:center;gap:10px;padding:0;font-size:13px}
.aeSessiz{font-size:13px;color:var(--muted-aa,var(--muted))}

/* --- Blok başlığı (Favorilerin · Son baktıkların · bölüm adı) ------ */
.aeBolumBas{display:flex;align-items:baseline;gap:10px;padding:0 2px 8px}
.aeBolumAd{font-size:13.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--ink)}
.aeBolumSay{font-size:12.5px;color:var(--muted-aa,var(--muted))}

/* --- HIZLI ERİŞİM: favorilerin + son baktıkların ------------------- */
.aeHizli{margin:0 0 22px}
/* 200px taban: 1200px'lik kapta 5 kolon (tasarımın sayısı), 560px'lik
   mağaza kabında 2 kolon. `auto-fill` olduğu için kart sayısı azken
   kartlar devleşmiyor. */
.aeMiniIzgara{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.aeMiniKap{position:relative;min-width:0}
/* ⚠️ ÖZGÜLLÜK: kart hem `.aeSatir` hem `.aeMini` taşıyor ve `.aeSatir`
   kuralları AŞAĞIDA (bölüm listesi bloğunda) yazılı — tek sınıfla yazılırsa
   min-height/hizalama sessizce ezilir ve kart 96px yerine 56px kalır (09.09.2026'da
   ölçüldü). Bu yüzden kap+kart iki sınıflı seçici. */
.aeMiniKap .aeMini{min-height:104px;align-items:flex-end;border-radius:12px;padding:0}
.aeMiniIc{display:flex;flex-direction:column;gap:3px;min-width:0;padding:13px 15px}
.aeMiniAd{font-size:16px;font-weight:600;line-height:1.25}
.aeMiniAlt{font-size:13px;color:var(--aeYazi2)}
/* Yıldız kartın sağ üst köşesinde — bağlantının ÜSTÜNDE bir kardeş. */
.aeMiniKap>.aeYildiz{position:absolute;top:0;right:0;z-index:2}

/* --- BÖLÜMLER ------------------------------------------------------
   ⚠️ IZGARA DEĞİL `columns` — TEK SAYFALI BÖLÜM YER KAPLAMASIN.
   Kullanıcı 09.09.2026: *"dashboard o kadar yer kaplamasına gerek yok
   ama dinamik olması lazım, rapor eklersek bu düzende devam etmeli."*
   `grid` kullanılsaydı satırın yüksekliğini en uzun kart belirler,
   Dashboard'ın yanında kocaman bir boşluk kalırdı. `columns` kartları
   yukarıdan aşağı paketler ve kolonları dengeler; bir bölüme sayfa
   eklenince ya da yeni bölüm açılınca düzen kendini yeniden kurar.
   KODDA HİÇBİR BÖLÜM ADI GEÇMİYOR.
   ⚠️ `column-count` DEĞİL `column-width` (`columns:300px 3`): mağaza
   rolünde gövde 560px'te kalıyor ama pencere geniş olabiliyor; medya
   sorgusu pencereyi ölçtüğü için 560px'e üç kolon sıkıştırırdı.
   Kolon sayısı kabın kendi eninden çıkıyor — 1200px'te 3, 760px'te 2,
   375px'te 1. */
.aeBolumler{columns:300px 3;column-gap:16px}
/* ⚠️ `display:inline-block;width:100%` şart: `break-inside:avoid` tek
   başına Chrome'da kartı bölünmekten kurtarmıyor, alt kenar boşluğu da
   kolon sonunda kayboluyor. */
.aeBolum{display:inline-block;width:100%;margin:0 0 18px;
  break-inside:avoid;-webkit-column-break-inside:avoid}

.aeListe{display:block;padding:8px}
/* ⚠️ SATIR BİR KAP: sol tarafı sayfaya giden BAĞLANTI, sağ ucu FAVORİ
   YILDIZI. `<button>` içine `<button>` konamaz — bu yüzden kardeşler. */
.aeSatirKap{display:flex;align-items:center;gap:2px;border-radius:10px}
.aeSatirKap:hover{background-color:var(--aeHover)}
/* ⚠️ `<a>` — satır 09.09.2026'da bağlantı oldu (orta tuşla yeni sekme).
   `text-decoration:none` şart, yoksa bütün liste altı çizili çıkar.
   ⚠️ `background` KISAYOLU YAZILMAZ, `background-color` yazılır: aynı
   öğe hızlı erişim kartında `.aeKapak` olarak da kullanılıyor ve
   kısayol fotoğrafı (background-image) sıfırlardı. */
.aeSatir{flex:1;min-width:0;display:flex;align-items:center;gap:12px;
  min-height:60px;padding:7px 10px;border-radius:10px;box-sizing:border-box;
  font:inherit;border:none;cursor:pointer;text-decoration:none;color:var(--aeYazi)}
.aeSatir:active{background-color:var(--aeHover)}
.aeRozet{flex:none;width:32px;height:32px;border-radius:8px;display:grid;
  place-items:center;font-size:13px;font-weight:700;
  background:var(--aeDolgu);border:1px solid var(--aeCizgi)}
.aeSatirIc{min-width:0;display:flex;flex-direction:column;gap:2px}
.aeSatirAd{font-size:16px;font-weight:600;line-height:1.25}
.aeSatirAcik{font-size:13px;line-height:1.3;color:var(--aeYazi2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Yıldız: dolmadan ÖNCE de görünür ama solgun — "burada bir şey var"
   demesi lazım, yoksa özellik keşfedilmez. Dolunca tam beyaz. */
.aeYildiz{flex:none;width:44px;height:44px;display:grid;place-items:center;
  border:none;background:none;padding:0;border-radius:10px;cursor:pointer;
  color:var(--aeSolgun)}
.aeYildiz svg{width:18px;height:18px;display:block}
/* ⚠️ ÇOK SAYFALI ALT GRUPTA YILDIZ YOK ama YERİ DURUYOR: yoksa o satırın
   yazısı komşularından 44 px daha uzun olur ve liste tırtıklı görünür. */
.aeYildizYok{pointer-events:none}
.aeYildiz:hover,.aeYildiz.dolu,.aeYildiz.dolu:hover{color:var(--aeYazi)}

/* ---- ÇOK SAYFALI ALT GRUP: AÇILIR SATIR (09.09.2026) ---------------
   Kullanıcı: *"ana menüde bir rapora tıkladığımda eğer alt raporu varsa
   onlar açılsın oradan seçeyim."* Önce satır ilk yetkili sayfaya
   gidiyordu ve içeriden başka rapora geçilemiyordu.
   Çekmecedeki üçüncü seviyeyle aynı davranış, aynı görsel dil.      */
/* ⚠️ ZEMİN SIFIRLAMASI BURADA, `.aeSatir`DA DEĞİL (09.09.2026 · kullanıcı
   ekran görüntüsüyle: *"saçma sapan bir şey olmuş burada, renkler falan"*).
   Açılır başlık bir `<button>`; tarayıcı düğmeye kendi varsayılan
   zeminini (**ButtonFace**, açık gri) basıyor ve üzerindeki beyaz yazıyla
   birlikte satır solgun bir kutuya dönüşüyordu.
   ⛔ DÜZELTMEYİ `.aeSatir`A YAZMA: o sınıf aynı anda `<a>`, `<button>` VE
   hızlı erişim KARTI (`.aeKapak.aeMini`) olarak kullanılıyor — oraya
   `background` yazılsaydı kartın lacivert zemini ve kampanya fotoğrafı
   silinirdi (`--aeFotoHero`). */
.aeAcilir{background-color:transparent;-webkit-appearance:none;appearance:none;
  text-align:left;color:var(--aeYazi)}
.aeAcilir:hover{background-color:var(--aeHover)}
.aeGrupBas .aeSatir{cursor:pointer}
.aeOk{flex:none;color:var(--aeSolgun);font-size:19px;line-height:1;
  transition:transform .16s ease}
.aeGrupBas.acik .aeOk{transform:rotate(90deg)}
/* Alt satırlar: girintili ve bir tık silik — hangi başlığa ait olduğu
   tek bakışta okunsun. Sol kılavuz çizgisi kırılımı işaretliyor.    */
.aeSatirKap.aeIc{padding-left:14px;position:relative}
.aeSatirKap.aeIc::before{content:"";position:absolute;left:26px;top:0;bottom:0;
  width:2px;background:var(--aeCizgi,rgba(255,255,255,.14))}
.aeSatirKap.aeIc .aeSatir{padding-left:26px}
.aeSatirKap.aeIc .aeRozet{width:26px;height:26px;font-size:11px}
.aeSatirKap.aeIc .aeSatirAd{font-size:14px;font-weight:600}

/* ---- TELEFONDA KARDEŞ RAPOR ŞERİDİ (09.09.2026) --------------------
   Kullanıcı: *"alt raporlarda aralarında geçiş yapabilmem lazım."*
   Masaüstünde bu geçiş `.seg.sub` satırında var; telefonda o satır
   çekmecenin içinde kalıyor. Şerit `core.js > shell()` içinde
   `.mnuKap`IN DIŞINA ekleniyor.
   ⚠️ MASAÜSTÜNDE GİZLİ — orada `.seg.sub` zaten duruyor, iki şerit üst
   üste gelmesin.                                                     */
.mnuKardes{display:none}

/* =====================================================================
   ANA EKRAN VİTRİNİ  ·  17.09.2026 (Claude Design "Blueprint Anamenu" → 3a)
   ---------------------------------------------------------------------
   Kaynak: `Claude/Ana Menü/Blueprint Anamenu.dc.html` · 3a Vitrin.
   Tam genişlik banner (300 px) + poster kart ızgarası (dar ekranda 3,
   büyük monitörde 5 sütun): her kartın üstünde pastel zeminli mini görsel
   (veri ya da ikon), altında YALNIZ ad. Tasarımın oklch pastelleri HEX'e çevrildi (eski Android WebView).
   ⚠️ Her kartın rengi TOKEN (`--avZ` zemin · `--avV` vurgu · `--avY` yazı),
   koyu temada karşılığı aşağıda — kural gövdesine çıplak hex yazılmaz.
   ⚠️ Tasarımın fontları (Instrument Sans/Serif, IBM Plex Mono) DIŞARIDAN
   ÇEKİLMEZ (CSP + dış bağımlılık kuralı); uygulamanın fontu kullanılır,
   "mono" etiketler sistem monospace'i.
   ===================================================================== */
.aeEkran{
  --avKart:#ffffff; --avParlak:#ffffff; --avAdY:#17150f; --avSilik:#6b665d; --avCizgi:#e6e4df;
  --avArti:#1b7d4c; --avEksi:#b3261e; --avSif:#9a6a12;
  /* kart paletleri: zemin · vurgu · yazı */
  --avZ-canli:#e8f0fc; --avV-canli:#2f6fd6; --avY-canli:#173a73;
  --avZ-pbi:#ecebfb;   --avV-pbi:#5b50d6;   --avY-pbi:#2e2a73;
  --avZ-hedef:#e5f4ec; --avV-hedef:#1f8a55; --avY-hedef:#0f4a2c;
  --avZ-magaza:#e3f3f3;--avV-magaza:#16807f;--avY-magaza:#0b4645;
  --avZ-firsat:#fbf0dc;--avV-firsat:#c07a12;--avY-firsat:#6a420a;
  --avZ-sezon:#fcebe3; --avV-sezon:#cf5a2c; --avY-sezon:#6f2c12;
  --avZ-best:#e9edf3;  --avV-best:#1b2c4f;  --avY-best:#1b2c4f;
  --avZ-hiz:#fde9e7;   --avV-hiz:#d0413a;   --avY-hiz:#6d1d19;
  --avZ-dash:#1b2c4f;  --avV-dash:#8fb0e8;  --avY-dash:#ffffff;
  --avZ-ai:#2d3585;    --avV-ai:#ffffff;    --avY-ai:#9fe6da;   /* 30.09.2026 2. tur (9 çizimden 1): SOHBET BALONU + kıvılcım, zemin LACİVERT→MOR GEÇİŞ (--avG-ai), beyaz balon (--avV), mint kıvılcım (--avY). Düz lacivert Dashboard ile ikiz duruyordu */
  --avG-ai:linear-gradient(135deg,#1b2c4f 0%,#3a3a9e 58%,#6a4fd8 100%);
  --avZ-fr:#f6eedf;    --avV-fr:#b4782a;    --avY-fr:#5b3a0f;   /* franchise: kum/çöl (29.09.2026) */
  --avZ-brik:#fbf5d8;  --avV-brik:#a88714;  --avY-brik:#5a480a;
  --avZ-check:#eaf5df; --avV-check:#4f8a1f;  --avY-check:#2a4b0f;
  --avZ-kalite:#f1efe9;--avV-kalite:#6b665d; --avY-kalite:#2f2c26;
  --avZ-admin:#eceff3; --avV-admin:#4a5a70;  --avY-admin:#243142;
  --avZ-diger:#eef1f6; --avV-diger:#2e4a7d;  --avY-diger:#1b2c4f
}
:root[data-theme="dark"] .aeEkran{
  --avKart:#151e2c; --avParlak:#eef3fa; --avAdY:#eef3fa; --avSilik:#a3b0c2; --avCizgi:#2b374a;
  --avArti:#4ec27f; --avEksi:#ef8b83; --avSif:#e3b04b;
  --avZ-canli:#17263f; --avV-canli:#7ea6e0; --avY-canli:#dbe7fa;
  --avZ-pbi:#1f1d3d;   --avV-pbi:#a49cf0;   --avY-pbi:#e3e0fb;
  --avZ-hedef:#132c22; --avV-hedef:#5fcf95; --avY-hedef:#d6f2e3;
  --avZ-magaza:#112b2c;--avV-magaza:#5cc7c5;--avY-magaza:#d3f0f0;
  --avZ-firsat:#2e2410;--avV-firsat:#e9b659;--avY-firsat:#f7e7c6;
  --avZ-sezon:#321d14; --avV-sezon:#f0936a; --avY-sezon:#f8ddd0;
  --avZ-best:#18222f;  --avV-best:#8fb0e8;  --avY-best:#dbe6f5;
  --avZ-hiz:#331a18;   --avV-hiz:#f08a82;   --avY-hiz:#f9d8d5;
  --avZ-dash:#0e1a30;  --avV-dash:#8fb0e8;  --avY-dash:#ffffff;
  --avZ-ai:#232465;    --avV-ai:#eef0ff;    --avY-ai:#8fdccf;
  --avG-ai:linear-gradient(135deg,#0f1a2f 0%,#262670 58%,#48379f 100%);
  --avZ-fr:#2a2112;    --avV-fr:#e0b068;    --avY-fr:#f5e6c8;
  --avZ-brik:#2c2610;  --avV-brik:#e2c552;  --avY-brik:#f6edc4;
  --avZ-check:#1c2a12; --avV-check:#9ad05f; --avY-check:#e2f1d2;
  --avZ-kalite:#24221e;--avV-kalite:#c9c2b4;--avY-kalite:#efece5;
  --avZ-admin:#1c232d; --avV-admin:#a9b7c9; --avY-admin:#e3e9f1;
  --avZ-diger:#1a2434; --avV-diger:#8fb0e8; --avY-diger:#dbe6f5
}
/* anahtar → palet (yeni bölüm `diger` paletine düşer) */
.avKart{--avZ:var(--avZ-diger);--avV:var(--avV-diger);--avY:var(--avY-diger)}
.avR-canli{--avZ:var(--avZ-canli);--avV:var(--avV-canli);--avY:var(--avY-canli)}
.avR-pbi{--avZ:var(--avZ-pbi);--avV:var(--avV-pbi);--avY:var(--avY-pbi)}
.avR-hedef{--avZ:var(--avZ-hedef);--avV:var(--avV-hedef);--avY:var(--avY-hedef)}
.avR-magaza{--avZ:var(--avZ-magaza);--avV:var(--avV-magaza);--avY:var(--avY-magaza)}
.avR-firsat{--avZ:var(--avZ-firsat);--avV:var(--avV-firsat);--avY:var(--avY-firsat)}
.avR-sezonsallik{--avZ:var(--avZ-sezon);--avV:var(--avV-sezon);--avY:var(--avY-sezon)}
.avR-bestseller{--avZ:var(--avZ-best);--avV:var(--avV-best);--avY:var(--avY-best)}
.avR-satishizi{--avZ:var(--avZ-hiz);--avV:var(--avV-hiz);--avY:var(--avY-hiz)}
.avR-dashboard{--avZ:var(--avZ-dash);--avV:var(--avV-dash);--avY:var(--avY-dash)}
.avR-asistan{--avZ:var(--avZ-ai);--avV:var(--avV-ai);--avY:var(--avY-ai)}
.avR-asistan .avPoster{background-image:var(--avG-ai)}
/* AI Asistan: balonda yazıyor gibi zıplayan noktalar, parlayan kıvılcım */
.avAiNk{animation:avAiNk 1.2s ease-in-out infinite}
@keyframes avAiNk{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.avAiKiv{transform-box:fill-box;transform-origin:center;animation:avAiKiv 2.4s ease-in-out infinite}
@keyframes avAiKiv{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.6}}
@media (prefers-reduced-motion:reduce){.avAiNk,.avAiKiv{animation:none}}
.avR-franchise{--avZ:var(--avZ-fr);--avV:var(--avV-fr);--avY:var(--avY-fr)}
.avR-brik{--avZ:var(--avZ-brik);--avV:var(--avV-brik);--avY:var(--avY-brik)}
.avR-checklist{--avZ:var(--avZ-check);--avV:var(--avV-check);--avY:var(--avY-check)}
.avR-tedarik{--avZ:var(--avZ-kalite);--avV:var(--avV-kalite);--avY:var(--avY-kalite)}
.avR-admin{--avZ:var(--avZ-admin);--avV:var(--avV-admin);--avY:var(--avY-admin)}

/* --- HERO: tam genişlik, 300 px (kullanıcı: "bannerımızı büyütelim biraz").
   Yazılar sağda kalır (model solda — 09.09.2026 kuralı). --- */
.aeEkran .avHero{min-height:300px;margin-bottom:24px;border-radius:14px}

/* --- IZGARA — kolon kabın %18'i, en az 180 px: ~700 px'lik gövdede 3 kart,
   büyük monitörde 5 (kullanıcı: "büyük monitörlerde 4 veya 5 box
   görebiliriz"). Poster yüksekliği ENİNE ORANLI (16:11, 140-220 px). --- */
/* BÜYÜTÜLDÜ (kullanıcı 17.09.2026 2. tur: *"bannera göre alttaki boxlar çok
   küçük kaldı, boxları büyütelim ama içerikleri de aynı şekilde"*):
   kolon kabın %23'ü → geniş ekranda 4 kart, dar gövdede 3. */
.avIzgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(200px,23%),1fr));gap:24px 18px;margin-top:4px}
.avKart{display:flex;flex-direction:column;gap:9px;min-width:0}
.avPoster{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;
  aspect-ratio:16/11;min-height:140px;max-height:300px;container-type:inline-size;
  border-radius:14px;padding:12px;overflow:hidden;text-decoration:none;min-width:0;
  background-color:var(--avZ);color:var(--avY);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--avV) 10%,transparent);
  transition:transform .18s ease,box-shadow .18s ease}
.avPoster:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--avV) 22%,transparent),0 12px 26px rgba(15,28,55,.13)}
.avPoster:focus-visible{outline:3px solid var(--avV);outline-offset:3px}
/* ⛔ BAŞLIK KISALTILMAZ — "…" yok, sığmazsa alt satıra iner (kullanıcı). */
.avAd{padding:0 2px;font-size:14.5px;font-weight:650;letter-spacing:-.01em;color:var(--avAdY);
  text-decoration:none;line-height:1.3;overflow-wrap:anywhere}
.avAd:hover{color:var(--avV)}

/* --- İKON: iki tonlu (`d` yüzeyleri vurgunun açık tonu) --- */
.avIkonKap{flex:1;width:100%;min-height:0;display:grid;place-items:center;color:var(--avV);overflow:hidden}
.avIkon{width:62%;max-width:112px;height:auto;max-height:100%}
.avIkon .d{fill:color-mix(in srgb,currentColor 16%,transparent)}
/* Kalite Kontrol ikonu: büyütecin camı kartın zeminini gösterir. */
.avMercek{fill:var(--avZ)}
.avHarf{font-size:56px;font-weight:700;color:var(--avV);line-height:1}
.avRozetZ{fill:var(--avEksi)}
.avRozetN{fill:var(--avParlak)}
.avRozetY{fill:var(--avParlak);font-size:10px;font-weight:800;letter-spacing:.06em;font-family:inherit;stroke:none}
.avNabiz{animation:avNabiz 1.6s ease-in-out infinite}
@keyframes avNabiz{0%,100%{opacity:1}50%{opacity:.3}}
/* Asistan: kocaman AI */
.avAI{display:flex;align-items:flex-start;gap:4px;color:var(--avY)}
.avAI span{font-size:58px;font-weight:800;letter-spacing:-.06em;line-height:.9}
.avAI .avIkon{width:26px;color:var(--avV);margin-top:4px}
/* Dashboard: canlanan mini panel — çizgi kendini çizer, halka dolar, sütunlar yükselir */
.avDashAlan{opacity:.16;animation:avBelir 1s .5s ease both}
.avCizgi{stroke-dasharray:1;animation:avCiz 1.3s cubic-bezier(.4,0,.2,1) both}
@keyframes avCiz{from{stroke-dashoffset:1}}
@keyframes avBelir{from{opacity:0}}
.avHalkaDol{animation:avHalkaDol 1.2s .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes avHalkaDol{from{stroke-dasharray:0 100}}
.avDashBar{transform-box:fill-box;transform-origin:50% 100%;animation:avBarY .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes avBarY{from{transform:scaleY(0)}}
.avNabizHalka{transform-box:fill-box;transform-origin:center;animation:avNabizH 2s 1.3s ease-out infinite}
@keyframes avNabizH{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.avR-dashboard .avIkon{width:74%;max-width:136px}
/* Satış Hızı: yalnız gösterge, büyük; ibre süpürür */
.avR-satishizi .avIkon{width:82%;max-width:160px}
.avIbre{transform-box:view-box;transform-origin:60px 64px;animation:avIbre 1.4s cubic-bezier(.3,1.5,.5,1) both}
@keyframes avIbre{from{transform:rotate(-120deg)}}
/* Best Seller: kürsü */
.avR-bestseller .avIkon{width:70%;max-width:130px}
@keyframes avDon{to{transform:rotate(360deg)}}

/* --- VERİ ---
   ⚠️ KULLANICI KURALLARI (17.09.2026): *"verileri ortalayalım, dağınık
   olmasın, box dışına çıkmasın ASLA"* + *"... görmek istemiyorum, tam adını
   yaz"*. Her veri bloğu kartın ORTASINDA; ad ve rakam KISALTILMAZ, uzun ad
   iki satıra iner; poster `overflow:hidden`. Sığma ölçüldü (5 genişlik). */
.avVeri{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;min-height:0;min-width:0;width:100%;text-align:center;overflow:hidden}
.avVeri.avBekle{opacity:.45;animation:avBekle 1.6s ease-in-out infinite}
@keyframes avBekle{50%{opacity:.22}}
@media (prefers-reduced-motion:reduce){.avVeri.avBekle{animation:none}}
.avUstEt{display:flex;align-items:center;justify-content:center;gap:5px;max-width:100%;
  font-size:9px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--avV);line-height:1.2}
.avCanliNokta{flex:none;width:6px;height:6px;border-radius:50%;background:var(--avEksi);animation:avNabiz 1.6s ease-in-out infinite}
.avBy{font-size:10.5px;font-weight:750;white-space:nowrap;font-variant-numeric:tabular-nums}
.avBy.art{color:var(--avArti)}.avBy.azl{color:var(--avEksi)}.avBy.sif{color:var(--avSif)}
.avEt{font-size:9.5px;font-weight:650;opacity:.7;text-align:left}
/* Canlı: iki satır — etiket · rakam · büyüme */
.avIkili{display:flex;flex-direction:column;gap:6px;width:100%;min-width:0}
.avIkiliSat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;column-gap:6px;
  padding:5px 8px;border-radius:9px;background:color-mix(in srgb,var(--avV) 9%,transparent)}
.avBuyuk{font-size:17px;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;
  text-align:right;overflow-wrap:anywhere}
/* Power BI: cinsiyet · adet · büyüme */
.avCins{display:flex;flex-direction:column;gap:5px;width:100%;min-width:0}
.avCinsSat{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;column-gap:6px;align-items:baseline;
  padding:4px 8px;border-radius:8px;background:color-mix(in srgb,var(--avV) 9%,transparent)}
.avCinsAd{font-size:9.5px;font-weight:750;letter-spacing:.05em;text-align:left}
.avCinsNo{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.avCinsSat .avBy{text-align:right}
/* Hedef Takip: MAĞAZA RAPORUNDAKİ YARIM DAİRE GÖSTERGE (18.09.2026).
   Renk kart paletinden DEĞİL, raporun durum renklerinden gelir — kullanıcı
   oradaki göstergeyi istedi; kırmızı/sarı/yeşil anlam taşıyor. */
.avHgoKap{width:100%;max-width:196px;display:flex;flex-direction:column;align-items:center}
.avHgoSvg{width:100%;height:auto;overflow:visible}
.avHgoKusak{stroke:color-mix(in srgb,var(--avV) 20%,transparent)}
.avHgoYay{stroke:var(--avDurum,var(--avV));animation:avHgoDol 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes avHgoDol{from{stroke-dasharray:0 999}}
.avHgoRakam{font-size:38px;font-weight:800;fill:var(--avDurum,var(--avY));font-family:inherit}
.avHgoUc{font-size:12px;font-weight:600;fill:var(--avSilik);font-family:inherit}
.avHgo-iyi{--avDurum:var(--ok)}
.avHgo-orta{--avDurum:var(--warn)}
.avHgo-zayif{--avDurum:var(--no)}
/* Sıralı liste (Mağaza · Fırsat): TAM AD, gerekirse iki satır */
.avSira{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;width:100%;min-width:0}
.avSira li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;column-gap:6px;align-items:center;
  padding:3px 7px;border-radius:8px;background:color-mix(in srgb,var(--avV) 9%,transparent);
  font-size:10.5px;line-height:1.2;text-align:left}
.avSira b{font-size:10px;font-weight:800;color:var(--avV);text-align:center}
.avSira span{font-weight:600;overflow-wrap:anywhere}
.avSira em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
/* ⛔ RAKAM ASLA ALT SATIRA DÜŞMEZ (kullanıcı 21.09.2026: *"mobilde ana
   ekrandaki boxların içindeki rakamlar alt satırlara taşıyor, alt satıra
   düşmemesi lazım asla"*). Sebep `.avBuyuk{overflow-wrap:anywhere}` idi:
   telefonda iki kart yan yanayken "2.398.513 ₺" ortadan kırılıyordu.
   Artık rakamlar `nowrap`; sığmama ihtimaline karşı yazı boyu KARTIN
   enine bağlı (`.avPoster` ölçü kabı, `cqi` = kartın eninin %1'i) —
   geniş kartta eski boy, dar kartta orantılı küçülür, tabanın altına
   inmez. Satır aralıkları da daralır. Ad (mağaza/ürün) yine iki satıra
   inebilir; KIRILMAYAN yalnız rakam ve etiket. */
.avBuyuk{white-space:nowrap;overflow-wrap:normal;font-size:clamp(10.5px,7.4cqi,17px)}
.avCinsNo{font-size:clamp(9.5px,5.8cqi,13px)}
.avBy{font-size:clamp(8px,4.8cqi,10.5px)}
.avEt,.avCinsAd{white-space:nowrap;font-size:clamp(7.5px,4.4cqi,9.5px)}
.avSira li{font-size:clamp(8px,4.8cqi,10.5px)}
.avIkiliSat,.avCinsSat{column-gap:clamp(3px,2.2cqi,6px);padding-left:clamp(4px,3.2cqi,8px);padding-right:clamp(4px,3.2cqi,8px)}
.avCinsSat{grid-template-columns:minmax(0,1fr) auto auto}
.avUrunSira li{grid-template-columns:16px minmax(0,1fr) auto}
.avUrunSira .avUrun{width:16px;height:16px}
/* Sezonsallık: çeyrek sütunları + lejant */
.avCeyrek{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;height:62px;width:100%;align-items:end}
.avCeyrekK{display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;min-width:0}
.avCeyrekBar{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.avCeyrekBar i{display:block;width:38%;border-radius:3px 3px 0 0;min-height:2px}
.avCeyrekBar i.gy,.avLejant i.gy{background:var(--avV);opacity:.28}
.avCeyrekBar i.bu,.avLejant i.bu{background:var(--avV)}
.avCeyrekK span{font-size:9.5px;font-weight:750}
.avCeyrekK.simdi span{color:var(--avV)}
/* İçinde bulunulan çeyrek: sütunun üstü KESİK — veri yarım (18.09.2026). */
.avCeyrekK.simdi .avCeyrekBar i.bu{border-top:2px dashed var(--avKart);border-radius:0}
/* Henüz girilmemiş çeyrek: bu yıl sütunu KESİK ÇİZGİLİ BOŞ yer tutucu,
   sütun soluk — "satış az" değil "daha gelmedi" demek. Yazı YOK. */
.avCeyrekK.avSonra{opacity:.5}
.avCeyrekK.avSonra .avCeyrekBar i.bu{height:34%!important;background:none;
  border:1.5px dashed var(--avV);border-radius:3px 3px 0 0}
.avCeyrekK.avSonra span{font-style:italic}
.avLejant{display:flex;align-items:center;justify-content:center;gap:4px;font-size:9px;font-weight:650;opacity:.8}
.avLejant i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-left:6px}
.avLejant i:first-child{margin-left:0}
.avUrun{fill:var(--avV);stroke:none}
@media (prefers-reduced-motion:reduce){.avNabiz,.avCanliNokta,.avHalkaD,.avHalkaUc,.avDashAlan,.avCizgi,.avHalkaDol,.avDashBar,.avNabizHalka,.avIbre,.avHgoYay{animation:none}}

@media (max-width:760px){
  .aeEkran .avHero{min-height:190px;margin-bottom:16px}
}
/* İÇERİK KARTLA BİRLİKTE BÜYÜR — kart genişliğine göre (container query).
   Veri bloğu `zoom` ile orantılı büyür; ikonların px tavanı açılır.
   Desteklemeyen eski WebView'da içerik temel boyutta kalır, bozulmaz. */
@container (min-width:250px){
  .avVeri{zoom:1.18}
  .avIkon{max-width:136px}
  .avAI span{font-size:70px}.avAI .avIkon{width:30px}
  .avR-satishizi .avIkon{max-width:190px}
  .avR-dashboard .avIkon{max-width:165px}
  .avR-bestseller .avIkon{max-width:158px}
  .avHarf{font-size:66px}
}
@container (min-width:290px){
  .avVeri{zoom:1.32}
  .avHgoKap{max-width:214px}
  .avIkon{max-width:156px}
  .avAI span{font-size:80px}.avAI .avIkon{width:34px}
  .avR-satishizi .avIkon{max-width:220px}
  .avR-dashboard .avIkon{max-width:190px}
  .avR-bestseller .avIkon{max-width:180px}
  .avHarf{font-size:76px}
}
@container (min-width:350px){
  .avVeri{zoom:1.5}
  .avHgoKap{max-width:232px}
}
@media (max-width:480px){
  .avIzgara{grid-template-columns:1fr 1fr;gap:14px 10px}
  .avAd{font-size:13.5px}
}

/* ---- AYLIK: henüz başlamamış ay seçilemez (09.09.2026) -------------
   Kullanıcı: *"tüm yıla bastım, henüz girmediğimiz ayı dahil
   etmemeli."* Sunucu gelecek ayı zaten eliyordu ama ekran 12 ayın
   hepsini seçili gösteriyordu.                                      */
.ukKisayol button.ayIleri{opacity:.38;cursor:not-allowed}
.ukKisayol button.ayIleri:hover{background:var(--ukZemin);color:var(--ukSilik)}

/* =====================================================================
   DAR EKRAN — menü soldan, hesap sağdan
   ===================================================================== */
@media (max-width:760px){
  /* Kardeş rapor şeridi: yatay kaydırılabilir çipler, dokunma hedefi 38 px.
     Kaydırma çubuğu gizli — parmakla kaydırılıyor, fare zaten yok.   */
  .mnuKardes{display:flex;gap:6px;overflow-x:auto;padding:8px 0 10px;
    margin:0 0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mnuKardes::-webkit-scrollbar{display:none}
  .mnuKardes a{flex:0 0 auto;display:inline-flex;align-items:center;
    min-height:38px;padding:0 14px;border-radius:999px;font:inherit;
    font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;
    color:var(--ink2);background:var(--surface);border:1px solid var(--line)}
  .mnuKardes a.on{background:var(--accent);color:var(--on-accent);
    border-color:var(--accent)}
  .top{padding:9px 0;gap:9px}
  .mnuAc,.mnuSagAc{display:grid;place-items:center;flex:none;width:40px;height:40px;
    line-height:1;cursor:pointer;color:var(--ink);
    border:1px solid var(--line);background:var(--surface);border-radius:10px}
  .mnuAc{font-size:20px}
  .mnuSagAc{font-size:13px;font-weight:700;letter-spacing:.3px;
    background:var(--accent-soft);color:var(--accent);border-color:transparent}
  .mnuEkranAd{display:block;flex:1;min-width:0;font-size:14px;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
  /* Dar ekranda yalnız ikon — ekran adına yer kalsın. Dokunma hedefi
     öteki üst çubuk düğmeleriyle aynı: 40px. */
  .topSol{display:contents}
  .mnuEv{width:40px;height:40px;padding:0;justify-content:center;
    border-radius:10px}
  .mnuEv .mnuEvYazi{display:none}
  .mnuEv .tbSvg{width:19px;height:19px}
  /* Marka dar ekranda yalnız logo — ad yeri ekran adına bırakılıyor */
  .top .brand b{display:none}

  /* --- İki panel --- */
  .mnuKap,.mnuSag{display:none;position:fixed;inset:0;z-index:60;overflow-y:auto;
    background:color-mix(in srgb, #000 46%, transparent);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  body.mnuAcik .mnuKap,body.mnuSagAcik .mnuSag{display:block}
  body.mnuAcik,body.mnuSagAcik{overflow:hidden}
  .mnuBas{display:flex;align-items:center;justify-content:space-between;
    background:var(--surface);padding:14px 16px 10px;border-bottom:1px solid var(--line2)}
  .mnuBas b{font-size:15px;font-weight:650}
  .mnuKapat{width:40px;height:40px;font-size:17px;line-height:1;cursor:pointer;
    border:none;background:none;color:var(--ink2);border-radius:9px}

  /* ⚠️ `.seg` satırları çekmecede GİZLİ — yerini iki seviyeli liste aldı.
     `.seg` bölüme dokunulduğu an `render()` çağırıyor; telefonda bu
     "tıkladım, rapor açıldı" demek oluyordu (kullanıcı 07.09.2026). */
  .mnuKap .seg{display:none}
  .mnuListe{display:block;background:var(--surface);padding:6px 8px 14px;
    border-radius:0 0 16px 16px}

  /* --- ÜÇ SEVİYE, üçü de birbirinden AYRIŞIR (07.09.2026) ---
     Kullanıcı: *"bi tık daha başlıklardan ayrışmalı alt başlıklar,
     ona dikkat edelim."* Ayrım tek bir şeyle değil ÜÇ şeyle birden
     yapılıyor — telefonda tek sinyal yetmiyor:
       seviye 1 (bölüm)      15,5 / 700 · koyu · VERSAL değil · ok var
       seviye 2 (alt grup)   14,5 / 650 · lacivert · ok var · girintili
       seviye 3 (sayfa)      14   / 450 · ikincil renk · oksuz
     Ayrıca her seviyede sol kılavuz çizgisi bir tık daha soluk. */
  /* ⚠️ İkisi de artık `<a>` olabiliyor — `text-decoration:none` şart. */
  .mnuGrup,.mnuSayfa{text-decoration:none;display:flex;align-items:center;gap:8px;width:100%;
    text-align:left;font:inherit;cursor:pointer;border:none;background:none;
    color:var(--ink);border-radius:10px;padding:12px}
  .mnuGrup{font-size:15.5px;font-weight:700;min-height:50px;justify-content:space-between;
    letter-spacing:-.1px}
  .mnuGrup:active,.mnuSayfa:active{background:var(--surface2)}
  .mnuOk{flex:none;color:var(--muted);font-size:18px;line-height:1;transition:transform .15s}
  /* ⚠️ `>` ŞART. Torun seçici olsaydı dıştaki bölüm açılınca içindeki
     KAPALI alt grup da açılır, "ana başlıklar olsun sadece" kuralı
     sessizce bozulurdu. */
  .mnuBolum.acik > .mnuGrup .mnuOk{transform:rotate(90deg)}
  .mnuIc{display:none;padding:0 0 6px 8px;
    border-left:2px solid var(--line);margin:2px 0 6px 16px}
  .mnuBolum.acik > .mnuIc{display:block}
  .mnuSayfa{font-size:14px;font-weight:450;min-height:44px;color:var(--ink2)}
  .mnuSayfa.sv2{font-size:13.5px;color:var(--muted-aa,var(--muted))}
  /* Seviye 2: alt grup başlığı — sayfadan da bölümden de farklı */
  .mnuAltGrup{font-size:14.5px;font-weight:650;min-height:46px;color:var(--accent)}
  .mnuAlt > .mnuIc{border-left-color:var(--line2);margin-left:12px}
  .mnuGrup.on,.mnuSayfa.on{background:var(--accent-soft);color:var(--accent);font-weight:700}
  .mnuAltBas{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
    color:var(--muted-aa,var(--muted));padding:9px 12px 3px}

  /* --- Sağ panel: hesap --- */
  .mnuSag .topsag{display:block;background:var(--surface);
    padding:4px 8px 14px;border-radius:0 0 16px 16px}
  .mnuSag .who{display:block;text-align:left;font-size:14px;color:var(--ink);
    padding:8px 12px 12px;border-bottom:1px solid var(--line2);margin-bottom:6px}
  .mnuSag .who span{font-size:12.5px;color:var(--muted-aa,var(--muted))}
  /* ⚠️ İKON DEĞİL ETİKET. Dar ekranda dört düğme ikona çevrilmişti;
     kullanıcı 07.09.2026: "ne işe yaradığını anlamak zor, çıkış tuşunun
     ikonu görünmüyor." Panelde yer bol — yazı geri geldi, ikon yalnız
     solda küçük bir işaret. */
  .mnuSag .topbtn{display:block}
  .mnuSag .tbTema .tbYazi{display:block}
  .mnuSag .topbtn .link{display:flex;align-items:center;gap:11px;width:100%;
    text-align:left;font-size:15px;min-height:48px;padding:12px;border-radius:10px;
    color:var(--ink)}
  .mnuSag .topbtn .link:active{background:var(--surface2)}
  /* ⚠️ `order:-1` — ikon DOM'da etiketten SONRA geliyor (tema düğmesinde
     ise önce). Sıra CSS'te düzeltiliyor ki dört satırın da ikonu solda
     hizalı dursun; markup'ta düzeltmek dört düğmeyi birden değiştirirdi. */
  .mnuSag .tbIkon{display:grid;place-items:center;flex:none;order:-1;
    width:26px;height:26px;
    border-radius:7px;background:var(--accent-soft);color:var(--accent)}
  .mnuSag .tbSvg{width:15px;height:15px}
  .mnuSag #logout{color:var(--no)}
  .mnuSag #logout .tbIkon{background:var(--no-soft);color:var(--no)}

  /* --- Ana ekran dar ekranda (tasarımın 375×812 çerçevesi) ---
     ⚠️ `.aeBolumler` BURADA GEÇMİYOR: `columns:300px 3` kolon sayısını
     kabın kendi eninden hesaplıyor, 343px'lik telefonda kendiliğinden
     tek kolona düşüyor. Medya sorgusu yazmak gereksiz tekrar olurdu. */
  .aeUst{gap:12px;margin-bottom:18px}
  /* ⚠️ TELEFONDA YAN KARARTMA NEREDEYSE TAM GENİŞLİK.
     343 px'lik kartta %62'lik bir geçiş yazı kutusunun solunu açıkta
     bırakıyordu; parlak bir kampanya görselinde yazı orada okunmaz. */
  /* Telefonda kart 2,3:1 — dışarıda kalan bant çok az, ortalamak yeter. */
  .aeHero{min-height:150px;flex-basis:100%;--aeYanBit:96%;--aeHeroKonum:50% 30%}
  .aeHeroMarka{margin:12px 15px 0;height:12px}
  .aeHeroYazi{padding:0 15px 13px;gap:4px;max-width:80%}
  .aeSelam{font-size:21px}
  /* “8 bölüm · 30 sayfa” telefonda ikinci satıra taşıp tek başına
     “sayfa” yazıyordu; tarih zaten yeterli. */
  .aeKapsam{display:none}
  .aeKutular{flex-basis:100%;gap:8px}
  .aeKutu{border-radius:10px;padding:10px 12px}
  .aeDeger{font-size:23px}
  .aeHizli,.aeBolum{margin-bottom:14px}
  .aeMiniIzgara{grid-template-columns:1fr 1fr;gap:8px}
  .aeMiniKap .aeMini{min-height:80px;border-radius:10px}
  .aeMiniIc{padding:10px 12px}
  /* Telefonda kartta YALNIZ AD kalır — 167px'lik kartta bölüm adı
     ikinci satırı doldurup adı kırpıyordu (tasarım da böyle). */
  .aeMiniAlt{display:none}
  /* Bölüm başlığı kaydırırken tepede kalır: telefonda uygulamanın üst
     çubuğu `position:static` (app.css > pointer:coarse), yani `top:0`
     gerçekten ekranın tepesi. */
  .aeBolumBas{position:sticky;top:0;z-index:2;background:var(--bg);padding:6px 2px}
  .aeListe{padding:6px;border-radius:12px}
  .aeSatir{gap:10px;padding:6px 8px;border-radius:8px}
  .aeRozet{width:30px;height:30px;font-size:12px}
}
@media (pointer:coarse){
  .aeSatir{min-height:62px}
  .aeYildiz{width:46px;height:46px}
  .mnuAc,.mnuSagAc,.mnuKapat{min-height:44px;min-width:44px}
}

/* =====================================================================
   FIRSAT ÜRÜNLER  ·  07.09.2026
   ---------------------------------------------------------------------
   Ekranın kendi stili YOK denecek kadar az: beş liste `app.css`teki
   `.plist / .prow / .pnum` kalıbını aynen kullanıyor — mağaza raporuyla
   BİREBİR aynı görünsün diye. Buradaki tek iş başlık + iki seçici.

   TİP ÖLÇEĞİ — satır içi `font-size` YAZILMAZ:
     başlık 19 / 650      ·  seçici etiketi 11,5 / 700 · VERSAL
   ===================================================================== */
.fuBas{margin:2px 0 14px}
.fuBas h2{font-size:19px;font-weight:650;margin:0;letter-spacing:-.2px}
.fuBas .small{margin-top:2px}
/* Seçiciler: geniş ekranda yan yana, telefonda alt alta ve TAM GENİŞLİK
   (dar ekranda iki açılır kutu yan yana sıkışınca mağaza adı kırpılıyordu) */
.fuUst{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.fuAlan{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 220px}
.fuAlan>span{font-size:11.5px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--muted-aa,var(--muted))}
.fuAlan select{width:100%;min-width:0}
@media (max-width:760px){
  .fuAlan{flex:1 1 100%}
  .fuBas h2{font-size:18px}
}

/* ===== KİMLİĞE BÜRÜNME ŞERİDİ (07.09.2026) =========================
   Ekranın en üstü, `core.js > burunSerit()`. Kapatma düğmesi YOK —
   bkz. o fonksiyonun başındaki not.
   Tip ölçeği: rozet 10,5/800 · metin 13 · düğme 12,5/650.
   ⚠️ SABİT RENK YAZILMADI: hepsi `--warn*` tokenı, dört blokta da
   tanımlı (aydınlık · karanlık · yazdırma) — ev kuralı. */
/* ⚠️ AYDINLIKTA `--warn` KOYULTULUR — ölçüldü 07.09.2026, ev tokenı
   (#b9791c) bu şeritte AA'nın ALTINDA kalıyordu: rozetteki beyaz yazı
   3,61 · "salt-okunur" yazısı soft zeminde 3,33 (eşik 4,5).
   `#9a5f08` ikisini birden geçiriyor: **5,23** ve **4,82**.
   Aynı ton beyaz zeminde 5,23 · `--surface2` üzerinde 4,92.
   ⚠️ `:root` DEĞİŞTİRİLMEZ (kalite raporundaki `.krRapor` çözümünün
   aynısı) — öteki ekranlardaki amber olduğu gibi kalsın.
   ⚠️ KARANLIKTA GERİ ALINIR: orada `--warn` koyu zemin üstünde AÇIK
   olmak zorunda (ölçüldü: 8,67 / 6,85 — zaten AA üstü). Koyultmak
   karanlık temayı ters yöne bozardı. */
.brnSerit{--warn:#9a5f08;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--warn-soft);border:1px solid var(--warn-line);
  border-left:4px solid var(--warn);border-radius:10px;
  padding:8px 12px;margin:0 0 10px}
:root[data-theme="dark"] .brnSerit{--warn:#e0a94a}
.brnRozet{font-size:10.5px;font-weight:800;letter-spacing:.06em;
  color:var(--on-accent);background:var(--warn);border-radius:999px;
  padding:3px 8px;white-space:nowrap}
.brnMetin{font-size:13px;color:var(--ink);flex:1 1 240px;min-width:0}
.brnSalt{font-weight:700;color:var(--warn)}
.brnDon{font-size:12.5px;font-weight:650;cursor:pointer;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--warn-line);border-radius:8px;
  padding:6px 12px;min-height:36px;white-space:nowrap}
.brnDon:hover{background:var(--surface2)}
@media (max-width:760px){
  /* Telefonda dokunma hedefi 44 px; şerit tek satıra sığmıyor, sarar */
  .brnDon{min-height:44px;flex:1 1 100%}
  .brnMetin{flex:1 1 100%}
}
/* Kağıda şerit basılmaz — rapor çıktısında yeri yok */
@media print{ .brnSerit{display:none} }

/* ===== BÜRÜNME SEÇİM PENCERESİ (15.09.2026) ========================
   `core.js > burunSecAc()`. Giriş noktası Yönetim'den sağ hesap
   paneline taşındı — bkz. o fonksiyonun başındaki not.
   TİP ÖLÇEĞİ — satır içi `font-size` YAZILMAZ:
     satır adı 14,5 / 600  ·  alt satır 12 / 450  ·  boş/hata 13
   ⚠️ SABİT RENK YOK: hepsi ev tokenı, karanlık tema kendiliğinden
   doğru tarafa düşüyor. Seçili satır `--accent-soft` zemin +
   `--accent` kenarlık; yazı `--ink` kalıyor (vurgu zemini değil). */
.brnDlg .dlg-b{display:flex;flex-direction:column;gap:10px;min-height:0}
.brnAra{width:100%;box-sizing:border-box}
.brnListe{display:flex;flex-direction:column;gap:4px;
  max-height:min(calc(52vh / var(--ekranZ,1)),420px);overflow:auto;
  border:1px solid var(--line);border-radius:8px;padding:4px;
  background:var(--surface)}
.brnSatir{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  width:100%;text-align:left;cursor:pointer;
  padding:8px 10px;min-height:44px;border-radius:6px;
  border:1px solid transparent;background:transparent;color:var(--ink)}
.brnSatir:hover{background:var(--surface2)}
.brnSatir.on{background:var(--accent-soft);border-color:var(--accent)}
.brnSatirAd{font-size:14.5px;font-weight:600;line-height:1.25}
.brnSatirAlt{font-size:12px;font-weight:450;color:var(--muted-aa,var(--muted))}
.brnBos{padding:18px 10px;text-align:center;font-size:13px;
  color:var(--muted-aa,var(--muted))}
.brnHata{font-size:13px;color:var(--no);flex:0 1 auto;min-width:0}
@media (max-width:760px){
  .brnListe{max-height:min(calc(46vh / var(--ekranZ,1)),360px)}
  .brnSatir{min-height:48px}
}
/* Ekran boyutu penceresi (core.js > olcekSecAc, 17.09.2026) — satırlar
   `.brnSatir`in aynısı; pencereye sığmayan kademe soluk ve basılamaz. */
.olcListe .brnSatir:disabled{opacity:.5;cursor:not-allowed;background:transparent}

/* =====================================================================
   SATIŞ HIZI · RPT   (`.sh*` — 08.09.2026)
   Hiçbir renk doğrudan hex DEĞİL: hepsi app.css'teki tokenlardan geliyor,
   böylece karanlık tema ve yazdırma kendiliğinden doğru çalışıyor
   (CLAUDE.md > "KOYU TEMA — HER RAPORDA DÜŞÜNÜLECEK").
   ⚠️ Yazı rengi ile zemin AYRI token: vurgu zeminli her kuralda
   `--on-accent` kullanılıyor, `#fff` değil.
   ===================================================================== */
.shEkran{display:flex;flex-direction:column;gap:14px;position:relative}

.shBaslik{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.shH{margin:0;font-size:1.18rem;color:var(--ink)}
.shAltBaslik{margin-top:4px;color:var(--muted-aa);font-size:.86rem;max-width:62ch;line-height:1.5}

.shCins{display:flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden;flex:0 0 auto}
.shCinsD{border:0;background:var(--surface);color:var(--ink2);padding:8px 18px;
  font:inherit;font-size:.9rem;cursor:pointer}
.shCinsD+.shCinsD{border-left:1px solid var(--line2)}
.shCinsD:hover{background:var(--surface2)}
.shCinsD.sec{background:var(--accent);color:var(--on-accent)}

.shArac{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.shBosluk{flex:1 1 auto}
/* ⚠️ `width:auto` ŞART — app.css:171 bütün input/select'lere `width:100%`
   veriyor. Onsuz araç çubuğundaki arama ve hafta kutusu tam genişliğe
   yayılıp düğmeleri alt satıra itiyordu (08.09.2026'da önizlemede
   görüldü). Pencere içinde tam genişlik İSTİYORUZ; oradaki kural
   `.shAlan .shGirdi` ile ayrıca yazılı.                              */
.shGirdi{border:1px solid var(--line2);background:var(--surface);color:var(--ink);
  border-radius:8px;padding:8px 11px;font:inherit;font-size:.9rem;width:auto}
.shGirdi:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.shArac .shGirdi{flex:0 1 auto}
.shAraGirdi{flex:0 1 260px;min-width:170px}
.shArac select.shGirdi{max-width:260px}
.shDugme{border:1px solid var(--line2);background:var(--surface);color:var(--ink);
  border-radius:8px;padding:8px 14px;font:inherit;font-size:.9rem;cursor:pointer}
.shDugme:hover{background:var(--surface2)}
.shDugme:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.shBirincil{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.shBirincil:hover{filter:brightness(1.06);background:var(--accent)}
.shDugme[disabled]{opacity:.55;cursor:default}

.shOzet{display:flex;gap:26px;padding:2px 2px 0}
.shOzetKalem{display:flex;align-items:baseline;gap:6px}
.shOzetSayi{font-size:1.15rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.shOzetAd{color:var(--muted-aa);font-size:.82rem}
.shSonuk .shOzetSayi{color:var(--muted-aa);font-weight:500}

/* --- TABLO: ÇALIŞMA SAYFASI GÖRÜNÜMÜ ------------------------------------
   Kullanıcı 08.09.2026: *"ben böyle kısa kolonlar halinde görmek
   istemiyorum, birebir bizim Excel'de nasıl görüyorsak öyle."*
   Yani kart değil ÇİZELGE: her hücrenin kenarlığı var, satırlar sıkı,
   başlık kaydırırken yapışıyor, rakamlar sabit genişlikli.
   ⚠️ Zebra YOK — Excel'de de yok; ayrımı ızgara çizgisi yapıyor.     */
.shTabloSar{overflow:auto;max-height:calc(calc(100vh / var(--ekranZ,1)) - 300px);
  border:1px solid var(--line2);border-radius:6px;background:var(--surface)}
.shTablo{width:100%;border-collapse:separate;border-spacing:0;font-size:.86rem;
  font-variant-numeric:tabular-nums;table-layout:auto}
/* ⚠️ KOLON GENİŞLİĞİ İÇERİKTEN GELİR, ekrana bölünerek DEĞİL.
   Tablo `width:100%` iken tarayıcı boşluğu bütün kolonlara eşit
   dağıtıyor ve 1600px'lik ekranda MODEL kolonu 400px oluyordu —
   Excel'e hiç benzemiyordu (08.09.2026 önizlemede görüldü).
   Hile: içerikten büyümesi istenmeyen kolonlara `width:1%` +
   `nowrap` verilir, tarayıcı onları içeriğe kadar daraltır ve artan
   yeri `width:auto` olan TEK kolona (Açıklama) bırakır.            */
.shTablo th:not(.shEsner),.shTablo td:not(.shEsner){width:1%;white-space:nowrap}
.shTablo th.shEsner,.shTablo td.shEsner{width:auto}
.shTablo th{text-align:left;padding:7px 10px;background:var(--surface2);color:var(--ink2);
  font-weight:600;font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;
  border-bottom:1px solid var(--line2);border-right:1px solid var(--line);
  white-space:nowrap;position:sticky;top:0;z-index:2}
.shTablo td{padding:5px 10px;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);color:var(--ink);vertical-align:middle;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shTablo th:last-child,.shTablo td:last-child{border-right:0}
.shTablo tbody tr:last-child td{border-bottom:0}
.shTablo tbody tr:hover td{background:var(--accent-soft)}
/* Excel'deki gibi sola yapışan kolonlar: onay kutusu + MODEL.
   Onay kutusu 34px, MODEL onun hemen sağında başlar.               */
.shOnay{width:34px;text-align:center;padding-left:8px;padding-right:8px}
.shOnay input{width:auto;margin:0;cursor:pointer}   /* app.css:171 input'a %100 veriyor */
.shTablo th:nth-child(1),.shTablo td:nth-child(1){position:sticky;left:0;z-index:1;
  background:var(--surface)}
.shTablo th:nth-child(2),.shTablo td:nth-child(2){position:sticky;left:34px;z-index:1;
  background:var(--surface)}
.shTablo th:nth-child(1),.shTablo th:nth-child(2){z-index:3;background:var(--surface2)}
.shTablo tbody tr:hover td:nth-child(1),
.shTablo tbody tr:hover td:nth-child(2){background:var(--accent-soft)}
.shTablo tbody tr.shSecili td{background:var(--accent-soft)}
.shTablo tbody tr.shSecili td:nth-child(1),
.shTablo tbody tr.shSecili td:nth-child(2){background:var(--accent-soft)}

/* Seçim şeridi — seçim varken tablonun üstünde belirir */
.shSecSerit{display:flex;align-items:center;gap:12px;background:var(--accent-soft);
  color:var(--accent-ink);border:1px solid var(--line2);border-radius:8px;
  padding:9px 14px;font-size:.9rem}
.shTehlikeDolu{background:var(--no);border-color:var(--no);color:var(--on-accent)}
.shTehlikeDolu:hover{filter:brightness(1.06);background:var(--no)}
.shSiralanir{cursor:pointer;user-select:none}
.shSiralanir:hover{color:var(--ink)}
.shSirali{color:var(--accent)}
.shModel{font-weight:600}
.shSayi{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.shTarih{white-space:nowrap}
.shAciklama{color:var(--muted-aa);font-size:.8rem}
.shIslemBas{width:1%}
.shIslem{white-space:nowrap;text-align:right}
.shMini{border:1px solid var(--line2);background:var(--surface);color:var(--ink2);
  border-radius:5px;padding:2px 8px;font:inherit;font-size:.74rem;cursor:pointer;margin-left:4px}
.shMini:hover{background:var(--surface2);color:var(--ink)}
.shTehlike:hover{background:var(--no-soft);border-color:var(--no-line);color:var(--no)}
.shBos{text-align:center;color:var(--muted-aa);padding:26px 12px}
.shCip{display:inline-block;background:var(--warn-soft);color:var(--warn);
  border:1px solid var(--warn-line);border-radius:999px;padding:1px 7px;font-size:.7rem;
  margin-left:6px;vertical-align:1px}

.shUyari{border-left:3px solid var(--warn);background:var(--warn-soft);color:var(--ink)}
.shUyariKucuk{background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:8px;
  padding:9px 12px;font-size:.82rem;color:var(--ink);line-height:1.55}

/* --- sürükle-bırak perdesi: ekranın tamamını kaplar, yalnız dosya
       sürüklenirken görünür (`.acik`) --------------------------------- */
.shBirak{position:absolute;inset:0;z-index:6;display:none;align-items:center;justify-content:center;
  background:var(--accent-soft);border:2px dashed var(--accent);border-radius:12px;
  pointer-events:none}
.shBirak.acik{display:flex}
.shBirakIc{text-align:center;padding:22px}
.shBirakBaslik{font-size:1.05rem;font-weight:600;color:var(--accent-ink)}
.shBirakAlt{margin-top:6px;color:var(--ink2);font-size:.84rem}
.shBirakAlt code{background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:0 4px;font-size:.9em}

/* --- pencere --- */
.shPerde{position:fixed;inset:0;z-index:60;background:rgba(8,14,22,.55);
  display:flex;align-items:center;justify-content:center;padding:18px}
.shPencere{background:var(--surface);border:1px solid var(--line2);border-radius:12px;
  padding:20px 22px;width:100%;max-width:420px;max-height:calc(90vh / var(--ekranZ,1));overflow-y:auto;
  overflow-x:hidden;   /* içerik taşarsa pencere yana kaymaz, içindeki kutu kaydırır */
  box-shadow:0 18px 44px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:11px}
.shPencere>*{min-width:0}
.shGenis{max-width:760px}
.shPBaslik{margin:0;font-size:1.05rem;color:var(--ink);display:flex;align-items:center;gap:9px}
.shPCins{font-size:.72rem;font-weight:600;background:var(--accent-soft);color:var(--accent-ink);
  border-radius:999px;padding:2px 9px}
.shAlan{display:flex;flex-direction:column;gap:4px;font-size:.84rem;color:var(--ink2)}
.shAlan .shGirdi{width:100%;box-sizing:border-box}
.shIsteğe{color:var(--muted-aa);font-weight:400}
.shOnizle{background:var(--accent-soft);color:var(--accent-ink);border-radius:8px;
  padding:8px 11px;font-size:.83rem;line-height:1.5;min-height:1px}
.shOnizle:empty{display:none}
.shHata{background:var(--no-soft);border:1px solid var(--no-line);color:var(--no);
  border-radius:8px;padding:9px 11px;font-size:.84rem;white-space:pre-wrap;line-height:1.5}
.shPDugmeler{display:flex;justify-content:flex-end;gap:8px;margin-top:3px}
.shDosyaAd{color:var(--ink2);font-size:.88rem}
/* Kullanıcı 08.09.2026: *"3 satır daha demesin mesela, kaydırarak
   görebileyim tümünü."* Artık satırlar KIRPILMIYOR; kutu kaydırıyor. */
.shOnizTablo{max-height:min(calc(46vh / var(--ekranZ,1)),340px);overflow:auto}
.shOk{color:var(--muted-aa)}
.shGun{color:var(--muted-aa);font-size:.76rem}
.shKuralNotu{background:var(--accent-soft);color:var(--accent-ink);border-radius:8px;
  padding:8px 11px;font-size:.82rem;line-height:1.5}
.shMod{border:1px solid var(--line);border-radius:10px;padding:10px 13px 12px;margin:0;
  display:flex;flex-direction:column;gap:9px}
.shMod legend{font-size:.78rem;color:var(--muted-aa);padding:0 5px}
.shModSecim{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--ink);
  cursor:pointer;line-height:1.45}
/* ⚠️ `width:auto` ŞART — app.css:171 BÜTÜN input'lara `width:100%` veriyor
   ve RADYO DÜĞMESİ de bir input. Onsuz her radyo pencerenin tamamını
   kaplıyor, etiket sağa taşıyor ve pencere yatay kayıyordu
   (08.09.2026, kullanıcı bildirdi: "burası sapıtmış, göremiyorum sağ
   tarafı falan"). Aynı tuzak araç çubuğunda da yaşandı.            */
.shModSecim input[type="radio"]{width:auto;flex:0 0 auto;margin:3px 0 0}
.shModSecim>span{flex:1 1 auto;min-width:0}
.shModAlt{color:var(--muted-aa);font-size:.8rem}

/* Dar ekran — hem RPT hem rapor bu bloğu paylaşır ------------------
   ⚠️ ÖLÇÜLMEDEN DEĞER YAZILMAZ. 08.09.2026'da 375px'te ölçüldü:
   araç çubuğu tek başına 170px yer kaplıyordu (arama, iki açılır
   liste, onay kutusu ve düğmenin her biri ayrı satıra düşüyordu),
   özet şeridi de sarıyordu; tabloya ekranın yarısı kalmıyordu.
   Şimdi iki açılır liste yan yana, özet iki sütunlu.               */
@media (max-width:760px){
  .shBaslik{flex-direction:column}
  .shArac{gap:7px}
  .shAraGirdi{min-width:0;flex:1 1 100%}
  /* İki açılır liste TEK satırda yan yana. `max-width` kaldırılmazsa
     260px'te takılıp yan yana sığmıyorlar.                         */
  .shArac select.shGirdi{flex:1 1 calc(50% - 4px);max-width:none;min-width:0}
  .shArac .shBosluk{display:none}
  /* Onay kutusu ile düğme AYNI satırda: düğme büyümezse ikisi
     yan yana sığıyor, aksi halde düğme satırı tek başına yiyordu. */
  .shArac .shDugme{flex:0 0 auto}
  .shArac .sbOnayEti{flex:1 1 auto;min-width:0;font-size:.82rem;line-height:1.2}
  .shOzet{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
  /* Sayı üstte, etiket altta: "sezon sonu tahmini S/T" yan yana
     dizildiğinde 375px'te iki satıra sarıyordu.                    */
  .shOzetKalem{flex-direction:column;align-items:flex-start;gap:1px}
  .shOzetSayi{font-size:1.05rem;line-height:1.2}
  .shOzetAd{font-size:.74rem;line-height:1.25}
  /* ⚠️ BAŞLIK VE HÜCRE BİRLİKTE GİZLENİR. Önce hücreler `.shAciklama`
     ile, başlıklardan biri de sıra numarasıyla gizleniyordu; iki hücre
     kaybolup bir başlık kalınca sütunlar KAYIYOR, "Not" başlığının
     altında termin tarihleri görünüyordu (08.09.2026 ölçüldü).
     Artık aynı sınıf ikisinde de var.                              */
  .shDarGizli{display:none}
  .shTablo{font-size:.85rem}
  .shIslem{text-align:left}
}


/* =====================================================================
   SATIŞ HIZI RAPORU  (`.sr*` — 08.09.2026)
   Tablo `.shTablo` stilini paylaşıyor (çalışma sayfası görünümü);
   burada yalnız rapora özel olanlar var. Renkler tokenlardan.
   ===================================================================== */
.srEkran{display:flex;flex-direction:column;gap:14px;position:relative;min-width:0}
/* ⚠️ `min-width:0` ŞART. Flex kutusunun çocuğu varsayılan olarak
   `min-width:auto` taşır ve içeriğinden küçülemez: 29 haftalık
   projeksiyonla tablo 2.100px'e çıkınca kabı da o kadar genişliyor,
   `overflow:auto` hiç devreye girmiyor ve SAYFANIN KENDİSİ yana
   kayıyordu (08.09.2026 önizlemede ölçüldü). Sıfırlanınca kaydırma
   tablonun içinde kalıyor, üst menü ve süzgeçler yerinde duruyor. */
.srTabloSar{max-height:calc(calc(100vh / var(--ekranZ,1)) - 260px);min-width:0;width:100%}

/* ⚠️ RENK SÜTUNUNUN SOL KONUMU ÖLÇÜLÜR. Ortak kural `left:34px`
   diyor — o 34px RPT'deki onay kutusunun eni. Raporda yapışan ikinci
   sütun RENK ve solunda MODEL (~120px) var; ölçülmezse RENK tam
   MODEL'in altında kalıyor ve yana kaydırınca kayboluyordu. Değer
   `srOlcu()` ile ölçülüp `--srSut2`ye yazılıyor.
   ⚠️ Başlık TEK SATIR (üstteki grup bandı kaldırıldı) — dikey yapışma
   ortak kuraldan (`top:0`) geliyor, `--srBaslik2` artık yok.       */
/* ⚠️ SÜTUN SIRASI: KATEGORİ · MODEL · RENK — kategori en solda ama
   YATAYDA YAPIŞMIYOR (kullanıcı 09.09.2026). Yapışanlar model ve renk;
   yana kaydırınca kategori onların altına giriyor, ürünün kimliği
   ekranda kalıyor.

   ⚠️ `position:static` YAZILMAZ — DİKEY yapışmayı da öldürür.
   Yazılmıştı ve KATEGORİ başlığı kaydırınca yukarı kaçıyordu; başlık
   satırının o hücresinde altındaki verinin (ör. "SWEATSHIRT") göründüğü
   ekran görüntüsüyle bildirildi (09.09.2026). Doğrusu: `sticky` kalsın,
   yalnız `left` verilmesin — yatay eksende serbest, dikeyde yapışık. */
/* ⚠️ SÜTUN NUMARALARI 09.09.2026'da BİR KAYDI. En sola Excel'inki gibi
   bir SEÇİM ÇUBUĞU geldi (`.srSecKol`), sıra artık:
     1 çubuk · 2 KATEGORİ · 3 MODEL · 4 RENK · 5 RPT …
   Yapışan sütunlar çubuk + model + renk; kategori yalnız DİKEYDE
   yapışık. MODEL çubuğun enine (`--srSecEn`), RENK de çubuk + model
   toplamına yapışıyor — ikisi de çizimden sonra ölçülüyor.        */
.srTablo th:nth-child(2){position:sticky;top:0;left:auto}
.srTablo td:nth-child(2){position:static;left:auto}
.srTablo tbody td:nth-child(3){position:sticky;left:var(--srSecEn, 34px);z-index:1;
  background:var(--surface)}
.srTablo thead th:nth-child(3){position:sticky;left:var(--srSecEn, 34px);z-index:3;
  background:var(--surface2)}
.srTablo tbody td:nth-child(4){position:sticky;
  left:calc(var(--srSecEn, 34px) + var(--srSut2, 120px));z-index:1;
  background:var(--surface)}
.srTablo thead th:nth-child(4){position:sticky;
  left:calc(var(--srSecEn, 34px) + var(--srSut2, 120px));
  z-index:3;background:var(--surface2)}
.srTablo tbody tr:hover td:nth-child(3),
.srTablo tbody tr:hover td:nth-child(4){background:var(--accent-soft)}
/* Dar ekranda modelin altına yazılan renk — geniş ekranda kendi
   sütunu var, orada gizli. */
.srSatirRenk{display:none}
.srHafta{text-align:right;font-size:.68rem !important;color:var(--muted-aa) !important}

/* --- GEÇMİŞ GÖRÜNÜMÜ (10.09.2026) ------------------------------------
   Kullanıcı: *"hafta hafta satışlar ve envanter gibi bir tablo."*
   Hafta kolonları ileri projeksiyon yerine GERÇEKLEŞENİ gösteriyor:
   üstte o haftanın satışı, altında hafta sonundaki envanter.
   ⚠️ Tip ölçeği bu bloğun içinde — satır içi `font-size` yazılmaz. */
.srGorunum{display:inline-flex;gap:0}
.srGorunum .srGorDug{border-radius:0;margin:0}
.srGorunum .srGorDug:first-child{border-radius:6px 0 0 6px}
.srGorunum .srGorDug:last-child{border-radius:0 6px 6px 0;margin-left:-1px}
/* Seçili görünüm: vurgu zemini + `--on-accent` (koyu temada beyaz
   yazı 2,5:1'e düşerdi — ev kuralı). */
.srGorunum .srGorDug[aria-pressed="true"]{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

.srHaftaGec{color:var(--accent) !important}
.srGecHucre{text-align:right;line-height:1.15;white-space:nowrap}
.srGecSatis{display:block;font-size:.78rem;font-weight:600;
  font-variant-numeric:tabular-nums}
/* İkincil satır: küçük punto silik yazıda `--muted` beyazda 3,89 —
   AA altı. Ev kuralı `--muted-aa`. */
.srGecEnv{display:block;font-size:.66rem;color:var(--muted-aa);
  font-variant-numeric:tabular-nums}
/* Satışı olmayan hafta SÖNÜK — kırmızı DEĞİL. `.srBitti` (kırmızı)
   projeksiyonda "stok tükendi" demek; geçmişte satış 0 olması stoğun
   bittiği anlamına gelmez, ikisi karıştırılmaz. */
.srGecSifir .srGecSatis{color:var(--muted-aa);font-weight:400}

/* --- TARİH İTİBARIYLA + TAHMİN SINAMASI (11.09.2026) ------------------
   Kullanıcı: *"farklı dönemlerin satış hızlarına bakabilmeliyim… bana
   yaz sezon sonu forecasti verebilir, ben de derim ki aa ilk başta hızlı
   başlamışız demek ki hızımız düşmüş."*
   ⚠️ Tip ölçeği bu blokta — satır içi `font-size` yazılmaz. */
.srTarihEt{display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;color:var(--muted-aa);white-space:nowrap}
.srTarihGir{width:auto;min-width:140px}
/* Çapa geçmişteyse alt başlıkta vurgulanır: hangi tarihe bakıldığı
   ekranın en üstünde okunmalı, yoksa eski rakam güncel sanılır. */
.srCapa{color:var(--warn);font-weight:700}

.srSapma{font-weight:600;font-variant-numeric:tabular-nums}
/* Yön rengi: tahminin ÜSTÜ yeşil, ALTI kırmızı. Yumuşak zeminler
   aydınlıkta AA altında kalıyordu; yalnız YAZI renklendiriliyor. */
.srSapmaArti{color:var(--ok)}
.srSapmaEksi{color:var(--no)}
/* Geçmiş çapada envanter fotoğrafı yoksa: boş ekranın alternatifi,
   açıklama şeridi DEĞİL. Rakamın sessizce yanlış olmasındansa. */
.srStokYok{margin-top:4px;font-size:.78rem;color:var(--warn);font-weight:600}

.srKat{color:var(--muted-aa);font-size:.8rem}
.srSt{font-weight:600}
.srHiz{font-weight:600;color:var(--accent)}
.srYeni{display:inline-block;background:var(--ok-soft);color:var(--ok);
  border:1px solid var(--ok-line);border-radius:3px;padding:0 4px;
  font-size:.62rem;font-weight:700;letter-spacing:.04em;vertical-align:1px}

/* Projeksiyon: stoğun bittiği hafta raporun ASIL sinyali */
.srBitti{background:var(--no-soft) !important;color:var(--no) !important;font-weight:600}
.srAzaldi{background:var(--warn-soft) !important;color:var(--warn) !important}

/* ⚠️ SATIR TÜMÜYLE TIKLANABİLİR DEĞİL (09.09.2026). Kullanıcı:
   *"Detaylar sadece ürün adına tıkladığımda açılsın... ürün adına
   tıklamıyorsam detaylar gelmezse oraları seçebiliyor olayım."*
   İmleç de bunu söylüyor: satırın ortası serbest, ürün adı el.  */
.srSatir{cursor:default}
.srTablo td.srAdTik{cursor:pointer}
.srTablo td.srAdTik:hover{text-decoration:underline}
.srSatir.srAcik td{background:var(--accent-soft) !important}

/* --- açılan detay --- */
/* ⚠️ `overflow:visible` ŞART. Hücrelerin genel `overflow:hidden`
   kuralı bu hücrede de geçerliyken tarayıcı hücreyi panelin kaydırma
   kabı sayıyor; hücre kaymadığı için alttaki `sticky` hiç işlemiyordu
   (08.09.2026 ölçüldü: panel ekranın 177px soluna kaçmıştı).      */
.srDetaySatir td{padding:0 !important;background:var(--surface2) !important;
  position:static !important;overflow:visible !important}
/* ⚠️ DETAY PANELİ GÖRÜNEN ALANA YAPIŞIR. Tablo 2.200px geniş; panel
   hücrenin tamamını kaplayınca telefonda okumak için yana kaydırmak
   gerekiyordu (08.09.2026 ölçüldü: panel 2.252px, ekran 375px).
   `sticky left:0` + kabın genişliği ile panel hep göz önünde.     */
.srDetay{display:flex;gap:26px;padding:16px 18px;flex-wrap:wrap;
  border-top:2px solid var(--accent);
  position:sticky;left:0;width:var(--srKapEn, auto);box-sizing:border-box}
.srDetayBlok{flex:1 1 420px;min-width:0}
.srDetayYan{flex:0 1 340px}
.srDetayBaslik{font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted-aa);margin-bottom:12px}

/* Hafta hafta satış — sayı + küçük çubuk. Çubuk ölçek DEĞİL, sadece
   göz için: kesin rakam altında yazılı.                            */
.srHaftalar{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap}
.srHaftaKalem{display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:62px;background:var(--surface);border:1px solid var(--line);
  border-radius:6px;padding:8px 6px}
.srHaftaNo{font-size:.7rem;color:var(--muted-aa);white-space:nowrap}
.srCubukKap{height:38px;width:20px;display:flex;align-items:flex-end}
.srCubuk{width:100%;background:var(--accent);border-radius:2px 2px 0 0;min-height:2px}
.srHaftaAdet{font-size:1.02rem;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.srHaftaTarih{font-size:.68rem;color:var(--muted-aa)}
.srHaftaToplam{background:var(--accent-soft);border-color:var(--accent)}
.srHaftaToplam .srHaftaAdet{color:var(--accent-ink)}

.srKunye{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;
  font-size:.86rem;align-items:baseline}
.srKunye dt{color:var(--muted-aa);white-space:nowrap}
.srKunye dd{margin:0;color:var(--ink);font-weight:600}
.srKunyeAlt{color:var(--muted-aa);font-weight:400;font-size:.8rem}

@media (max-width:760px){
  .srDetay{gap:14px;padding:12px}
  /* ⚠️ RAPOR TABLOSUNDA SÜTUN GİZLENMEZ. Kategori hücresi dar ekranda
     gizleniyordu ama başlığı gizlenmiyordu: başlıklar bir sütun
     kayıyor, üstelik ilk satırdaki `colspan="8"` de bir sütun taşıyordu
     (08.09.2026 ölçüldü). Tablo zaten kendi içinde yana kayıyor;
     sütunu gizlemek kazandırdığından çoğunu bozuyor.               */
  /* Üstteki başlık+araç+özet daralınca tabloya daha çok yer kalıyor.
     `dvh` telefon tarayıcısının kaybolan adres çubuğunu da sayar;
     desteklemeyen tarayıcı bir üstteki `vh` satırında kalır.       */
  .srTabloSar{max-height:calc(calc(100vh / var(--ekranZ,1)) - 232px)}
  .srTabloSar{max-height:calc(calc(100dvh / var(--ekranZ,1)) - 232px)}
  /* ⚠️ `top:0` YAZILMAZ — ikinci başlık satırı birincinin üstüne biner.
     Ölçülen değer masaüstüyle aynı kuralı izler.                   */
  /* Dar ekranda YALNIZ model yapışır; renk de yapışsaydı 375px'in
     yarısı iki kolona giderdi ve rakamlar görünmezdi.              */
  /* Telefonda İKİ sütunu birden yapıştırmak ekranın yarısını yiyor;
     ama yalnız MODEL yapışınca da hangi RENK olduğu kayboluyor
     (aynı model 8 renk). Çözüm: RENK sütunu kaydırılabilir kalıyor,
     rengin adı yapışık MODEL hücresinin ALTINA da yazılıyor. Hiçbir
     sütun gizlenmiyor — gizlemek başlıkları kaydırıyor.            */
  /* Sütun sırası KATEGORİ · MODEL · RENK; yapışan MODEL (2). */
  .srTablo tbody td:nth-child(4){position:static;left:auto}
  .srTablo thead th:nth-child(4){left:auto}
  .srTablo .shModel{max-width:132px}
  .srSatirRenk{display:block;font-weight:400;font-size:.72rem;
    color:var(--muted-aa);line-height:1.2;margin-top:1px;
    overflow:hidden;text-overflow:ellipsis}
  .srHaftalar{gap:4px}
  .srHaftaKalem{min-width:54px;padding:6px 4px}
  .srDetayYan{flex:1 1 100%;min-width:0}
  /* Künye dar ekranda TEK sütun: iki sütunlu düzende sol etiket
     ("Sezona giren toplam") sarmadığı için sağdaki değer panelin
     dışına taşıyor, cümlenin sonu kesiliyordu.                    */
  .srKunye{grid-template-columns:1fr;gap:0}
  .srKunye dt{white-space:normal;font-size:.78rem;margin-top:8px}
  .srKunye dt:first-child{margin-top:0}
  .srKunye dd{overflow-wrap:anywhere}
}
/* ⚠️ RENK SÜTUNU TELEFON DİKEYDE GÖRÜNMEZ (09.09.2026) ----------------
   Kullanıcı ekran görüntüsüyle: *"2 tane renk oldu, kolon olanı kaldır."*
   Renk zaten yapışık MODEL hücresinin altında yazıyordu (`.srSatirRenk`,
   yukarıdaki blok), sütun onun tekrarıydı.

   ⛔ `display:none` YAZMA. Hücre tablonun sütun modelinden düşer ve
   ondan sonraki bütün `nth-child` sayıları kayar — yapışkan MODEL/RENK
   hedefleri de dahil. Hücre YERİNDE bırakılıp genişliği sıfırlanıyor.

   ⚠️ SORGU AYRI VE `orientation:portrait` ŞART. Küçük telefonlar
   YATAYDA da 760px'in altında kalıyor (667×375) ve orada `.srSatirRenk`
   gizli — kural yatayda da çalışsaydı renk HİÇBİR YERDE görünmezdi.
   Ayrı sorgu, yatay bloğunda "geri alma" yazma zorunluluğunu da
   kaldırıyor: orada dolgu/kenarlık değerlerini elle tekrarlamak
   gerekseydi tablonun gerçek ölçüleriyle (th 6px/8px · td 4px/8px)
   sessizce ayrışırdı.

   ⚠️ KENARLIK DA SIFIRLANIR: tablo `shTablo` sınıfını da taşıyor ve
   orada her hücrenin `border-right`ı var — sıfır genişlikte kalsaydı
   MODEL sütununun hemen yanında ikinci bir hairline görünürdü.

   ⚠️ MASAÜSTÜNDE SÜTUN DURUYOR — orada `.srSatirRenk` gizli (2416).
   Sütunu `satishizirapor.js`ten silmek rengi masaüstünde tamamen yok
   eder, üstelik "Renk"e göre sıralamayı da götürürdü.               */
@media (max-width:760px) and (orientation:portrait){
  /* Sütun sırası KATEGORİ · MODEL · RENK; yapışan MODEL (2). */
  .srTablo tbody td:nth-child(4),
  .srTablo thead th:nth-child(4){
    width:0;max-width:0;padding-left:0;padding-right:0;
    border-left:0;border-right:0;font-size:0;line-height:0}
}


/* =====================================================================
   BENZETME EKRANI (`.sb*`) ve METRİKLER (`.mt*`) — 08.09.2026
   ===================================================================== */
.sbEkran{display:flex;flex-direction:column;gap:14px;min-width:0}
.sbOnayEti{display:flex;align-items:center;gap:7px;font-size:.88rem;color:var(--ink2);cursor:pointer}
.sbOnayEti input{width:auto;margin:0}   /* app.css:171 input'a %100 veriyor */
.sbIkili{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:start}
.sbListe{max-height:calc(calc(100vh / var(--ekranZ,1)) - 300px)}
.sbSatir{cursor:pointer}
.sbSecili td{background:var(--accent-soft) !important}
.sbElleRozet{display:inline-block;background:var(--accent-soft);color:var(--accent-ink);
  border-radius:3px;padding:0 5px;font-size:.64rem;font-weight:700;margin-left:6px;vertical-align:1px}

.sbPanel{background:var(--surface);border:1px solid var(--line2);border-radius:10px;
  padding:16px 18px;min-width:0}
.sbBosPanel{text-align:center;padding:34px 12px;color:var(--muted-aa)}
.sbBosBaslik{font-size:1.02rem;color:var(--ink2);margin-bottom:6px}
.sbBosAlt{font-size:.86rem;line-height:1.55;max-width:44ch;margin:0 auto}
.sbPanelBaslik{font-size:1.08rem;font-weight:700;color:var(--ink);display:flex;
  flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:14px}
.sbPanelAlt{font-size:.8rem;font-weight:400;color:var(--muted-aa)}
.sbAyar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  background:var(--surface2);border-radius:8px;padding:12px;margin-bottom:14px}
.sbAyar .shAlan{flex:1 1 180px;min-width:0}
.sbEgriBaslik{font-size:.86rem;color:var(--ink2);margin-bottom:8px;display:flex;
  justify-content:space-between;gap:10px;flex-wrap:wrap}
.sbEgriToplam{color:var(--accent);font-weight:700}
.sbEgriSar{max-height:340px}
.sbCizgi{height:9px;background:var(--accent);border-radius:2px;min-width:1px}
.sbUyari{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--ink);
  border-radius:8px;padding:8px 11px;font-size:.82rem;margin-bottom:10px;line-height:1.5}

.mtEkran{display:flex;flex-direction:column;gap:22px;min-width:0}
.mtBolum{display:flex;flex-direction:column;gap:10px}
.mtBolumBaslik{margin:0;font-size:1rem;color:var(--ink)}
.mtNot{color:var(--muted-aa);font-size:.85rem;line-height:1.55}
.mtDugmeSatir{display:flex}
.mtAktif td{background:var(--ok-soft) !important}
.mtAktifRozet{display:inline-block;background:var(--ok-soft);color:var(--ok);
  border:1px solid var(--ok-line);border-radius:3px;padding:0 5px;font-size:.64rem;
  font-weight:700;margin-left:6px;vertical-align:1px}
.mtKartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.mtKart{background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:14px 16px}
.mtKartBaslik{font-weight:600;color:var(--ink);margin-bottom:9px}
.mtKartDeger{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.mtGirdi{width:110px}
.mtBirim{color:var(--muted-aa);font-size:.85rem;flex:1 1 auto}
.mtKartAciklama{color:var(--muted-aa);font-size:.8rem;line-height:1.55}
.mtKartKim{color:var(--muted-aa);font-size:.75rem;margin-top:7px}
.mtUyari{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--ink);
  border-radius:8px;padding:9px 12px;font-size:.83rem;line-height:1.5}

@media (max-width:900px){ .sbIkili{grid-template-columns:1fr} }


/* RPT: rapor karsiligi olmayan satir (08.09.2026) ---------------------
   Kullanici Nebim kontrolunde 15 satir / 6.450 adetlik RPT'nin hicbir
   rapora dusmedigini gordu. Artik satirda isaret var.               */
.shUnlem{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;background:var(--warn);
  color:var(--on-accent);font-size:.66rem;font-weight:700;vertical-align:1px;cursor:help}
.shKarsiliksiz td{background:var(--warn-soft) !important}
.shKarsiliksiz td:nth-child(1),.shKarsiliksiz td:nth-child(2){background:var(--warn-soft) !important}
.shKarsilikNot{color:var(--warn);font-size:.78rem}
.shOzetUyari{cursor:pointer;background:var(--warn-soft);border:1px solid var(--warn-line);
  border-radius:8px;padding:4px 11px}
.shOzetUyari .shOzetSayi{color:var(--warn)}
.shOzetUyari:focus-visible{outline:2px solid var(--accent);outline-offset:1px}


/* Satış Hızı: "ne zaman biter" kolonu (08.09.2026) --------------------
   29 haftalık projeksiyonu gözle taramak yerine tek sayı. Raporun
   asıl cevabı bu; varsayılan sıralama da buna göre.                */
/* ⚠️ PUNTO — kullanıcı 09.09.2026: *"başlıkları bi tık daha
   küçültebiliriz; bir de ürün adı ve renk adı çok büyük."*
   Tablo 29 hafta kolonu taşıyor; buradan kazanılan her piksel
   projeksiyona gidiyor.                                            */
.srTablo th{font-size:.68rem;padding:6px 8px;letter-spacing:.02em}
.srTablo td{padding:4px 8px}
.srTablo .shModel{font-size:.82rem;max-width:180px}
.srTablo .srRenkHucre{font-size:.8rem;max-width:130px}
/* Uzun adlar: sınıra dayanınca punto düşüyor — kolon genişlemiyor,
   ad da "…" ile kesilmiyor. Eşik `satishizirapor.js > SR_UZUN_AD`. */
.srTablo .shModel.srAdUzun{font-size:.72rem}
.srTablo .srRenkHucre.srAdUzun{font-size:.7rem}
.srKatBas,.srKat{font-size:.72rem}

.srBiter{white-space:nowrap;font-weight:600}
.srBiterTarih{color:var(--muted-aa);font-size:.72rem;font-weight:400;margin-left:5px}
.srAcil{color:var(--no)}
.srYakin{color:var(--warn)}
.srUzak{color:var(--ink2);font-weight:500}
.srBitmez{color:var(--muted-aa);font-weight:400}
.srOzetAcil{background:var(--no-soft);border:1px solid var(--no-line);
  border-radius:8px;padding:4px 11px}
.srOzetAcil .shOzetSayi{color:var(--no)}


/* =====================================================================
   RAPOR — TELEFON YAN TUTULUNCA (08.09.2026)

   Kullanıcı: *"rapor ekranı yan tutunca minicik oluyor, 3 satır
   gözüküyor sadece; yan tutunca tam ekran raporu görmek isterim,
   özellikle üstteki başlıkları görmek istemem. Ek olarak kategori vb.
   filtreler verebilmek isterim, ürün adı aramak isterim."*

   Yatayda ekran yüksekliği ~360px. Başlık (60) + araç çubuğu (142) +
   özet şeridi (126) tek başına 328px yiyordu; tabloya üç satır
   kalıyordu. Yatayda başlık ve özet gizleniyor, araç çubuğu TEK
   SATIRA iniyor ve yukarı yapışıyor — süzgeçler her an elde, geri
   kalan her piksel tabloda.

   ⚠️ Süzgeçler GİZLENMEZ, yalnız küçülür: kullanıcının yataya
   geçmesinin sebebi zaten "daha çok veri görmek" ve orada arama ile
   kategori süzgecini istiyor.

   Ölçüt neden `max-height` de: 1024px yüksekliğindeki bir tablet de
   yatay sayılır ama orada gizlemeye gerek yok.
   ===================================================================== */
@media (orientation:landscape) and (max-height:560px){
  .srEkran{gap:6px}
  .srEkran .shBaslik,.srEkran .shOzet{display:none}
  .srEkran .shArac{position:sticky;top:0;z-index:6;flex-wrap:nowrap;
    overflow-x:auto;gap:6px;padding:5px 0;background:var(--bg)}
  /* Dar ekran kuralı aramayı tam satır yapıyor; yatayda hepsi yan yana. */
  .srEkran .shArac .shGirdi{flex:0 0 auto;width:auto;max-width:none;
    height:30px;padding:3px 9px;font-size:.82rem}
  .srEkran .shArac .shAraGirdi{flex:0 0 168px}
  .srEkran .shArac .sbOnayEti{flex:0 0 auto;white-space:nowrap;font-size:.78rem}
  .srEkran .shArac .shDugme{flex:0 0 auto;padding:4px 11px;font-size:.82rem}
  /* Küçük telefonlar yatayda 760px'in altında kalabiliyor: dikey
     kuralları burada geri alınıyor, RENK yine yapışık.             */
  .srTablo tbody td:nth-child(3){position:sticky;left:var(--srSut2, 120px)}
  .srTablo thead th:nth-child(3){position:sticky;left:var(--srSut2, 120px)}
  .srSatirRenk{display:none}
  .srTablo .shModel{max-width:none}
  .srTabloSar{max-height:calc(calc(100vh / var(--ekranZ,1)) - 48px)}
  .srTabloSar{max-height:calc(calc(100dvh / var(--ekranZ,1)) - 48px)}
}

/* Satış Hızı raporu: listeye ürün ekle (08.09.2026) -------------------
   Kullanıcı: "listenin en altında ürün ekle butonu olsun."          */
.srAlt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:2px}
.srAltNot{color:var(--muted-aa);font-size:.82rem}
/* Satırda "elle eklendi" işareti — YENİ rozetiyle aynı boyda, ama
   sakin: bilgi veriyor, uyarı vermiyor. */
.srElle{display:inline-block;background:var(--surface3, var(--surface2));
  color:var(--muted-aa);border:1px solid var(--line2);border-radius:4px;
  padding:0 5px;font-size:.66rem;font-weight:600;vertical-align:1px;letter-spacing:.02em}
.srCikar{margin-top:12px}
.srSonuc{max-height:260px;overflow:auto;margin:4px 0 10px;
  border:1px solid var(--line2);border-radius:8px}
.srSonuc:empty{display:none}
.srSonucBos{padding:12px 14px;color:var(--muted-aa);font-size:.88rem}
/* Sonuç satırı bir düğme: `app.css:171` girdilere %100 en veriyor,
   düğmede sorun yok ama hizayı burada kuruyoruz. */
.srSonucSatir{display:flex;align-items:baseline;gap:10px;width:100%;
  text-align:left;background:none;border:0;border-bottom:1px solid var(--line2);
  padding:9px 13px;cursor:pointer;font:inherit;color:var(--ink)}
.srSonucSatir:last-child{border-bottom:0}
.srSonucSatir:hover{background:var(--accent-soft)}
.srSonucSatir:disabled{opacity:.5;cursor:progress}
.srSonucAd{font-weight:600}
.srSonucRenk{color:var(--ink2)}
.srSonucNot{margin-left:auto;color:var(--muted-aa);font-size:.78rem;white-space:nowrap}
@media (max-width:760px){
  .srSonucSatir{flex-wrap:wrap;gap:4px 10px}
  .srSonucNot{margin-left:0;flex:1 1 100%}
}

/* Sezon seçici — başlığın yanında, sakin (08.09.2026).
   Kullanıcı: "sezonlar birbiri ile çakışacak 1 ay kadar bir süre
   eylülde ve martta, çünkü açılışlar parsiyel parsiyel oluyor."
   ⚠️ `width:auto` şart — `app.css:171` bütün select'lere %100 veriyor. */
.srSezonSec{width:auto;margin-left:10px;padding:2px 8px;font-size:.8rem;
  font-weight:600;vertical-align:3px}

/* Projeksiyonda EKSİ hücre (09.09.2026) — kullanıcı: "hâlâ 0 var
   raporda, negatif göremiyorum". Tükenmiş (0) ile açık verilmiş (eksi)
   ayrı şeyler: 0 "tam bitti", −400 "mal gelene kadar 400 adet açıktayım".
   İkisi de kırmızı ailesinde ama eksi daha koyu ve altı çizili gibi
   dursun ki gözle taranırken ayrışsın. */
.srEksi{background:var(--no-soft) !important;color:var(--no) !important;
  font-weight:700;box-shadow:inset 0 -2px 0 var(--no-line, var(--no))}

/* =====================================================================
   SATIŞ HIZI — TAM EKRAN (ODAK) MODU · 09.09.2026

   Kullanıcı: "raporu ekranımın tamamını kaplayacak şekilde görebilmek
   istiyorum; bu rapor önemli ve odaklandığımda kenarda sağ solda bir
   şey olmasın."

   ⚠️ SINIF GÖVDEDE, EKRANIN KABINDA DEĞİL. Kap her çizimde yeniden
   kuruluyor (`srCiz`) ve sekme değişince `shell()` kökü boşaltıyor;
   sınıf orada olsaydı süzgece her basışta tam ekran kapanırdı — nitekim
   kapanıyordu (kullanıcı 09.09.2026 bildirdi). Gövde sınıfı `shell()`ten
   sağ çıkıyor, `documentElement` de hiç yok edilmiyor.

   Bu yüzden ekran sadeleştirmesi de buradan yapılıyor: üst çubuk ve menü
   gizleniyor, sayfa kabının genişlik sınırı kalkıyor.
   ===================================================================== */
body.srTamMod .top,
body.srTamMod .mnuKap{display:none !important}
body.srTamMod{max-width:none !important}
body.srTamMod .wrap,
body.srTamMod #root{max-width:none !important;padding-left:10px;padding-right:10px}
body.srTamMod .srEkran,
body.srTamMod .sbEkran{gap:8px}
/* Odakta alt başlık gizlenir; başlık ve SEZON SEÇİCİ kalır — hangi
   sezona bakıldığı ekrandan kaybolmamalı. */
body.srTamMod .shAltBaslik{display:none}
body.srTamMod .shBaslik{margin:0}
body.srTamMod .srTabloSar{max-height:calc(calc(100vh / var(--ekranZ,1)) - 118px)}
body.srTamMod .srTabloSar{max-height:calc(calc(100dvh / var(--ekranZ,1)) - 118px)}

/* Benzetme + çıkar sütunları — EN SAĞDA, AMA YAPIŞMAZ ------------------
   Önce `sticky right` ile hep görünür duruyorlardı; kullanıcı
   09.09.2026 geri aldırdı: *"sabitlenmiş bir kolon olarak görmek
   istemiyorum, her zaman bakılan bir şey değil, ben biliyorum nerede
   olduğunu, en sağa kaydırıp bakarım."* Yapışıklık kalkınca 29 haftalık
   projeksiyonun son kolonları da örtülmüyor.                          */
.srTablo th.srBenzBas,.srTablo td.srBenz{width:1%}
.srTablo th.srIslemBas,.srTablo td.srIslem{width:34px;text-align:center}
/* ⚠️ `width:auto` şart — `app.css:171` bütün girdilere %100 veriyor. */
.srBenzGirdi{width:150px;max-width:150px;padding:2px 6px;font-size:.78rem;
  border:1px solid var(--line2);border-radius:5px;background:var(--surface);
  color:var(--ink2)}
.srBenzGirdi::placeholder{color:var(--muted-aa)}
/* Elle seçilmiş benzetme belli olsun — otomatikten ayrışsın. */
.srBenzElle{border-color:var(--accent);color:var(--ink);font-weight:600}
.srBenzGirdi:disabled{opacity:.5}
.srCikarD{width:22px;height:22px;line-height:1;padding:0;border-radius:5px;
  border:1px solid var(--line2);background:var(--surface);color:var(--muted-aa);
  cursor:pointer;font-size:15px}
.srCikarD:hover{border-color:var(--no);color:var(--no);background:var(--no-soft)}
.srCikarD:disabled{opacity:.4;cursor:progress}
@media (max-width:760px){
  .srBenzGirdi{width:120px;max-width:120px}
}

/* =====================================================================
   SATIŞ HIZI RAPORU — KURUMSAL RENK ve ZEBRA (09.09.2026)

   Kullanıcı: *"Bi tık başlığı ve satırları renklendirelim; satırlar bi
   koyu bi açık şekilde ayrışsın, başlık da bizim kurumsal renkler
   olsun."*

   Kurumsal renk `--navy` (#1b2c4f) / `--brand` (#16294d). ⚠️ KARANLIK
   TEMADA `--navy` AÇIK MAVİYE DÖNÜYOR (#7ea6e0) — doğrudan zemin
   yapılsaydı başlık okunmaz olurdu. O yüzden başlık zemini ve yazısı
   AYRI değişkenlerde, karanlıkta elle çevriliyor.
   ===================================================================== */
.srTablo{
  --srBasZemin:#1b2c4f;      /* kurumsal lacivert */
  --srBasZemin2:#22375f;     /* üst satır (grup başlığı) bir tık açık */
  --srBasYazi:#eef3fa;
  --srBasCizgi:#31456b;
  --srZebraA:var(--surface); /* tek satır — sayfanın kendi zemini */
  --srZebraB:#f2f5fa;        /* çift satır — çok hafif lacivert tint */
}
:root[data-theme="dark"] .srTablo{
  --srBasZemin:#1c2a42;
  --srBasZemin2:#22314e;
  --srBasYazi:#dce6f5;
  --srBasCizgi:#2c3d5c;
  --srZebraB:#111a27;
}
/* Başlık — iki satır da kurumsal.
   ⚠️ `!important` GEREKLİ, tercih değil. Ortak kural yapışık başlık
   hücrelerini `.shTablo th:nth-child(1)` gibi İKİ SINIF ağırlığında
   seçiyor; `.srTablo thead th` (tek sınıf) ondan zayıf kalıyor ve
   başlık zemini `--surface2` olarak duruyordu — üstelik yazı rengi
   uygulandığı için AÇIK ZEMİNDE AÇIK YAZI çıkıyordu (09.09.2026
   ölçüldü: zemin rgb(250,251,251), yazı rgb(238,243,250)).
   Ortak kural `!important` taşımıyor ama iki sınıflı olduğu için
   yine de kazanıyordu.                                             */
.srTablo thead th{background:var(--srBasZemin) !important;color:var(--srBasYazi) !important;
  border-right-color:var(--srBasCizgi);border-bottom-color:var(--srBasCizgi)}
.srTablo thead th.srSiralanir{cursor:pointer}
.srTablo thead th.srSiralanir:hover{background:var(--srBasZemin2) !important}
.srTablo thead th.srSirali{background:var(--srBasZemin2) !important}

/* ZEBRA — sıra JS'ten (`srCift`), `nth-child`ten değil: açık detay
   satırı araya girince şeritleme ters dönüyordu.                   */
.srTablo tbody tr.srSatir{--srSatirZemin:var(--srZebraA)}
.srTablo tbody tr.srSatir.srCift{--srSatirZemin:var(--srZebraB)}
.srTablo tbody tr.srSatir td{background:var(--srSatirZemin)}
/* ⚠️ YAPIŞIK SÜTUNLAR DA SATIRIN ZEMİNİNİ ALIR. Sabit `--surface`
   yazılıydı; zebra gelince yapışık model/renk/benzetme hücreleri
   şeritten kopuk kalıyordu.                                        */
.srTablo tbody tr.srSatir td:nth-child(3),
.srTablo tbody tr.srSatir td:nth-child(4),
.srTablo tbody tr.srSatir td.srSecKol,
.srTablo tbody tr.srSatir td.srBenz,
.srTablo tbody tr.srSatir td.srIslem{background:var(--srSatirZemin)}
.srTablo tbody tr.srSatir:hover td{background:var(--accent-soft)}
.srTablo tbody tr.srSatir.srAcik td{background:var(--accent-soft)}

/* Benzetme paneli açılır/kapanır ---------------------------------- */
.srBenzKapa{background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;letter-spacing:inherit;text-transform:inherit}
.srBenzKapa:hover{text-decoration:underline}
.srTablo th.srBenzDar,.srTablo td.srBenzDar{width:24px;min-width:24px;padding:2px 0;
  text-align:center}
.srTablo th.srBenzDar .srBenzKapa{font-size:.9rem}


/* =====================================================================
   SATIŞ HIZI — EXCEL GİBİ SEÇİM ÇUBUĞU · TABLO İÇİ SÜZGEÇ (09.09.2026)

   Kullanıcı: *"Bazen satırı marklamak istiyorum, bazen çoklu satır
   göstermek istiyorum; Excel gibi seçerek odak alıyorum oraya... en
   sola çubuk ekleyip ordan yapabilmek daha mantıklı geliyor. Kategori
   ürün ve renk filtresi verebilmek istiyorum, ancak tablonun içinde
   yine aynı Excel'deki gibi."*

   ⚠️ BU BLOK DOSYANIN SONUNDA DURMALI. Seçim zemini zebranın da,
   `:hover`ın da, açık detay satırının da üstüne yazıyor; yukarı
   taşınırsa sonraki kurallar onu eziyor ve seçili satır görünmüyor.
   ===================================================================== */
/* ⚠️ DEĞİŞKENLER `.srEkran`DA, `.srTablo`DA DEĞİL. Seçim şeridi tablonun
   DIŞINDA duruyor; tabloya yazılınca şeridin zemini tanımsız kalıyor ve
   saydam çiziliyordu (09.09.2026 ölçüldü: rgba(0,0,0,0), kontrast 2,1).
   Ekranın kabı ikisini de kapsıyor.                                 */
.srEkran{--srSecZemin:#dbe7fa;--srSecCizgi:#2f6fd0;--srSecYazi:#fff}
/* ⚠️ KARANLIK TEMADA ÇUBUĞUN YAZISI KOYU. Aydınlıktaki lacivert şerit
   karanlıkta açık maviye dönüyor; beyaz numara orada 3,30 kontrastta
   kalıyordu (AA 4,5 istiyor). Koyu mürekkeple 5,6.                 */
:root[data-theme="dark"] .srEkran{--srSecZemin:#1d3050;--srSecCizgi:#5b8fd8;
  --srSecYazi:#0e1622}

/* Sol çubuk = Excel'in satır numarası şeridi. YAPIŞIK: yana kaydırmış
   olsan da aralık seçebilmelisin.                                  */
.srTablo th.srSecBas,.srTablo td.srSecKol{width:34px;min-width:34px;max-width:34px;
  text-align:center;padding:4px 2px;font-size:.66rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--muted-aa);
  user-select:none;-webkit-user-select:none}
/* `cell` imleci Excel'deki artı işareti — çubuğun ne işe yaradığını
   ipucu okumadan söylüyor.                                         */
.srTablo td.srSecKol{cursor:cell}
.srTablo th.srSecBas{cursor:pointer}
.srTablo thead th.srSecBas{position:sticky;left:0;top:0;z-index:4}
.srTablo tbody td.srSecKol{position:sticky;left:0;z-index:2;
  background:var(--srSatirZemin, var(--surface))}

/* Seçili satır — zebradan da, `:hover`dan da, açık detaydan da güçlü. */
.srTablo tbody tr.srSatir.srSecili td{background:var(--srSecZemin) !important}
.srTablo tbody tr.srSatir.srSecili td.srSecKol{background:var(--srSecCizgi) !important;
  color:var(--srSecYazi, #fff) !important}
/* Odaktaki satır (yön tuşları). ⚠️ KENARLIK DEĞİL `box-shadow`:
   kenarlık satır yüksekliğini oynatıp listeyi zıplatıyor.          */
.srTablo tbody tr.srSatir.srOdak td{box-shadow:inset 0 1px 0 var(--srSecCizgi),
  inset 0 -1px 0 var(--srSecCizgi)}

/* --- BAŞLIKTAKİ HUNİ --- */
.srBasAd{margin-right:2px}
.srHuni{background:none;border:0;padding:0 2px;margin-left:2px;cursor:pointer;
  color:var(--srBasYazi);opacity:.55;font-size:.8rem;line-height:1;border-radius:3px}
.srHuni:hover{opacity:1;background:rgba(255,255,255,.16)}
.srHuniDolu{opacity:1;color:#ffd479}
.srTablo thead th.srSuzulu{box-shadow:inset 0 -2px 0 #ffd479}

/* --- SÜZGEÇ PENCERESİ ---
   ⚠️ `position:fixed` ve GÖVDEYE eklenir. Tablo kabında `overflow:auto`
   var; hücrenin içinde açılsaydı kabın kenarında kesilirdi.       */
.srHuniPanel{position:fixed;z-index:60;width:250px;max-width:calc(calc(100vw / var(--ekranZ,1)) - 16px);
  background:var(--surface);border:1px solid var(--line2);border-radius:10px;
  box-shadow:0 12px 34px rgba(9,17,32,.24);padding:10px;
  display:flex;flex-direction:column;gap:8px}
.srHuniBas{font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted-aa)}
.srHuniAra{font-size:.85rem;padding:4px 8px}
.srHuniListe{max-height:min(calc(46vh / var(--ekranZ,1)),300px);overflow:auto;border:1px solid var(--line);
  border-radius:7px;padding:4px}
.srHuniSatir{display:flex;align-items:center;gap:7px;padding:3px 5px;border-radius:5px;
  font-size:.84rem;color:var(--ink2);cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.srHuniSatir:hover{background:var(--accent-soft)}
/* ⚠️ `width:auto` şart — `app.css:171` bütün girdilere %100 veriyor,
   onay kutusu satırın tamamına yayılıyordu.                        */
.srHuniSatir input{width:auto;margin:0;flex:0 0 auto;cursor:pointer}
.srHuniTumEti{border-bottom:1px solid var(--line);border-radius:0;padding-bottom:6px}
.srHuniDip{display:flex;gap:8px;justify-content:space-between}
.srHuniDip .shDugme{padding:4px 10px;font-size:.8rem}
.srHuniTamam{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.srHuniTamam:disabled{opacity:.45;cursor:not-allowed}

/* --- SEÇİM ŞERİDİ = Excel'in alt durum çubuğu ---
   Seçtiğin satırların toplamı raporun asıl sorusunu cevaplıyor:
   "bu üç modeli birlikte kaç adet ısmarlamam lazım."               */
.srSecimSerit{display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  background:var(--srSecZemin);border:1px solid var(--line2);border-radius:8px;
  padding:6px 11px;font-size:.84rem;color:var(--ink2)}
.srSecimSerit strong{color:var(--ink);font-variant-numeric:tabular-nums}
.srSecSayi{background:var(--srSecCizgi);color:#fff;border-radius:5px;
  padding:1px 7px;font-weight:700;font-variant-numeric:tabular-nums}
.srSecNot{color:var(--ok);font-weight:600}
.srSecKucuk{border:1px solid var(--line2);background:var(--surface);color:var(--ink2);
  border-radius:6px;padding:2px 10px;font-size:.8rem;cursor:pointer}
.srSecKucuk:hover{border-color:var(--accent);color:var(--accent-ink);
  background:var(--accent-soft)}

@media (max-width:760px){
  /* Telefonda 34px'in 8'i projeksiyona kalsın; numara yine okunuyor. */
  .srTablo th.srSecBas,.srTablo td.srSecKol{width:26px;min-width:26px;max-width:26px;
    font-size:.6rem;padding:4px 1px}
  .srHuniPanel{width:230px}
}

/* =====================================================================
   SATIŞ HIZI — KOLON DONDUR / GİZLE (01.10.2026 · satishizirapor.js)

   Kullanıcı: *"sağa kaydırdığımda kategori ve renk adı da kilitlensin …
   basılı tutup şipşak seçerek bazı tarih aralıklarını gizleyebilmeliyim,
   Excel'deki gibi."* ve *"satış hızı dahil olan ve solundaki kolonlarda
   kilitleyebileyim kolonları ya da açabileyim."*

   DONUK KOLONLAR: `srDonUygula()` sol 8 başlığı ölçer, kaba `srDonHazir`
   sınıfını ve kolon başına --srPn (sticky) · --srLn (sol konum) · --srZn
   (başlık katmanı) · --srBn (son donuk kolonun çizgisi) yazar. Sınıf
   yoksa (ölçülemedi) yukarıdaki eski kurallar (# + model + renk) geçer.
   ⚠️ ZEMİN YAZILMAZ — zebra / hover / seçim zemini yukarıdaki satır
   kurallarından geliyor (hepsi bütün hücrelere uygulanıyor, opak).
   ⚠️ KATMAN: donuk gövde 2 · donuk başlık 4 (# başlığıyla aynı) · donuk
   olmayan başlık 2 (ortak `.shTablo th`) — başlık gövdenin daima üstünde.
   ⚠️ ÇİZGİ `currentColor`: başlıkta açık yazı rengi, gövdede mürekkep —
   iki temada da kendiliğinden doğru, hex yok. Yalnız RENK değişir,
   kenarlık ENİ değişmez (en değişseydi ölçülen konumlar 1px kayardı).
   ===================================================================== */
.srTabloSar.srDonHazir .srTablo tbody td.srSecKol{border-right-color:var(--srB1, var(--line))}
.srTabloSar.srDonHazir .srTablo thead th.srSecBas{border-right-color:var(--srB1, var(--srBasCizgi))}
.srTabloSar.srDonHazir .srTablo tbody td.srK2{position:var(--srP2, static);left:var(--srL2, auto);z-index:2;border-right-color:var(--srB2, var(--line))}
.srTabloSar.srDonHazir .srTablo tbody td.srK3{position:var(--srP3, static);left:var(--srL3, auto);z-index:2;border-right-color:var(--srB3, var(--line))}
.srTabloSar.srDonHazir .srTablo tbody td.srK4{position:var(--srP4, static);left:var(--srL4, auto);z-index:2;border-right-color:var(--srB4, var(--line))}
.srTabloSar.srDonHazir .srTablo tbody td.srK5{position:var(--srP5, static);left:var(--srL5, auto);z-index:2;border-right-color:var(--srB5, var(--line))}
.srTabloSar.srDonHazir .srTablo tbody td.srK6{position:var(--srP6, static);left:var(--srL6, auto);z-index:2;border-right-color:var(--srB6, var(--line))}
.srTabloSar.srDonHazir .srTablo tbody td.srK7{position:var(--srP7, static);left:var(--srL7, auto);z-index:2;border-right-color:var(--srB7, var(--line))}
.srTabloSar.srDonHazir .srTablo tbody td.srK8{position:var(--srP8, static);left:var(--srL8, auto);z-index:2;border-right-color:var(--srB8, var(--line))}
/* Başlık DİKEYDE hep yapışık (`top:0`); yatayda yalnız donuksa. */
.srTabloSar.srDonHazir .srTablo thead th.srK2{position:sticky;top:0;left:var(--srL2, auto);z-index:var(--srZ2, 2);border-right-color:var(--srB2, var(--srBasCizgi))}
.srTabloSar.srDonHazir .srTablo thead th.srK3{position:sticky;top:0;left:var(--srL3, auto);z-index:var(--srZ3, 2);border-right-color:var(--srB3, var(--srBasCizgi))}
.srTabloSar.srDonHazir .srTablo thead th.srK4{position:sticky;top:0;left:var(--srL4, auto);z-index:var(--srZ4, 2);border-right-color:var(--srB4, var(--srBasCizgi))}
.srTabloSar.srDonHazir .srTablo thead th.srK5{position:sticky;top:0;left:var(--srL5, auto);z-index:var(--srZ5, 2);border-right-color:var(--srB5, var(--srBasCizgi))}
.srTabloSar.srDonHazir .srTablo thead th.srK6{position:sticky;top:0;left:var(--srL6, auto);z-index:var(--srZ6, 2);border-right-color:var(--srB6, var(--srBasCizgi))}
.srTabloSar.srDonHazir .srTablo thead th.srK7{position:sticky;top:0;left:var(--srL7, auto);z-index:var(--srZ7, 2);border-right-color:var(--srB7, var(--srBasCizgi))}
.srTabloSar.srDonHazir .srTablo thead th.srK8{position:sticky;top:0;left:var(--srL8, auto);z-index:var(--srZ8, 2);border-right-color:var(--srB8, var(--srBasCizgi))}

/* Kilit — üzerine gelince görünür; dokunmatikte (üzerine gelme yok)
   hep soluk. Donuk kolonunki kapalı kilit. */
.srKilit{background:none;border:0;margin:0 0 0 3px;padding:1px;line-height:0;
  color:inherit;cursor:pointer;opacity:0;vertical-align:middle;border-radius:3px}
.srKilit svg{width:10px;height:10px;display:block;fill:none;stroke:currentColor;stroke-width:1.4}
.srKilit.srKilitli svg rect{fill:currentColor}
.srTablo thead th:hover .srKilit,.srKilit:focus-visible{opacity:.9}
.srKilit:hover{background:rgba(255,255,255,.16)}
@media (hover:none){ .srKilit{opacity:.5} }

/* GİZLENEBİLİR BAŞLIKLAR (TÜKENME · sınama · haftalar): basılı tut /
   sürükle. Metin seçimi ve parmakla kaydırma burada kapalı — yoksa
   sürükleme tabloyu kaydırır ya da başlık yazısını seçerdi. */
.srTablo thead th[data-giz]{user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;touch-action:none}
.srTablo thead th.srGizSecili{background:var(--srSecCizgi) !important;
  color:var(--srSecYazi) !important}
/* Gizli aralığın yerinde kalan ince şerit (Excel'in çift çizgisi). */
.srTablo th.srGizSerit,.srTablo td.srGizSerit{width:12px;min-width:12px;max-width:12px;
  padding:0;text-align:center}
.srTablo thead th.srGizSerit{cursor:pointer;font-size:.74rem !important;line-height:1}
.srTablo thead th.srGizSerit:hover{background:var(--srBasZemin2) !important}
.srTablo tbody tr.srSatir td.srGizSerit{background:var(--line)}

/* SALT OKUNUR (01.10.2026) — benzetme kutusu yerine düz metin. */
.srBenzOku{font-size:.78rem;color:var(--ink2);white-space:nowrap}

/* =====================================================================
   ÜST MENÜ — ÜZERİNE GELİNCE ALT RAPORLAR (17.09.2026 · core.js > mnuAcilirYap)
   Kullanıcı: "başlıkların üzerine mouse getirince alt raporları da
   görebilsek, direkt bir raporun içine girmese."
   Açma/kapama yalnız CSS (:hover / :focus-within); konum absolute —
   ekran ölçeği (zoom) koordinat kaydırmaz. Yalnız fareli geniş ekran;
   telefonda .seg zaten gizli (çekmece var).
   ⚠️ `.seg a` kuralları (app.css) liste bağlantılarına da uyar — burada
   özgül seçiciyle (`.seg .mnuAcilir a`) sıfırlanıyor.
   ===================================================================== */
.mnuHv{position:relative;display:inline-flex}
.mnuAcilir{display:none}
@media (hover:hover) and (min-width:761px){
  .mnuHv:hover .mnuAcilir,.mnuHv:focus-within .mnuAcilir{display:block}
  .seg.mnuSustur .mnuAcilir{display:none}
  /* Başlık ile liste arasında boşluk bırakılmaz: fare aradan geçerken
     :hover kopup liste kapanmasın diye liste padding-top ile köprülenir. */
  .mnuAcilir{position:absolute;top:100%;left:-4px;z-index:60;min-width:230px;
    padding:8px 0 0;background:transparent}
  .mnuAcilir::before{content:"";position:absolute;inset:8px 0 0 0;background:var(--surface);
    border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(15,28,55,.16);z-index:-1}
  .seg .mnuAcilir a{display:flex;padding:8px 16px;border-radius:0;font-size:13px;font-weight:500;
    color:var(--ink2);background:none;white-space:nowrap;min-height:0}
  .seg .mnuAcilir>a:first-child,.seg .mnuAcilir>.mnuHvAlt:first-child>a{margin-top:6px}
  .seg .mnuAcilir>a:last-child,.seg .mnuAcilir>.mnuHvAlt:last-child>a{margin-bottom:6px}
  /* Alt grup (Power BI…) — ok işaretli satır; sayfaları SAĞDA açılır,
     yalnız fare üzerindeyken. Tek raporlu satırda ok YOK. */
  .mnuHvAlt{position:relative}
  .seg .mnuAcilir a.mnuHvGrup{justify-content:space-between;gap:18px}
  .mnuHvOk{font-size:15px;line-height:1;color:var(--muted-aa)}
  .mnuAcilir2{display:none;position:absolute;left:100%;top:-8px;min-width:210px;padding:8px 0 0 6px;z-index:61}
  .mnuAcilir2::before{content:"";position:absolute;inset:8px 0 0 6px;background:var(--surface);
    border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(15,28,55,.16);z-index:-1}
  .mnuHvAlt:hover>.mnuAcilir2,.mnuHvAlt:focus-within>.mnuAcilir2{display:block}
  .mnuHvAlt:hover>a.mnuHvGrup{background:var(--surface2);color:var(--navy2)}
  .seg .mnuAcilir2 a:first-child{margin-top:6px}
  .seg .mnuAcilir2 a:last-child{margin-bottom:6px}
  .seg .mnuAcilir a:hover{background:var(--surface2);color:var(--navy2)}
  .seg .mnuAcilir a.on{background:none;color:var(--navy);font-weight:700}
  .seg .mnuAcilir a.mnuHvIc{padding-left:30px;font-size:12.5px}
  .mnuHvG{padding:9px 16px 3px;font-size:11px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted-aa)}
  .mnuHvG:first-child{margin-top:6px}
}

/* =====================================================================
   ÜST MENÜ BLUEPRINT ŞERİDİNDE  ·  17.09.2026 (core.js > ustMenuSigdir)
   Kullanıcı: "başlıkları Blueprint kısmına alıcaz, oraya uygun yaparsın
   fonunu vs." Bölüm satırı `.top`un içinde; kutu/zemin YOK, şeridin
   kendi zemini. Seçili bölüm lacivert hap.
   ⚠️ `.top` sticky ve z-index 10 — açılır liste içeride kaldığı için
   fare menüdeyken şerit öne alınır, yoksa raporların yapışkan başlıkları
   (z 19-40) listenin üstüne çıkar.
   ===================================================================== */
@media (min-width:761px){
  /* app.css dar-ekran kuralı şeridi sarıyordu (sağ blok alt satıra düşüp
     taşma ÖLÇÜLEMİYORDU) — sarma yalnız topIkiSatir kademesinde. */
  .top{flex-wrap:nowrap}
  .top .topSol,.top .topsag{flex:none}
  .top .topsag{flex-wrap:nowrap}
  .top .seg.mnuUst{flex:none;display:flex;flex-wrap:nowrap;align-items:center;gap:2px;
    margin:0 auto 0 20px;padding:0;background:none;border:none;border-radius:0}
  .top .seg.mnuUst>a,.top .seg.mnuUst>.mnuHv>a{padding:7px 12px;border-radius:8px;font-size:13.5px;
    font-weight:550;color:var(--ink2);white-space:nowrap}
  .top .seg.mnuUst>a:hover:not(.on),.top .seg.mnuUst>.mnuHv>a:hover:not(.on){background:var(--surface2);color:var(--navy2)}
  .top .seg.mnuUst>a.on,.top .seg.mnuUst>.mnuHv>a.on{background:var(--navy);color:var(--on-accent)}
  /* ⚠️ ŞERİT HER ŞEYİN ÜSTÜNDE (18.09.2026). app.css'te z-index 10'du;
     raporların yapışkan satır/kolon başlıkları (z 19-40) aşağı kaydırınca
     şeridin ÜSTÜNE biniyordu — kullanıcı: *"aşağı kaydırınca ana başlık
     sabitlenmiyor"*. Perde/çekmece (60+) yine şeridin üstünde kalır. */
  .top{z-index:50}
  .top:has(.mnuHv:hover),.top:has(.mnuHv:focus-within){z-index:65}
  /* Sığmazsa 1: sağdaki düğmeler yalnız ikon (başlıkları title'da) */
  .top.topIkonlu .topbtn{gap:14px}
  .top.topIkonlu .topbtn .tbYazi{display:none}
  .top.topIkonlu .topbtn .tbIkon{display:inline-flex}
  /* Sığmazsa 2: menü şeridin ikinci satırına */
  .top.topIkiSatir{flex-wrap:wrap;row-gap:8px}
  .top.topIkiSatir .seg.mnuUst{order:10;flex:1 1 100%;margin:0;flex-wrap:wrap}
}
@media (max-width:760px){
  .top .seg.mnuUst{display:none}
}
/* =====================================================================
   ÜST ÇUBUĞUN ZEMİNİ EKRANIN İKİ KENARINA KADAR  ·  28.09.2026
   Kullanıcı (PBI'da tablo büyükken, ekran görüntüsüyle): *"üst çubuğun
   sağ ve solunda boşluklar var, aşağı indirince tablo oraları
   dolduruyor."* Çubuk sayfa kabı (≤1.600 px) enindeydi; kaptan geniş
   rapor (PBI kartı `max-content`) aşağı kaydırılınca iki yandaki
   şeritlerde çubuğun hizasında görünüyordu. Tezgâhta 1.893 px: çubuk
   163..1731, kart %140'ta 39..1854.
   Zemin ve alt çizgi `border-image` ile iki yana 100vmax uzatılır:
     · ⛔ `box-shadow` + `clip-path` DEĞİL — clip-path çubuktan aşağı
       sarkan açılır menüyü (`.mnuHv`) keserdi.
     · Kenar görselinin kutu dışı kısmı "mürekkep taşması"dır, kaydırma
       alanı yaratmaz — sayfa bu yüzden yana kaymaya BAŞLAMAZ (ölçüldü).
     · Görsel kenarı da çizdiği için `app.css`teki alt çizgi degradenin
       son 1 px'i olarak yeniden çizilir (renk aynı `--line`).
   Aynı renk (`--bg`) gövdeyle birebir → yalnız altından geçen içerik
   örtülür; ⚠️ çubuğun zemini değişirse buradaki `--bg` de değişmeli.  */
.top{ border-image:linear-gradient(to bottom, var(--bg) calc(100% - 1px), var(--line) calc(100% - 1px)) 0 fill / 0 / 0 100vmax; }

/* =====================================================================
   BEST SELLER — YAZI VE FOTOĞRAF KART GENİŞLİĞİNE GÖRE (18.09.2026)
   ---------------------------------------------------------------------
   Kullanıcı: *"küçük ekranlarda Best Seller'da ürün adı ile görsel
   birbirine giriyor; dinamik yapamıyor muyuz, font küçüldükçe küçülsün."*

   İKİ AYRI SORUN ÖLÇÜLDÜ (sunum · İlk 40 · dört kart yan yana):
   1) `table-layout:fixed` + PİKSEL kolon genişlikleri: kart 320 px'in
      altına inince sabit kolonların toplamı tabloyu aşıyor ve ÜRÜN
      kolonuna 0 px kalıyor; yazı hücreden taşıp fotoğrafın üstüne
      biniyor. (Ölçüm: 260 px kartta `td.ad` = 0 px.)
   2) Yazı ve fotoğraf hiç küçülmüyordu (14 px yazı, 64 px görsel).

   ÇÖZÜM — kart bir ÖLÇÜ KABI (`container-type:inline-size`):
   · bütün yazı boyları `clamp(taban, Ncqi, tavan)` — tavan eski sabit
     değer (sunumda `--bsZ` çarpanıyla), yani GENİŞ KARTTA HİÇBİR ŞEY
     DEĞİŞMEZ; kart daraldıkça yazı küçülür, tabanın altına inmez.
   · fotoğraf hücresini doldurur, tavanı eski piksel değeri.
   · kart 420 px'in altına inince kolonlar YÜZDEYE döner (toplam %100),
     340 px'in altında renk kolonu ürün adının ALTINA geçer.
   ⚠️ `min(px, %)` DENENDİ, OLMADI: `table-layout:fixed` o değeri yok
   sayıp yedi kolonu da eşit bölüyor (ölçüldü: hepsi 50 px).
   ⚠️ Eşik KARTIN eni, pencerenin eni DEĞİL — masaüstünde dört kart yan
   yanayken de kart 300 px'e iniyor. Telefon için 09.09.2026'da konan
   viewport kuralları yerinde duruyor, bu blok onların üstüne binmiyor.
   ⚠️ `cqi` = kabın (kartın) eninin yüzde biri.
   ===================================================================== */
.bsKart{container-type:inline-size}

/* --- yazı: kart daraldıkça küçülür --- */
.bsKart thead th{font-size:clamp(7.5px,3.1cqi,10px)}
.bsKart td{font-size:clamp(8.5px,4.2cqi,12.5px)}
.bsKart td.r{font-size:clamp(9px,4.6cqi,14px)}
.bsGrid.dort .bsKart td.renk{font-size:clamp(8px,3.8cqi,12px)}
.bsSunum .bsKart h3{font-size:clamp(10px,4.4cqi,calc(14.5px * var(--bsZ)))}
.bsSunum .bsKart thead th{font-size:clamp(7.5px,3cqi,calc(10.5px * var(--bsZ)))}
.bsSunum .bsKart td{font-size:clamp(9px,4.6cqi,calc(16px * var(--bsZ)))}
.bsSunum .bsKart td.r{font-size:clamp(9px,4.8cqi,calc(17px * var(--bsZ)))}
.bsSunum .bsKart td.ad{font-size:clamp(9.5px,5cqi,calc(17px * var(--bsZ)))}
.bsSunum .bsKart td.ad em{font-size:clamp(8px,3.3cqi,calc(11.5px * var(--bsZ)))}
.bsSunum .bsKart td.ad i{font-size:clamp(7.5px,3cqi,calc(10px * var(--bsZ)))}
.bsSunum .bsKart td.renk{font-size:clamp(8.5px,4cqi,calc(14.5px * var(--bsZ)))}
.bsSunum .bsKart td.n{font-size:clamp(9px,4.4cqi,calc(16px * var(--bsZ)))}
.bsSunum .bsKart td.n.gucli{font-size:clamp(10px,5.4cqi,calc(20px * var(--bsZ)))}
.bsSunum .bsKart .bsSt b{font-size:clamp(8.5px,3.9cqi,calc(14px * var(--bsZ)))}
.bsSunum .bsGrid.dort .bsKart h3{font-size:clamp(9.5px,4.2cqi,calc(12.5px * var(--bsZ)))}
.bsSunum .bsGrid.dort .bsKart td{font-size:clamp(8.5px,4.2cqi,calc(13.5px * var(--bsZ)))}
.bsSunum .bsGrid.dort .bsKart td.ad{font-size:clamp(9px,4.4cqi,calc(14px * var(--bsZ)))}
.bsSunum .bsGrid.dort .bsKart td.renk{font-size:clamp(8px,3.7cqi,calc(12.5px * var(--bsZ)))}
.bsSunum .bsGrid.dort .bsKart td.n.gucli{font-size:clamp(9.5px,5cqi,calc(16px * var(--bsZ)))}

/* --- fotoğraf: hücreyi doldurur, tavanı eski piksel --- */
.bsKart .bsFoto{width:100%;max-width:54px;height:auto;aspect-ratio:54/66}
.bsKart .bsFotoK{width:100%;max-width:52px;height:auto;aspect-ratio:52/64}
.bsSunum .bsKart .bsFoto,.bsSunum .bsKart .bsFotoK{
  width:100%;max-width:calc(88px * var(--bsZ));height:auto;aspect-ratio:88/108}
.bsSunum .bsGrid.dort .bsKart .bsFoto,.bsSunum .bsGrid.dort .bsKart .bsFotoK{
  width:100%;max-width:calc(64px * var(--bsZ));height:auto}

/* --- dar kart: kolonlar yüzdeye döner (ürün kolonu sıfıra inmesin) --- */
@container (max-width:420px){
  .bsKart td.f,.bsGrid.dort .bsKart td.f,.bsSunum .bsKart td.f,.bsSunum .bsGrid.dort .bsKart td.f{width:auto}
  .bsKart thead th:nth-child(1),.bsGrid.dort .bsKart thead th:nth-child(1),.bsSunum .bsKart thead th:nth-child(1),.bsSunum .bsGrid.dort .bsKart thead th:nth-child(1){width:7%}
  .bsKart thead th:nth-child(2),.bsGrid.dort .bsKart thead th:nth-child(2),.bsSunum .bsKart thead th:nth-child(2),.bsSunum .bsGrid.dort .bsKart thead th:nth-child(2){width:19%}
  .bsKart thead th:nth-child(5),.bsGrid.dort .bsKart thead th:nth-child(5),.bsSunum .bsKart thead th:nth-child(5),.bsSunum .bsGrid.dort .bsKart thead th:nth-child(5){width:13%}
  .bsKart thead th:nth-child(6),.bsGrid.dort .bsKart thead th:nth-child(6),.bsSunum .bsKart thead th:nth-child(6),.bsSunum .bsGrid.dort .bsKart thead th:nth-child(6){width:11%}
  .bsKart thead th:nth-child(7),.bsGrid.dort .bsKart thead th:nth-child(7),.bsSunum .bsKart thead th:nth-child(7),.bsSunum .bsGrid.dort .bsKart thead th:nth-child(7){width:14%}
  /* 5 kolonlu tablo (Satış · İlk 10): stok ve S/T yok, pay ürüne gider. */
  .bsKart thead th:nth-child(5):last-child,.bsGrid.dort .bsKart thead th:nth-child(5):last-child,.bsSunum .bsKart thead th:nth-child(5):last-child,.bsSunum .bsGrid.dort .bsKart thead th:nth-child(5):last-child{width:18%}
}

/* --- daha da dar kart: renk kolonu ürün adının ALTINA (veri kaybolmaz) --- */
@container (max-width:340px){
  .bsKart thead th:nth-child(4),.bsGrid.dort .bsKart thead th:nth-child(4),.bsSunum .bsKart thead th:nth-child(4),.bsSunum .bsGrid.dort .bsKart thead th:nth-child(4),.bsKart td.renk,.bsGrid.dort .bsKart td.renk,.bsSunum .bsKart td.renk,.bsSunum .bsGrid.dort .bsKart td.renk{display:none}
  .bsKart td.ad::after{content:attr(data-renk);display:block;
    font-size:clamp(7.5px,3.2cqi,11.5px);font-weight:500;color:var(--muted-aa);
    line-height:1.25;margin-top:1px;overflow-wrap:anywhere}
}

/* ==== BAKIM MODU + YETKİSİZ KAPAĞI (22.09.2026) =======================
   Ana ekranın hero'su (`.aeEkran .aeHero`, günün banner'ı) büyütülmüş
   hâli; `core.js > renderYetkisiz`. Şerit `.brnSerit` kalıbını kullanır. */
.bkmEkran .bkmKapak{min-height:min(calc(64vh / var(--ekranZ,1)),540px)}
.bkmEkran .bkmYazi{max-width:58%;gap:10px;padding-bottom:34px}
.bkmBaslik{font-size:40px;letter-spacing:-.6px;line-height:1.1}
.bkmAlt{font-size:16px;line-height:1.45;max-width:420px}
.bkmRozet{font-size:11px;font-weight:800;letter-spacing:.14em;
  color:#fff;border:1px solid rgba(255,255,255,.7);border-radius:999px;
  padding:4px 11px;white-space:nowrap;backdrop-filter:blur(2px)}
@media (max-width:760px){
  .bkmEkran .bkmKapak{min-height:min(calc(70vh / var(--ekranZ,1)),460px);--aeHeroKonum:50% 30%}
  .bkmEkran .bkmYazi{max-width:88%;padding-bottom:22px}
  .bkmBaslik{font-size:28px}
  .bkmAlt{font-size:14.5px}
}
/* ÇÖKME = BAKIM ÖRTÜSÜ (30.09.2026 · `core.js > bakimOrtu`). Sunucu
   düşmüşken açıldığı için GÖRSEL YÜKLEMEZ — zemin düz gradyan, logo
   gelmezse kendini siler. Marka ekranı: iki temada da lacivert (offline
   sayfasıyla aynı), renkler yine token. */
.bkmOrtu{--bkmZ1:#1b2c4f;--bkmZ2:#2d4677;--bkmYazi:#fff;--bkmSoluk:#c3cbd9;--bkmNot:#ffe2a8;
  position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:24px;box-sizing:border-box;text-align:center;color:var(--bkmYazi);
  background:linear-gradient(135deg,var(--bkmZ1),var(--bkmZ2))}
:root[data-theme="dark"] .bkmOrtu{--bkmZ1:#0f1a30;--bkmZ2:#1b2c4f}
.bkmOrtuKutu{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:440px}
.bkmOrtuLogo{margin-bottom:10px;opacity:.95}
.bkmOrtu .bkmBaslik{color:var(--bkmYazi)}
.bkmOrtu .bkmAlt{color:var(--bkmSoluk)}
.bkmOrtuNot{font-size:14px;font-weight:600;color:var(--bkmNot)}
.bkmOrtuIpucu{margin-top:10px;font-size:12.5px;color:var(--bkmSoluk);opacity:.85}
body.bkmOrtuAcik{overflow:hidden}
.bkmOrtuDondu{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9001;
  background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--line);
  border-radius:10px;padding:11px 18px;font-size:14px;font-weight:600;
  box-shadow:0 6px 24px rgba(0,0,0,.18);max-width:calc(100vw / var(--ekranZ,1) - 32px)}

/* =====================================================================
   HESAP PANELİ MASAÜSTÜNDE DE SAĞDAN AÇILIR  ·  21.09.2026
   ---------------------------------------------------------------------
   Kullanıcı: *"sağ üst kısımdaki şeyleri de PC'de mobil gibi yapmamız
   lazım, çok şey oldu burada; sağdan açılır bir menü haline getirelim,
   hem de açıklama yazalım — karanlık/aydınlık mod gibi."*
   Tema · Başka kullanıcı olarak gör · Ekran boyutu · Geri bildirim ·
   Şifre · Çıkış artık üst çubukta yan yana DEĞİL; baş harfli hesap
   düğmesi (`#mnuSagAc`) sağdan bir panel açar. Telefondaki panelle AYNI
   işaretleme (`.mnuSag`), yalnız masaüstünde tam ekran değil 340 px'lik
   yan şerit. Her satırın altında kısa açıklama (`.tbAcik`).
   ⚠️ Panel `position:fixed` — `.top`ta transform/filter YOK, olursa
   panel çubuğun içine hapsolur. Ekran ölçeği (CSS zoom) etkilemiyor.
   ⚠️ Esc, ✕ ve karartılmış alana tıklama kapatır (core.js > shell).
   ===================================================================== */
.tbMetin{display:flex;flex-direction:column;min-width:0;text-align:left}
.tbAcik{display:none}
.mnuSag .tbAcik{display:block;font-size:12px;font-weight:450;line-height:1.3;
  margin-top:2px;color:var(--muted-aa,var(--muted))}
.mnuSag #logout .tbAcik{color:var(--muted-aa,var(--muted))}
.mnuSagAd{display:none}

@media (min-width:761px){
  .mnuSagAc{display:inline-flex;align-items:center;gap:8px;flex:none;
    height:38px;padding:0 13px 0 4px;margin-left:14px;cursor:pointer;
    border:1px solid var(--line);border-radius:999px;background:var(--surface);
    color:var(--ink);font:inherit;font-size:13px;font-weight:600;line-height:1}
  .mnuSagAc:hover{border-color:var(--accent)}
  .mnuSagHarf{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
    background:var(--accent-soft);color:var(--accent);font-size:11.5px;font-weight:700;
    letter-spacing:.3px}
  .mnuSagAd{display:block;max-width:140px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  body.mnuSagAcik .mnuSagAc{border-color:var(--accent)}

  .mnuSag{display:none;position:fixed;inset:0;z-index:70;
    flex-direction:column;align-items:flex-end;
    background:color-mix(in srgb, #000 30%, transparent)}
  body.mnuSagAcik .mnuSag{display:flex}
  .mnuSag>.mnuBas,.mnuSag>.topsag{width:340px;box-sizing:border-box;
    background:var(--surface);animation:mnuSagGir .16s ease-out}
  .mnuSag>.mnuBas{display:flex;align-items:center;justify-content:space-between;
    padding:14px 14px 10px 20px;border-bottom:1px solid var(--line2);
    box-shadow:-8px 0 24px rgba(0,0,0,.12)}
  .mnuSag>.mnuBas b{font-size:15px;font-weight:650;color:var(--ink)}
  .mnuSag .mnuKapat{width:36px;height:36px;font-size:16px;line-height:1;cursor:pointer;
    border:none;background:none;color:var(--ink2);border-radius:9px}
  .mnuSag .mnuKapat:hover{background:var(--surface2)}
  .mnuSag>.topsag{display:block;flex:1;overflow-y:auto;padding:6px 10px 18px;
    box-shadow:-8px 0 24px rgba(0,0,0,.12)}
  .mnuSag .who{display:block;text-align:left;font-size:14px;font-weight:600;color:var(--ink);
    line-height:1.35;padding:10px 12px 12px;border-bottom:1px solid var(--line2);margin-bottom:6px}
  .mnuSag .who span{font-size:12.5px;font-weight:450;color:var(--muted-aa,var(--muted))}
  .mnuSag .topbtn{display:block}
  .mnuSag .topbtn .link{display:flex;align-items:center;gap:12px;width:100%;
    text-align:left;font-size:14px;font-weight:600;min-height:52px;padding:9px 12px;
    border-radius:10px;color:var(--ink)}
  .mnuSag .topbtn .link:hover{background:var(--surface2)}
  .mnuSag .tbTema .tbYazi{display:block}
  /* ⚠️ Şerit taşarsa eklenen `topIkonlu` yazıları gizliyordu — panelin
     içinde geçersiz, ikon + yazı + açıklama hep birlikte görünür. */
  .top.topIkonlu .mnuSag .topbtn .tbYazi{display:block}
  .mnuSag .tbIkon,.top.topIkonlu .mnuSag .topbtn .tbIkon{display:grid;place-items:center;
    flex:none;order:-1;width:30px;height:30px;border-radius:8px;
    background:var(--accent-soft);color:var(--accent)}
  .mnuSag .tbSvg{width:16px;height:16px}
  .mnuSag #logout{color:var(--no)}
  .mnuSag #logout .tbIkon{background:var(--no-soft);color:var(--no)}
  @keyframes mnuSagGir{from{transform:translateX(28px);opacity:0}}
}
@media (min-width:761px) and (prefers-reduced-motion:reduce){
  .mnuSag>.mnuBas,.mnuSag>.topsag{animation:none}
}

/* =====================================================================
   SAHNELİ VERİ KARTLARI (21.09.2026) — anaekran.js > aeSahne
   Canlı = fiş · Power BI = üç etiket · Dün = takvim yaprağı. Kartın
   tamamı tek SVG; metin sarılmaz, kartla ölçeklenir. Renkler kartın
   tokenlarından — koyu tema kendiliğinden.
   ===================================================================== */
.avPoster:has(.avSahneKap){padding:0}
.avPoster .avVeri.avSahneKap{zoom:1;gap:0}
.avSahne{display:block;width:100%;height:100%;overflow:visible}
.avSahne text{font-family:inherit;font-variant-numeric:tabular-nums}
.avS-y{fill:var(--avY)} .avS-v{fill:var(--avV)} .avS-z{fill:var(--avZ)} .avS-k{fill:var(--avKart)}
.avS-yd{fill:var(--avY)}
.avS-sy{stroke:var(--avY)} .avS-sv{stroke:var(--avV)}
.avS-d2{fill:color-mix(in srgb,var(--avV) 30%,transparent)}
.avS-art{fill:var(--avArti)} .avS-azl{fill:var(--avEksi)} .avS-sif{fill:var(--avSilik)}
.avS-hA{fill:color-mix(in srgb,var(--avArti) 17%,var(--avKart))}
.avS-hE{fill:color-mix(in srgb,var(--avEksi) 17%,var(--avKart))}
.avS-hN{fill:color-mix(in srgb,var(--avSilik) 15%,var(--avKart))}
.avS-canli{fill:var(--avEksi)}
.avS-golge{filter:drop-shadow(0 4px 9px rgba(15,28,55,.13))}
:root[data-theme="dark"] .avS-golge{filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.avS-nabiz{transform-box:fill-box;transform-origin:center;animation:avSNabiz 1.7s ease-out infinite}
@keyframes avSNabiz{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
.avFisIn{animation:avFisIn 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes avFisIn{from{transform:translateY(-130px)}}
@media (prefers-reduced-motion:reduce){.avS-nabiz,.avFisIn{animation:none}}
/* HEDEF TAKİP — karlı zirveye serpantin (anaekran.js > AE_VERILI.hedef).
   Yol her açılışta alttan yukarı dolar, işaret yol boyunca yürür.
   🌙 `.avGece` = 20:00-06:00 sahnesi; renkleri sahnenin kendi tokenları,
   temadan bağımsız (gece gökyüzü koyu temada da gece). */
.avZirve{--avZGok:transparent;--avZDag:color-mix(in srgb,var(--avV) 24%,transparent);--avZKar:var(--avKart);
  --avZAsfalt:color-mix(in srgb,var(--avY) 55%,var(--avZ));--avZKenar:var(--avKart);--avZYazi:var(--avY);--avZEt:var(--avV)}
.avZirve.avHgo-iyi{--avDurum:var(--ok)} .avZirve.avHgo-orta{--avDurum:var(--warn)} .avZirve.avHgo-zayif{--avDurum:var(--no)}
.avZirve.avGece{--avZGok:#14233d;--avZDag:#294571;--avZKar:#e8eef9;--avZAsfalt:#5d6f8f;--avZKenar:#c9d6ea;--avZYazi:#eef3fa;--avZEt:#9fc3ff}
.avZirve.avGece.avHgo-iyi{--avDurum:#4ec27f} .avZirve.avGece.avHgo-orta{--avDurum:#e3b04b} .avZirve.avGece.avHgo-zayif{--avDurum:#ff8f86}
.avGeceGok{fill:var(--avZGok)} .avGeceAy{fill:#f4efd9} .avGeceYildiz{fill:#fff;animation:avYildiz 2.4s ease-in-out infinite}
@keyframes avYildiz{50%{opacity:.35}}
.avGeceFener{fill:#ffe9a8;opacity:.2}
.avZ-dag{fill:var(--avZDag)} .avZ-kar{fill:var(--avZKar)}
.avZ-yol{fill:none;stroke-linecap:round;stroke-linejoin:round}
.avZ-kenar{stroke:var(--avZKenar)} .avZ-asfalt{stroke:var(--avZAsfalt)}
.avZ-gidis{stroke:var(--avDurum);stroke-dasharray:0 1;animation:avZGit 1.8s cubic-bezier(.3,.7,.3,1) .2s forwards}
@keyframes avZGit{to{stroke-dasharray:var(--p) 1}}
.avZ-yurur{offset-rotate:0deg;offset-distance:0%;animation:avZYuru 1.8s cubic-bezier(.3,.7,.3,1) .2s forwards}
@keyframes avZYuru{to{offset-distance:var(--pp)}}
.avZ-direk{stroke:var(--avZYazi)} .avZ-bayrak{fill:var(--avZEt)}
.avZ-yazi{fill:var(--avZYazi)} .avZ-et{fill:var(--avZEt)}
.avS-durum{fill:var(--avDurum)} .avS-pinIc{fill:var(--avKart)}
.avZirve.avGece .avS-pinIc{fill:#fff}
.avZParilti{opacity:0;transform-box:fill-box;transform-origin:center;animation:avZPar 1.6s ease-out 2s infinite}
@keyframes avZPar{0%{opacity:0;transform:scale(.4)}30%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){
  .avZ-gidis{animation:none;stroke-dasharray:var(--p) 1}
  .avZ-yurur{animation:none;offset-distance:var(--pp)}
  .avGeceYildiz,.avZParilti{animation:none}
}
/* Telefonda (iki sütun) poster KARE: sahne kırpılıp büyüsün (aeSahne > kirp).
   Satırdaki kartlar aynı boyda kalsın diye HEPSİ kare. */
@media (max-width:480px){.avPoster{aspect-ratio:1/1}}

/* =====================================================================
   MARKA: GERÇEK BLUEMINT KELİME MARKASI | Blueprint  (21.09.2026)
   Kullanıcı: *"burası çok çiğ durdu"* → 4 tur çizim, seçilen: şirketin
   kendi logosu (img/bluemint-beyaz.svg yolları, `currentColor`) + ince
   ayraç + "Blue" (soluk) "print" (vurgu mavisi). Beyaz kutulu 19 px'lik
   PNG logo kalktı. Renkler token: koyu temada kendiliğinden döner.
   ⚠️ Marka genişledi; menü sığmazsa `core.js > ustMenuSigdir` önce sağ
   düğmeleri ikona çevirir, sonra menüyü ikinci satıra indirir — menü
   YAZILARI asla kırılmaz (`white-space:nowrap`, kullanıcı: *"iki satır
   olmasın"*).
   ===================================================================== */
.top .brand.mrkBlock{--mrkVurgu:#2f6fd6;text-decoration:none;color:inherit;cursor:pointer;display:flex;align-items:center;gap:12px;flex:none;white-space:nowrap}
:root[data-theme="dark"] .top .brand.mrkBlock{--mrkVurgu:#7ea6e0}
.mrkBM{height:12px;width:auto;flex:none;color:var(--navy);display:block}
.mrkAyrac{display:block;width:1px;height:20px;background:var(--line);flex:none}
.mrkAd{font-size:18px;font-weight:600;letter-spacing:.005em;color:var(--navy);line-height:1}
/* Koyu temada --navy açık mavidir ve "print" ile karışır → orada soluk kalır. */
:root[data-theme="dark"] .mrkAd{color:var(--muted)}
.mrkAd em{font-style:normal;font-weight:700;color:var(--mrkVurgu)}
:root[data-theme="dark"] .mrkBM{color:var(--ink)}
@media (max-width:760px){
  /* Telefonda yalnız "Blueprint" — BLUEMINT zaten ana ekran banner'ında
     yazıyor (kullanıcı 22.09.2026). Yer ekran adına kalsın. */
  .top .brand.mrkBlock{gap:0}
  .top .brand.mrkBlock .mrkAyrac,.top .brand.mrkBlock .mrkBM{display:none}
  .top .brand.mrkBlock .mrkAd{display:block;font-size:17px}
}

/* =====================================================================
   YAPIŞKAN TABLO BAŞLIKLARI — core.js > yapiskanTablolar (22.09.2026)
   Uzun tablonun kabı ekranın ÜST ÇUBUK ALTINDA kalan yüksekliği kadar
   olur ve kendi içinde kayar; başlık satırları kabın tepesine, ilk kolon
   (tablo yana taşıyorsa) sola yapışır. Üst çubukla ASLA çakışmaz.
   `div.ytKap` — kendi max-height'ı olan kaplardan (kalite, yönetim)
   daha özgül; onları da aynı ölçüye çeker.
   ⚠️ Zeminler `:where()` ile (özgüllük 0): ekranın kendi başlık/satır
   rengi varsa O kazanır, yoksa kart zemini — altından yazı görünmez.
   ===================================================================== */
/* `--ytAlt` = kutunun altında kalan sayfa payı (core.js > ytAltPay) —
   düşülmezse sayfa sonunda başlık üst çubuğun arkasına giriyordu.
   `.ctKap.ctDar` = Canlı Satış dar ekranda (1.024 px altı) aynı kutu. */
div.ytKap,.ctKap.ctDar{overflow:auto;max-height:max(260px,calc(100dvh / var(--ekranZ,1) - var(--ustYuk,0px) - 18px - var(--ytAlt,0px)));
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
/* ⚠️ ÇİFT SINIF = ÖZGÜLLÜK (25.09.2026 · kullanıcı: *"yine aşağı kaydırınca
   Mağazalar yazan başlık kayboldu, her raporda oluyor"*). Ekranın KENDİ
   yapışkan ilk kolonu daha özgül bir seçiciyle z-index veriyordu
   (`hedef.css > .htTablo th.htAd{…z-index:1}`, `.htTablo` + `.htAd` =
   iki sınıf) ve hedef.css marka.css'ten SONRA yükleniyor: başlığın ilk
   hücresi gövde hücreleriyle aynı katmana düşüp ALTTA kalıyordu —
   kaydırınca "Mağazalar" yazısının yerinde satır metni görünüyordu.
   Sınıfı iki kez yazmak özgüllüğü yükseltir, kuralın anlamını
   değiştirmez. Yeni ekranlar bu yüzden ayrıca bir şey yazmak zorunda
   değil. */
.ytTablo.ytTablo thead th,.ytTablo.ytTablo thead td{position:sticky;z-index:6}
:where(.ytTablo thead th,.ytTablo thead td){background-color:var(--surface)}
:where(.ytTablo thead tr:last-child th,.ytTablo thead tr:last-child td){box-shadow:inset 0 -1px 0 var(--line)}
.ytSol tbody td:first-child,.ytSol tbody th:first-child{position:sticky;left:0;z-index:1}
.ytTablo.ytTablo thead .ytSolH{left:0;z-index:7}
:where(.ytSol tbody tr){background-color:var(--surface)}
:where(.ytSol tbody td:first-child,.ytSol tbody th:first-child){background-color:inherit;box-shadow:inset -1px 0 0 var(--line)}

/* =====================================================================
   CHECKLIST — ÇOKLU FOTOĞRAF + SONUÇ EKRANI (22.09.2026)
   · Fotoğraf kutusu her cevapta açık; "Hayır" + fotoğraflı maddede
     düğme kırmızı (eski kırmızı "Fotoğraf ekle" rozeti kalktı).
   · Küçük resimler 56 px, × ile tek tek kaldırılır, tıklayınca büyür.
   · Sonuç ekranı iki sütun kart; fotoğraflar 104 px (dar ekranda tek sütun).
   ===================================================================== */
.qrow.no .qphoto.zorunlu .photobtn{border-color:var(--no);color:var(--no);background:var(--no-soft)}
.clThumbs{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center}
.clThumb{position:relative;display:inline-block}
.clThumbB{padding:0;border:0;background:none;cursor:zoom-in;display:block;border-radius:8px}
.clThumbB img{width:56px;height:56px;border-radius:8px;object-fit:cover;border:1px solid var(--line);display:block}
.clThumbX{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);
  background:var(--no);color:#fff;font-size:14px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.clSonuc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.clSonucK{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);
  display:flex;flex-direction:column;gap:8px;min-width:0}
.clSonucK.no{border-color:var(--no-line);box-shadow:inset 3px 0 0 var(--no)}
.clSonucUst{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.clSonucUst .qtext{min-width:0}
.clSonucRoz{flex:none;color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft)}
.clSonucK.no .clSonucRoz{color:var(--no);border-color:var(--no-line);background:var(--no-soft)}
.clSonucNot{font-size:13px;color:var(--no);line-height:1.4}
.clSonucFoto{display:flex;flex-wrap:wrap;gap:8px}
.clFotoK{padding:0;border:0;background:none;cursor:zoom-in;border-radius:10px}
.clFotoK img{width:104px;height:104px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
@media (max-width:700px){ .clSonuc{grid-template-columns:minmax(0,1fr)} }
.clLb .bsLbBilgi span{margin-left:8px;font-weight:600;color:var(--muted)}
.clLbOk{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer;z-index:2}
.clLbOk.sol{left:18px}.clLbOk.sag{right:18px}
.clLb.tek .clLbOk{display:none}

/* GİRİŞ · BENİ HATIRLA (01.10.2026 · `core.js > renderLogin`). Mağaza
   e-postası yazılınca satır gizlenir; genel `input{width:100%}` kutuyu
   yaymasın diye genişlik sıfırlanır. */
.lHatirla{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;
  color:var(--ink);cursor:pointer;user-select:none}
.lHatirla input{width:auto;height:auto;margin:0;flex:none;accent-color:var(--accent)}

/* ŞİFRE KUTUSU · BASILI TUT GÖSTER + CAPS LOCK (05.10.2026 · `core.js >
   sifreAlani`). Göz kutunun içinde sağda; basılıyken vurgulu. Telefonda uzun
   basma menüsü/seçimi açılmasın diye dokunma davranışı kapalı. Renkler token. */
.pwKap{position:relative;display:block}
.pwKap input{padding-right:46px}
.pwGoz{position:absolute;top:50%;right:5px;transform:translateY(-50%);width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;border-radius:7px;
  background:none;color:var(--muted);cursor:pointer;touch-action:none;user-select:none;
  -webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.pwGoz:hover{color:var(--ink)}
.pwGoz.acik{color:var(--accent);background:var(--accent-soft)}
.pwGoz svg{width:20px;height:20px;pointer-events:none}
.pwCaps{display:none;align-items:center;gap:6px;margin-top:6px;padding:5px 9px;border-radius:7px;
  font-size:12.5px;font-weight:600;color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn-line)}
.pwCaps.acik{display:flex}
.pwDlg{max-width:440px}