/* ═══════════════════════════════════════════════════════════════════════════
   PUSULA — Logic tasarım sistemi · TEK KAYNAK
   Kullanıcı kararı 2026-09-12: bütün ekranların tasarımı buradan okunur.
   Başka yerde renk, boşluk, köşe, gölge ya da bileşen TANIMLANMAZ.

   Sayfaya bağlama:   <link rel="stylesheet" href="/pusula.css">
                      <body class="pu-sayfa">
     /pusula.css route'tan no-cache servis edilir. /static/pusula.css ile
     BAĞLAMA — /static 7 gün immutable, güncelleme kullanıcıya ulaşmaz.

   Kurallar:
     - Token yalnız var(--pu-*). Sayfaya hex YAZILMAZ.
     - Bileşen yoksa ÖNCE buraya eklenir (mockup onayıyla), sonra kullanılır.
       Sayfa kendi .btn / .card / .badge'ini yazmaz.
     - Sayfanın kendi <style>'ı yalnız yerleşim (ızgara, genişlik) taşır.
     - Tema: varsayılan AÇIK. Koyu yalnız CRM ortak düğmesiyle
       (/crm-theme.js · localStorage 'crm_theme' · html.dark).
       prefers-color-scheme KULLANILMAZ — koyu kimseye zorla gelmez.
     - Pusula sayfası /crm-theme.css YÜKLEMEZ (input/h1/body'yi ezer);
       tema düğmesinin görünümü aşağıda, Pusula'da.

   Kaynak tasarım: shadcn tabanlı "F" dili — kenarsız kart + katmanlı gölge,
   ev mavisi #185fa5 (koyuda #5eaaf0), tabular-nums, emoji yok.
   İlk Pusula ekranı: satis_olustur.html (/sale-create-yeni).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKEN — açık (varsayılan) ──────────────────────────────────────────── */
:root{
  --pu-zemin:#f6f6f8;         --pu-yuzey:#ffffff;       --pu-cukur:#eeeef2;      --pu-cizgi:#f0f0f3;
  --pu-yazi:#111114;          --pu-yazi-2:#4a4a55;      --pu-soluk:#82828f;
  --pu-aksan:#185fa5;         --pu-aksan-zemin:#eaf2fa; --pu-aksan-cizgi:#b9d3ec; --pu-aksan-ustu:#ffffff;
  --pu-basari:#1d7a4f;        --pu-basari-zemin:#e7f4ed;
  --pu-tehlike:#c0392b;       --pu-tehlike-zemin:#fbebe9;
  --pu-uyari:#a35c09;         --pu-uyari-zemin:#fbf1e3;
  --pu-mor:#5b3fd8;           --pu-mor-zemin:#eeeafc;
  /* eSign ust seridinin ZEMINI (Fatih 11 Eki, D secenegi onayli).
     `--pu-mor` zemin olarak KULLANILAMIYOR: koyu temada #9d86ff'e donuyor
     ve beyaz yazi okunmaz hale geliyor. Olculdu — beyaz yazi kontrasti:
     #4a2fd0 -> 8.05:1 · #3a2499 -> 11.10:1, ikisi de WCAG AA gecer. */
  --pu-mor-serit:#4a2fd0;
  /* 10 EKİ — İÇERİK ÇİPİ İÇİN İKİ YENİ RENK (Fatih: her ürün kendi rengi).
     Turuncu ve kırmızı bu işe ALINMADI: kargo ekranında ikisi de
     "eksik / gecikmiş" demek; içerik çipinde kullanılsaydı sorunlu satır ile
     sıradan bir kâğıt aynı renge düşerdi. */
  --pu-camg:#0e7490;          --pu-camg-zemin:#ecfeff;
  --pu-pembe:#9f1239;         --pu-pembe-zemin:#fdf2f8;
  --pu-golge:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.07);
  --pu-golge-yuksek:0 10px 26px rgba(16,24,40,.16),0 2px 6px rgba(16,24,40,.08);
  --pu-golge-yukari:0 -2px 8px rgba(16,24,40,.06);
  --pu-perde:rgba(17,17,20,.32);
  --pu-girdi-zemin:#f7f7f9;     /* giriş kutusu + çip: çukurdan açık (kullanıcı 13 Eyl: gri alanlar sert) — BAĞLANMASI AYRI PR (tüm Pusula ekranları, önce/sonra görüntüyle) */
  --pu-kose-kart:15px;        --pu-kose-kontrol:10px;   --pu-kose-hap:20px;
  --pu-yazi-aile:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --pu-yazi-boy:13px;
  --pu-mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* Sayfa kabı — Fatih 2026-09-18: bütün CRM ekranları TEK genişlik, üst menü aynı çizgide. */
  --pu-sayfa-genislik:1392px; --pu-sayfa-kenar:24px;
  /* kimlik (kategori) renkleri — bölüm 17 */
  --pu-kat-0:#6b7280;  --pu-kat-1:#1f6feb;  --pu-kat-2:#00897b;
  --pu-kat-3:#b45309;  --pu-kat-4:#b5179e;  --pu-kat-5:#6d28d9;  /* KADEME — teklif/öneri yoğunluğu, üç basamak (22 Eki, Fatih onaylı Retention mockup'ı).
     -1/-2/-3 = kart ZEMİNİ, -s1/-s2/-s3 = sol ŞERİT. Basari = yeşil, aksan = mavi. Her basamak
     bir öncekinden YÜZEYDEN daha uzak (koyulaşır); koyu tema açığın çevrilmişi değil, kendi basamakları.
     Yüzey rengine karışım: zemin %12/%24/%36, şerit %45/%70/%100. Kilit: tests/test_pusula_kademe.py */
  --pu-kad-basari-1:#e4efea;  --pu-kad-basari-2:#c9dfd5;  --pu-kad-basari-3:#aecfc0;
  --pu-kad-basari-s1:#99c3b0; --pu-kad-basari-s2:#61a284; --pu-kad-basari-s3:#1d7a4f;
  --pu-kad-aksan-1:#e3ecf4;   --pu-kad-aksan-2:#c8d9e9;   --pu-kad-aksan-3:#acc5df;
  --pu-kad-aksan-s1:#97b7d6;  --pu-kad-aksan-s2:#5d8fc0;  --pu-kad-aksan-s3:#185fa5;
  /* 19n. YÜKSELTME 10 KADEME (Fatih 23 Eki: +1 soluk, büyüdükçe belirgin mavi): zemin 1→10 ve sol şerit 1→10 */
  --pu-yuk-1:#eef3f8;  --pu-yuk-2:#e6edf5;  --pu-yuk-3:#dee8f2;  --pu-yuk-4:#d5e2f0;  --pu-yuk-5:#cddded;  --pu-yuk-6:#c5d7ea;  --pu-yuk-7:#bdd2e7;  --pu-yuk-8:#b4cce5;  --pu-yuk-9:#acc7e2;  --pu-yuk-10:#a4c1df;
  --pu-yuk-s1:#d3deea;  --pu-yuk-s2:#bed0e2;  --pu-yuk-s3:#a9c2db;  --pu-yuk-s4:#95b4d3;  --pu-yuk-s5:#80a6cb;  --pu-yuk-s6:#6b97c4;  --pu-yuk-s7:#5689bc;  --pu-yuk-s8:#427bb4;  --pu-yuk-s9:#2d6dad;  --pu-yuk-s10:#185fa5;
}

/* ── 2. TOKEN — koyu (yalnız html.dark; YALNIZ token yeniden bağlanır) ─────── */
html.dark{
  --pu-zemin:#0b0b0f;         --pu-yuzey:#151519;       --pu-cukur:#1e1e24;      --pu-cizgi:#212128;
  --pu-yazi:#f4f4f6;          --pu-yazi-2:#c3c3ce;      --pu-soluk:#8b8b98;
  --pu-aksan:#5eaaf0;         --pu-aksan-zemin:#14243a; --pu-aksan-cizgi:#24486e; --pu-aksan-ustu:#0b0b0f;
  --pu-basari:#3ecf8e;        --pu-basari-zemin:#11291f;
  --pu-tehlike:#f2756a;       --pu-tehlike-zemin:#2b1614;
  --pu-uyari:#e0a044;         --pu-uyari-zemin:#2a2013;
  --pu-mor:#9d86ff;           --pu-mor-zemin:#1d1832;
  --pu-mor-serit:#3a2499;
  --pu-camg:#4fd1dd;          --pu-camg-zemin:#0b2b31;
  --pu-pembe:#f9a8c7;         --pu-pembe-zemin:#2c1220;
  --pu-golge:0 1px 2px rgba(0,0,0,.45);
  --pu-golge-yuksek:0 10px 26px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
  --pu-golge-yukari:0 -2px 10px rgba(0,0,0,.5);
  --pu-perde:rgba(0,0,0,.6);
  --pu-girdi-zemin:#1b1b21;
  /* kimlik renkleri — açığın çevrilmişi DEĞİL, kendi basamakları (bölüm 17) */
  --pu-kat-0:#8b8b98;  --pu-kat-1:#3d8ee0;  --pu-kat-2:#17a08d;
  --pu-kat-3:#c98328;  --pu-kat-4:#d8489f;  --pu-kat-5:#8b6ef0;  --pu-kad-basari-1:#1a2b27;  --pu-kad-basari-2:#1f4235;  --pu-kad-basari-3:#245843;
  --pu-kad-basari-s1:#27694e; --pu-kad-basari-s2:#32976b; --pu-kad-basari-s3:#3ecf8e;
  --pu-kad-aksan-1:#1e2733;   --pu-kad-aksan-2:#27394d;   --pu-kad-aksan-3:#2f4b66;
  --pu-kad-aksan-s1:#36587a;  --pu-kad-aksan-s2:#487db0;  --pu-kad-aksan-s3:#5eaaf0;
  --pu-yuk-1:#1b2430;  --pu-yuk-2:#1d2938;  --pu-yuk-3:#202d3f;  --pu-yuk-4:#223247;  --pu-yuk-5:#24374e;  --pu-yuk-6:#273b56;  --pu-yuk-7:#29405d;  --pu-yuk-8:#2b4565;  --pu-yuk-9:#2e496c;  --pu-yuk-10:#304e74;
  --pu-yuk-s1:#2f4a66;  --pu-yuk-s2:#345575;  --pu-yuk-s3:#395f85;  --pu-yuk-s4:#3f6a94;  --pu-yuk-s5:#4475a3;  --pu-yuk-s6:#497fb3;  --pu-yuk-s7:#4e8ac2;  --pu-yuk-s8:#5495d1;  --pu-yuk-s9:#599fe1;  --pu-yuk-s10:#5eaaf0;
}

/* ── 2b. eSign VARYANTI — koyu temada ProxAll mor aksanı (Fatih kararı 2026-09-18) ─
   <body class="pu-sayfa pu-sayfa--esign">. Açık temada aksan DEĞİŞMEZ (ev mavisi);
   yalnız html.dark altında aksan token'ları menekşeye bağlanır. Yalnız token. */
html.dark .pu-sayfa--esign{
  --pu-aksan:#8b73ff;         --pu-aksan-zemin:#221c3d; --pu-aksan-cizgi:#3b3170; --pu-aksan-ustu:#0b0b0f;
}

/* ── 3. TEMEL ──────────────────────────────────────────────────────────────── */
body.pu-sayfa{
  margin:0; background:var(--pu-zemin); color:var(--pu-yazi);
  font-family:var(--pu-yazi-aile); font-size:var(--pu-yazi-boy);
  -webkit-font-smoothing:antialiased;
}
html.dark body.pu-sayfa{background:var(--pu-zemin);color:var(--pu-yazi)}
.pu-sayfa *{box-sizing:border-box}
.pu-sayi{font-variant-numeric:tabular-nums}
.pu-mono{font-family:var(--pu-mono);font-size:12px}
.pu-baslik{font-size:22px;font-weight:720;letter-spacing:-.5px;margin:0;color:var(--pu-yazi)}
html.dark .pu-baslik{color:var(--pu-yazi)}
.pu-alt{font-size:12.5px;color:var(--pu-soluk);margin:4px 0 0}
.pu-ipucu{font-size:12px;color:var(--pu-soluk)}

/* Sayfa kabı — her ekranın içerik sarmalayıcısı. Ekran kendi .xx-kap genişliğini YAZMAZ.
   Üst menü (crm-header) aynı token'ları okur: logo ile sayfa başlığı aynı dikey çizgide.
   Dar ekranda yalnız kenar daralır; genişlik kuralı değişmez. */
.pu-kap{max-width:var(--pu-sayfa-genislik);margin-left:auto;margin-right:auto;
  padding-left:var(--pu-sayfa-kenar);padding-right:var(--pu-sayfa-kenar)}
@media (max-width:600px){ :root{--pu-sayfa-kenar:16px} }

/* ── 4. KART (widget) ──────────────────────────────────────────────────────── */
.pu-kart{background:var(--pu-yuzey);border-radius:var(--pu-kose-kart);box-shadow:var(--pu-golge);overflow:hidden}
.pu-kart-bas{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid var(--pu-cizgi);font-size:13px;font-weight:700;color:var(--pu-yazi)}
.pu-kart-ek{margin-left:auto;font-size:11px;font-weight:600;color:var(--pu-soluk)}
.pu-kart-govde{padding:13px 15px}

.pu-nokta{width:8px;height:8px;border-radius:50%;background:var(--pu-cukur);flex:none}
.pu-nokta--tamam{background:var(--pu-basari)}
.pu-nokta--etkin{background:var(--pu-aksan)}
.pu-nokta--uyari{background:var(--pu-uyari)}
.pu-nokta--tehlike{background:var(--pu-tehlike)}

/* ── 5. DÜĞME ──────────────────────────────────────────────────────────────── */
.pu-dugme{display:inline-flex;align-items:center;gap:7px;border:0;text-decoration:none;border-radius:var(--pu-kose-kontrol);
  padding:10px 14px;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;
  background:var(--pu-cukur);color:var(--pu-yazi-2)}
.pu-dugme--birincil{background:var(--pu-aksan);color:var(--pu-aksan-ustu)}
.pu-dugme--basari{background:var(--pu-basari);color:var(--pu-aksan-ustu)}
.pu-dugme--tehlike{background:var(--pu-tehlike);color:var(--pu-aksan-ustu)}
.pu-dugme--uyari{background:var(--pu-uyari-zemin);color:var(--pu-uyari)}
.pu-dugme--hayalet{background:transparent;color:var(--pu-aksan);padding-left:4px;padding-right:4px}
.pu-dugme--kucuk{font-size:11.5px;padding:6px 10px}
.pu-dugme--tam{width:100%;justify-content:center;padding:12px}
/* ── DÜĞME HÂLLERİ — `:hover` ve `:focus-visible` BUGÜNE KADAR HİÇ YOKTU ──────
   Ölçüldü 10 Eki: `.pu-dugme`nin tek hâli vardı (`[disabled]`). Klavyeyle gezen
   kullanıcı hangi düğmenin üstünde olduğunu GÖREMİYORDU — bütün Pusula
   ekranlarını ilgilendiren bir eksik, tek ekranın sorunu değil.
   `:focus-visible` (`:focus` DEĞİL): fareyle tıklayana halka çıkmaz, yalnız
   klavyeyle gezene çıkar. */
.pu-dugme{transition:background .12s ease,box-shadow .12s ease,color .12s ease}
.pu-dugme:hover:not([disabled]){filter:brightness(.96)}
.pu-dugme:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pu-aksan-zemin),0 0 0 1px var(--pu-aksan)}
.pu-dugme[disabled]{opacity:.42;cursor:not-allowed}

/* ── KARAR DÜĞMELERİ — SAKİN HİYERARŞİ (Fatih 10 Eki, seçenek A) ─────────────
   Üç karar düğmesi de DOLGULUYDU: hangisinin yıkıcı olduğu renkten
   anlaşılmıyordu ve üçü aynı ağırlıkta bağırıyordu.
   Kural: YALNIZ birincil dolu. İkincil ve yıkıcı çerçeveli, renk İKONDA.
   `--yikici` üstüne gelince kırmızıya döner — Storno GERİ ALINAMAZ ve sürekli
   kırmızı duran düğme göze alışkanlık yapar; dokununca kendini belli etmesi
   yanlış tıklamayı azaltır (Fatih'in gerekçesi). */
.pu-dugme--cerceve{background:transparent;color:var(--pu-yazi-2);
  box-shadow:inset 0 0 0 1px var(--pu-cizgi)}
.pu-dugme--cerceve:hover:not([disabled]){filter:none;background:var(--pu-uyari-zemin);
  color:var(--pu-uyari);box-shadow:inset 0 0 0 1px var(--pu-uyari)}
.pu-dugme--yikici{background:transparent;color:var(--pu-soluk);
  box-shadow:inset 0 0 0 1px var(--pu-cizgi)}
.pu-dugme--yikici>i{color:var(--pu-tehlike)}
.pu-dugme--yikici:hover:not([disabled]){filter:none;background:var(--pu-tehlike);
  color:var(--pu-aksan-ustu);box-shadow:none}
.pu-dugme--yikici:hover:not([disabled])>i{color:var(--pu-aksan-ustu)}
/* KİLİTLİ: düğme DURUYOR ama basılabilir değilmiş gibi görünür. Onay için eksik
   madde varken kullanılır — kapı SUNUCUDA (`_swf_eksikler`), bu yalnız görünüm.
   `disabled` DEĞİL: tıklayınca ekran kullanıcıyı eksik alana götürür. */
.pu-dugme--kilitli{background:var(--pu-cukur);color:var(--pu-soluk);
  box-shadow:inset 0 0 0 1px var(--pu-cizgi);cursor:not-allowed}
.pu-dugme--kilitli>i{color:var(--pu-soluk)}
.pu-dugme--kilitli:hover:not([disabled]){filter:none;background:var(--pu-cukur);
  color:var(--pu-yazi-2);box-shadow:inset 0 0 0 1px var(--pu-cizgi)}
.pu-dugme--kilitli:hover:not([disabled])>i{color:var(--pu-yazi-2)}
/* Yıkıcı eylemden ÖNCE ayraç: yanlışlıkla tıklamayı zorlaştırır. */
.pu-dugme-ayrac{width:1px;height:18px;background:var(--pu-cizgi);align-self:center;
  margin:0 3px;flex:0 0 auto}

/* ── AYRIK DÜĞME — DURUM + onu değiştiren eylem, tek köşe ────────────────────
   Fatih 10 Eki, seçenek C1: *"statüleri neden bir butonda göstermiyorsun"*.
   Sol yarı durumu YAZAR (tıklanmaz — bir olgu, eylem değil), sağ yarı onu
   DEĞİŞTİRİR.

   NEDEN C1 (Storno dışarıda): C2'de Storno bir menünün içine giriyordu. Storno
   geri alınamaz ve bu dosyada zaten ayrı bir varyantı var (`--yikici`, üstüne
   gelince kırmızıya döner). Geri alınamaz eylem görünür ve ayrı durur.

   SALT OKUNUR HÂLİ AYRI BİLEŞEN (`pu-ayrik-salt`): durumu değiştiremeyen
   kullanıcı basılabilir bir şey GÖRMEZ. Ölçüldü (karar ekranı, 10 Eki): beş
   halin üçünde eylem yok — onaylı/yetkisiz · storno/yetkisiz · yetki yok.
   Düğmeyi `disabled` ile göstermek "yetkin olsa basardın" der; olgu bu değil.
   Kapı UÇTA; bu yalnız görünüm. */
.pu-ayrik{display:inline-flex;align-items:stretch;border-radius:var(--pu-kose-kontrol);
  overflow:hidden;flex:0 0 auto}
.pu-ayrik>.pu-ayrik-durum{display:inline-flex;align-items:center;gap:7px;padding:0 13px;
  font-size:12.5px;font-weight:700;background:var(--pu-cukur);color:var(--pu-yazi-2);
  white-space:nowrap}
.pu-ayrik>.pu-dugme{border-radius:0;box-shadow:inset 1px 0 0 rgba(0,0,0,.10)}
.pu-ayrik-salt{display:inline-flex;align-items:center;gap:7px;padding:0 13px;
  border-radius:var(--pu-kose-kontrol);font-size:12.5px;font-weight:700;
  background:var(--pu-cukur);color:var(--pu-yazi-2);white-space:nowrap;flex:0 0 auto}
.pu-ayrik--basari>.pu-ayrik-durum,.pu-ayrik-salt--basari{background:var(--pu-basari-zemin);color:var(--pu-basari)}
.pu-ayrik--tehlike>.pu-ayrik-durum,.pu-ayrik-salt--tehlike{background:var(--pu-tehlike-zemin);color:var(--pu-tehlike)}

/* ── KOYU TEKRARI: YALNIZ ESKİ TEMANIN BASTIĞI ÖZELLİK (19 Eyl) ──────────────
   İki Pusula ekranı (crm_fatura.html · satis_olustur.html) eski ev tarzı
   /crm-theme.css'i de çekiyor. Oradaki koyu kuralları ÖLÇÜLDÜ, bastığı her şey:
     html.dark body                              background,color
     html.dark input,select,textarea,.btn        background,border-color,color
     html.dark th,td,.row                        border-color
     html.dark h1,h2,h3,...                      color
     html.dark a                                 color
   Pusula bunları koyu için TEKRARLIYOR, yoksa eski tema kazanırdı. Ama tekrar
   fazlaydı: ölçü ve yazı tipi bildirimleri de kopyalanmıştı ve `html.dark X`
   (0,2,1) sayfanın tek sınıflı kuralını (0,1,0) yeniyordu. Ölçüldü:
     .db-tarih   127 -> 900 px   · .kg-secici 200 -> 900 px
     .kg-agirlik padding 6/10 -> 9/11
   Kural: koyu tekrarı YALNIZ yukarıdaki listedeki özellikleri taşır. Ölçü,
   yazı tipi, hizalama tekrarlanmaz — sayfalar kendi ölçüsünü tek sınıfla verir. */

