/* ═══════════════════════════════════════════════════════════════════════════
   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;
  --pu-golge:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.07);
  --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;
}

/* ── 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-golge:0 1px 2px rgba(0,0,0,.45);
  --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;
}

/* ── 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}
.pu-dugme[disabled]{opacity:.42;cursor:not-allowed}

/* ── 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)}
/* 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)}
.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)}
.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)}

/* ── 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{background:var(--pu-cukur)}

/* ── 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}
.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}
.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}
/* İ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}
/* 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}

.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}
#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}

/* ── 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}
#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}