/* ── 6. GİRDİ ──────────────────────────────────────────────────────────────── */
.pu-alan-etiket{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:650;color:var(--pu-soluk);margin-bottom:5px}
.pu-zorunlu{color:var(--pu-tehlike);font-weight:800}
.pu-girdi{width:100%;border:0;border-radius:var(--pu-kose-kontrol);background:var(--pu-cukur);
  color:var(--pu-yazi);font:inherit;font-size:12.5px;padding:9px 11px;outline:none}
/* KOYU TEMA TEKRARI — neden var, neden GENİŞLİK YOK (19 Eyl):
   İki Pusula ekranı (crm_fatura.html, satis_olustur.html) eski ev tarzı
   /crm-theme.css'i de çekiyor; orada `html.dark input{background:#2c2c33;...}`
   var ve tek sınıflı .pu-girdi'yi yeniyor. Renk bildirimleri bu yüzden koyu
   için TEKRARLANIYOR.
   Ama tekrara `width:100%` de dahildi ve bedeli şuydu: sayfanın kendi dar alan
   kuralı (.kg-secici 200px · .kg-agirlik 84px · .db-tarih) koyu temada eziliyor,
   alanlar satırı kaplıyordu. Ölçüldü (19 Eyl, aynı sayfa açık/koyu):
     kg-secici 200 -> 900 · kg-agirlik 84 -> 900 · db-tarih 127 -> 900.
   Genişlik tekrardan ÇIKARILDI: koyu tema artık genişliğe karışmıyor, sayfalar
   kendi ölçüsünü tek sınıfla verebiliyor. Renk tekrarı duruyor. */
html.dark .pu-girdi{border:0;background:var(--pu-cukur);color:var(--pu-yazi)}
.pu-girdi:focus{box-shadow:0 0 0 3px var(--pu-aksan-zemin),inset 0 0 0 1.5px var(--pu-aksan-cizgi)}
.pu-girdi-ikonlu{display:flex;align-items:center;gap:8px;min-height:36px;background:var(--pu-cukur);border-radius:var(--pu-kose-kontrol);padding:0 12px;color:var(--pu-soluk)}
.pu-girdi-ikonlu:focus-within{box-shadow:0 0 0 3px var(--pu-aksan-zemin),inset 0 0 0 1.5px var(--pu-aksan-cizgi)}
.pu-girdi-ikonlu input{border:0;background:transparent;color:var(--pu-yazi);font:inherit;outline:none;width:100%;padding:0}
html.dark .pu-girdi-ikonlu input{border:0;background:transparent;color:var(--pu-yazi)}
/* Arama/süzgeç alanı (Fatih 26 Eki: "süzgeç olduğu belli olsun"): ikon + KENARLIK + temizle düğmesi. Telefon seçici (/crm/cihazli) ilk kullanıcı. */
.pu-girdi-ikonlu--cerceveli{min-height:42px;box-shadow:inset 0 0 0 1px var(--pu-cizgi)}
.pu-girdi-ikonlu--cerceveli:focus-within{box-shadow:0 0 0 3px var(--pu-aksan-zemin),inset 0 0 0 1.5px var(--pu-aksan-cizgi)}
.pu-girdi-ikonlu--cerceveli input{min-height:40px;font-weight:650}
.pu-girdi-temizle{flex:none;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:8px;background:var(--pu-yuzey);color:var(--pu-soluk);font:inherit;cursor:pointer}
.pu-girdi-temizle:hover{color:var(--pu-yazi)}
.pu-girdi-temizle:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pu-aksan-zemin)}
.pu-girdi-temizle[hidden]{display:none}
/* Tarayıcı otomatik doldurması (kayıtlı e-posta/şifre) kutuya kendi açık mavi zeminini ve koyu yazısını basıyordu;
   koyu temada açık şerit çıkıyordu (16 Eyl, giriş ekranı). Zemin iç gölgeyle kutu rengine boyanır, yazı token'dan. */
.pu-girdi:-webkit-autofill, .pu-girdi:-webkit-autofill:hover, .pu-girdi:-webkit-autofill:focus,
.pu-girdi-ikonlu input:-webkit-autofill, .pu-girdi-ikonlu input:-webkit-autofill:hover, .pu-girdi-ikonlu input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--pu-yazi);caret-color:var(--pu-yazi);
  -webkit-box-shadow:0 0 0 1000px var(--pu-cukur) inset;box-shadow:0 0 0 1000px var(--pu-cukur) inset;
  transition:background-color 99999s ease-out 0s}
.pu-girdi:autofill, .pu-girdi-ikonlu input:autofill{-webkit-text-fill-color:var(--pu-yazi);box-shadow:0 0 0 1000px var(--pu-cukur) inset}
.pu-girdi--buyuk{height:42px;font-size:15px;font-weight:650}

/* ── 7. ÇİP · ROZET ────────────────────────────────────────────────────────── */
.pu-cip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 12px;border:0;font-family:inherit;border-radius:var(--pu-kose-hap);background:var(--pu-cukur);color:var(--pu-yazi-2);cursor:pointer}
.pu-cip--secili{background:var(--pu-aksan);color:var(--pu-aksan-ustu)}
/* Uyarı çipi: engelleyici bir eksiği TEK SATIRDA söyler; tıklanabilir —
   kullanıcıyı eksiğin kendisine götürür (karar ekranı, Fatih 10 Eki C). */
.pu-cip--uyari{background:var(--pu-uyari-zemin);color:var(--pu-yazi);max-width:100%;overflow:hidden}
.pu-cip--uyari>i{color:var(--pu-uyari);flex:none}
.pu-cip--uyari>span{color:var(--pu-soluk);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.pu-cip--uyari:hover{background:var(--pu-uyari);color:var(--pu-aksan-ustu)}
.pu-cip--uyari:hover>i,.pu-cip--uyari:hover>span{color:inherit}
.pu-rozet{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:750;padding:2px 8px;border-radius:var(--pu-kose-hap);white-space:nowrap;background:var(--pu-cukur);color:var(--pu-soluk)}
.pu-rozet--basari{background:var(--pu-basari-zemin);color:var(--pu-basari)}
.pu-rozet--uyari{background:var(--pu-uyari-zemin);color:var(--pu-uyari)}
/* DOLU UYARI — "bekliyor" değil "sana iş düşüyor". Yeni RENK değil, aynı
   uyarı renginin dolu hâli: renk sözlüğü büyümeden bir kademe yukarı çıkar.
   (Fatih 11 Eki, satış listesi: *"correction'da ise bu yapı biraz da net
   olmalı"*.) Koyu temada da aynı: zemin uyarı rengi, yazı onun üstü. */
.pu-rozet--duzelt{background:var(--pu-uyari);color:var(--pu-aksan-ustu);font-weight:800}
.pu-rozet--tehlike{background:var(--pu-tehlike-zemin);color:var(--pu-tehlike)}
.pu-rozet--bilgi{background:var(--pu-aksan-zemin);color:var(--pu-aksan)}
.pu-rozet--mor{background:var(--pu-mor-zemin);color:var(--pu-mor)}
/* SARAN BAĞLAM (2 Kas, Nexphone listesi): dar tabloda rozet BOŞLUKTAN sarar, tabloyu kartın dışına itmez. Varsayılan rozet nowrap kalır; bağlam sınıfı kabın üstüne konur. */
.pu-sarar .pu-rozet{white-space:normal;text-align:left}
/* İÇERİK ÇİPİ RENKLERİ (10 Eki) — kargo ekranı "kutuda ne var"ı renkle
   ayırıyor. Sayfa kendi rengini YAZMAZ; varyant burada tanımlı.
   `pu-cip--ac` belgesi olan çip: tıklanır, altı çizili, sonunda ↗. */
.pu-cip--aksan{background:var(--pu-aksan-zemin);color:var(--pu-aksan);border-color:transparent}
.pu-cip--mor{background:var(--pu-mor-zemin);color:var(--pu-mor);border-color:transparent}
.pu-cip--basari{background:var(--pu-basari-zemin);color:var(--pu-basari);border-color:transparent}
.pu-cip--camg{background:var(--pu-camg-zemin);color:var(--pu-camg);border-color:transparent}
.pu-cip--pembe{background:var(--pu-pembe-zemin);color:var(--pu-pembe);border-color:transparent}
.pu-cip--ac{text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pu-cip--ac::after{content:' \2197';font-weight:700;font-size:.85em}
/* AKIS — AN TEMELLI zaman cizgisi (E tasarimi, Fatih 9 Eki onayladi).
   Cizim: `.ekip/tasarim/E_akis_notlar.png`
   An = ayni damgadaki olaylar. Not ANIN ICINDE alinti; ayri "Notlar" basligi
   YOK (olculdu: %73 satista hic not yok, bos baslik 254 satirda yer tutardi).
   Sistem kaydi GIZLENMIYOR, katlaniyor. Uzun not 3 satirda kirpiliyor —
   sabit yukseklikli kutu yok, 626 harflik not var. */
.pu-akis-bas{display:flex;align-items:baseline;gap:8px}
/* Anın başlığındaki ek: "2 alan" — kararın yanında, küçük ve sessiz.
   Ayrı satır DEĞİL: E'nin çiziminde başlığın devamı. */
.pu-akis-ek{margin-left:6px;font-size:10.5px;font-weight:500;color:var(--pu-soluk);
  background:var(--pu-cukur);border-radius:var(--pu-kose-kontrol);padding:1px 6px;white-space:nowrap}
.pu-akis-ne{margin-left:auto;font-size:10.5px;color:var(--pu-soluk);white-space:nowrap;font-variant-numeric:tabular-nums}
.pu-akis-kim{font-size:11.5px;color:var(--pu-soluk);margin-top:1px}
.pu-akis-not{margin:7px 0 0;padding:8px 10px;background:var(--pu-cukur);border-radius:10px}
.pu-akis-q{font-size:12px;color:var(--pu-yazi);display:block}
.pu-akis-q.pu-akis-kirp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pu-akis-devam{font-size:11px;font-weight:700;color:var(--pu-aksan);cursor:pointer;margin-top:3px;display:inline-block}
.pu-akis-sisac{font-size:11px;color:var(--pu-soluk);cursor:pointer;margin-top:6px;display:inline-block}
.pu-akis-sisac:hover{color:var(--pu-yazi-2)}
.pu-akis-sis{margin-top:5px;font-size:11px;color:var(--pu-soluk);line-height:1.6}
.pu-akis-onceki{text-align:center;padding:3px 0 10px;font-size:12px;font-weight:650;
  color:var(--pu-aksan);cursor:pointer}

/* KAYIT DURUMU — B YERLESIMI (E tasarimi, Fatih 9 Eki onayladi).
   TEK satir: renkli nokta + operatorun HAM degeri. Kova sozcugu YALNIZ
   istisnada (`is var` · `eslenmemis`).

   NICIN TUREV SATIR KALKTI: `Yes -> bitti` deterministik bir esleme; ham
   degeri yazip yorumunu da yazmak ayni olguyu iki kez soylemek. Yorum RENGE
   ve NOKTAYA tasindi, sozcuk tam gerektigi yerde kaliyor.
   Olculdu (E): satir 58 -> 52 px; uzun degerde 74 -> 52 (musteri adi artik
   iki satira kirilmiyor). `is var` CRM listesinde %4, officer kuyrugunda %3 —
   sozcuk satirlarin %75-96'sinda CIKMIYOR. Manager kuyrugunda %49; E uyardi,
   orada basildiktan sonra olculecek.

   HAM DEGER CEVRILMEZ (operatorun kendi adi). Kova sozcugu cevrilir.
   RENK TEK BASINA ANLAM TASIMAZ: nokta + balon + sutun alti anahtar seridi. */
.pu-opdurum{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;vertical-align:middle}
.pu-opdurum-nokta{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--pu-cizgi)}
.pu-opdurum-ham{font-size:12px;font-weight:650;color:var(--pu-yazi-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pu-opdurum-kova{font-size:10px;font-weight:750;color:var(--pu-soluk);flex:0 0 auto;white-space:nowrap}
.pu-opdurum--uyari .pu-opdurum-nokta{background:var(--pu-uyari)}
.pu-opdurum--uyari .pu-opdurum-ham{color:var(--pu-uyari)}
.pu-opdurum--uyari .pu-opdurum-kova{color:var(--pu-uyari)}
.pu-opdurum--durgun .pu-opdurum-nokta{background:var(--pu-soluk)}
.pu-opdurum--durgun .pu-opdurum-ham{color:var(--pu-yazi)}
.pu-opdurum--sessiz .pu-opdurum-ham{font-weight:550}
.pu-opdurum--solgun{opacity:.55}
.pu-opdurum--kesikli .pu-opdurum-nokta{background:transparent;box-shadow:inset 0 0 0 1px var(--pu-soluk)}
.pu-opdurum--kesikli .pu-opdurum-kova{font-style:italic}

/* BALON — ustune gelince tamami okunuyor (Fatih: "uzerine gelince okuyabiliyor
   olmam gerekiyor"). Tarayicinin kendi `title`i bu isi GORMUYOR (E olctu):
   bir saniye gecikiyor, bicimlenmiyor, uzun metni kirpiyor ve DOKUNMATIKTE
   hic calismiyor. Davranis `/pusula-balon.js`te; burada yalniz bicim. */
.pu-balon{position:relative;display:inline-flex;min-width:0;max-width:100%}
.pu-balon-ac{text-decoration:underline dotted var(--pu-cizgi);text-underline-offset:3px;
  cursor:help;min-width:0;max-width:100%;display:inline-flex;align-items:center;gap:6px}
.pu-balon-ac:focus-visible{outline:2px solid var(--pu-aksan);outline-offset:2px;border-radius:4px}
.pu-balon-kutu{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:230px;max-width:330px;
  background:var(--pu-yuzey);border-radius:var(--pu-kose-kart);padding:12px 14px;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 12px 32px -10px rgba(0,0,0,.28);
  white-space:normal;text-align:left;display:none}
.pu-balon-kutu[data-acik="1"]{display:block}
.pu-balon-kutu[data-yon="sol"]{left:auto;right:0}
.pu-balon-ham{font-size:13px;font-weight:750;color:var(--pu-yazi);margin-bottom:9px;
  padding-bottom:9px;border-bottom:1px solid var(--pu-cizgi);word-break:break-word}
.pu-balon-sat{display:flex;gap:12px;font-size:12px;margin-top:3px}
.pu-balon-sat b{margin-left:auto;font-weight:750;color:var(--pu-yazi);text-align:right}
.pu-balon-sat span{color:var(--pu-soluk)}
.pu-balon-not{font-size:11.5px;color:var(--pu-yazi-2);margin-top:9px;line-height:1.45}



/* ── 7b. SEÇİM SATIRI — işaretlenebilir liste öğesi (sözleşme, kayıt, aday) ── */
.pu-secim{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--pu-cizgi);border-radius:var(--pu-kose-kontrol);background:var(--pu-yuzey);cursor:pointer;font-size:12.5px}
.pu-secim+.pu-secim,.pu-secim+.pu-secim-detay{margin-top:6px}
.pu-secim--secili{border-color:var(--pu-aksan-cizgi);background:var(--pu-aksan-zemin)}
.pu-secim input{accent-color:var(--pu-aksan);margin:0}
.pu-secim-ana{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pu-secim-sag{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pu-secim-detay{border:1px solid var(--pu-cizgi);border-top:0;border-radius:0 0 var(--pu-kose-kontrol) var(--pu-kose-kontrol);padding:6px 12px 10px;margin-top:-6px}
.pu-baglanti{background:none;border:0;padding:0;color:var(--pu-aksan);font:inherit;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none}

/* ── 7c. KARO · ÇEKMECE — seçenek karosu (fiyat), yandan açılan panel ───────── */
.pu-karo{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border:1px solid var(--pu-cizgi);border-radius:var(--pu-kose-kontrol);background:var(--pu-yuzey);cursor:pointer;text-align:left;font:inherit;color:var(--pu-yazi)}
.pu-karo--secili{border-color:var(--pu-aksan);background:var(--pu-aksan-zemin)}
.pu-karo-b{font-size:16px;font-weight:720;font-variant-numeric:tabular-nums}
.pu-karo-k{font-size:11px;color:var(--pu-soluk)}
.pu-secim--silik{opacity:.55;cursor:default}
.pu-perde{position:fixed;inset:0;background:var(--pu-perde);z-index:40}
.pu-cekmece{position:fixed;top:0;right:0;bottom:0;width:min(980px,96vw);background:var(--pu-zemin);border-left:1px solid var(--pu-cizgi);z-index:41;display:flex;flex-direction:column}
.pu-cekmece-bas{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--pu-cizgi);background:var(--pu-yuzey)}
.pu-cekmece-govde{flex:1;min-height:0;overflow:auto;padding:14px 18px}
.pu-cekmece-dip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--pu-cizgi);background:var(--pu-yuzey)}

/* ── 7d. SEKME · MODAL · TAKVİM · BIRAKMA ALANI ─────────────────────────────── */
.pu-sekmeler{display:flex;gap:4px;border-bottom:1px solid var(--pu-cizgi);margin-bottom:10px}
.pu-sekme{display:inline-flex;align-items:center;gap:6px;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--pu-soluk);padding:7px 10px;border-bottom:2px solid transparent;cursor:pointer}
.pu-sekme--secili{color:var(--pu-yazi);border-bottom-color:var(--pu-aksan)}
.pu-modal{position:fixed;inset:5vh 6vw;background:var(--pu-yuzey);border-radius:var(--pu-kose-kart);z-index:41;display:flex;flex-direction:column;overflow:hidden}
.pu-modal-bas{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--pu-cizgi)}
/* ORTA PENCERE — onay/sonuç diyaloğu (satış ekranı 15 Eyl): ortada, CRM üst şeridinin (z 9600) de üstünde */
.pu-perde--ust{z-index:9700;background:rgba(17,17,20,.46)}
.pu-modal--orta{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);max-height:88vh;z-index:9701;box-shadow:0 24px 60px rgba(0,0,0,.25)}
/* BELGE ÖNİZLEME — alanların yanında küçük belge (satış ekranı kimlik paneli, 15 Eyl) */
.pu-belge-onizleme{height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in;background:var(--pu-zemin);border-radius:var(--pu-kose-kart);padding:10px}
.pu-modal-dip{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--pu-cizgi);background:var(--pu-zemin)}
.pu-modal-govde{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--pu-cukur)}
.pu-modal-govde img{max-width:100%;max-height:100%;object-fit:contain}
.pu-birak{border:1.5px dashed var(--pu-cizgi);border-radius:var(--pu-kose-kontrol);padding:12px;text-align:center;font-size:12px;color:var(--pu-soluk);cursor:pointer}
.pu-birak:hover{border-color:var(--pu-aksan-cizgi);color:var(--pu-aksan)}

/* ── 7e. BÖLÜM — kart içinde ince çizgiyle ayrılmış alt bölüm ─────────────── */
.pu-bolum{margin-top:14px;padding-top:12px;border-top:1px solid var(--pu-cizgi)}
.pu-bolum-bas{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--pu-yazi-2);margin-bottom:8px}

/* ── 7f. İLERLEME ÇUBUĞU — genişlik çizimde verilir (style="width:..%") ────── */
.pu-ilerleme{height:5px;border-radius:var(--pu-kose-hap);background:var(--pu-cukur);overflow:hidden}
.pu-ilerleme-dolu{height:100%;width:0;background:var(--pu-aksan);border-radius:inherit;transition:width .1s linear}

/* ── 7g. ÖNERİ LİSTESİ — alanın altında açılan seçim kutusu (fixed) ─────────── */
.pu-oneri{position:fixed;z-index:45;background:var(--pu-yuzey);border:1px solid var(--pu-cizgi);border-radius:var(--pu-kose-kontrol);box-shadow:var(--pu-golge);padding:4px;max-height:280px;overflow:auto}
.pu-oneri-oge{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:12.5px;color:var(--pu-yazi);padding:7px 9px;border-radius:8px;cursor:pointer}
.pu-oneri-oge:hover,.pu-oneri-oge--secili{background:var(--pu-cukur)}
/* menü bölüm başlığı + silinebilir satır (görünüm menüleri: liste + kuyruk) */
.pu-oneri-bas{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--pu-soluk);padding:8px 9px 4px}
.pu-oneri-satir{display:flex;align-items:center}
.pu-oneri-satir .pu-oneri-oge:first-child{flex:1}
.pu-oneri-sil{width:auto;color:var(--pu-soluk)}
.pu-oneri--satir{position:static;margin-top:4px;max-height:240px}      /* girdinin ALTINDA akışta açılan liste (fixed/absolute değil: kart taşmayı keser): telefon seçici */

/* ── 8. NOT · HATA · KİLİT ─────────────────────────────────────────────────── */
.pu-not{display:flex;align-items:flex-start;gap:8px;border-radius:11px;padding:10px 12px;font-size:12px;line-height:1.45;background:var(--pu-aksan-zemin);color:var(--pu-aksan)}
.pu-not--basari{background:var(--pu-basari-zemin);color:var(--pu-basari)}
.pu-not--uyari{background:var(--pu-uyari-zemin);color:var(--pu-uyari)}
.pu-not--tehlike{background:var(--pu-tehlike-zemin);color:var(--pu-tehlike)}
.pu-not--mor{background:var(--pu-mor-zemin);color:var(--pu-mor)}
.pu-kilit{display:flex;align-items:center;gap:8px;color:var(--pu-soluk);font-size:12px}

/* ── 9. ANAHTAR-DEĞER ──────────────────────────────────────────────────────── */
.pu-kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--pu-cizgi);font-size:12.5px}
.pu-kv:first-child{border-top:0}
.pu-kv-a{color:var(--pu-soluk)}
.pu-kv-d{font-weight:600;text-align:right;color:var(--pu-yazi)}

/* ── 10. ADIM ŞERİDİ ───────────────────────────────────────────────────────── */
.pu-adim{display:grid;gap:8px}
.pu-adim-l{font-size:11px;font-weight:650;color:var(--pu-yazi-2)}
.pu-adim-l span{display:block;font-size:9.5px;font-weight:500;color:var(--pu-soluk);margin-top:1px}
.pu-adim-l--etkin{color:var(--pu-aksan)} .pu-adim-l--uyari{color:var(--pu-uyari)}
.pu-adim-s{height:5px;border-radius:var(--pu-kose-hap);background:var(--pu-cukur)}
.pu-adim-s--tamam{background:var(--pu-basari)} .pu-adim-s--etkin{background:var(--pu-aksan)} .pu-adim-s--uyari{background:var(--pu-uyari)}

/* ── 10b. ANAHTAR (açık/kapalı) ────────────────────────────────────────────────
   Kimlik yetki ekranları için eklendi (21 Eyl). Depoda anahtar çizen ekranlar
   vardı ama HER BİRİ KENDİ stilini yazıyordu — Pusula'da bileşen yoktu, ölçüldü.
   Üçüncü bir kopya yazılmadan buraya alındı.

   Kullanım — erişilebilir olan budur, <div> ile taklit ETME:
     <button type="button" class="pu-anahtar" role="switch" aria-checked="true">
       <span class="pu-anahtar-top"></span></button>
   Durum YALNIZ aria-checked'den okunur: ayrı bir "acik" sınıfı eklenirse iki
   kaynak olur ve ekran okuyucu ile göz farklı şey görür. */
.pu-anahtar{position:relative;flex:none;width:38px;height:22px;padding:0;border:0;cursor:pointer;
  border-radius:var(--pu-kose-hap);background:var(--pu-cizgi);transition:background .15s}
.pu-anahtar-top{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--pu-yuzey);box-shadow:var(--pu-golge);transition:transform .15s}
.pu-anahtar[aria-checked="true"]{background:var(--pu-basari)}
.pu-anahtar[aria-checked="true"] .pu-anahtar-top{transform:translateX(16px)}
.pu-anahtar:focus-visible{outline:2px solid var(--pu-aksan-cizgi);outline-offset:2px}
/* Devre dışı: kapalı GÖRÜNMEZ, yalnız soluklaşır — "kapalı" ile "değiştiremezsin"
   ayrı şeylerdir; ikisi aynı görünürse kullanıcı yanlış durumu okur. */
.pu-anahtar[disabled]{cursor:not-allowed;opacity:.45}

/* ── 11. TABLO ─────────────────────────────────────────────────────────────── */
.pu-tablo{width:100%;border-collapse:collapse;font-size:12.5px}
.pu-tablo th{text-align:left;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--pu-soluk);font-weight:800;padding:11px 15px;background:var(--pu-cukur);border:0}
.pu-tablo td{padding:11px 15px;border:0;border-top:1px solid var(--pu-cizgi);color:var(--pu-yazi)}
html.dark .pu-tablo th{border:0;color:var(--pu-soluk)}
html.dark .pu-tablo td{border:0;border-top:1px solid var(--pu-cizgi);color:var(--pu-yazi)}

/* ── 12. YERLEŞİM YARDIMCILARI ─────────────────────────────────────────────── */
.pu-izgara-3{display:grid;grid-template-columns:330px minmax(0,1fr) 320px;gap:16px;align-items:start}
.pu-kolon{display:flex;flex-direction:column;gap:16px;min-width:0}
.pu-yapis{position:sticky;top:16px}
/* .pu-yapis-kayar — yapışkan panel ekrandan UZUNSA kendi içinde kaysın (opt-in).
   position:sticky yalnız eleman görünür alandan KISAYSA işe yarar; uzun panel yapıştığı
   anda alt kısmı ekran dışında kalır ve oraya HİÇ ulaşılamaz — karar ekranında
   Onayla/Reddet düğmeleri böyle erişilemez oldu (Fatih, 21 Eyl). .pu-yapis'in kendisine
   eklenmedi: paylaşılan sınıf, kısa paneller kırpılmasın. Dar ekranda (<=1180px)
   .pu-yapis zaten static; orada max-height içeriği kırpardı, o yüzden yalnız geniş ekran. */
@media (min-width:1181px){ .pu-yapis-kayar{max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain} }
@media (max-width:1180px){ .pu-izgara-3{grid-template-columns:1fr} .pu-yapis{position:static} }

/* ── 14. FORM BÖLÜMÜ + İKİLİ SEÇİM + KİLİTLİ DEĞER ─────────────────────────
   Kullanıcı kararı 13 Eyl (D "düzenli form"): her kayıtta aynı bölümler, aynı
   sırada; solda bölüm adı, sağda 3 sütunlu ızgara. Evet/Hayır iki parçalı TEK
   düğme — cevapsızken hiçbir parça seçili değil (sessiz varsayılan yok).
   Zorunlu boş alan kırmızı çerçeve; katalogdan gelen değer kilitli kutu. */
.pu-form-bolum{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 24px;padding:14px 18px;border-top:1px solid var(--pu-cizgi)}
.pu-form-bolum-bas{padding-top:21px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--pu-soluk)}
.pu-form-bolum-bas small{display:block;margin-top:3px;font-size:11px;font-weight:500;letter-spacing:0;text-transform:none}
.pu-form-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;align-items:start}
.pu-form-tam{grid-column:1/-1}
/* Izgara içinde ince ayırıcı — bağlı alanlar grubunu ana sorulardan ayırır (satış kartı "Hat", 14 Eyl). */
.pu-form-ayrac{grid-column:1/-1;height:1px;background:var(--pu-cizgi);margin:2px 0}
.pu-ikili{display:flex;min-height:36px;border:1px solid var(--pu-cizgi);border-radius:var(--pu-kose-kontrol);overflow:hidden;background:var(--pu-yuzey)}
.pu-ikili-oge{flex:1;border:0;border-left:1px solid var(--pu-cizgi);background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--pu-yazi-2);cursor:pointer;padding:0 10px;white-space:nowrap}
.pu-ikili-oge:first-child{border-left:0}
.pu-ikili-oge--secili{background:var(--pu-aksan);color:var(--pu-aksan-ustu)}
.pu-ikili--eksik{border-color:var(--pu-tehlike)}
.pu-girdi--eksik{box-shadow:inset 0 0 0 1.5px var(--pu-tehlike)}
.pu-deger{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:var(--pu-kose-kontrol);background:var(--pu-cukur);font-size:13px;font-weight:620;color:var(--pu-yazi)}
.pu-deger-ek{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--pu-soluk);font-size:11.5px;font-weight:600}
.pu-deger-ek button{border:0;background:none;font:inherit;color:var(--pu-aksan);cursor:pointer;padding:0}
@media (max-width:1180px){ .pu-form-bolum{grid-template-columns:1fr} .pu-form-bolum-bas{padding-top:0} .pu-form-izgara{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ── 12b. AÇILIR PANEL · TAKVİM — süzgeç paneli, tarih seçici (Salt Data, 14 Eyl) ─
   Takvim ev standardı: hücreye tıkla aç, gün → ay → yıl kademeli, Pazartesi başlar,
   native <input type="date"> YOK. Tetikleyici .pu-girdi--tetik (div, gizli input). */
.pu-acilir{position:absolute;z-index:30;background:var(--pu-yuzey);border-radius:var(--pu-kose-kart);
  box-shadow:var(--pu-golge);padding:12px;min-width:260px}
.pu-girdi--tetik{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px}
/* Tetiğin İÇİNDEKİ input'un KENDİ kabuğu OLMAZ. Alanın görünümünü `.pu-girdi`
   veriyor; input kendi zemini/çerçevesiyle gelirse gri alanın içinde ikinci bir
   beyaz kutu çıkar ve ikon dışarı itilir (8 Eki, eSign gönderim ekranı: tarih
   alanı `<span>`den `<input>`a çevrilince tam bu oldu — Fatih gördü).
   Tetiklerin çoğu `<span>` taşıdığı için kusur ancak input konan ilk ekranda
   görünür; kural bu yüzden ekranda değil BURADA. */
.pu-girdi--tetik input{flex:1 1 auto;min-width:0;background:transparent;border:0;
  padding:0;margin:0;font:inherit;color:inherit;outline:0;box-shadow:none;
  -webkit-appearance:none;appearance:none}
.pu-girdi--tetik input::placeholder{color:var(--pu-soluk)}
.pu-takvim{width:266px}
.pu-takvim-bas{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pu-takvim-bas button{border:0;background:transparent;color:var(--pu-yazi);font:inherit;font-weight:700;cursor:pointer;padding:4px 8px;border-radius:8px}
.pu-takvim-bas button:hover{background:var(--pu-cukur)}
.pu-takvim-izgara{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.pu-takvim-izgara--3{grid-template-columns:repeat(3,1fr);gap:6px}
.pu-takvim-hg{font-size:10px;font-weight:700;color:var(--pu-soluk);padding:4px 0}
.pu-takvim-g{border:0;background:transparent;color:var(--pu-yazi);font:inherit;font-size:12px;padding:7px 0;border-radius:8px;cursor:pointer;font-variant-numeric:tabular-nums}
.pu-takvim-g:hover{background:var(--pu-cukur)}
.pu-takvim-g--soluk{color:var(--pu-soluk)}
.pu-takvim-g--bugun{box-shadow:inset 0 0 0 1.5px var(--pu-aksan-cizgi)}
.pu-takvim-g.pu-takvim-g--secili{background:var(--pu-aksan);color:var(--pu-aksan-ustu)}
.pu-takvim-dip{display:flex;justify-content:space-between;margin-top:8px}

/* ── 13. CRM TEMA DÜĞMESİ (/crm-theme.js oluşturur; görünüm Pusula'da) ─────── */
#crmThemeBtn, #crmSwitchBtn{position:fixed;top:12px;z-index:99999;height:30px;padding:0 11px;border-radius:8px;
  border:0;background:var(--pu-yuzey);color:var(--pu-yazi-2);box-shadow:var(--pu-golge);cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center}
#crmThemeBtn{right:14px} #crmSwitchBtn{right:112px}

/* ── 11b. TABLO — sık satır · kaynak çizgisi · kesik çip (Salt Data, 14 Eyl) ────
   Başlık alt çizgisinin rengi kolonun KAYNAĞINI söyler (Salt Customer listesiyle aynı dil):
   sd = salt_data (uyarı turuncusu) · ls = LogicScript (başarı yeşili) · hs = hesaplanan (mor). */
.pu-tablo--sik th, .pu-tablo--sik td{padding:8px 12px}
/* İşaretli satır (İş 3, 26 Eki: officer ekranında manager'ın işaretlediği alan satırı) — tablo satırına eklenir; bitti = düzeltildi */
.pu-satir-isaret{background:var(--pu-aksan-zemin);box-shadow:inset 3px 0 0 var(--pu-aksan)}
.pu-satir-isaret--bitti{background:var(--pu-basari-zemin);box-shadow:inset 3px 0 0 var(--pu-basari)}
/* Karakter farkı işareti (WRONG_NAME ad karşılaştırması, 27 Eki): iki dizenin ortak olmayan harfi — tek harf farkı gözden kaçmasın */
/* Harf düzeyinde fark vurgusu (CRM onay · Ad karşılaştırması): SATIR İÇİ işaret. `.pu-fark` (19b, fiyat farkı hapı) ile ADI ÇAKIŞIYORDU — sonraki tanım bunu eziyor, her harf hap oluyordu (2 Kas). */
.pu-harf-fark{background:var(--pu-uyari-zemin);color:var(--pu-uyari);font-weight:800;border-radius:3px;padding:0 1px}
.pu-tablo th.pu-kaynak--sd{box-shadow:inset 0 -2px 0 var(--pu-uyari)}
.pu-tablo th.pu-kaynak--ls{box-shadow:inset 0 -2px 0 var(--pu-basari)}
.pu-tablo th.pu-kaynak--hs{box-shadow:inset 0 -2px 0 var(--pu-mor)}
.pu-tablo th.pu-kaynak--px{box-shadow:inset 0 -2px 0 var(--pu-aksan)}  /* px = Proxall lead alanı (Lead Analitik, 14 Eyl) */
.pu-kaynak-sd{color:var(--pu-uyari)} .pu-kaynak-ls{color:var(--pu-basari)} .pu-kaynak-hs{color:var(--pu-mor)} .pu-kaynak-px{color:var(--pu-aksan)}
.pu-cip--kesik{background:transparent;box-shadow:inset 0 0 0 1px var(--pu-cizgi);color:var(--pu-soluk)}
.pu-cip--kesik.pu-cip--secili{background:var(--pu-aksan-zemin);box-shadow:inset 0 0 0 1px var(--pu-aksan-cizgi);color:var(--pu-aksan)}

/* ── 14. GİRİŞ BİLEŞENLERİ (15 Eyl, giriş ekranı briefi — tasarım onaylı) ─────
   Tekrar kullanılabilir parçalar; sayfaya özgü yerleşim sayfada kalır. */
/* Hap etiket — ikonlu, aksan zemin + aksan çizgi */
.pu-hap{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--pu-kose-hap);
  background:var(--pu-aksan-zemin);color:var(--pu-aksan);font-size:12px;font-weight:650;
  box-shadow:inset 0 0 0 1px var(--pu-aksan-cizgi)}
.pu-hap svg{flex:none}
/* Bölümlü seçici — birbirini dışlayan kısa seçenekler (dil gibi) */
.pu-bolumlu{display:inline-flex;gap:2px;padding:3px;border-radius:var(--pu-kose-kontrol);background:var(--pu-cukur)}
.pu-bolumlu-oge{border:0;background:none;font:inherit;font-size:11.5px;font-weight:700;
  color:var(--pu-soluk);padding:5px 9px;border-radius:7px;cursor:pointer}
.pu-bolumlu-oge--secili{background:var(--pu-yuzey);color:var(--pu-aksan);box-shadow:var(--pu-golge)}
.pu-bolumlu-oge:focus-visible{outline:2px solid var(--pu-aksan-cizgi);outline-offset:1px}
/* BÜYÜK bölümlü seçici — ekranın TEK ana anahtarı (Dashboard Özet: Net | Brüt). Fatih 1 Kas
   mockup'ı onaylı ("büyük, en üstte"). Yeni bileşen değil, mevcut seçicinin ölçü değişkesi. */
.pu-bolumlu--buyuk{padding:5px;gap:4px;border-radius:14px}
.pu-bolumlu--buyuk .pu-bolumlu-oge{font-size:17px;padding:11px 34px;border-radius:10px}
/* TAM GENİŞLİK bölümlü seçici — dar sütunda (fatura iş kuyruğu: Hepsi · Hemen · İleri tarihli,
   Fatih 9 Kas mockup'ı). Yeni bileşen değil, mevcut seçicinin yerleşim değişkesi. */
.pu-bolumlu--tam{display:flex}
.pu-bolumlu--tam .pu-bolumlu-oge{flex:1;white-space:nowrap}
/* İkon düğmesi — girdinin içinde (şifreyi göster gibi) */
.pu-ikon-dugme{display:inline-flex;align-items:center;justify-content:center;border:0;background:none;
  padding:4px;margin:-4px;border-radius:7px;color:var(--pu-soluk);cursor:pointer;font:inherit}
.pu-ikon-dugme:hover{color:var(--pu-yazi-2)}
.pu-ikon-dugme:focus-visible{outline:2px solid var(--pu-aksan-cizgi)}
/* Özellik — ikon kutusu + başlık + açıklama */
.pu-ozellik-ikon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--pu-aksan-zemin);color:var(--pu-aksan);margin-bottom:12px}
.pu-ozellik-baslik{display:block;font-size:14px;font-weight:700;color:var(--pu-yazi);margin-bottom:5px}
.pu-ozellik-metin{margin:0;font-size:12.5px;line-height:1.55;color:var(--pu-soluk)}

/* ── 15. SATIŞ DETAY BİLEŞENLERİ (15 Eyl, kullanıcı onaylı yerleşim) ──────────
   Süreç çizelgesi · kayıt oynatıcı · belge küçük resmi. Başka ekran da kullanabilir. */
/* Süreç çizelgesi — adım sayısı kadar eşit sütun; çizgi (.pu-cizelge-cizgi) bir önceki adımdan bu adıma çizilir,
   rengi bu adımın durumunu söyler. Adımlar arası süre çizginin üstünde. */
.pu-cizelge{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:22px 18px 20px}
.pu-cizelge-adim{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0;padding:0 4px}
.pu-cizelge-cizgi{position:absolute;top:19px;left:-50%;right:50%;height:4px;background:var(--pu-basari);z-index:0}
.pu-cizelge-adim:first-child .pu-cizelge-cizgi{display:none}
.pu-cizelge-adim--uyari .pu-cizelge-cizgi{background:var(--pu-uyari)}
.pu-cizelge-adim--tehlike .pu-cizelge-cizgi{background:var(--pu-tehlike)}
.pu-cizelge-adim--etkin .pu-cizelge-cizgi{background:var(--pu-aksan)}
.pu-cizelge-adim--bek .pu-cizelge-cizgi{background:var(--pu-cukur)}
.pu-cizelge-top{position:relative;z-index:1;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--pu-aksan-ustu);background:var(--pu-basari);box-shadow:0 0 0 5px var(--pu-yuzey)}
.pu-cizelge-adim--uyari .pu-cizelge-top{background:var(--pu-uyari)}
.pu-cizelge-adim--etkin .pu-cizelge-top{background:var(--pu-aksan)}
.pu-cizelge-adim--tehlike .pu-cizelge-top{background:var(--pu-tehlike);box-shadow:0 0 0 5px var(--pu-yuzey),0 0 0 10px var(--pu-tehlike-zemin)}
.pu-cizelge-adim--bek .pu-cizelge-top{background:var(--pu-yuzey);color:var(--pu-soluk);box-shadow:0 0 0 5px var(--pu-yuzey),inset 0 0 0 2px var(--pu-cizgi)}
.pu-cizelge-ad{font-size:12.5px;font-weight:700;margin-top:8px;color:var(--pu-yazi)}
.pu-cizelge-adim--uyari .pu-cizelge-ad{color:var(--pu-uyari)} .pu-cizelge-adim--tehlike .pu-cizelge-ad{color:var(--pu-tehlike)}
.pu-cizelge-adim--etkin .pu-cizelge-ad{color:var(--pu-aksan)} .pu-cizelge-adim--bek .pu-cizelge-ad{color:var(--pu-soluk)}
.pu-cizelge-alt{font-size:11px;color:var(--pu-soluk);overflow-wrap:anywhere}
.pu-cizelge-sure{position:absolute;z-index:1;top:4px;left:-50%;right:50%;text-align:center;font-size:10px;font-weight:700;color:var(--pu-soluk)}
.pu-cizelge-sure span{background:var(--pu-yuzey);padding:0 5px}
/* Kayıt oynatıcı — <audio> gizli, görünüm burada */
.pu-oynatici{display:flex;align-items:center;gap:12px;min-width:0}
.pu-oynat{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--pu-mor);color:var(--pu-aksan-ustu);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.pu-oynat--kucuk{width:28px;height:28px;font-size:11px;background:var(--pu-soluk)}
.pu-oynatici-cubuk{flex:1;min-width:0;height:8px;border-radius:var(--pu-kose-hap);background:var(--pu-mor-zemin);cursor:pointer;overflow:hidden}
.pu-oynatici-dolu{height:100%;width:0;background:var(--pu-mor);border-radius:inherit}
/* OYNATICI — sürüklenebilir parçalar (Fatih 9 Eki onayı).
   NEDEN PUSULA'DA: karar ekranı, satış detayı, 360 ve agent panosu aynı ses kaydını
   çalıyor. Parçaları ekrana yazsaydık dördü ayrı oynatıcı olurdu — `.btn`in 58 dosyaya
   dağılmasıyla aynı sınıf. Renk YOK, yalnız token; koyu tema 2. bölümden kendiliğinden gelir. */
.pu-oynatici-cubuk--surukle{overflow:visible;position:relative}
.pu-oynatici-tampon{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;
  background:var(--pu-mor-zemin);filter:brightness(.94)}
.pu-oynatici-tutamak{position:absolute;top:50%;left:0;width:15px;height:15px;border-radius:50%;
  background:var(--pu-yuzey);transform:translate(-50%,-50%);cursor:grab;
  box-shadow:0 0 0 3px var(--pu-mor), 0 1px 3px rgba(0,0,0,.22)}
.pu-oynatici-tutamak:active{cursor:grabbing}
.pu-oynatici-tutamak:focus-visible{outline:2px solid var(--pu-aksan-cizgi);outline-offset:3px}
.pu-oynatici-sure{flex:none;font-size:12px;font-variant-numeric:tabular-nums;color:var(--pu-soluk);white-space:nowrap}
.pu-oynatici-sure b{color:var(--pu-yazi);font-weight:700}
.pu-oynatici-araclar{display:flex;align-items:center;gap:7px;margin-top:9px}
.pu-oynatici-araclar .pu-bosluk{flex:1}
.pu-oynatici-atla,.pu-oynatici-hiz{border:1px solid var(--pu-cizgi);border-radius:var(--pu-kose-kontrol);
  background:var(--pu-yuzey);font:inherit;font-size:11.5px;font-weight:650;padding:4px 9px;
  color:var(--pu-yazi-2);cursor:pointer;white-space:nowrap}
.pu-oynatici-hiz[aria-pressed="true"]{background:var(--pu-mor-zemin);color:var(--pu-mor);border-color:var(--pu-mor)}
.pu-oynatici-atla:focus-visible,.pu-oynatici-hiz:focus-visible{outline:2px solid var(--pu-aksan-cizgi);outline-offset:2px}
/* Belge küçük resmi — tıklanınca pencerede açılır */
.pu-belge-kucuk{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left;font:inherit;color:var(--pu-yazi);
  border:1px solid var(--pu-cizgi);border-radius:var(--pu-kose-kontrol);background:var(--pu-yuzey);padding:6px;cursor:pointer}
.pu-belge-kucuk:hover{border-color:var(--pu-aksan-cizgi)}
.pu-belge-kucuk-res{height:58px;border-radius:7px;background:var(--pu-cukur);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:10px;font-weight:700;color:var(--pu-soluk)}
.pu-belge-kucuk-res img{width:100%;height:100%;object-fit:cover}
@media (max-width:980px){ .pu-cizelge{grid-auto-flow:row;grid-auto-columns:auto;gap:14px} .pu-cizelge-cizgi,.pu-cizelge-sure{display:none} }

/* ── 16. SAYFA BAŞLIKLARI (18 Eyl, Fatih: "karar ekranı başlığı satış detayındaki gibi") ─────────────
   İKİ TÜR, her ekran birini kullanır; ekran kendi .xx-bas'ını YAZMAZ.
   (1) pu-sayfa-bas — liste/iş ekranları (Nexphone, Kargo, Fatura, Satışlar, Kuyruk):
       solda başlık + alt satır, sağda sağlık rozeti / birincil eylem / akış şeridi.
   (2) pu-kayit-bas — tek kayıt ekranları (Satış detayı, Karar ekranı): kart içinde
       iz satırı (geri · agent, merkez) → ad + rozetler → meta satırı (· ayraç CSS'te) → eylemler;
       sağda adım şeridi (pu-adim). Ölçü satış detayından (ad 26 px, rozet 11 px, sağ 660 px).
   ≤1180 px: ikisi de alt alta; sağ blok tam genişlik. */
.pu-sayfa-bas{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:4px 0 14px}
.pu-sayfa-bas-sol{min-width:0}
.pu-sayfa-bas-sag{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.pu-kayit-bas{display:flex;align-items:center;gap:24px;padding:16px 22px;background:var(--pu-yuzey);
  border-radius:var(--pu-kose-kart);box-shadow:var(--pu-golge);margin-bottom:14px}
.pu-kayit-bas-sol{min-width:0;flex:1}
.pu-kayit-iz{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--pu-soluk)}
.pu-kayit-ad-satir{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.pu-kayit-ad{font-size:26px;font-weight:760;letter-spacing:-.5px;color:var(--pu-yazi);margin:0;line-height:1.2}
.pu-kayit-ad-satir .pu-rozet{font-size:11px}
.pu-kayit-meta{display:flex;flex-wrap:wrap;margin-top:3px;font-size:12.5px;color:var(--pu-soluk)}
.pu-kayit-meta>span+span::before{content:"·";margin:0 7px;color:var(--pu-soluk)}
.pu-kayit-meta b{color:var(--pu-yazi);font-weight:650}
.pu-kayit-eylem{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pu-kayit-eylem:empty{display:none}
.pu-kayit-bas-sag{flex:none;width:min(660px,48%)}
@media (max-width:1180px){
  .pu-sayfa-bas{flex-direction:column;align-items:stretch;gap:10px} .pu-sayfa-bas-sag{justify-content:flex-start}
  .pu-kayit-bas{flex-direction:column;align-items:stretch} .pu-kayit-bas-sag{width:100%}
}

/* ── 17. KİMLİK RENKLERİ (kategori paleti) — 19 Eyl ───────────────────────────
   Dashboard ve kıyaslama ekranlarında marka/merkez gibi VARLIKLARI ayırmak için.
   Kural üç madde:
     * Renk VARLIĞA bağlanır, sıraya değil — süzgeç sırayı değiştirince renk kaymaz.
     * Beşten fazla varlık olursa altıncı renk ÜRETİLMEZ, --pu-kat-0'a (gri) düşer.
     * Durum renkleri (basari/tehlike/uyari) kategori olarak KULLANILMAZ; onlar
       "nasıl gidiyor"u söyler, bunlar "kim"i.
   Basamaklar dataviz doğrulayıcısından geçirildi (açık yüzey #fff, koyu #151519):
   açıklık bandı · doygunluk tabanı · renk körlüğü ayrımı (protan/deutan/tritan) ·
   normal görü ayrımı · zemin kontrastı — altısı da PASS. Koyu, açığın çevrilmişi
   DEĞİL: kendi basamakları (çevrilmiş hâli bantta kalmıyordu). */
.pu-kat{--pu-kat:var(--pu-kat-0)}
.pu-kat-1{--pu-kat:var(--pu-kat-1)} .pu-kat-2{--pu-kat:var(--pu-kat-2)}
.pu-kat-3{--pu-kat:var(--pu-kat-3)} .pu-kat-4{--pu-kat:var(--pu-kat-4)}
.pu-kat-5{--pu-kat:var(--pu-kat-5)}
.pu-kat-nokta{width:10px;height:10px;border-radius:3px;background:var(--pu-kat,var(--pu-kat-0));flex:none}
.pu-cubuk{height:6px;border-radius:3px;background:var(--pu-cukur);overflow:hidden}
.pu-cubuk-dolu{display:block;height:100%;border-radius:3px;background:var(--pu-kat,var(--pu-aksan))}

/* ── 18. UYGULAMA BAŞLATICI — kompakt üst çubuk + kart ızgarası (K 23 Eyl, "Uygulamalar" seçim
   ekranı). Header aksiyon simgeleri crm-header.js'in `.ch-ico`/`.ch-avatar` diliyle aynı ölçü —
   CRM sayfası olmayan yerlerde (ör. /secim) aynı görünüm için buraya taşındı. Kart, .pu-kart'ın
   ÜZERİNE — temel yüzey/gölge oradan gelir, burası yalnız düzen + hover. Logo açık/koyu takası ve
   simge boyutu gibi sayfaya özgü ince ayarlar SAYFANIN kendi <style>'ında kalır (pu- önekiyle
   sınırlı bileşen kütüphanesi ve "koyu tekrarı yalnız renk/kenar" kuralları burada geçerli). */
.pu-uyg-cubuk{border-bottom:1px solid var(--pu-cizgi);background:var(--pu-yuzey)}
.pu-uyg-cubuk-ic{display:flex;align-items:center;gap:12px;height:54px;max-width:var(--pu-sayfa-genislik);margin:0 auto;padding:0 var(--pu-sayfa-kenar)}
.pu-uyg-logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.pu-uyg-logo img{height:22px;width:auto;display:block}
.pu-uyg-etiket{color:var(--pu-soluk);font-size:12px;font-weight:500;letter-spacing:.04em;padding-left:9px;margin-left:2px;border-left:1px solid var(--pu-cizgi)}
.pu-uyg-eylem{margin-left:auto;display:flex;align-items:center;gap:9px}
.pu-uyg-ikon-dugme{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;border:0;background:transparent;color:var(--pu-soluk);cursor:pointer;font-size:17px}
.pu-uyg-ikon-dugme:hover{background:var(--pu-cukur);color:var(--pu-yazi)}
.pu-uyg-kimlik{font-size:12px;color:var(--pu-soluk);white-space:nowrap;display:flex;align-items:center;gap:8px}
.pu-uyg-avatar{width:27px;height:27px;border-radius:50%;background:var(--pu-cukur);color:var(--pu-yazi);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex:none}
/* Komisyon kabuğu (ADIM 0, Fatih 2 Kas onaylı) — yalnız YERLEŞİM/bağlama, yeni renk/token YOK. */
.pu-uyg-cubuk--yapisik{position:sticky;top:0;z-index:20}
.pu-uyg-cubuk--yapisik .pu-uyg-cubuk-ic{flex-wrap:wrap;height:auto;min-height:52px}
.pu-sekmeler--serit{margin-bottom:0;border-bottom:0;flex-wrap:wrap;min-width:0;flex:1 1 auto}
/* <a> olarak kullanılan sekme / çip / logo: tarayıcı altı çizgisi + mavisi gelmesin */
a.pu-sekme,a.pu-cip,a.pu-uyg-logo,a.pu-uyg-kimlik,a.pu-dnm-hap{text-decoration:none}
a.pu-kart{color:inherit;text-decoration:none;display:block}
a.pu-kart:hover{box-shadow:var(--pu-golge-yuksek)}
a.pu-kart:focus-visible{outline:2px solid var(--pu-aksan);outline-offset:2px}
a.pu-sekme:hover{color:var(--pu-yazi)}
a.pu-uyg-logo{color:var(--pu-aksan);font-weight:800;font-size:13.5px}
.pu-uyg-alt{display:flex;gap:6px;flex-wrap:wrap;max-width:var(--pu-sayfa-genislik);margin:0 auto;padding:8px var(--pu-sayfa-kenar)}
.pu-uyg-eylem #crmThemeBtn,.pu-uyg-eylem #crmSwitchBtn{position:static;height:30px;box-shadow:none;background:transparent;color:var(--pu-soluk)}
.pu-uyg-eylem #crmThemeBtn:hover,.pu-uyg-eylem #crmSwitchBtn:hover{background:var(--pu-cukur);color:var(--pu-yazi)}

.pu-uyg-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.pu-uyg-kart{display:flex;flex-direction:column;text-decoration:none;color:inherit;padding:20px;border:1px solid transparent;transition:border-color .12s}
.pu-uyg-kart:hover{border-color:var(--pu-aksan-cizgi)}
.pu-uyg-ikon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--pu-aksan-zemin);color:var(--pu-aksan);margin-bottom:14px}
.pu-uyg-ad{font-size:15px;font-weight:700;color:var(--pu-yazi);margin:0 0 6px}
.pu-uyg-aciklama{font-size:12.5px;color:var(--pu-soluk);line-height:1.45;flex:1;margin:0 0 14px}
.pu-uyg-kapsam{display:flex;align-items:center;gap:6px;padding-top:12px;border-top:1px solid var(--pu-cizgi);font-size:11.5px;color:var(--pu-soluk)}
.pu-uyg-kapsam-git{margin-left:auto}

/* ── ÇOKLU SEÇİM (pusula-coklu.js) — arama kutulu, onay kutulu ──────────────
   Süzgeçler tek seçimdi ve arama yalnız 12'den fazla seçenekte çıkıyordu;
   "Ek alanlar" native <select> kullanıyordu. Fatih 29 Eyl: her alanda çoklu
   seçim ve arama. */
#pcPanel{position:fixed;z-index:10010;width:300px;background:var(--pu-yuzey);border:1px solid var(--pu-cizgi);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.18);overflow:hidden;display:none;font-family:var(--pu-yazi-aile)}
#pcPanel.pu-acik{display:block}
#pcPanel .pu-cok-ara{padding:9px;border-bottom:1px solid var(--pu-cizgi);display:flex;align-items:center;gap:8px}
#pcPanel .pu-cok-ara i{color:var(--pu-soluk);font-size:15px}
#pcPanel .pu-cok-ara input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:13px;background:none;color:var(--pu-yazi)}
#pcPanel .pu-cok-liste{max-height:232px;overflow:auto;padding:5px}
#pcPanel .pu-cok-oge{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;font-size:13px;color:var(--pu-yazi);cursor:pointer}
#pcPanel .pu-cok-oge:hover{background:var(--pu-cukur)}
#pcPanel .pu-cok-ad{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pcPanel .pu-cok-say{margin-left:auto;color:var(--pu-soluk);font-size:11.5px;font-variant-numeric:tabular-nums}
#pcPanel .pu-cok-kutu{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--pu-cizgi);flex:none;display:flex;align-items:center;justify-content:center;font-size:11px}
#pcPanel .pu-cok-oge.pu-cok-secili .pu-cok-kutu{background:var(--pu-aksan);border-color:var(--pu-aksan);color:var(--pu-aksan-ustu)}
#pcPanel .pu-cok-bos{padding:14px 10px;text-align:center;color:var(--pu-soluk);font-size:12.5px}
/* GRUPLU LİSTE (Fatih 7 Eki, "Recorded on company"): 39 ham değer üç kovada —
   Yes 14 · In Process 9 · Storno 16. Başlık ÜÇ DURUMLU: boş / yarım / dolu.
   Yarım hâli ayrı bir işaret taşımak zorunda — yalnız renk vermek "hepsi seçili"
   ile karıştırılıyor ve seçimin eksik olduğu görünmüyordu.
   Panel gruplu hâlde daha uzun: liste yüksekliği kova başlıkları için artırılır,
   yoksa üç kovanın ikisi görünmüyor ve kullanıcı aşağısı olduğunu anlamıyor. */
#pcPanel .pu-cok-grup{margin-bottom:4px}
#pcPanel .pu-cok-grup-bas{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;background:var(--pu-cukur);font-size:12.5px;font-weight:600;color:var(--pu-yazi);cursor:pointer;position:sticky;top:0;z-index:1}
#pcPanel .pu-cok-grup-bas:hover{background:var(--pu-aksan-zemin)}
#pcPanel .pu-cok-grup-ad{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pcPanel .pu-cok-grup-say{margin-left:auto;color:var(--pu-soluk);font-size:11px;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
#pcPanel .pu-cok-grup .pu-cok-oge{padding-left:30px}
#pcPanel .pu-cok-kutu--dolu{background:var(--pu-aksan);border-color:var(--pu-aksan);color:var(--pu-aksan-ustu)}
#pcPanel .pu-cok-kutu--yarim{background:var(--pu-aksan);border-color:var(--pu-aksan);position:relative}
#pcPanel .pu-cok-kutu--yarim::after{content:'';position:absolute;left:3px;right:3px;height:2px;background:var(--pu-aksan-ustu);border-radius:1px}
/* KOVASIZ — eşleme tablosunda karşılığı olmayan değerler. Gizlenmez, uyarı
   renginde ayrı grupta durur: ölçüldü 7 Eki, 'Router zurück' 19 satış hiçbir
   kovada değil; gizlense o satışlar süzgeçten sessizce düşerdi. */
#pcPanel .pu-cok-grup--kovasiz .pu-cok-grup-bas{background:var(--pu-uyari-zemin);color:var(--pu-uyari)}
#pcPanel .pu-cok-liste:has(.pu-cok-grup){max-height:330px}
#pcPanel .pu-cok-dip{display:flex;gap:8px;padding:8px 9px;border-top:1px solid var(--pu-cizgi);background:var(--pu-zemin)}
#pcPanel .pu-cok-dip button{flex:1;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--pu-aksan);cursor:pointer;padding:4px;border-radius:7px}
#pcPanel .pu-cok-dip button:hover{background:var(--pu-cukur)}
/* ÇERÇEVELİ GİRDİ — `pu-girdi` varsayılanı çukur zeminli ve çerçevesiz. Beyaz
   yüzey üstünde (süzgeç penceresi) kenarı olmayan alan "girdi" gibi okunmuyor,
   düz metin sanılıyor. Varyant BURADA: ekranın içinde `.pu-girdi`yi yeniden
   boyamak Pusula'yı çatallar (tools/pusula_uyum.py bunu yakalıyor). */
.pu-girdi--cerceveli{border:1px solid var(--pu-cizgi);background:var(--pu-yuzey)}
/* Seçili değer rozeti — KENDİ rengini taşır. Eskiden yalnız arka plan veriyordu ve
   yazı rengini kapsayıcıdan devralıyordu: seçili çipin içinde (.pu-cip--secili,
   renk = --pu-aksan-ustu) açık temada beyaz üstüne beyaz (1,16:1), koyuda siyah
   üstüne siyah (1,18:1) çıkıyordu — iki temada da okunmuyordu. Bu rozet her zaman
   renkli bir düğmenin İÇİNDE duruyor, o yüzden rengini devralamaz. */
.pu-cok-rozet{display:inline-flex;align-items:center;background:var(--pu-yuzey);color:var(--pu-yazi);border-radius:7px;padding:1px 7px;font-size:12px;font-weight:600;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}

/* ── SÜZGEÇ (pusula-suzgec.js) — çubuk + ek filtre penceresi, TEK KAYNAK ─────
   Fatih 7 Eki, mockup onaylı: beş ekranın süzgeci beş ayrı yapıdaydı (biri
   modal, biri satır altı panel, biri hiç panelsiz). Artık tek iskelet:
   ÇUBUK  arama · hep görünen çipler · ek alan düğmesi · Görünümler
   PENCERE modal, gruplu, üç sütun; altta ipucu · Alan ekle · Temizle · Uygula
   Ekrana göre değişen tek şey VERİ — ekran kendi çubuğunu yazmaz. */
.pu-suz-cubuk{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pu-suz-ara{display:flex;align-items:center;gap:8px;background:var(--pu-cukur);border:1px solid var(--pu-cizgi);border-radius:11px;padding:7px 12px;min-width:250px;flex:0 1 320px}
.pu-suz-ara i{color:var(--pu-soluk);font-size:15px}
.pu-suz-ara input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:13px;color:var(--pu-yazi)}
.pu-suz-cip{white-space:nowrap}
.pu-suz-deger{font-weight:600}
.pu-suz-ok{font-size:10px;opacity:.65}
.pu-suz-alt{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;
  position:relative}   /* koşul seçici paneli buna göre konumlanır */
/* UYGULANAN SÜZGEÇ ŞERİDİ — çubuk ile tablo arasında (Fatih 12 Eki).
   Çipler yalnız ilk değeri gösteriyor, pencere alanları çubukta HİÇ
   görünmüyordu; üç süzgeç kurunca neyin seçili olduğu okunmuyordu.
   "Hepsini temizle" vardı, TEK BİRİNİ atmanın yolu yoktu. */
.pu-suz-uyg{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px}
.pu-suz-uygbas{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--pu-soluk);font-weight:700;margin-right:2px}
.pu-suz-etk{display:inline-flex;align-items:center;gap:5px;background:var(--pu-aksan-zemin);
  border:1px solid var(--pu-aksan-cizgi);color:var(--pu-aksan);border-radius:999px;
  padding:3px 6px 3px 11px;font-size:12px;white-space:nowrap;line-height:1.5}
.pu-suz-etk i{font-style:normal;opacity:.75}
.pu-suz-etk b{font-weight:700}
.pu-suz-etksil{border:0;background:none;color:inherit;opacity:.65;cursor:pointer;
  font-size:14px;line-height:1;padding:0 3px;border-radius:5px}
.pu-suz-etksil:hover{opacity:1;background:var(--pu-tehlike-zemin);color:var(--pu-tehlike)}
.pu-suz-uygtemiz{font-size:12px;color:var(--pu-tehlike);border-color:var(--pu-tehlike);
  background:var(--pu-yuzey);font-weight:650;margin-right:2px}
.pu-suz-uygtemiz:hover{background:var(--pu-tehlike);color:var(--pu-aksan-ustu,#fff);border-color:var(--pu-tehlike)}
/* KAPSAM ROZETİ — alanın hangi bacağı kapsadığı (Fatih 12 Eki, (b) kararı).
   Dört yerde aynı görünür: pencere alanı · çip · uygulanan şerit · bakış. */
.pu-suz-kapsam{display:inline-flex;align-items:center;gap:4px;margin-left:6px;
  font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:999px;
  background:var(--pu-uyari-zemin);color:var(--pu-uyari);white-space:nowrap;
  text-transform:none;letter-spacing:0}
.pu-suz-kapsam b{font-weight:800;opacity:.75;font-variant-numeric:tabular-nums}


.pu-suz-sag{display:inline-flex;align-items:center;gap:12px;margin-left:auto}
.pu-suz-ackapa{white-space:nowrap}
.pu-suz-gorunum{display:inline-flex;align-items:center;gap:6px;font-size:13px}
/* PENCERE — perde + kutu. Perdeye tıklamak kapatır, kutuya tıklamak kapatmaz. */
.pu-suz-perde{position:fixed;inset:0;z-index:10000;background:var(--pu-perde);display:none;align-items:flex-start;justify-content:center;padding:48px 16px;overflow:auto}
.pu-suz-perde.pu-acik{display:flex}
.pu-suz-kutu{background:var(--pu-yuzey);border:1px solid var(--pu-cizgi);border-radius:var(--pu-kose-kart);box-shadow:var(--pu-golge-yukari);width:100%;max-width:960px;overflow:hidden}
.pu-suz-ust{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--pu-cizgi)}
.pu-suz-ust strong{font-size:14.5px}
.pu-suz-ustsag{display:flex;align-items:center;gap:14px;font-size:12.5px}
.pu-suz-ipucu{font-size:11.5px;color:var(--pu-soluk)}
.pu-suz-govde{padding:4px 20px 14px;max-height:62vh;overflow:auto}
.pu-suz-grup{margin-top:14px}
.pu-suz-grup-bas{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--pu-soluk);font-weight:700;margin:0 0 9px;padding-bottom:5px;border-bottom:1px solid var(--pu-cizgi)}
/* katlanabilir grup başlığı: aynı tipografi, düğme kabuğu sıfırlanır */
.pu-suz-grup-ac{display:flex;align-items:center;gap:7px;width:100%;background:none;border:0;border-bottom:1px solid var(--pu-cizgi);cursor:pointer;font-family:inherit;text-align:left}
.pu-suz-grup-ac i{font-size:13px;color:var(--pu-soluk)}
.pu-suz-grup-ac .pu-rozet{font-size:9.5px;padding:1px 7px}
.pu-suz-grup-rozet{margin-left:auto}
.pu-suz-grup-ac:hover{color:var(--pu-yazi)}
.pu-suz-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:11px 16px}
/* Izgara hücresi — kendi görünümü yok, grid çocuğu olarak durur. Tanımsız
   sınıf bırakmamak için burada: adı markup'ta geçip Pusula'da olmayan sınıf,
   "nerede tanımlı" sorusunu cevapsız bırakır. */
.pu-suz-alan{min-width:0}
/* Ek alan düğmesi çubuğun ikinci satırında, çiple aynı görünüm (pu-cip--kesik). */
.pu-suz-ek{flex:none}
.pu-suz-etiket{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--pu-yazi-2);margin-bottom:5px}
.pu-suz-rozet{background:var(--pu-aksan);color:var(--pu-aksan-ustu);border-radius:999px;font-size:10px;font-weight:700;padding:0 6px}
.pu-suz-sec{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box;background:var(--pu-yuzey);border:1px solid var(--pu-cizgi);border-radius:var(--pu-kose-kontrol);padding:8px 11px;font:inherit;font-size:12.5px;color:var(--pu-soluk);cursor:pointer;text-align:left}
.pu-suz-sec>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pu-suz-sec:hover{border-color:var(--pu-aksan-cizgi)}
.pu-suz-sec--dolu{border-color:var(--pu-aksan-cizgi);background:var(--pu-aksan-zemin);color:var(--pu-aksan);font-weight:600}
.pu-suz-aralik{display:flex;align-items:center;gap:7px}
.pu-suz-aralik .pu-girdi{flex:1;min-width:0}
.pu-suz-tire{color:var(--pu-soluk);flex:none}
/* evethayir tipi (Fatih 21 Eki): etiket solda, Hepsi/Evet/Hayır segmenti sağda — bir satır */
.pu-suz-alan--seg{display:flex;align-items:center;gap:8px}
.pu-suz-alan--seg .pu-suz-etiket{flex:1;min-width:0;margin:0}
.pu-suz-seg{display:flex;gap:4px;flex:none}
.pu-suz-not{display:flex;gap:5px;align-items:flex-start;font-size:11px;color:var(--pu-soluk);margin-top:4px}
.pu-suz-tarih{display:inline-flex;align-items:center;gap:6px;flex:1;min-width:0;background:var(--pu-yuzey);border:1px solid var(--pu-cizgi);border-radius:var(--pu-kose-kontrol);padding:8px 10px;font:inherit;font-size:12.5px;color:var(--pu-soluk);cursor:pointer}
.pu-suz-tarih[disabled]{cursor:not-allowed}
/* TARİH DÜĞMESİNİN SORUN HÂLİ (29 Eki): takvim yüklenmediyse ya da alan
   alt/ust anahtarı taşımıyorsa düğme ÇALIŞIR GÖRÜNMEZ. Eskiden görünüyordu:
   çizim korumalı, tıklama korumasızdı — Fatih kargo ekranında tarih seçemedi
   ve hiçbir yerde bir belirti yoktu. Geçersiz DEĞER de aynı hâlle işaretlenir. */
.pu-suz-tarih--sorun{background:var(--pu-uyari-zemin);color:var(--pu-uyari);border-color:var(--pu-uyari)}
.pu-suz-tarih--sorun>i{color:var(--pu-uyari)}
.pu-suz-bos{padding:22px 2px;text-align:center;color:var(--pu-soluk);font-size:12.5px}
.pu-suz-dip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid var(--pu-cizgi);background:var(--pu-zemin)}
.pu-suz-dugmeler{display:flex;gap:8px;flex:none}
/* Dar ekranda üç sütun okunmuyor — tek sütuna iner. */
@media (max-width:860px){.pu-suz-izgara{grid-template-columns:1fr}.pu-suz-dip{flex-direction:column;align-items:stretch}}

/* ── TAKVİM (pusula-takvim.js) — tek kaynak ─────────────────────────────────
   Kullanıcı kararı 18 Ağu: native <input type="date"> kullanılmaz, her tarih
   alanı bu kademeli gün→ay→yıl seçiciyi alır. Kuralları crm_review.html'de
   yazılıydı; bileşen ortaklaşınca stil de buraya taşındı. */
#dpPanel{position:fixed;z-index:10010;background:var(--pu-yuzey);border:0;border-radius:var(--pu-kose-kart);padding:12px;width:266px;box-shadow:0 18px 52px rgba(0,0,0,.25);display:none;font-family:var(--pu-yazi-aile)}
#dpPanel.pu-acik{display:block}
/* ── ARALIK SEÇİCİ — tek takvim + hazır dönemler (pusula-donem.js `PusulaDonem.ac`, Fatih 13 Kas onayı) ── */
.pu-arl{position:fixed;z-index:10010;display:none;width:700px;max-width:calc(100vw - 16px);background:var(--pu-yuzey);border-radius:var(--pu-kose-kart);box-shadow:0 18px 52px rgba(0,0,0,.22);overflow:hidden;font-family:inherit;color:var(--pu-yazi)}
.pu-arl.pu-acik{display:block}
.pu-arl-ust{display:flex;align-items:baseline;gap:10px;padding:13px 18px 10px;border-bottom:1px solid var(--pu-cizgi);font-size:14px}
.pu-arl-ust span{font-size:12px;color:var(--pu-soluk)}
.pu-arl-govde{display:grid;grid-template-columns:150px 1fr}
.pu-arl-sol{border-right:1px solid var(--pu-cizgi);padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.pu-arl-hazir{background:transparent;border:0;text-align:left;padding:8px 12px;border-radius:9px;font:inherit;font-size:13.5px;color:var(--pu-yazi);cursor:pointer}
.pu-arl-hazir:hover{background:var(--pu-cukur)}
.pu-arl-hazir--sec,.pu-arl-hazir--sec:hover{background:var(--pu-aksan-zemin);color:var(--pu-aksan);font-weight:650}
.pu-arl-ozel{margin-top:auto;padding:8px 12px;font-size:12.5px;color:var(--pu-soluk);border-top:1px solid var(--pu-cizgi)}
.pu-arl-ozel--sec{color:var(--pu-aksan);font-weight:650}
.pu-arl-sag{position:relative;padding:12px 16px 8px}
.pu-arl-nav{position:absolute;right:14px;top:9px;display:flex;gap:4px}
.pu-arl-nav button{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--pu-yazi-2);cursor:pointer;font-size:16px;line-height:1}
.pu-arl-nav button:hover{background:var(--pu-cukur)}
.pu-arl-aylar{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pu-arl-ayad{font-weight:650;font-size:13.5px;margin:4px 0 10px 4px}
.pu-arl-izgara{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.pu-arl-gad{font-size:10.5px;color:var(--pu-soluk);text-align:center;font-weight:600;padding-bottom:4px}
.pu-arl-gun{height:32px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-variant-numeric:tabular-nums;cursor:pointer;user-select:none}
.pu-arl-gun span{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px}
.pu-arl-gun:hover span{background:var(--pu-cukur)}
.pu-arl-gun--ileri{color:var(--pu-soluk);opacity:.45;cursor:default}
.pu-arl-gun--ileri:hover span{background:transparent}
.pu-arl-gun--ara{background:var(--pu-aksan-zemin)}
.pu-arl-gun--bas{border-radius:8px 0 0 8px}
.pu-arl-gun--son{border-radius:0 8px 8px 0}
.pu-arl-gun--bas.pu-arl-gun--son{border-radius:8px}
.pu-arl-gun--bas span,.pu-arl-gun--son span,.pu-arl-gun--bas:hover span,.pu-arl-gun--son:hover span{background:var(--pu-aksan);color:var(--pu-aksan-ustu);font-weight:650}
.pu-arl-gun--onizleme{background:transparent;outline:1px dashed var(--pu-aksan-cizgi);outline-offset:-1px}
.pu-arl-gun--bugun span{box-shadow:inset 0 0 0 1.5px var(--pu-aksan-cizgi)}
.pu-arl-alt{display:flex;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid var(--pu-cizgi);font-size:13px}
.pu-arl-alt b{font-variant-numeric:tabular-nums}
.pu-arl-link{background:transparent;border:0;color:var(--pu-aksan);font:inherit;font-weight:600;font-size:12.5px;cursor:pointer}
@media (max-width:720px){.pu-arl-govde{grid-template-columns:1fr}.pu-arl-sol{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--pu-cizgi)}.pu-arl-ozel{display:none}.pu-arl-aylar{grid-template-columns:1fr}.pu-arl-aylar .pu-arl-ay:first-child{display:none}}
/* Native tarih kutusunun yerine geçen düğme (pusula-takvim.js `yukselt`, Fatih 13 Kas). Görünüm kutunun kendi sınıfından gelir; burada yalnız davranış. */
.pu-tkv-alan{text-align:left;cursor:pointer;font-variant-numeric:tabular-nums;white-space:nowrap}
.pu-tkv-alan--bos{color:var(--pu-soluk)}
#dpPanel .pu-tkv-bas{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
#dpPanel .pu-tkv-bas b{font-size:13px;color:var(--pu-yazi);font-weight:600}
#dpPanel .pu-tkv-bas .pu-tkv-nav button{width:28px;height:28px;border:0;background:var(--pu-cukur);background:transparent;border-radius:8px;color:var(--pu-yazi);cursor:pointer;font-size:16px;line-height:1;padding:0;margin-left:5px}
#dpPanel .pu-tkv-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
#dpPanel .pu-tkv-g .pu-tkv-c{height:31px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:12.5px;color:var(--pu-yazi);cursor:pointer;user-select:none}
#dpPanel .pu-tkv-g .pu-tkv-dow{color:var(--pu-soluk);font-size:10px;cursor:default;font-weight:600}
#dpPanel .pu-tkv-g .pu-tkv-mut{color:var(--pu-soluk);opacity:.5;cursor:default}
#dpPanel .pu-tkv-g .pu-tkv-c.pu-tkv-day:hover{background:var(--pu-aksan);color:var(--pu-aksan-ustu)}
#dpPanel .pu-tkv-g .pu-tkv-c.pu-tkv-sec{background:var(--pu-aksan);color:var(--pu-aksan-ustu);font-weight:600}
#dpPanel .pu-tkv-bas .pu-tkv-ttl{font-size:13px;color:var(--pu-yazi);font-weight:600;background:transparent;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:8px;font-family:inherit}
#dpPanel .pu-tkv-bas .pu-tkv-ttl:hover{background:var(--pu-cukur);color:var(--pu-aksan)}
#dpPanel .pu-tkv-bas .pu-tkv-ttl i{font-size:13px}
#dpPanel .pu-tkv-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#dpPanel .pu-tkv-g3 .pu-tkv-h{height:42px;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:13px;color:var(--pu-yazi);cursor:pointer;user-select:none}
#dpPanel .pu-tkv-g3 .pu-tkv-h:hover{background:var(--pu-cukur);color:var(--pu-aksan)}
#dpPanel .pu-tkv-g3 .pu-tkv-h.pu-tkv-sec{background:var(--pu-aksan);color:var(--pu-aksan-ustu);font-weight:600}
#dpPanel .pu-tkv-f{display:flex;justify-content:space-between;margin-top:10px;border-top:1px solid var(--pu-cizgi);padding-top:9px}
#dpPanel .pu-tkv-f button{background:transparent;border:0;color:var(--pu-aksan);cursor:pointer;font-size:12px;font-family:inherit;font-weight:600}

/* Girdi/tetikleyici İÇERİK KADAR genişlesin. `.pu-girdi` tam genişlik verir; süzgeç
   çubuğunda yan yana duran açılırlar için gerekiyor (kuyruk · dashboard süzgeçleri,
   6 Eki). Ekranlar bunu kendi CSS'inde tanımlamasın diye burada. */
.pu-girdi--oto{width:auto;min-width:150px;display:inline-flex;align-items:center;
  justify-content:space-between;gap:6px}
/* Sarmalı flex çubuğunda SATIR KIRAR — araya görünmez tam genişlik öğesi koyar.
   Kendi satır kabını tanımlamak yerine kullanılır. */
.pu-genislik-tam{flex-basis:100%;height:0}

/* ── KOŞUL SEÇİCİ (Fatih onaylı tasarım, SECICI_1) ─────────────────────────
   Çubuktaki `+ Koşul (N)` düğmesinin altına açılan arama panelidir. Yeni renk
   YOK: hepsi var olan `--pu-*` belirteçleri. Panel `pu-suz-alt`a göre konumlanır
   (o kap `position:relative` taşıyor), sayfaya `position:fixed` eklenmedi —
   üç ekranın yerleşimi farklı ve sabit konum birinde kayardı. */
.pu-sec{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:min(420px,92vw);
  background:var(--pu-yuzey);border:1px solid var(--pu-cizgi);border-radius:var(--pu-kose-kart);
  box-shadow:var(--pu-golge-buyuk,var(--pu-golge));overflow:hidden}
.pu-sec-ust{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-bottom:1px solid var(--pu-cizgi)}
.pu-sec-ara{flex:1;min-width:0}
.pu-sec-sayi{white-space:nowrap}
.pu-sec-govde{max-height:min(420px,56vh);overflow:auto;padding:4px 0 8px}
.pu-sec-grup{padding:6px 0 2px}
.pu-sec-grup-bas{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--pu-soluk);padding:6px 14px 4px}
.pu-sec-grup-bas span{font-weight:600;opacity:.75}
.pu-sec-s{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;
  padding:7px 14px;cursor:pointer;text-align:left;color:var(--pu-yazi);font:inherit;font-size:13px}
.pu-sec-s:hover:not(:disabled){background:var(--pu-zemin2,var(--pu-zemin))}
.pu-sec-ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pu-sec-n{font-variant-numeric:tabular-nums;color:var(--pu-soluk);font-size:12px}
.pu-sec-rz{flex:0 0 auto}
.pu-sec-s--ekli{opacity:.55;cursor:default}
.pu-sec-ok{color:var(--pu-basari)}
/* Eklenen koşulun × düğmesi — çipin İÇİNDE, sabit çipte YOK (o ekranın kararı). */
.pu-suz-kosulsil{margin-left:6px;opacity:.5;font-size:13px;line-height:1;padding:0 2px;border-radius:4px}
.pu-suz-kosulsil:hover{opacity:1;background:var(--pu-cizgi)}

/* ── SÜZGEÇ NİHAİ YAPI (Fatih 12 Eki) — tek satır çubuk + çekmece ─────────── */
.pu-suz-sag-tek{margin-left:auto;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.pu-suz-sonuc{font-variant-numeric:tabular-nums}
/* tek satırda üst kap flex'te kalır; dar ekranda sarmaya izin (A ölçümü: 1180px) */
.pu-suz-ust-tek{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* DÖNEM çipi menüsü — pu-oneri ailesinden, ekran kendi doldurur */
.pu-donem-menu{position:absolute;z-index:45;margin-top:6px;background:var(--pu-yuzey);
  border:1px solid var(--pu-cizgi);border-radius:11px;box-shadow:var(--pu-golge);
  padding:11px 12px;width:min(430px,92vw)}
.pu-donem-menu .pu-dnm-b{font-size:10.5px;font-weight:700;letter-spacing:.4px;color:var(--pu-soluk);margin:2px 0 6px;text-transform:uppercase}
.pu-donem-menu .pu-dnm-hap{display:inline-flex;border:1px solid var(--pu-cizgi);border-radius:8px;
  padding:4px 10px;font-size:12px;margin:0 4px 4px 0;cursor:pointer;background:var(--pu-yuzey);color:var(--pu-yazi)}
.pu-donem-menu .pu-dnm-hap--sec{background:var(--pu-aksan);border-color:var(--pu-aksan);color:#fff;font-weight:600}
/* ÇEKMECE — pencere kabuğunun sağa yaslı hâli; içerik aynı pencereHtml */
/* perde temel sınıfla birlikte gelir; yalnız kutu konumu değişir */
.pu-suz-perde.pu-suz-perde--cekmece{padding:0;justify-content:flex-end;align-items:stretch}
/* DİKKAT: top VE bottom birlikte SABİTLENMEZ — ikisi birden sabitse
   height:auto hükümsüz kalır ve kutu hep tam boy olur (Fatih 13 Eki:
   "alttaki boşluk hala duruyor" — canlıda tam bu yüzden ölü boşluk vardı). */
.pu-suz-perde--cekmece .pu-suz-kutu{position:absolute;top:0;right:0;bottom:auto;left:auto;
  width:min(380px,94vw);border-radius:0;transform:none;
  display:flex;flex-direction:column}
.pu-suz-perde--cekmece .pu-suz-govde{flex:1;overflow:auto;max-height:none}
/* çekmecede alanlar TEK sütun — alanlar hep aynı yerde, göz kası kuralı */
.pu-suz-perde--cekmece .pu-suz-izgara{grid-template-columns:1fr !important}

/* ── ETKİN FİLTRE BELİRGİNLİĞİ (Fatih 12 Eki: "net filtre olduğu belli olsun") ──
   Dolu çip ve dolu Filtreler düğmesi AKSAN DOLGUDA — soluk tonla "seçili mi
   değil mi" okunamıyordu. Boş hâl eskisi gibi nötr kalır: fark SEÇİMDİR. */
.pu-suz-ust-tek .pu-cip--secili,
.pu-suz-cubuk .pu-cip--secili{background:var(--pu-aksan);border-color:var(--pu-aksan);
  color:var(--pu-aksan-ustu);font-weight:600}
.pu-suz-ust-tek .pu-cip--secili .pu-suz-deger{color:var(--pu-aksan-ustu);opacity:.9}
/* KOŞULLAR şeridi: sol aksan çizgisi + zemin — "burada etkin filtre var" */
.pu-suz-uyg{border-left:3px solid var(--pu-aksan);background:var(--pu-aksan-zemin);
  border-radius:8px;padding:6px 10px;margin-top:9px}

/* ── ÇUBUK KALINLAŞTI (Fatih 13 Eki: "search alanı daha kalın, orası baya
   işlevsel") — tek satır modunda arama BİRİNCİL denetim: daha yüksek, daha
   okunur, odakta aksan halkası. Çipler de aynı boyla hizalanır. ── */
.pu-suz-ust-tek .pu-suz-ara{background:var(--pu-yuzey);border:1.5px solid var(--pu-cizgi);
  border-radius:11px;padding:10px 13px;font-size:14px}
.pu-suz-ust-tek .pu-suz-ara input{font-size:14px}
.pu-suz-ust-tek .pu-suz-ara:focus-within{border-color:var(--pu-aksan);
  box-shadow:0 0 0 3px var(--pu-aksan-zemin)}
.pu-suz-ust-tek .pu-cip{padding:8px 14px;font-size:13px}
.pu-suz-ust-tek{gap:8px}
/* ÖZEL ARALIK — iki ETİKETLİ kutu, pencere alanlarıyla aynı dil (toparlandı) */
.pu-dnm-aralik{display:flex;gap:8px;align-items:flex-end;margin-top:2px}
.pu-dnm-aralik .pu-dnm-k{flex:1}
.pu-dnm-aralik .pu-dnm-k label{display:block;font-size:10.5px;font-weight:700;
  letter-spacing:.3px;color:var(--pu-soluk);margin-bottom:4px;text-transform:uppercase}
.pu-dnm-aralik .pu-dnm-k button{width:100%;display:flex;align-items:center;gap:7px;
  border:1.5px solid var(--pu-cizgi);border-radius:9px;padding:9px 11px;
  font-size:13px;font-weight:600;background:var(--pu-yuzey);color:var(--pu-yazi);
  cursor:pointer;font-variant-numeric:tabular-nums}
.pu-dnm-aralik .pu-dnm-k button.pu-dnm-bos{color:var(--pu-soluk);font-weight:400}
.pu-dnm-aralik .pu-dnm-k button:hover{border-color:var(--pu-aksan)}
.pu-dnm-tire{padding-bottom:11px;color:var(--pu-soluk)}

/* ── TUR 2 KALINLAŞTIRMA (Fatih 13 Eki) ───────────────────────────────────── */
/* ARAMA ÇUBUKTAKİ BOŞ ALANI ALIR (Fatih 13 Eki: "küçük kalıyor, yana doğru
   uzat") — temel sınıftaki flex:0 1 320px tek satır kipinde yazıyı ~110px'e
   sıkıştırıyordu; kapsam ipucu da kutunun İÇİNDEN yer yiyor. Çipler sabit,
   esneyen tek parça arama kutusudur. */
.pu-suz-ust-tek .pu-suz-ara{padding:12px 15px;font-size:15px;border-radius:12px;border-width:2px;flex:1 1 320px;min-width:220px;max-width:none}
.pu-suz-ust-tek .pu-suz-ara input{font-size:15px}
.pu-suz-ust-tek .pu-cip{padding:10px 16px;font-size:13.5px}
/* ARAMANIN ÇOK İŞLEVLİ OLDUĞU KUTUNUN İÇİNDE SÖYLENİR: sağda soluk kapsam
   ipucu. Yer tutucu silinince de durur — kutu neyi aradığını hep söyler. */
.pu-suz-ara-kapsam{margin-left:auto;font-size:11.5px;color:var(--pu-soluk);
  white-space:nowrap;display:flex;align-items:center;gap:5px}
.pu-suz-ara-kapsam .pu-rozet{font-size:9.5px;padding:1px 7px}
/* ÇEKMECE EN AŞAĞIYA KADAR — dip düğmeleri alta SABİT */
/* İÇERİĞE SARILIR, EN ÇOK EKRAN BOYU (Fatih 13 Eki "boşluğu sil"):
   "hep dibe bas" kuralı kısa içerikte ölü beyazlık doğuruyordu. Uzun liste
   yine 100dvh'de kaydırılır ve dip görünür kalır; kısa listede panel
   içerik kadar — boşluk hiç doğmaz. */
.pu-suz-perde--cekmece .pu-suz-kutu{height:auto;max-height:100dvh;min-height:0}
.pu-suz-perde--cekmece .pu-suz-dip{position:sticky;bottom:0;background:var(--pu-yuzey);
  border-top:1px solid var(--pu-cizgi)}

/* ── 19. RETENTION TEKLİF BİLEŞENLERİ (22 Eki 2026, Fatih onaylı mockup — yalnız bileşen, ekran YOK) ─────
   Kaynak: .ekip/RETENTION_SARTNAME.md §6. Sayfa bunlara kendi rengi/gölgesi/köşesini EKLEMEZ; yalnız yerleşim.
   Renk yalnız var(--pu-*). Koyu temada `html.dark .pu-girdi` (0,2,1) tek sınıflı zemin kuralını yener;
   o yüzden hero girdinin ZEMİN/YAZI rengi koyu için tekrarlandı (gölge tekrarlanmaz: test_pusula —
   koyu tekrarı yalnız renk/kenar taşır). */

/* 19a. GİRDİ — hero: formül kutuları (liste − indirim = ödediği), 36 punto, sağda sabit birim (CHF) */
.pu-girdi-birimli{position:relative;display:block}
.pu-girdi--hero{height:54px;font-size:28px;font-weight:780;letter-spacing:-.6px;padding:0 54px 0 14px;
  border-radius:var(--pu-kose-kart);font-variant-numeric:tabular-nums;background:var(--pu-yuzey);
  box-shadow:inset 0 0 0 2px var(--pu-cizgi)}
.pu-girdi-birim{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:750;
  color:var(--pu-soluk);pointer-events:none}
.pu-girdi--hero.pu-girdi--yazilan{background:var(--pu-yuzey);box-shadow:0 0 0 4px var(--pu-aksan-zemin),inset 0 0 0 2.5px var(--pu-aksan)}
.pu-girdi--hero.pu-girdi--hesaplanan{background:var(--pu-cukur);color:var(--pu-yazi-2);box-shadow:none}
html.dark .pu-girdi--hero{background:var(--pu-yuzey);color:var(--pu-yazi)}
html.dark .pu-girdi--hero.pu-girdi--yazilan{background:var(--pu-yuzey)}
html.dark .pu-girdi--hero.pu-girdi--hesaplanan{background:var(--pu-cukur);color:var(--pu-yazi-2)}
.pu-formul{display:flex;align-items:flex-end;gap:12px}
.pu-formul-op{font-size:20px;font-weight:700;color:var(--pu-soluk);padding-bottom:8px}
.pu-formul-kutu{padding:8px 16px 9px;border-radius:var(--pu-kose-kart);background:var(--pu-yuzey);
  box-shadow:0 0 0 2px var(--pu-aksan-cizgi)}
.pu-formul-deger{display:block;font-size:26px;font-weight:780;letter-spacing:-.8px;line-height:1.05;
  color:var(--pu-aksan);font-variant-numeric:tabular-nums}

/* 19b. FARK HAPI — "+5.00 vs today": dolu, kalın, fiyatın hemen altında. --basari/--aksan = "Recommended"
   basamağı (dolu renk), --notr = yakın/aynı, --eksi = bugünkünün ALTI (gri + uyarı çerçevesi, gizlenmez) */
.pu-fark{display:inline-flex;align-items:baseline;gap:5px;align-self:flex-start;font-size:14px;font-weight:800;
  padding:3px 13px;border-radius:var(--pu-kose-hap);font-variant-numeric:tabular-nums;white-space:nowrap}
.pu-fark small{font-size:11px;font-weight:650;opacity:.85}
.pu-fark--notr{background:var(--pu-cukur);color:var(--pu-yazi-2)}
.pu-fark--basari{background:var(--pu-basari);color:var(--pu-aksan-ustu)}
.pu-fark--aksan{background:var(--pu-aksan);color:var(--pu-aksan-ustu)}
.pu-fark--eksi{background:var(--pu-cukur);color:var(--pu-yazi-2);box-shadow:inset 0 0 0 2px var(--pu-uyari)}

/* 19c. KADEME — kartın zemini + sol şeridi. Basamak 1 en açık, 3 en koyu (yüzeyden uzaklaşır). */
.pu-kad-basari-1{background:var(--pu-kad-basari-1);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-kad-basari-s1)}
.pu-kad-basari-2{background:var(--pu-kad-basari-2);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-kad-basari-s2)}
.pu-kad-basari-3{background:var(--pu-kad-basari-3);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-kad-basari-s3)}
.pu-kad-aksan-1{background:var(--pu-kad-aksan-1);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-kad-aksan-s1)}
.pu-kad-aksan-2{background:var(--pu-kad-aksan-2);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-kad-aksan-s2)}
.pu-kad-aksan-3{background:var(--pu-kad-aksan-3);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-kad-aksan-s3)}

/* 19d. ŞERİT — yana kaydırmalı kart sırası: sağ kenarda solma, "devamı var" oku, ilerleme çubuğu.
   Kaydırma tarayıcıda (trackpad/dokunmatik); ok düğmeleri sayfanın JS'iyle scrollBy yapar. */
.pu-serit{position:relative}
.pu-serit-ic{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px;scrollbar-width:none}
.pu-serit-ic::-webkit-scrollbar{display:none}
.pu-serit-ic>*{flex:0 0 204px;scroll-snap-align:start}
.pu-serit::after{content:'';position:absolute;top:0;right:0;bottom:14px;width:110px;pointer-events:none;
  background:linear-gradient(to right,transparent,var(--pu-zemin))}
.pu-serit-ok{position:absolute;right:4px;top:46%;z-index:2;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--pu-aksan);
  background:var(--pu-yuzey);box-shadow:var(--pu-golge),0 0 0 1px var(--pu-cizgi)}
.pu-serit-ok:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pu-aksan-zemin),0 0 0 1px var(--pu-aksan)}
.pu-serit-ok[disabled]{opacity:.4;cursor:default}

/* 19e. SÖYLE ŞERİDİ — agent'ın müşteriye okuyacağı cümle: ekranın en görünür yeri, dolu mavi, büyük punto */
.pu-soyle{display:flex;align-items:center;gap:20px;padding:13px 18px;border-radius:var(--pu-kose-kart);
  background:var(--pu-aksan);color:var(--pu-aksan-ustu);box-shadow:var(--pu-golge)}
.pu-soyle-gov{flex:1;min-width:0}
.pu-soyle-etiket{display:block;font-size:11.5px;font-weight:750;text-transform:uppercase;letter-spacing:.5px;opacity:.85;margin-bottom:6px}
.pu-soyle-metin{margin:0;font-size:17px;font-weight:650;line-height:1.3;letter-spacing:-.3px}
.pu-soyle-yan{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pu-soyle-not{font-size:11.5px;opacity:.8}
.pu-soyle-dugme{border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:750;padding:10px 18px;white-space:nowrap;
  border-radius:var(--pu-kose-kontrol);background:var(--pu-yuzey);color:var(--pu-aksan)}
.pu-soyle-dugme:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pu-aksan-zemin),0 0 0 5px var(--pu-aksan-ustu)}

/* 19f. BÖLÜM BAŞLIĞI · LEJANT · SAYAÇ — kart gruplarının üstündeki satır: ad + ipucu, sağda lejant ve "1 to 5 of 8" */
.pu-bolum-bas{display:flex;align-items:baseline;gap:10px;margin:20px 0 10px}
.pu-bolum-ad{font-size:15px;font-weight:700;margin:0;color:var(--pu-yazi)}
.pu-bolum-ipucu{font-size:12.5px;color:var(--pu-soluk)}
.pu-bolum-sag{margin-left:auto;display:flex;align-items:center;gap:14px}
.pu-lejant{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--pu-yazi-2)}
.pu-lejant-kutu{display:inline-block;width:24px;height:12px;border-radius:4px;background:var(--pu-yuzey);box-shadow:inset 0 0 0 1px var(--pu-cizgi)}
.pu-lejant-kutu--basari-1{background:var(--pu-kad-basari-1)} .pu-lejant-kutu--basari-3{background:var(--pu-kad-basari-3)}
.pu-lejant-kutu--aksan-1{background:var(--pu-kad-aksan-1)} .pu-lejant-kutu--aksan-3{background:var(--pu-kad-aksan-3)}
.pu-sayac{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--pu-yazi-2)}

/* 19g. ÖZET KUTUSU — "mevcut paket": mavi zeminde dört değer (başlık satırı + etiket/değer ızgarası) */
.pu-ozet{background:var(--pu-aksan-zemin);border-radius:var(--pu-kose-kart);padding:11px 14px;min-width:0}
.pu-ozet-bas{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;color:var(--pu-yazi)}
.pu-ozet-bas b{font-size:15px}
.pu-ozet-izg{display:grid;grid-template-columns:1fr 1fr 1.9fr 1fr;gap:10px}
.pu-ozet-etiket{display:block;font-size:10.5px;font-weight:700;color:var(--pu-aksan);text-transform:uppercase;letter-spacing:.3px}
.pu-ozet-deger{font-size:14px;font-weight:700;color:var(--pu-yazi)}

/* 19h. TEKLİF KARTI — .pu-kart ÜZERİNE (yüzey/gölge oradan) + .pu-kad-* kademesi. KÜÇÜK YAZI KURALI: kartın içinde
   küçük yazı YALNIZ --pu-yazi / --pu-yazi-2 (en koyu kademe zemininde ölçüldü: soluk 2.1–2.7:1, yeşil/mavi 3.0–4.5:1 —
   okunmaz; yazi-2 ≥ 4.7:1). Yalnız BÜYÜK fiyat rakamı yeşil/mavi olabilir (3:1 yeter). Kilit: tests/test_pusula_kademe.py */
.pu-teklif{display:flex;flex-direction:column;gap:5px;padding:11px 12px;min-width:0}
.pu-teklif-ust{display:flex;align-items:center;gap:8px}
.pu-sira{width:22px;height:22px;border-radius:50%;background:var(--pu-cukur);color:var(--pu-yazi-2);font-size:12px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;flex:none}
.pu-teklif-ad{font-size:16px;font-weight:740;letter-spacing:-.3px;margin:4px 0 0;color:var(--pu-yazi)}
.pu-teklif-fiyat{font-size:23px;font-weight:760;letter-spacing:-.6px;margin:0;color:var(--pu-yazi);font-variant-numeric:tabular-nums}
.pu-teklif-fiyat small{font-size:11.5px;font-weight:600;color:var(--pu-yazi-2);margin-left:5px;letter-spacing:0}
.pu-teklif-fiyat--basari{color:var(--pu-basari)}
.pu-teklif-fiyat--aksan{color:var(--pu-aksan)}
.pu-teklif-fiyat--sakin{color:var(--pu-yazi-2)}
.pu-teklif-liste{font-size:12px;color:var(--pu-yazi-2);margin:0}
.pu-teklif-liste s{color:var(--pu-yazi-2)}
.pu-teklif-liste b{color:var(--pu-yazi);font-weight:800}
.pu-teklif-kazanc{margin-top:6px;border-top:1px solid var(--pu-cizgi);padding-top:6px;min-height:112px}
.pu-kazanc{padding:4px 0;font-size:12px;color:var(--pu-yazi)}
.pu-kazanc-a{display:block;font-size:10.5px;font-weight:700;color:var(--pu-yazi-2);text-transform:uppercase;letter-spacing:.3px}
.pu-kazanc s{color:var(--pu-yazi-2)}
.pu-kazanc-iyi{color:var(--pu-yazi);font-weight:800}
.pu-kazanc-x{font-size:10.5px;font-weight:750;color:var(--pu-yazi);background:var(--pu-yuzey);padding:1px 6px;border-radius:var(--pu-kose-hap)}
.pu-teklif-ulke{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:12px;color:var(--pu-yazi-2)}
.pu-teklif-alt{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:auto;padding-top:8px}
.pu-kod{font-family:var(--pu-mono);font-size:12px;color:var(--pu-yazi-2);background:var(--pu-cukur);padding:3px 8px;border-radius:var(--pu-kose-kontrol)}
.pu-teklif--secili{outline:3px solid var(--pu-aksan);outline-offset:0}
.pu-teklif--bugun{background:var(--pu-aksan-zemin);box-shadow:0 0 0 2px var(--pu-aksan-cizgi)}
.pu-teklif--uyari{box-shadow:inset 0 0 0 2px var(--pu-uyari-zemin),var(--pu-golge)}
.pu-kayip{margin-top:10px;padding:10px;border-radius:var(--pu-kose-kart);background:var(--pu-uyari-zemin)}

/* ── 19h2. KÂĞIT — basılı belgenin ekrandaki yüzü (Lieferschein, mektup önizlemesi). Fatih 9 Kas, kargo seri no formu V2-1
   ("önerin uygun"): belge girdikçe dolar ve gerçek kâğıda benzer. KOYU TEMADA DA AÇIK KALIR — kâğıt koyu olmaz.
   NASIL: koyu temada değişen BÜTÜN token'lar bu alt ağaçta açık tema değerlerine bağlanır; içindeki her Pusula bileşeni
   (pu-tablo, pu-cip, pu-rozet…) kendiliğinden açık çizilir. Değerler :root'un KOPYASI — ayrışmasın diye
   tests/test_pusula.py::test_KAGIT_acik_tema_tokenlarinin_TAMAMINI_root_degeriyle_baglar kilitli (koyu blokta olup
   burada olmayan ya da :root'tan farklı değer taşıyan token kırmızı). Sayfa yalnız yerleşim ekler. */
.pu-kagit{
  --pu-zemin:#f6f6f8; --pu-yuzey:#ffffff; --pu-cukur:#eeeef2; --pu-cizgi:#f0f0f3; --pu-yazi:#111114;
  --pu-yazi-2:#4a4a55; --pu-soluk:#82828f; --pu-aksan:#185fa5; --pu-aksan-zemin:#eaf2fa; --pu-aksan-cizgi:#b9d3ec;
  --pu-aksan-ustu:#ffffff; --pu-basari:#1d7a4f; --pu-basari-zemin:#e7f4ed; --pu-tehlike:#c0392b;
  --pu-tehlike-zemin:#fbebe9; --pu-uyari:#a35c09; --pu-uyari-zemin:#fbf1e3; --pu-mor:#5b3fd8; --pu-mor-zemin:#eeeafc;
  --pu-mor-serit:#4a2fd0; --pu-camg:#0e7490; --pu-camg-zemin:#ecfeff; --pu-pembe:#9f1239; --pu-pembe-zemin:#fdf2f8;
  --pu-golge:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.07);
  --pu-golge-yuksek:0 10px 26px rgba(16,24,40,.16),0 2px 6px rgba(16,24,40,.08);
  --pu-golge-yukari:0 -2px 8px rgba(16,24,40,.06); --pu-perde:rgba(17,17,20,.32); --pu-girdi-zemin:#f7f7f9;
  --pu-kat-0:#6b7280; --pu-kat-1:#1f6feb; --pu-kat-2:#00897b; --pu-kat-3:#b45309; --pu-kat-4:#b5179e;
  --pu-kat-5:#6d28d9; --pu-kad-basari-1:#e4efea; --pu-kad-basari-2:#c9dfd5; --pu-kad-basari-3:#aecfc0;
  --pu-kad-basari-s1:#99c3b0; --pu-kad-basari-s2:#61a284; --pu-kad-basari-s3:#1d7a4f; --pu-kad-aksan-1:#e3ecf4;
  --pu-kad-aksan-2:#c8d9e9; --pu-kad-aksan-3:#acc5df; --pu-kad-aksan-s1:#97b7d6; --pu-kad-aksan-s2:#5d8fc0;
  --pu-kad-aksan-s3:#185fa5; --pu-yuk-1:#eef3f8; --pu-yuk-2:#e6edf5; --pu-yuk-3:#dee8f2; --pu-yuk-4:#d5e2f0;
  --pu-yuk-5:#cddded; --pu-yuk-6:#c5d7ea; --pu-yuk-7:#bdd2e7; --pu-yuk-8:#b4cce5; --pu-yuk-9:#acc7e2;
  --pu-yuk-10:#a4c1df; --pu-yuk-s1:#d3deea; --pu-yuk-s2:#bed0e2; --pu-yuk-s3:#a9c2db; --pu-yuk-s4:#95b4d3;
  --pu-yuk-s5:#80a6cb; --pu-yuk-s6:#6b97c4; --pu-yuk-s7:#5689bc; --pu-yuk-s8:#427bb4; --pu-yuk-s9:#2d6dad;
  --pu-yuk-s10:#185fa5;
}
.pu-kagit{display:flex;flex-direction:column;gap:12px;padding:28px 30px;background:var(--pu-yuzey);color:var(--pu-yazi);
  border-radius:var(--pu-kose-kart);box-shadow:var(--pu-golge);font-size:11.5px;line-height:1.45}
.pu-kagit-ret{font-size:8.5px;color:var(--pu-yazi-2);border-bottom:1px solid var(--pu-cizgi);padding-bottom:2px;margin-bottom:4px}
.pu-kagit-bas{font-size:14px;font-weight:760}
.pu-kagit-alt{margin-top:auto;font-size:10.5px;color:var(--pu-yazi-2)}

/* ── 19q. Kümülatif tablo (DASH 9 Kas, k98; mockup kumulatif_v4_renkli): iki eksen bloğu — satış tarihi AKSAN (mavi), kayıt tarihi MOR.
   Ton zeminleri token + color-mix (hex YOK). Fark: artış --pu-basari, düşüş --pu-tehlike. Yalnız token. */
.pu-tablo th.pu-blok-a{background:var(--pu-aksan-zemin);color:var(--pu-aksan);text-align:center;border-bottom:3px solid var(--pu-aksan)}
.pu-tablo th.pu-blok-k{background:var(--pu-mor-zemin);color:var(--pu-mor);text-align:center;border-bottom:3px solid var(--pu-mor)}
.pu-tablo td.pu-blok-a{background:color-mix(in srgb,var(--pu-aksan-zemin) 55%,transparent)}
.pu-tablo td.pu-blok-k{background:color-mix(in srgb,var(--pu-mor-zemin) 55%,transparent)}
.pu-tablo .pu-blok-ayrac{border-left:3px solid var(--pu-mor)}
.pu-tablo tr.pu-satir-ana td{box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--pu-aksan-zemin) 40%,transparent)}
.pu-tablo tr.pu-satir-alt td{font-size:12.5px;color:var(--pu-yazi-2)}
.pu-tablo tr.pu-satir-alt td:first-child{padding-left:30px}
.pu-tablo tr.pu-satir-toplam td{background:var(--pu-aksan-zemin);font-weight:700;border-top:2px solid var(--pu-aksan)}
.pu-tablo tr.pu-satir-uyari td{background:var(--pu-uyari-zemin);color:var(--pu-uyari);font-size:12.5px}
.pu-sayi--artis{color:var(--pu-basari)}
.pu-sayi--dusus{color:var(--pu-tehlike)}
.pu-kart--eksen-a{border-top:3px solid var(--pu-aksan)}
.pu-kart--eksen-k{border-top:3px solid var(--pu-mor)}
.pu-kart--eksen-u{border-top:3px solid var(--pu-uyari)}
.pu-kart--eksen-b{border-top:3px solid var(--pu-basari)}
.pu-sag{text-align:right}
.pu-kum-ust{display:flex;align-items:center;gap:10px;margin:10px 0 12px;flex-wrap:wrap;position:relative}
/* DÖNEM MENÜSÜ — çoklu ay + yıl (Fatih 11 Kas, mockup .ekip/DASH_KUMULATIF_DONEM_11KAS/): pu-donem-menu ailesinin ay ızgarası. */
.pu-kum-donem-menu{left:0;top:100%}
.pu-donem-menu .pu-dnm-b--ara{margin-top:10px}
.pu-dnm-yil{display:flex;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.pu-dnm-izgara{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.pu-dnm-ay{position:relative;height:36px;border-radius:9px;border:1px solid var(--pu-cizgi);background:var(--pu-yuzey);font:inherit;font-size:13px;font-weight:550;color:var(--pu-yazi);cursor:pointer}
.pu-dnm-ay:hover:not(:disabled){border-color:var(--pu-aksan)}
.pu-dnm-ay--sec{background:var(--pu-aksan);border-color:var(--pu-aksan);color:var(--pu-aksan-ustu);font-weight:700}
.pu-dnm-ay--bugun::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.pu-dnm-ay:disabled{color:var(--pu-soluk);background:var(--pu-cukur);border-color:var(--pu-cukur);cursor:default}
.pu-dnm-not{font-size:11.5px;color:var(--pu-soluk);margin-top:8px}
.pu-dnm-alt{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--pu-cizgi);font-size:12.5px;color:var(--pu-yazi-2)}
.pu-dnm-alt .pu-dnm-dug{margin-left:auto;display:flex}
.pu-cip-x{border:0;background:none;padding:0 0 0 4px;font:inherit;color:inherit;opacity:.7;cursor:pointer}
/* ÇAĞRI MERKEZİ MENÜSÜ (Fatih 11 Kas, mockup .ekip/DASH_KUMULATIF_CC_11KAS/): aranır, çoklu seçim onay kutulu liste */
.pu-kum-cc-menu{left:0;top:100%;width:min(340px,92vw)}
.pu-kum-ust .pu-kum-cc-menu .pu-girdi{width:100%;margin-bottom:8px}      /* .pu-kum-ust .pu-girdi (ay seçici) genişliği ezmesin */
.pu-dnm-liste{display:flex;flex-direction:column;gap:2px;max-height:320px;overflow:auto}
.pu-dnm-sat{display:flex;align-items:center;gap:10px;width:100%;padding:7px 6px;border:0;border-radius:8px;background:none;font:inherit;font-size:13px;color:var(--pu-yazi);text-align:left;cursor:pointer}
.pu-dnm-sat:hover{background:var(--pu-cukur)} .pu-dnm-sat--sec{background:var(--pu-aksan-zemin);font-weight:650}
.pu-dnm-kut{flex:none;width:16px;height:16px;border-radius:4px;border:1.5px solid var(--pu-cizgi)}
.pu-dnm-sat--sec .pu-dnm-kut{background:var(--pu-aksan);border-color:var(--pu-aksan);box-shadow:inset 0 0 0 3px var(--pu-yuzey)}
.pu-kum-sag{margin-left:auto}
.pu-kum-ust .pu-girdi{width:auto;min-width:120px}

/* ── 19i. FİYAT MATRİSİ — nokta grafiği (Fatih onaylı mockup, 22 Eki 2026; yalnız bileşen) ──────────────────────
   Satır = tarife · hücre = 1 CHF · nokta = bir fiyat basamağı · dikey çizgi = müşterinin ödediği · yeşil bant = teklif edilebilir.
   Konum (sol, hücre sayısı) çağıran tarafından satır-içi verilir (yerleşim); RENK yalnız var(--pu-*). */
.pu-matris{position:relative;overflow-x:auto;--pu-hucre:17px;--pu-ad:190px}
.pu-matris-ic{position:relative;min-width:max-content;padding-left:var(--pu-ad);margin-top:22px}
.pu-matris-eks{position:relative;height:28px}
.pu-matris-tik{position:absolute;top:6px;font-size:11px;font-weight:700;color:var(--pu-soluk);transform:translateX(-4px);font-variant-numeric:tabular-nums}
.pu-matris-satir{display:flex;align-items:center;height:30px;width:100%;margin:0 0 0 calc(-1 * var(--pu-ad));padding:0;border:0;border-top:1px solid var(--pu-cizgi);background:transparent;font:inherit;color:var(--pu-yazi);text-align:left;cursor:pointer}
.pu-matris-satir:hover{background:var(--pu-cukur)}
.pu-matris-satir:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--pu-aksan)}
.pu-matris-satir--secili{background:var(--pu-aksan-zemin)}
.pu-matris-ad{width:var(--pu-ad);flex:none;display:flex;align-items:center;gap:8px;padding:0 10px 0 8px;font-size:13px;font-weight:700}
.pu-matris-ad span{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--pu-soluk);font-variant-numeric:tabular-nums}
.pu-matris-aile{width:4px;height:18px;border-radius:2px;flex:none}
.pu-matris-aile--aksan{background:var(--pu-aksan)}
.pu-matris-aile--mor{background:var(--pu-mor)}
.pu-matris-aile--camg{background:var(--pu-camg)}
.pu-matris-hucreler{display:flex;flex:none}
.pu-matris-hucre{width:var(--pu-hucre);height:30px;display:flex;align-items:center;justify-content:center;gap:1px}
.pu-matris-hucre--bant{background:var(--pu-basari-zemin)}
.pu-matris-nokta{display:block;width:13px;height:13px;border-radius:4px}
.pu-matris-nokta--aksan{background:var(--pu-aksan)}
.pu-matris-nokta--mor{background:var(--pu-mor)}
.pu-matris-nokta--camg{background:var(--pu-camg)}
.pu-matris-nokta--soluk{opacity:.32}
.pu-matris-hat{position:absolute;top:0;bottom:0;width:2px;background:var(--pu-basari);z-index:2;pointer-events:none}
.pu-matris-hat-et{position:absolute;top:-22px;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:750;background:var(--pu-basari);color:var(--pu-aksan-ustu);border-radius:var(--pu-kose-hap);padding:2px 10px;z-index:3;pointer-events:none}
.pu-matris-ipucu{position:absolute;z-index:4;pointer-events:none;background:var(--pu-yazi);color:var(--pu-yuzey);border-radius:var(--pu-kose-kontrol);padding:8px 12px;font-size:12px;line-height:1.45;white-space:nowrap;box-shadow:var(--pu-golge)}
.pu-matris-ipucu b{font-size:14px}
.pu-matris-ipucu small{display:block;opacity:.75}
.pu-ozellik-izgara{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;padding:4px 0}
.pu-ozellik-a{display:block;font-size:10.5px;font-weight:700;color:var(--pu-soluk);text-transform:uppercase;letter-spacing:.3px}
.pu-ozellik-izgara b{font-size:15px;color:var(--pu-yazi)}
.pu-sayi-sag{text-align:right;font-variant-numeric:tabular-nums}
/* ── SÜZGEÇ PANELİ — `duzen:'panel'` (static/pusula-suzgec.js; Fatih onaylı Mockup 2, 21 Eki) ──────────────────────────────────────────────────────
   Hızlı çubuk + arama kutusu (içinde aktif süzgeç çipleri) + kutunun ALTINDA açılan panel (sol: hazır/kayıtlı süzgeçler · orta: alanlar · alt: sonuç/sıfırla/ara).
   Yalnız token (`var(--pu-*)`); renk kodu YOK. Alan satırı/segment/aralık/seçici AYNI `.pu-suz-alan` ailesi — burada yalnız yerleşim. */
.pu-suz-p{position:relative;display:flex;flex-direction:column;gap:10px}
.pu-suz-p-hizli{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pu-suz-p-hizli .pu-suz-gorunum{margin-left:auto}
.pu-suz-p-kutu{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:var(--pu-yuzey);border:1px solid var(--pu-cizgi);border-radius:var(--pu-kose-kontrol);padding:7px 10px;min-height:42px}
.pu-suz-p-cip{display:inline-flex;align-items:center;gap:6px;background:var(--pu-cukur);color:var(--pu-yazi);border-radius:999px;padding:4px 6px 4px 10px;font-size:12.5px;max-width:100%}
.pu-suz-p-cip b{font-weight:700}
.pu-suz-p-cip button{border:0;background:none;color:var(--pu-soluk);cursor:pointer;padding:0 4px;font-size:14px;line-height:1}
.pu-suz-p-ara{flex:1;min-width:150px;border:0;outline:0;background:none;color:var(--pu-yazi);font:inherit;font-size:13px}
.pu-suz-p-ac{margin-left:auto;white-space:nowrap}
.pu-suz-p-son{color:var(--pu-soluk)}
.pu-suz-p-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--pu-yuzey);border:1px solid var(--pu-cizgi);border-radius:var(--pu-kose-kart);box-shadow:var(--pu-golge-yukari),var(--pu-golge);overflow:hidden}
.pu-suz-p-grid{display:grid;grid-template-columns:240px minmax(0,1fr);max-height:min(62vh,560px)}
.pu-suz-p-sol{padding:12px 8px;border-right:1px solid var(--pu-cizgi);overflow:auto;display:flex;flex-direction:column;gap:2px}
.pu-suz-p-orta{padding:12px 16px;overflow:auto;min-width:0}
.pu-suz-p-baslik{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pu-soluk);padding:4px 10px}
.pu-suz-p-baslik--ara{margin-top:10px}
.pu-suz-p-not{text-transform:none;letter-spacing:0;font-weight:400;margin-left:6px}
.pu-suz-p-hazir{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;border:0;background:none;color:var(--pu-yazi);font:inherit;font-size:13px;border-radius:var(--pu-kose-kontrol);padding:8px 10px;cursor:pointer}
.pu-suz-p-hazir:hover{background:var(--pu-cukur)}
.pu-suz-p-hazir--on{background:var(--pu-cukur);font-weight:700}
.pu-suz-p-hazir small{color:var(--pu-soluk);font-size:12px}
.pu-suz-p-kayit{padding:0 6px 0 0}.pu-suz-p-kayit-ad{flex:1;min-width:0;text-align:left;border:0;background:none;color:inherit;font:inherit;padding:8px 10px;cursor:pointer}
.pu-suz-p-bos{color:var(--pu-soluk);font-size:12.5px;padding:4px 10px}
.pu-suz-p-kaydet{display:flex;flex-direction:column;gap:6px;padding:8px 6px 0}
.pu-suz-p-alanlar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin-top:6px}
.pu-suz-p-alan{position:relative;min-width:0}
.pu-suz-p-ek{position:absolute;right:0;top:0;display:flex;gap:4px;opacity:.55}
.pu-suz-p-alan:hover .pu-suz-p-ek,.pu-suz-p-ek:focus-within{opacity:1}
.pu-suz-p-ekle{margin-top:12px;position:relative}
.pu-suz-p-ekle--cubuk{position:absolute;z-index:30;top:calc(100% + 6px);left:0}
.pu-suz-p-dip{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--pu-cizgi);background:var(--pu-zemin)}
.pu-suz-p-sonuc{font-weight:700;font-size:13px}
@media (max-width:760px){.pu-suz-p-grid{grid-template-columns:1fr;max-height:70vh}.pu-suz-p-sol{border-right:0;border-bottom:1px solid var(--pu-cizgi)}.pu-suz-p-alanlar{grid-template-columns:1fr}}
.pu-suz-p-ekle .pu-sec{position:static;width:100%;box-shadow:none;border:0;border-radius:0;background:none}
.pu-suz-p-pin,.pu-suz-p-gizle{padding:2px 5px;font-size:13px;line-height:1;color:var(--pu-soluk)}
.pu-suz-p-pin:hover,.pu-suz-p-gizle:hover{color:var(--pu-aksan)}
.pu-suz-p-mine{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:1px solid var(--pu-cizgi);background:var(--pu-yuzey);color:var(--pu-yazi);font:inherit;font-size:13px;border-radius:var(--pu-kose-kontrol);padding:8px 10px;margin-bottom:8px;cursor:pointer}
.pu-suz-p-surgec{border:1px solid var(--pu-cizgi);border-radius:var(--pu-kose-kontrol);padding:6px;margin-bottom:8px;background:var(--pu-zemin)}
.pu-suz-p-bolum{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;border:0;background:none;color:var(--pu-yazi);font:inherit;font-size:13px;border-radius:var(--pu-kose-kontrol);padding:9px 10px;cursor:pointer}
.pu-suz-p-bolum:hover{background:var(--pu-cukur)}
.pu-suz-p-bolum--on{background:var(--pu-cukur);font-weight:700}
.pu-suz-p-bolum small{color:var(--pu-soluk);font-size:12px}
.pu-suz-p-pin--on{color:var(--pu-aksan)}
.pu-suz-p-grid{grid-template-rows:minmax(0,1fr)}.pu-suz-p-sol,.pu-suz-p-orta{min-height:0}

/* PANEL DÜZENİ cilası (Fatih 22 Eki: "iğrenç, net düşün") — kök sebepler: (1) panel arama kutusu kadar DARDI (flex kapsayıcıda içeriğe büzüldü) → etiketler çarpıştı; (2) her alanda kalıcı raptiye;
   (3) Süzgeçlerim menüsü sol sütunu aşağı itiyordu; (4) her bölümün başında açıklama cümlesi. */
.pu-suz-p{width:100%;position:relative;flex:1 0 100%}
.pu-suz-p-grid{grid-template-columns:230px minmax(0,1fr)}
.pu-suz-p-alanlar{gap:18px 28px}
.pu-suz-p-ek{opacity:0;transition:opacity .12s}
.pu-suz-p-alan:hover .pu-suz-p-ek,.pu-suz-p-ek:focus-within,.pu-suz-p-ek:has(.pu-suz-p-pin--on){opacity:1}
.pu-suz-p-sol{position:relative}
.pu-suz-p-surgec{position:absolute;z-index:6;left:8px;right:8px;top:52px;box-shadow:var(--pu-golge-yukari),var(--pu-golge);background:var(--pu-yuzey);margin:0}
.pu-suz-p-orta .pu-suz-p-baslik .pu-suz-p-not{display:none}

.pu-suz-p-ustsatir{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.pu-suz-p-alanara{max-width:240px;width:240px}
.pu-suz-p-alan-grup{grid-column:1/-1;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pu-soluk);margin-top:4px}
.pu-suz-p-x{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:0;border-radius:50%;background:var(--pu-cukur);color:var(--pu-soluk);cursor:pointer;font-size:14px;padding:0;margin-left:4px}
.pu-suz-p-x:hover,.pu-suz-p-x:focus-visible{background:var(--pu-cizgi);color:var(--pu-yazi)}

.pu-suz-p-ekleb{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:12px;margin-top:4px;border-top:1px dashed var(--pu-cizgi)}
.pu-suz-p-ekleb-ad{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pu-soluk);margin-right:4px}
.pu-suz-p-kaldir{padding:2px 5px;font-size:13px;line-height:1;color:var(--pu-soluk)}
.pu-suz-p-kaldir:hover{color:var(--pu-tehlike)}


/* ── 19j. HAREKET — kartın üstüne gelince yükselir, sonuç gelince belirir (Fatih 22 Eki: "animasyonlu değil, üstüne gelemiyorum") ──
   Yalnız hareket; renk/ölçü yok. "Hareketi azalt" tercihi olan kullanıcıda KAPALI. */
@keyframes pu-belir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pu-teklif{transition:transform .16s ease,box-shadow .16s ease,outline-color .16s ease;cursor:pointer}
.pu-teklif--giris{animation:pu-belir .26s ease both}
.pu-teklif--onizle{outline:2px solid var(--pu-aksan-cizgi);outline-offset:0}
.pu-soyle-metin--yeni{animation:pu-belir .2s ease both}
@media (hover:hover){
  .pu-teklif:hover{transform:translateY(-3px);box-shadow:var(--pu-golge-yuksek)}
}
@media (prefers-reduced-motion:reduce){
  .pu-teklif,.pu-teklif--giris,.pu-soyle-metin--yeni{transition:none;animation:none}
  .pu-teklif:hover{transform:none}
}

/* ── 19k. ŞERİT AYRACI — "en iyi teklifler" bitti, "daha fazla alternatif" başlıyor (Fatih onaylı düzen 1, 22 Eki) ── */
.pu-serit-ayrac{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:12px;border-radius:var(--pu-kose-kart);background:var(--pu-cukur);color:var(--pu-yazi-2);font-size:12px}
.pu-serit-ayrac b{color:var(--pu-yazi);font-size:13px}
.pu-serit-ayrac i{font-style:normal;font-size:20px;font-weight:700;color:var(--pu-yazi)}
.pu-serit-ic>.pu-serit-ayrac{flex:0 0 132px}

/* HIZLI ÇUBUK ÇİPİ KÜÇÜK PENCERESİ (liste dışı tip): çipin altında tek alanlık açılır pencere */
.pu-suz-p-hizli{position:relative}
.pu-suz-p-cippop{position:absolute;z-index:40;top:calc(100% + 6px);min-width:260px;max-width:340px;background:var(--pu-yuzey);border:1px solid var(--pu-cizgi);border-radius:var(--pu-kose-kart);box-shadow:var(--pu-golge-yukari),var(--pu-golge);padding:12px 14px}
.pu-suz-p-cippop-dip{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}

/* ── 19n. YÜKSELTME KADEMESİ — ödenenin +N CHF üstü = N. kademe (1 = +1 en soluk … 10 = +10 en belirgin mavi); kart ZEMİNİ + sol şerit ── */
.pu-yuk-1{background:var(--pu-yuk-1);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-yuk-s1)}
.pu-yuk-2{background:var(--pu-yuk-2);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-yuk-s2)}
.pu-yuk-3{background:var(--pu-yuk-3);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-yuk-s3)}
.pu-yuk-4{background:var(--pu-yuk-4);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-yuk-s4)}
.pu-yuk-5{background:var(--pu-yuk-5);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-yuk-s5)}
.pu-yuk-6{background:var(--pu-yuk-6);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-yuk-s6)}
.pu-yuk-7{background:var(--pu-yuk-7);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-yuk-s7)}
.pu-yuk-8{background:var(--pu-yuk-8);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-yuk-s8)}
.pu-yuk-9{background:var(--pu-yuk-9);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-yuk-s9)}
.pu-yuk-10{background:var(--pu-yuk-10);box-shadow:var(--pu-golge),inset 5px 0 0 var(--pu-yuk-s10)}
.pu-lejant-kutu--yuk-1{background:var(--pu-yuk-1)} .pu-lejant-kutu--yuk-3{background:var(--pu-yuk-3)} .pu-lejant-kutu--yuk-10{background:var(--pu-yuk-10)}

/* ── 19o. YÜKSELTME SATIRLARI — paket başına TEK satır, +N kademeleri yan yana sütunlarda fiyat HAPI (Fatih 23 Eki: "paket satırı + sütunlu fiyat hapı")
   Satır = paket (solda aile çizgisi, ad, liste fiyatı) + müşterinin kazancı tek satır + kademe sütunları (hap = fiyat + kod) + ülkeler.
   Hap zemini ve sol şeridi 19n'in 10 kademesi (--pu-yuk-N / --pu-yuk-sN). Yazı YALNIZ --pu-yazi / --pu-yazi-2 (küçük yazı kuralı, 19h).
   Sütun sayısı sınıfla: 5 (+3…+7) ya da .pu-yt--fazla ile 10 (+1…+10). Dar ekranda yatay kayar. */
.pu-yt{--pu-yt-n:5;--pu-yt-w:92px;padding:0;overflow-x:auto}
.pu-yt--fazla{--pu-yt-n:10;--pu-yt-w:80px}
.pu-yt-bas,.pu-yt-sat{display:grid;grid-template-columns:200px minmax(200px,1fr) repeat(var(--pu-yt-n),var(--pu-yt-w)) 100px;min-width:calc(500px + var(--pu-yt-n) * var(--pu-yt-w))}
.pu-yt-bas{background:var(--pu-cukur);font-size:11px;font-weight:750;letter-spacing:.3px;text-transform:uppercase;color:var(--pu-yazi-2)}
.pu-yt-bas>*{padding:10px 12px}
.pu-yt-lv{text-align:center;color:var(--pu-yazi-2)}
.pu-yt-sat{border-top:1px solid var(--pu-cizgi)}
.pu-yt-pk{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:12px 14px;border-left:4px solid var(--pu-aksan)}
.pu-yt-pk--mor{border-left-color:var(--pu-mor)}
.pu-yt-pk--camg{border-left-color:var(--pu-camg)}
.pu-yt-ad{font-size:15px;font-weight:740;letter-spacing:-.2px;color:var(--pu-yazi)}
.pu-yt-liste{font-size:12px;color:var(--pu-yazi-2);font-variant-numeric:tabular-nums}
.pu-yt-ka{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:12px;font-size:12.5px;color:var(--pu-yazi-2)}
.pu-yt-ka b{color:var(--pu-yazi);font-weight:800;font-variant-numeric:tabular-nums}
.pu-yt-ka s{color:var(--pu-yazi-2)}
.pu-yt-hucre{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:8px 4px}
.pu-yt-hap{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:0;font:inherit;cursor:pointer;color:var(--pu-yazi);text-align:left;padding:7px 8px 7px 11px;border-radius:var(--pu-kose-kontrol);transition:transform .16s ease}
.pu-yt-hap b{font-size:15px;font-weight:780;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.pu-yt-hap span{font-family:var(--pu-mono);font-size:10.5px;color:var(--pu-yazi-2)}
.pu-yt-hap:focus-visible{outline:3px solid var(--pu-aksan);outline-offset:1px}
.pu-yt-hap--secili{outline:3px solid var(--pu-aksan);outline-offset:0}
.pu-yt-ulke{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:8px 12px;font-size:12px;color:var(--pu-yazi-2)}
.pu-yt-alt{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:12px 14px;border-top:1px solid var(--pu-cizgi);font-size:12px;color:var(--pu-yazi-2)}
.pu-hap-1{background:var(--pu-yuk-1);box-shadow:inset 3px 0 0 var(--pu-yuk-s1)}
.pu-hap-2{background:var(--pu-yuk-2);box-shadow:inset 3px 0 0 var(--pu-yuk-s2)}
.pu-hap-3{background:var(--pu-yuk-3);box-shadow:inset 3px 0 0 var(--pu-yuk-s3)}
.pu-hap-4{background:var(--pu-yuk-4);box-shadow:inset 3px 0 0 var(--pu-yuk-s4)}
.pu-hap-5{background:var(--pu-yuk-5);box-shadow:inset 3px 0 0 var(--pu-yuk-s5)}
.pu-hap-6{background:var(--pu-yuk-6);box-shadow:inset 3px 0 0 var(--pu-yuk-s6)}
.pu-hap-7{background:var(--pu-yuk-7);box-shadow:inset 3px 0 0 var(--pu-yuk-s7)}
.pu-hap-8{background:var(--pu-yuk-8);box-shadow:inset 3px 0 0 var(--pu-yuk-s8)}
.pu-hap-9{background:var(--pu-yuk-9);box-shadow:inset 3px 0 0 var(--pu-yuk-s9)}
.pu-hap-10{background:var(--pu-yuk-10);box-shadow:inset 3px 0 0 var(--pu-yuk-s10)}
@media (hover:hover){
  .pu-yt-hap:hover{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){
  .pu-yt-hap{transition:none}
  .pu-yt-hap:hover{transform:none}
}

/* ── 19p. CİHAZLI TEKLİF — telefon kartı · teklif satırı · toplam bandı (Fatih onaylı "Süreç" mockup'ı, 24 Eki 2026) ──
   /crm/cihazli: 4 adım şeridi (pu-adim) + solda telefon kartı + sağda satır satır teklif. Yalnız bileşen; yerleşim ekranda.
   Teklif satırı pu-kv'nin BÜYÜK değişkesi (ikinci bir anahtar-değer kopyası yazılmadı); tarife fiyatı satırında girdi (pu-girdi) durur. */
.pu-cihaz{display:flex;gap:18px;align-items:center;padding:14px 16px;margin-top:12px;border-radius:var(--pu-kose-kart);background:var(--pu-aksan-zemin);color:var(--pu-yazi)}
.pu-cihaz-simge{flex:none;color:var(--pu-yazi-2)}
.pu-cihaz-gov{min-width:0}
.pu-cihaz-ad{margin:2px 0 6px;font-size:21px;font-weight:700;letter-spacing:-.4px;color:var(--pu-yazi)}
.pu-cihaz-rozetler{display:flex;gap:6px;flex-wrap:wrap}
.pu-cihaz-fiyat{margin:8px 0 0;font-size:13px;color:var(--pu-soluk)}
.pu-cihaz-fiyat b{font-size:20px;font-weight:750;color:var(--pu-yazi);font-variant-numeric:tabular-nums;margin-right:6px}
.pu-kv--teklif{align-items:baseline;padding:9px 0;font-size:13px}
.pu-kv--teklif .pu-kv-a{display:inline-flex;align-items:center;gap:6px;color:var(--pu-yazi-2)}
.pu-kv--teklif .pu-kv-d{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.pu-kv--teklif .pu-girdi{width:132px;text-align:right;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;padding:6px 10px}
.pu-toplam{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px;margin-top:10px;border-radius:var(--pu-kose-kart);background:var(--pu-aksan-zemin);color:var(--pu-yazi);font-size:13px}
.pu-toplam-deger{font-size:32px;font-weight:800;color:var(--pu-aksan);font-variant-numeric:tabular-nums;letter-spacing:-.8px}
.pu-toplam-deger--yok{font-size:15px;font-weight:650;color:var(--pu-uyari);letter-spacing:0}

/* ══ GRAFİK BİLEŞENLERİ — yatay çubuk · ayrık çubuk · sütun grafik (Uyarılar sekmesi, mockup SON8; DASH 8 Kas) ══
   Yalnız token. Genişlik/yükseklik veriyle JS'ten (`style.width`/`style.height`); renk YAZILMAZ. */
.pu-yatay{display:grid;gap:9px}
.pu-yatay-satir{display:grid;grid-template-columns:minmax(80px,130px) 1fr 74px;align-items:center;gap:10px;font-size:12.5px}
.pu-yatay-ad{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pu-yatay-iz{position:relative;display:block;height:14px;border-radius:4px;background:var(--pu-cukur)}
.pu-yatay-dolu{position:absolute;left:0;top:0;height:100%;border-radius:4px;background:var(--pu-aksan)}
.pu-yatay-dolu--tehlike{background:var(--pu-tehlike)}
.pu-yatay-dolu--basari{background:var(--pu-basari)}
.pu-yatay-cizgi{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--pu-yazi-2)}
.pu-yatay-deger{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.pu-yatay-deger--tehlike{color:var(--pu-tehlike)}
.pu-yatay--ayrik .pu-yatay-iz::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:var(--pu-yazi-2)}
.pu-yatay--ayrik .pu-yatay-dolu{left:50%}
.pu-yatay--ayrik .pu-yatay-dolu--sol{left:auto;right:50%}
.pu-sutunlar{display:flex;align-items:flex-end;gap:10px;height:190px;padding-top:18px}
.pu-sutun{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;font-size:11px;color:var(--pu-soluk)}
.pu-sutun-cubuk{display:block;width:64%;max-width:56px;border-radius:4px 4px 0 0;background:var(--pu-aksan)}
.pu-sutun-cubuk--yari{opacity:.45}
.pu-sutun-deger{font-weight:700;font-size:12px;color:var(--pu-yazi);font-variant-numeric:tabular-nums;margin-bottom:3px}
.pu-sutun-ad{margin-top:6px;white-space:nowrap}

/* ── 20b. KÜMÜLATİF — iki eksenli kıyas tablosu + KPI kartı (Fatih 11 Kas 2026: yapı mockup .ekip/DASH_KUMULATIF_SALT_GRUP_11KAS/,
   YÜZ "Seçenek A · Sade" .ekip/DASH_KUMULATIF_PRO_11KAS/pro_A.png — "tamam boşver A yı yap"). Beyaz zemin; iki ekseni yalnız mor çizgi ayırır;
   hiyerarşi yazı ağırlığı + girinti; kıyas oklu renkli yazı; "ay doluluğu" çubuğunda takvim çizgisi (ayın geçen günü). Satış ev mavisi, kayıt mor. ── */
.pu-kum-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.pu-kum-k{background:var(--pu-yuzey);border-radius:var(--pu-kose-kart);box-shadow:var(--pu-golge);padding:16px 18px 14px;display:flex;flex-direction:column;gap:8px}
.pu-kum-k-ad{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pu-soluk)}
.pu-kum-k-ana{display:flex;align-items:center;gap:10px;font-size:30px;font-weight:760;letter-spacing:-.9px;line-height:1.05;font-variant-numeric:tabular-nums}
.pu-kum-k-ana small{font-size:13px;font-weight:700;letter-spacing:0} .pu-kum-k-ana small.pu-kum-k-y{font-size:14px;font-weight:650;color:var(--pu-soluk)}
.pu-kum-k-alt{font-size:12px;color:var(--pu-soluk);font-variant-numeric:tabular-nums} .pu-kum-k-alt b{color:var(--pu-yazi-2);font-weight:650} .pu-kum-k-alt .pu-kum-mor{color:var(--pu-mor);font-weight:700}
.pu-kum-cub{position:relative;height:6px;border-radius:3px;background:var(--pu-cukur);margin-top:2px}
.pu-kum-cub i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--pu-aksan)} .pu-kum-cub--mor i{background:var(--pu-mor)} .pu-kum-cub--gri i{background:var(--pu-yazi-2)}
.pu-kum-cub--sto{background:var(--pu-tehlike-zemin)} .pu-kum-cub--sto i{background:var(--pu-tehlike)}
.pu-kum-cub b{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--pu-yazi)}
.pu-kum-cub-l{display:flex;justify-content:space-between;font-size:11px;color:var(--pu-soluk)} .pu-kum-cub-l b{color:var(--pu-yazi-2)}
.pu-kum-fk{display:inline-flex;align-items:center;font-size:12px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.pu-kum-fk--art{color:var(--pu-basari)} .pu-kum-fk--dus{color:var(--pu-tehlike)} .pu-kum-fk--not{color:var(--pu-soluk)} .pu-kum-fk--yeni{color:var(--pu-aksan);font-weight:650}
.pu-kum-fr{font-variant-numeric:tabular-nums;font-weight:600} .pu-kum-fr--art{color:var(--pu-basari)} .pu-kum-fr--dus{color:var(--pu-tehlike)} .pu-kum-fr--not{color:var(--pu-soluk)}
.pu-kum-kart{background:var(--pu-yuzey);border-radius:var(--pu-kose-kart);box-shadow:var(--pu-golge);overflow:hidden}
.pu-kum-kb{display:flex;align-items:center;gap:14px;padding:14px 20px} .pu-kum-kb b{font-size:15px;font-weight:720}
.pu-kum-kb .pu-kum-lej{margin-left:auto;display:flex;gap:16px;align-items:center;font-size:12px;color:var(--pu-soluk)}
.pu-kum-lj{display:inline-flex;align-items:center;gap:6px} .pu-kum-lj i{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--pu-aksan)} .pu-kum-lj--mor i{background:var(--pu-mor)}
.pu-kum-lj--takvim i{width:2px;height:12px;border-radius:1px;background:var(--pu-yazi)}
.pu-kum-kaydir{overflow-x:auto}
.pu-kum-tablo{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums}
.pu-kum-tablo thead th{background:var(--pu-yuzey);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pu-soluk);padding:8px 9px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--pu-cizgi)}
.pu-kum-tablo thead th small{display:block;font-size:10.5px;font-weight:500;letter-spacing:0;text-transform:none;margin-top:1px}
.pu-kum-tablo th.pu-kum-eks{text-align:left;padding:14px 10px 6px;border-bottom:0;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--pu-yazi)}
.pu-kum-eks-t{display:flex;align-items:center;gap:8px;font-weight:720} .pu-kum-eks-t i{width:9px;height:9px;border-radius:50%;background:var(--pu-aksan)} .pu-kum-eks--mor .pu-kum-eks-t i{background:var(--pu-mor)}
.pu-kum-eks-r{font-size:11.5px;font-weight:500;color:var(--pu-soluk);margin-top:3px;white-space:normal;line-height:1.35}
.pu-kum-tablo th.pu-kum-ad{text-align:left;vertical-align:bottom;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--pu-yazi);padding-bottom:9px}
.pu-kum-tablo td{padding:9px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--pu-cizgi)}
.pu-kum-tablo td.pu-kum-ad{text-align:left;font-weight:500;color:var(--pu-yazi)}
.pu-kum-tablo td.pu-kum-b{font-weight:700;color:var(--pu-yazi)} .pu-kum-tablo td.pu-kum-p{color:var(--pu-soluk)}
/* İki ekseni AYIRAN tek şey: kayıt bloğunun solundaki 2px mor çizgi (genişliksiz ara sütunu; ayraç satırında da kesilmez). */
.pu-kum-tablo td.pu-kum-ara,.pu-kum-tablo th.pu-kum-ara{width:0;min-width:0;padding:0;border-bottom:0;background:var(--pu-mor);border-left:2px solid var(--pu-mor)}
.pu-kum-ok{display:inline-block;width:16px;color:var(--pu-soluk);font-size:10px}
.pu-kum-etk{margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pu-soluk);background:var(--pu-cukur);padding:2px 6px;border-radius:var(--pu-kose-hap);vertical-align:1px}
.pu-kum-tablo tr.pu-kum-g0 td,.pu-kum-tablo tr.pu-kum-ana td{font-weight:700} .pu-kum-tablo tr.pu-kum-g0 td.pu-kum-ad,.pu-kum-tablo tr.pu-kum-ana td.pu-kum-ad{font-size:13.5px}
.pu-kum-tablo tr.pu-kum-g0 td.pu-kum-p,.pu-kum-tablo tr.pu-kum-ana td.pu-kum-p{font-weight:600}
.pu-kum-tablo tr.pu-kum-g1 td.pu-kum-ad{padding-left:28px;font-weight:650}
.pu-kum-tablo tr.pu-kum-g2 td.pu-kum-ad,.pu-kum-tablo tr.pu-kum-alt td.pu-kum-ad{padding-left:46px}
.pu-kum-tablo tr.pu-kum-alt td.pu-kum-ad{padding-left:30px}
.pu-kum-tablo tr.pu-kum-g3 td{font-size:12.5px;color:var(--pu-yazi-2)} .pu-kum-tablo tr.pu-kum-g3 td.pu-kum-ad{padding-left:66px;color:var(--pu-soluk)}
.pu-kum-tablo tr.pu-kum-ayrac td{padding:0;height:10px;border-bottom:0}
.pu-kum-tablo tr:not(.pu-kum-ayrac):not(.pu-kum-top):hover td:not(.pu-kum-ara){background:var(--pu-aksan-zemin)}
.pu-kum-tablo tr.pu-kum-top td{font-weight:780;font-size:14px;border-top:2px solid var(--pu-yazi);border-bottom:0;padding-top:12px;padding-bottom:12px}
.pu-kum-tablo tr.pu-kum-top td.pu-kum-ara{border-top:0}
.pu-kum-sol{color:var(--pu-soluk)} .pu-kum-sto{color:var(--pu-tehlike);font-weight:650}
.pu-kum-ek{margin-left:4px;font-size:11px;font-weight:700;color:var(--pu-mor)}
.pu-kum-ay{display:inline-flex;align-items:center;gap:7px}
.pu-kum-ay-c{position:relative;display:inline-block;width:42px;height:5px;border-radius:3px;background:var(--pu-cukur)}
.pu-kum-ay-c i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--pu-aksan)} .pu-kum-ay-c--mor i{background:var(--pu-mor)}
.pu-kum-ay-c b{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:var(--pu-yazi-2)}
.pu-kum-ay-n{min-width:36px;font-weight:650;font-size:12.5px;color:var(--pu-yazi-2)} .pu-kum-ay-n--onde{color:var(--pu-basari)}
.pu-kum-dip{display:flex;flex-wrap:wrap;gap:6px 22px;padding:12px 20px;border-top:1px solid var(--pu-cizgi);font-size:11.5px;color:var(--pu-soluk)} .pu-kum-dip b{color:var(--pu-yazi-2)}
.pu-kum-dip .pu-kum-uyari{color:var(--pu-uyari)}
.pu-kum-tablo tr[data-kum-ac]{cursor:pointer} .pu-kum-tablo tr[data-kum-ac]:focus-visible td.pu-kum-ad{outline:2px solid var(--pu-aksan);outline-offset:-2px}
/* İki tablo alt alta (Fatih 11 Kas): her tablo kendi kartında, üstte eksen rengi; ad sütunu iki tabloda AYNI genişlik (hizalı okunur);
   Salt Total başlık satırı (sayısız, zeminli). */
.pu-kum-kart+.pu-kum-kart{margin-top:14px}
.pu-kum-kart--satis{box-shadow:var(--pu-golge),inset 0 3px 0 var(--pu-aksan)} .pu-kum-kart--kayit{box-shadow:var(--pu-golge),inset 0 3px 0 var(--pu-mor)}
.pu-kum-kb{flex-wrap:wrap} .pu-kum-kb-r{font-size:12px;color:var(--pu-soluk)}
.pu-kum-nok{width:10px;height:10px;border-radius:50%;background:var(--pu-aksan)} .pu-kum-nok--mor{background:var(--pu-mor)}
.pu-kum-tablo col.pu-kum-c-ad{width:300px}
.pu-kum-tablo tr.pu-kum-baslik td{background:var(--pu-zemin);font-weight:750;font-size:13.5px;padding-top:10px;padding-bottom:10px}
.pu-kum-bas-n{margin-left:10px;font-size:11px;font-weight:500;color:var(--pu-soluk)}
@media (max-width:900px){.pu-kum-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── 20c. TELEFONDA SABİT İLK SÜTUN — pu-tablo--sabit-ilk (Fatih 11 Kas "sabit sürüm"; mockup .ekip/DASH_TABLO_TELEFON_11KAS/telefon_masaustu_yan_yana.png)
   Kap .pu-tablo-kaydir yatay kayar; tablonun İLK sütunu solda sabit kalır; kayınca kenarda gölge (.pu-tablo-kaydir--kaydi). Masaüstünde tablo sığıyorsa
   kaydırma çıkmaz, görünüm DEĞİŞMEZ. Satır zemini olan satırlar (başlık/kademe) kendi zeminini korur (daha özgül kural). ── */
.pu-tablo-kaydir{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.pu-tablo--sabit-ilk th:first-child,.pu-tablo--sabit-ilk td:first-child{position:sticky;left:0;z-index:2;background:var(--pu-yuzey)}
.pu-tablo--sabit-ilk thead th:first-child{z-index:3}
.pu-tablo--sabit-ilk td:first-child::after,.pu-tablo--sabit-ilk th:first-child::after{content:"";position:absolute;top:0;right:-8px;bottom:0;width:8px;pointer-events:none;
  background:linear-gradient(to right,var(--pu-cizgi),transparent);opacity:0;transition:opacity .15s}
.pu-tablo-kaydir--kaydi .pu-tablo--sabit-ilk td:first-child::after,.pu-tablo-kaydir--kaydi .pu-tablo--sabit-ilk th:first-child::after{opacity:1}
@media (max-width:640px){
  .pu-tablo--sabit-ilk{min-width:600px}
  .pu-tablo--sabit-ilk th:first-child,.pu-tablo--sabit-ilk td:first-child{max-width:150px;white-space:normal}
  .pu-tablo--sabit-ilk col.pu-kum-c-ad{width:150px}
  .pu-kum-kpi{grid-template-columns:1fr}
  .pu-kum-kb .pu-kum-lej,.pu-kum-kb-r{display:none}
}

/* ── 20. PANO İSKELETİ — bütün panoların STANDARDI (Fatih 10 Kas 2026: "Evet, standart olsun") ────────────────────────────
   Mockup: .ekip/PANO_ISKELETI_10KAS/ (0_iskelet · 1_satislar · 2_fatura · 3_operasyon). Başlangıç: Satışlar C (PR 2484).
   Her pano AYNI beş bölümü AYNI SIRADA taşır — göz her panoda aynı yere bakar:

     0  BAŞLIK      .pu-pano-bas   ad + üç satır (.pu-pano-ucs: KİM kullanır · hangi SORUyu cevaplar · hangi KARARı verdirir)
                                   + sağda kaynak ve son okuma (.pu-pano-taze, tam tarih ve saat). Üç satır yazılamıyorsa pano tasarlanmaz.
     1  SÜZGEÇ      .pu-pano-suzgec  tek şerit, var olan bileşen (pusula-suzgec.js + pusula-donem.js). İlk çip dönem. Süzgeç BÜTÜN bölümlere
                                   uygulanır; bir bölüm kendi boyutunu süzmez (hücre seçilince öteki hücreler 0'a düşmez). URL'de kalır.
     2  KPI         .pu-kpi-izgara > .pu-kpi   EN FAZLA 4 kart. Her kart TEK SORU (.pu-kpi-soru), büyük sayı (.pu-kpi-sayi) + yanında oran,
                                   altında tek satır kırılım (.pu-kpi-alt), isteğe bağlı ince çubuk (.pu-kpi-cubuk).
                                   Okunamayan sayı "ölçülemedi" (.pu-rozet, gri) — ASLA 0; 0 yalnız gerçekten 0 ise.
     3  DİKKAT      .pu-dikkat     eşik aşan işler, eşiği aşma katına göre büyükten küçüğe; en fazla 8 satır + "tümü".
                                   Satır: nokta (--tehlike aşım · --uyari yaklaşıyor · --bilgi) · iş · kimde · geciken/toplam · en eski · eşik ·
                                   "Aç" (kaynak ekran, süzgeçli; .pu-dugme). Eşikler CRM Ayarlar'dan. Boşsa sessiz kalmaz: .pu-dikkat-bos.
     4  KIRILIM     .pu-kirilim    katlanır ayrıntı tablosu, VARSAYILAN KAPALI (.pu-kirilim--kapali). Kapalıyken tek satır özet
                                   (.pu-kirilim-ozet); kişinin seçimi kendi tarayıcısında (okunamazsa kapalı). Açıkken "Tümü" üstte,
                                   "Diğer/Grupsuz" sonda, başlık sıralar, hücre tıklanınca süzgeç. Panoda en fazla 2 kırılım tablosu.

   Ortak: yalnız var(--pu-*) · açık tema · emoji yok · rakamlar tabular-nums · sayı ve kelime ayrı düğümde (i18n) · dipte tanımlar
   (ör. NET = Approved + Storno 2, yerelde aşama approved) · Dashboard'da ciro yok · kapsam dışı merkez adı/sayısı hiçbir bölümde yok.
   TEK İSTİSNA (Fatih 10 Kas, "Evet, istisna"): yalnız FATURA panosu, yalnız sistem yöneticisi, yalnız ALACAK tutarı (CHF) — satış cirosu değil.
   Kilit: tests/test_pusula_pano.py (bileşenler tanımlı, yalnız token; pu-pano-bas kullanan sayfa bölümleri bu sırada taşır). */
.pu-pano-bas{display:flex;align-items:flex-start;gap:20px;margin:4px 0 14px}
.pu-pano-bas h1{font-size:22px;font-weight:750;margin:0;color:var(--pu-yazi)}
.pu-pano-ucs{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0 0;font-size:12.5px;color:var(--pu-yazi-2)}
.pu-pano-ucs dt{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pu-soluk);padding-top:2px}
.pu-pano-ucs dd{margin:0}
.pu-pano-taze{margin-left:auto;text-align:right;font-size:11.5px;color:var(--pu-soluk);white-space:nowrap}
.pu-pano-suzgec{margin:0 0 12px}
.pu-kpi-izgara{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.pu-kpi{display:flex;flex-direction:column;gap:6px;min-width:0;padding:13px 15px;background:var(--pu-yuzey);border-radius:var(--pu-kose-kart);box-shadow:var(--pu-golge);color:var(--pu-yazi)}
button.pu-kpi,a.pu-kpi{border:0;font:inherit;text-align:left;cursor:pointer;text-decoration:none}
.pu-kpi--secili{box-shadow:var(--pu-golge),inset 0 0 0 2px var(--pu-aksan)}
.pu-kpi-soru{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pu-aksan)}
.pu-kpi-sayi{display:flex;align-items:baseline;gap:9px;font-size:28px;font-weight:780;letter-spacing:-.5px;line-height:1.05;font-variant-numeric:tabular-nums}
.pu-kpi-sayi small{font-size:13px;font-weight:700;letter-spacing:0;color:var(--pu-soluk)}
.pu-kpi-sayi small.pu-kpi-iyi{color:var(--pu-basari)}
.pu-kpi-sayi small.pu-kpi-kotu{color:var(--pu-tehlike)}
.pu-kpi-alt{font-size:12px;color:var(--pu-yazi-2);font-variant-numeric:tabular-nums}
.pu-kpi-alt b{color:var(--pu-yazi)}
.pu-kpi-cubuk{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden;background:var(--pu-cukur)}
.pu-kpi-cubuk i{display:block;height:100%;background:var(--pu-kat,var(--pu-aksan))}
.pu-dikkat{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.pu-dikkat th{text-align:left;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--pu-soluk);font-weight:800;padding:9px 14px;background:var(--pu-cukur)}
.pu-dikkat td{padding:9px 14px;border-top:1px solid var(--pu-cizgi);vertical-align:middle;color:var(--pu-yazi)}
.pu-dikkat .pu-sag{text-align:right}
.pu-dikkat-is{font-weight:650}
.pu-dikkat-is small{display:block;font-weight:400;font-size:11.5px;color:var(--pu-soluk);margin-top:1px}
.pu-dikkat-nokta{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;background:var(--pu-aksan)}
.pu-dikkat-nokta--tehlike{background:var(--pu-tehlike)}
.pu-dikkat-nokta--uyari{background:var(--pu-uyari)}
.pu-dikkat-bos{padding:12px 15px;font-size:12.5px;color:var(--pu-basari);background:var(--pu-basari-zemin)}
.pu-kirilim{background:var(--pu-yuzey);border-radius:var(--pu-kose-kart);box-shadow:var(--pu-golge);overflow:hidden;margin-bottom:12px}
.pu-kirilim-bas{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--pu-cizgi);cursor:pointer}
.pu-kirilim-bas b{font-size:14px;white-space:nowrap;color:var(--pu-yazi)}
.pu-kirilim-ozet{display:flex;flex:1;min-width:0;gap:4px 16px;flex-wrap:wrap;font-size:12.5px;color:var(--pu-yazi-2);font-variant-numeric:tabular-nums}
.pu-kirilim-ozet b{color:var(--pu-yazi)}
.pu-kirilim-sag{margin-left:auto;display:flex;align-items:center;gap:8px}
.pu-kirilim--kapali .pu-kirilim-bas{border-bottom:0}
.pu-kirilim--kapali .pu-kirilim-govde{display:none}
.pu-kirilim-govde{overflow-x:auto}
@media (max-width:900px){ .pu-kpi-izgara{grid-template-columns:repeat(2,minmax(0,1fr))} .pu-pano-bas{flex-direction:column} .pu-pano-taze{margin-left:0;text-align:left} }