/* ═══════════════════════════════════════════════════════════════
   app.css — MK Ofis tasarım sistemi · REFERANSTAN ÖLÇÜLDÜ

   ORTAK DOSYA. Değişiklik = AYRI COMMIT + hemen 3 ilgisiz sayfa
   200 kontrolü. Buradaki bir hata tüm siteyi bozar.

   Palet kullanıcı tarafından verildi: sıcak koyu nötr rampa + soluk altın
   aksan + kırmızı uyarı + yeşil başarı. Koyu tema değerleri BİREBİR
   uygulandı; yalnızca yazı olarak eşiği geçmeyen üç renk için açılmış
   varyant türetildi (aşağıda gerekçesiyle).

   Dil: editoryal gösterge paneli — serif başlık, sans arayüz, minik
   büyük harfli aralıklı etiketler, hairline ayrımlar, tek güçlü aksan,
   bol boşluk. Derinlik KATMANLI: kart zeminden kalkar (yükseklik
   token'ları aşağıda, gerekçesiyle). Bu bir zamanlar "gölge yok" idi;
   karar değişti, tek yerden — kullanım yerleri hep aynı token'ları
   okuduğu için geri almak da tek yerden.

   Fontlar KENDİ SUNUCUMUZDAN (static/fonts/). Dış istek yok.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Fontlar ────────────────────────────────────────────────────
   İki aile: Fraunces (başlık) + Inter (arayüz VE rakam).

   PLAYFAIR DISPLAY KALDIRILDI. Playfair + Inter şu an en yaygın
   "editoryal panel" ikilisi; tasarımı başka panellerden ayırmıyordu.
   Fraunces sıcak, yumuşak bir eski-stil serif — yüksek kontrastlı
   Didone hissi yerine paletin sıcak nötr ailesiyle aynı yerde duruyor.
   Değişken (wght 100–900), dört dosya ~156 KB.

   Spectral de kaldırılmıştı: büyük rakamlar sans. Inter'in `tnum`
   özelliği ve ₺ glifi var; rakam için üçüncü bir aile taşınmıyor.
   Fraunces'ın tnum'u DOĞRULANMADI, o yüzden rakam ona taşınmıyor.

   Her yüz iki alt kümede: latin ve latin-ext. latin-ext OLMADAN
   ş · ğ · İ · ₺ yedek fonta düşer — Türkçe arayüzde her kelimede
   harf değişir. Bu hata bir kez yapıldı, tekrar etmesin.
   ──────────────────────────────────────────────────────────────── */

@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/Inter-400-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/Inter-400-normal-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/Fraunces-400-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/Fraunces-400-normal-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("../fonts/Fraunces-400-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("../fonts/Fraunces-400-italic-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ─── Tokenlar ───────────────────────────────────────────────────
   SICAK KOYU PALET. Değerler kullanıcı tarafından verildi (Ağustos 2026)
   ve KOYU tema olarak birebir uygulandı:

     zemin #141311 · yüzey #1C1A17 · yükseltilmiş #26231F · kenar #332F29
     metin #F2ECE0 · ikincil #8E877B · aksan #C9A45B (soluk altın)
     uyarı #C4564A · başarı #6E8F5E

   Aksan MAVİDEN ALTINA taşındı. Önceki palet Skool ekran görüntüsünden
   ölçülmüştü (mavi #406DED + altın vurgu); artık tek marka rengi soluk
   altın ve o hem eylem hem vurgu rolünü taşıyor.

   AÇIK TEMA aynı aileden TÜRETİLDİ (verilen palet yalnızca koyuydu).
   Sıcak kâğıt: aynı altın aksan, aynı sıcak nötr rampa, ters açıklık.
   Böylece tema değiştirince marka rengi değişmiyor — iki ayrı marka
   gibi görünmüyor.

   Hex değerleri TEK yerde: açık palet bare :root'ta, koyu palet --d-*
   değişkenlerinde. Tema blokları yalnızca eşleme yapar — iki palet
   birbirinden sapamaz.

   ÜÇ SEMANTİK, ÜÇ AYRI TON:
     --aksan   marka · grafik, aktif durum, bağlantı, rakam, sol çubuk
     --olumlu  "Aktif · Yüklü · Yayında" · skor
     --uyari   "Hata · Video yok · Terk edilmiş"

   🔴 Aksan kırmızı, uyarı da kırmızı ailesinde. Ayrım yalnızca renge
   bırakılmıyor: uyarı her zaman dolgulu pil + nokta işareti taşır,
   aksan asla pil dolgusu olarak kullanılmaz.

   Ölçülen değerler dogrula.py çıktısındadır; buraya elle sayı yazılmaz
   (yazılırsa palet değişince yalan olur).
   scripts/dogrula.py her fazda yeniden ölçer; geçmezse faz kapanmaz.
   ──────────────────────────────────────────────────────────────── */

:root{
  color-scheme:light;

  /* ══════════════════════════════════════════════════════════════
     AÇIK TEMA — sıcak kâğıt. Verilen palet yalnızca koyuydu; bu tema
     ondan TÜRETİLDİ: aynı sıcak nötr aile, aynı altın aksan, açıklık
     rampası ters çevrildi (zemin→kart→kenar ilişkisi korunarak).

     🔴 DOLGU/ÇİZGİ ile YAZI AYRI. Marka renkleri yazı olarak WCAG AA'yı
     (4,5:1) geçmiyor — ölçüldü:
        altın  #C9A45B → kum üstünde 1,94    başarı #6E8F5E → 3,02
        ikincil#8E877B → 2,94                uyarı  #C4564A → 3,63
     Bu projede kurulu çözüm: DOLGU ve ÇİZGİ olarak marka değeri AYNEN
     kullanılır; YAZI olarak açı ve doygunluk sabit tutulup açıklık
     düşürülür. Ekrandaki marka rengi değişmez, yalnızca okunurluk düzelir.
        #C9A45B → #7D6129 · #8E877B → #6A645B
        #C4564A → #AC4338 · #6E8F5E → #536C47
     Değerler elle seçilmedi, en zorlu yüzeye karşı hesaplandı.
     scripts/dogrula.py her fazda yeniden ölçer; geçmezse faz kapanmaz.
     ══════════════════════════════════════════════════════════════ */
  --zemin:#F7F3EA;
  --nav-zemin:#FFFDF9;
  --kart:#FFFDF9;
  --kart-ust:#FFFDF9;
  --kum:#EFE9DC;
  --kenar:#E2DACA;
  --metin:#1F1C18;

  --aksan:#C9A45B;          /* DOLGU — verilen marka altını */
  --aksan-cizgi:#957331;    /* ÇİZGİ · ODAK HALKASI — 3:1 metin-dışı eşiği */
  --aksan-metin:#7D6129;    /* YAZI — 4,5:1 */
  --vurgu-bg:#F5EAD2;       /* altın vurgu dolgusu */
  --vurgu-fg:#7E6129;       /* altın YAZI */
  --olumlu:#536C47;         /* YAZI */
  --uyari:#AC4338;          /* YAZI */
  --ikincil:#6A645B;        /* YAZI */
  --ikincil-cizgi:#8E877B;  /* ÇİZGİ — verilen değer aynen */

  --olumlu-dolgu:#6E8F5E;   /* DOLGU — verilen değer aynen */
  --uyari-dolgu:#C4564A;    /* DOLGU — verilen değer aynen */

  --pil-aksan-bg:#F5EAD2;  --pil-aksan-fg:#7E6129;
  --pil-olumlu-bg:#E6EEE1; --pil-olumlu-fg:#546D48;
  --pil-gri-bg:#E4DCC9;    --pil-gri-fg:#655F56;
  --pil-uyari-bg:#F7E3E0;  --pil-uyari-fg:#A94237;

  --uyari-kenar:#E9C4BE;
  --kutucuk-kenar:#CFC5B0;
  --hover:#EFE9DC;
  --grafik-dolgu:rgba(201,164,91,.16);
  --grafik-izgara:#EAE3D4;
  --marka-isaret:#C9A45B;

  /* ── YÜKSEKLİK ──────────────────────────────────────────────
     Bu değerler bir süre `none` idi: referans ekran görüntüsünde gölge
     yoktu, derinlik hairline kenarla kuruluyordu. Karar kullanıcı
     tarafından DEĞİŞTİRİLDİ — panelin katmanlı ("3D") durması istendi.
     Yuvalar zaten buradaydı ve app.css/uye.css/editor.css içinde 11 yerde
     tüketiliyordu; dolduruldular, kullanım yerlerine dokunulmadı.

     🔴 AÇIK TEMADA GÖLGE ALTTA TOPLANIR. Simetrik yayılan gölge beyaz
     kartın çevresinde hale yapıyor ama kartı zemine oturtmuyordu. Üç
     katmanın hepsi NEGATİF spread ile aşağı çekildi:
        temas (1px)  → kenarı zeminden ayırır
        gövde (6px)  → asıl kalkık hissi
        yayılım(18px)→ kütle
     Yanlara taşma yok; ışık yukarıdan geliyor.

     🔴 KOYU TEMADA GÖLGE İŞE YARAMAZ — koyu zeminde koyu gölge görünmez.
     Orada kabartmayı ÜSTTEN 1px içe ışık + hafif yüzey gradyanı taşır;
     gölge yalnızca kartı zeminden ayırır. Bu yüzden --d-kart-kabartma
     kendi içinde `inset` katman taşır (tek box-shadow olarak kullanılıyor).

     GÖLGE NÖTR SİYAH DEĞİL, SICAK. Sıcak kâğıdın üstünde nötr gri gölge
     kirli/gri durur; gölgeler paletin kendi koyu ucundan (42,36,27)
     türetildi — aynı aile, yalnızca alfa.

     GLOW altın aksandan gelir ve YALNIZCA etkileşim taşıyan yerlerde:
     odak halkası, aktif nav, birincil buton. Dekoratif glow eklenmiyor;
     her parıltı bir DURUM anlatıyor. */
  --kart-gradyan:linear-gradient(180deg,
                 rgba(42,36,27,0) 58%, rgba(42,36,27,.030) 100%);
  --kart-kabartma:0 1px 2px rgba(42,36,27,.10),
                  0 6px 10px -2px rgba(42,36,27,.10),
                  0 18px 30px -8px rgba(42,36,27,.16);
  --kat-1:0 1px 2px rgba(42,36,27,.09),
          0 2px 5px -1px rgba(42,36,27,.09);
  --kat-2:0 2px 4px rgba(42,36,27,.12),
          0 12px 20px -4px rgba(42,36,27,.15);
  --kat-3:0 4px 8px rgba(42,36,27,.14),
          0 24px 44px -10px rgba(42,36,27,.22);
  --ust-isik:none;
  --ic-golge:inset 0 1px 2px rgba(42,36,27,.09);
  --btn1-gradyan:linear-gradient(180deg,
                 rgba(255,255,255,.24), rgba(255,255,255,0) 62%);
  --btn1-kenar:0 1px 2px rgba(42,36,27,.24),
               inset 0 1px 0 rgba(255,255,255,.30);

  /* Odak/aktiflik parıltısı — altın. İlk halka opak, ikincisi yayılan glow. */
  --parilti-aksan:0 0 0 3px rgba(201,164,91,.28),
                  0 4px 16px -6px rgba(201,164,91,.40);
  --parilti-guclu:0 0 0 3px rgba(201,164,91,.40),
                  0 8px 24px -6px rgba(201,164,91,.55);
  --parilti-uyari:0 0 0 3px rgba(196,86,74,.26);

  /* Birincil buton ALTIN: verilen palette aksanın rolü "aktif nav, buton,
     vurgu". Üstündeki yazı koyu — altın üstünde beyaz okunmuyor. */
  --btn1-bg:#C9A45B;  --btn1-fg:#1F1C18;
  --btn3-fg:#FFF7EC;

  /* ══════════════════════════════════════════════════════════════
     KOYU TEMA — KULLANICININ VERDİĞİ PALET, birebir.
       zemin #141311 · yüzey #1C1A17 · yükseltilmiş #26231F
       kenar #332F29 · metin #F2ECE0 · ikincil #8E877B
       aksan #C9A45B · uyarı #C4564A · başarı #6E8F5E

     🔴 ÜÇ RENK YAZI OLARAK EŞİĞİ GEÇMİYOR (en zorlu yüzey #26231F'de
     ölçüldü): ikincil 4,40 · uyarı 3,56 · başarı 4,29. Verilen değerler
     DOLGU ve ÇİZGİ olarak aynen duruyor; yazı için açı ve doygunluk
     sabit tutulup açıklık yükseltildi:
        #8E877B → #948E82 · #C4564A → #CF766C · #6E8F5E → #759964
     Altın #C9A45B yazı olarak da geçiyor (6,66) — dokunulmadı.
     ══════════════════════════════════════════════════════════════ */
  --d-zemin:#141311;
  --d-nav-zemin:#100F0D;
  --d-kart:#1C1A17;
  --d-kart-ust:#1C1A17;
  --d-kum:#26231F;
  --d-kenar:#332F29;
  --d-metin:#F2ECE0;
  --d-ikincil:#948E82;        /* YAZI */
  --d-ikincil-cizgi:#8E877B;  /* ÇİZGİ — verilen değer aynen */
  --d-aksan:#C9A45B;
  --d-aksan-cizgi:#C9A45B;   /* koyuda marka altını zaten 6,66:1 */
  --d-vurgu-bg:#3A2F16;
  --d-vurgu-fg:#C9A45B;
  --d-olumlu:#759964;
  --d-olumlu-metin:#759964;   /* YAZI */
  --d-olumlu-dolgu:#6E8F5E;   /* DOLGU — verilen değer aynen */
  --d-uyari:#CF766C;
  --d-uyari-metin:#CF766C;    /* YAZI */
  --d-uyari-dolgu:#C4564A;    /* DOLGU — verilen değer aynen */
  --d-pil-aksan-bg:#332A16;  --d-pil-aksan-fg:#C9A45B;
  --d-pil-olumlu-bg:#23301E; --d-pil-olumlu-fg:#81A171;
  --d-pil-gri-bg:#3A342B;    --d-pil-gri-fg:#A39E94;
  --d-pil-uyari-bg:#3A211D;  --d-pil-uyari-fg:#D17C72;
  --d-uyari-kenar:#5A322C;
  --d-kutucuk-kenar:#453F36;
  --d-hover:#26231F;          /* verilen "Yükseltilmiş" rolü */
  --d-grafik-dolgu:rgba(201,164,91,.16);
  --d-grafik-izgara:#262320;
  /* Koyu yükseklik — gerekçe yukarıda. Kabartma içteki ışıktan geliyor;
     gölge yalnızca ayırıyor. Bu yüzden inset katmanlar token'ın İÇİNDE:
     .blok/.sayilar bunu tek box-shadow olarak kullanıyor, ikinciyi
     ekleyemez.

     Işık da SICAK: içe ışık beyaz değil kemik beyazı (242,236,224) —
     saf beyaz, sıcak yüzeyin üstünde mavi bir çizgi gibi duruyordu. */
  --d-kart-gradyan:linear-gradient(180deg,
                   rgba(242,236,224,.045), rgba(242,236,224,0) 46%);
  --d-kart-kabartma:0 1px 2px rgba(0,0,0,.55),
                    0 6px 14px rgba(0,0,0,.50),
                    0 18px 40px rgba(0,0,0,.45),
                    inset 0 1px 0 rgba(242,236,224,.07);
  --d-kat-1:0 1px 2px rgba(0,0,0,.50),
            inset 0 1px 0 rgba(242,236,224,.05);
  --d-kat-2:0 2px 6px rgba(0,0,0,.58),
            0 14px 28px rgba(0,0,0,.52),
            inset 0 1px 0 rgba(242,236,224,.06);
  --d-kat-3:0 4px 10px rgba(0,0,0,.62),
            0 30px 56px rgba(0,0,0,.56),
            inset 0 1px 0 rgba(242,236,224,.07);
  --d-ust-isik:inset 0 1px 0 rgba(242,236,224,.07);
  --d-ic-golge:inset 0 1px 3px rgba(0,0,0,.50);
  --d-btn1-gradyan:linear-gradient(180deg,
                   rgba(255,255,255,.20), rgba(255,255,255,0) 60%);
  --d-btn1-kenar:0 1px 2px rgba(0,0,0,.55),
                 inset 0 1px 0 rgba(255,255,255,.26);
  /* Koyu zeminde glow asıl işini burada yapıyor: altın parıltı karanlıkta
     görünüyor, açık temada aynı değer sadece hafif bir hâle. */
  --d-parilti-aksan:0 0 0 3px rgba(201,164,91,.26),
                    0 0 20px -4px rgba(201,164,91,.42);
  --d-parilti-guclu:0 0 0 3px rgba(201,164,91,.38),
                    0 8px 28px -6px rgba(201,164,91,.60);
  --d-parilti-uyari:0 0 0 3px rgba(196,86,74,.30);

  /* ── Tipografi ── */
  --font-baslik:"Fraunces",Georgia,"Times New Roman",serif;
  --font-govde:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-sayi:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Referanstan ölçülen köşe yarıçapı ~8px */
  --r-kart:8px;
  --r-kucuk:6px;
  --r-pil:999px;
  --r:6px;

  --bosluk:16px;
  --nav-genislik:232px;
  --ust-yukseklik:72px;
}

/* ─── KOYU TEMA EŞLEMESİ ─────────────────────────────────────────
   İKİ SEÇİCİ, BİREBİR AYNI GÖVDE. Alttaki iki blok aynı 46 özelliği
   aynı sırayla eşler; biri cihaz tercihi için, biri sayfadan elle
   seçim için.

   🔴 BİR ZAMANLAR AYNI DEĞİLLERDİ ve bu sessiz bir hataydı: cihaz-koyu
   bloğu 46, elle-koyu bloğu 35 özellik eşliyordu. Eksik 11'i tam olarak
   yükseklik ve parıltı token'larıydı — yani menüden "KOYU" seçen
   kullanıcı, koyu zeminde AÇIK TEMA gölgelerini alıyordu. Ekran
   görüntüsü almak bunu yakalamadı çünkü görüntüler `data-tema`
   damgasıyla çekiliyordu; iki yol farklı sonuç veriyordu.

   Biri değişirse ÖTEKİ DE DEĞİŞMELİ. `scripts/dogrula.py` iki bloğun
   tanımladığı özellik ADLARI kümesini karşılaştırıyor; eşit değilse
   faz kapanmaz. Kural yazılı değil, çalıştırılabilir.
   ──────────────────────────────────────────────────────────────── */

/* Cihaz koyu — ama sayfada AÇIK seçilmediyse */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="acik"]){
    color-scheme:dark;
    --zemin:var(--d-zemin); --kart:var(--d-kart); --kum:var(--d-kum);
    --nav-zemin:var(--d-nav-zemin); --kart-ust:var(--d-kart-ust);
    --kenar:var(--d-kenar); --metin:var(--d-metin);
    --aksan:var(--d-aksan); --aksan-metin:var(--d-aksan);
    --aksan-cizgi:var(--d-aksan-cizgi);
    --olumlu:var(--d-olumlu-metin); --uyari:var(--d-uyari-metin);
    --olumlu-dolgu:var(--d-olumlu-dolgu); --uyari-dolgu:var(--d-uyari-dolgu);
    --ikincil:var(--d-ikincil); --ikincil-cizgi:var(--d-ikincil-cizgi);
    --pil-aksan-bg:var(--d-pil-aksan-bg);   --pil-aksan-fg:var(--d-pil-aksan-fg);
    --pil-olumlu-bg:var(--d-pil-olumlu-bg); --pil-olumlu-fg:var(--d-pil-olumlu-fg);
    --pil-gri-bg:var(--d-pil-gri-bg);       --pil-gri-fg:var(--d-pil-gri-fg);
    --pil-uyari-bg:var(--d-pil-uyari-bg);   --pil-uyari-fg:var(--d-pil-uyari-fg);
    --uyari-kenar:var(--d-uyari-kenar); --kutucuk-kenar:var(--d-kutucuk-kenar);
    --hover:var(--d-hover); --grafik-dolgu:var(--d-grafik-dolgu);
    --grafik-izgara:var(--d-grafik-izgara);
    --marka-isaret:var(--d-aksan);
    --vurgu-bg:var(--d-vurgu-bg); --vurgu-fg:var(--d-vurgu-fg);
    --kart-gradyan:var(--d-kart-gradyan);
    --kart-kabartma:var(--d-kart-kabartma);
    --kat-1:var(--d-kat-1); --kat-2:var(--d-kat-2); --kat-3:var(--d-kat-3);
    --ust-isik:var(--d-ust-isik); --ic-golge:var(--d-ic-golge);
    --btn1-gradyan:var(--d-btn1-gradyan); --btn1-kenar:var(--d-btn1-kenar);
    --parilti-aksan:var(--d-parilti-aksan);
    --parilti-guclu:var(--d-parilti-guclu);
    --parilti-uyari:var(--d-parilti-uyari);
    --btn1-bg:var(--d-aksan); --btn1-fg:#1F1C18; --btn3-fg:#FFF7EC;
  }
}

/* Sayfadan KOYU seçildi — cihaz ne derse desin. GÖVDE YUKARIDAKİYLE AYNI. */
:root[data-tema="koyu"]{
  color-scheme:dark;
  --zemin:var(--d-zemin); --kart:var(--d-kart); --kum:var(--d-kum);
  --nav-zemin:var(--d-nav-zemin); --kart-ust:var(--d-kart-ust);
  --kenar:var(--d-kenar); --metin:var(--d-metin);
  --aksan:var(--d-aksan); --aksan-metin:var(--d-aksan);
  --aksan-cizgi:var(--d-aksan-cizgi);
  --olumlu:var(--d-olumlu-metin); --uyari:var(--d-uyari-metin);
  --olumlu-dolgu:var(--d-olumlu-dolgu); --uyari-dolgu:var(--d-uyari-dolgu);
  --ikincil:var(--d-ikincil); --ikincil-cizgi:var(--d-ikincil-cizgi);
  --pil-aksan-bg:var(--d-pil-aksan-bg);   --pil-aksan-fg:var(--d-pil-aksan-fg);
  --pil-olumlu-bg:var(--d-pil-olumlu-bg); --pil-olumlu-fg:var(--d-pil-olumlu-fg);
  --pil-gri-bg:var(--d-pil-gri-bg);       --pil-gri-fg:var(--d-pil-gri-fg);
  --pil-uyari-bg:var(--d-pil-uyari-bg);   --pil-uyari-fg:var(--d-pil-uyari-fg);
  --uyari-kenar:var(--d-uyari-kenar); --kutucuk-kenar:var(--d-kutucuk-kenar);
  --hover:var(--d-hover); --grafik-dolgu:var(--d-grafik-dolgu);
  --grafik-izgara:var(--d-grafik-izgara);
  --marka-isaret:var(--d-aksan);
  --vurgu-bg:var(--d-vurgu-bg); --vurgu-fg:var(--d-vurgu-fg);
  --kart-gradyan:var(--d-kart-gradyan);
  --kart-kabartma:var(--d-kart-kabartma);
  --kat-1:var(--d-kat-1); --kat-2:var(--d-kat-2); --kat-3:var(--d-kat-3);
  --ust-isik:var(--d-ust-isik); --ic-golge:var(--d-ic-golge);
  --btn1-gradyan:var(--d-btn1-gradyan); --btn1-kenar:var(--d-btn1-kenar);
  --parilti-aksan:var(--d-parilti-aksan);
  --parilti-guclu:var(--d-parilti-guclu);
  --parilti-uyari:var(--d-parilti-uyari);
  --btn1-bg:var(--d-aksan); --btn1-fg:#1F1C18; --btn3-fg:#FFF7EC;
}

/* ─── Temel ──────────────────────────────────────────────────── */

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--zemin);
  color:var(--metin);
  font-family:var(--font-govde);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--aksan-metin);}
:focus-visible{
  outline:2px solid var(--aksan-cizgi);outline-offset:2px;
  border-radius:var(--r-kucuk);box-shadow:var(--parilti-aksan);
}

h1,h2,h3,h4{font-family:var(--font-baslik);font-weight:400;margin:0;text-wrap:balance;}
h1{font-size:34px;line-height:1.18;letter-spacing:-.006em;}
h2{font-size:21px;line-height:1.3;}
h3{font-size:22px;}
h4{font-size:17px;}

code{background:var(--kum);border:1px solid var(--kenar);border-radius:6px;
     padding:1px 6px;font-size:12px;}

.vurgu{font-family:var(--font-baslik);font-style:italic;color:var(--aksan-metin);}

.gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
       overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* Odaga gelince ortaya cikan gizli baglanti (icerige atla).
   Ekran okuyucu icin her zaman var; goz icin yalnizca klavye
   kullanicisi Tab'a bastiginda. */
.gizli-odak:focus{
  position:fixed;top:12px;left:12px;z-index:200;
  width:auto;height:auto;clip:auto;margin:0;
  padding:10px 16px;border-radius:var(--r-kucuk);
  background:var(--kart);color:var(--metin);
  border:1px solid var(--aksan-cizgi);box-shadow:var(--kat-2);
  text-decoration:none;font-size:13px;
}

/* Minik büyük harfli aralıklı etiket — referansın imzası */
.eyebrow{font-size:10px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
         color:var(--aksan-metin);margin:0 0 10px;}

/* ─── Panel kabuğu ───────────────────────────────────────────── */

.panel{display:grid;grid-template-columns:var(--nav-genislik) 1fr;min-height:100vh;font-size:13px;}

.panel-nav{
  background:var(--nav-zemin);
  border-right:1px solid var(--kenar);
  padding:22px 0 18px;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}

/* Marka bloğu: altıgen işaret + iki satır */
.panel-marka{
  display:flex;align-items:center;gap:11px;
  padding:0 20px 20px;margin-bottom:16px;
  border-bottom:1px solid var(--kenar);
  color:var(--metin);text-decoration:none;
}
.panel-marka svg{width:26px;height:26px;flex:none;color:var(--marka-isaret);}
.panel-marka .ad{font-family:var(--font-baslik);font-size:17px;line-height:1.15;display:block;}
.panel-marka .mikro{font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
                  color:var(--ikincil);display:block;margin-top:3px;}

.panel-menu{list-style:none;margin:0;padding:0 12px;display:flex;flex-direction:column;gap:2px;}
.panel-menu a{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:var(--r-kucuk);
  border:1px solid transparent;
  color:var(--metin);text-decoration:none;font-size:13.5px;
}
.panel-menu a:hover{background:var(--hover);}
.panel-menu .aktif{
  background:var(--kum);border-color:var(--kenar);font-weight:500;
  position:relative;box-shadow:var(--parilti-aksan);
}
/* Aksan çubuğu: aktif öğe rengi TAŞISIN — dolgu tek başına silik kalıyor */
.panel-menu .aktif::before{
  content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:2px;
  border-radius:2px;background:var(--aksan);
}
.panel-menu .aktif .nav-ikon{color:var(--aksan-metin);}
.nav-ikon{width:17px;height:17px;flex:none;color:var(--ikincil-cizgi);}
.nav-sayac{
  margin-left:auto;font-size:11.5px;color:var(--ikincil);
  font-variant-numeric:tabular-nums;
}
.panel-menu .rozet{
  margin-left:auto;min-width:19px;height:19px;padding:0 6px;
  display:grid;place-items:center;border-radius:var(--r-pil);
  background:var(--pil-uyari-bg);color:var(--pil-uyari-fg);
  font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;
}

.panel-nav-alt{
  padding:16px 16px 0;border-top:1px solid var(--kenar);
  display:flex;align-items:center;gap:11px;
}
.panel-nav-alt .kim{min-width:0;}
.panel-nav-alt .ad{display:block;font-size:13px;font-weight:500;
                   white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.panel-nav-alt .rol{display:block;font-size:9.5px;font-weight:600;letter-spacing:1.3px;
                    text-transform:uppercase;color:var(--ikincil);margin-top:2px;}
.ikon-btn{
  margin-left:auto;flex:none;
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--kenar);border-radius:var(--r-kucuk);
  background:var(--kart);color:var(--ikincil);cursor:pointer;text-decoration:none;
}
.ikon-btn:hover{border-color:var(--aksan);color:var(--aksan-metin);}
.ikon-btn svg{width:16px;height:16px;}


/* ─── Sol menü: sistem durumu ────────────────────────────────────
   Menü ile kullanıcı bloğu arasındaki boşluğu dolduruyor ama süs değil:
   üç entegrasyon kapalıyken sistem "çalışıyor" görünüp sessizce iş
   yapmıyor. Her ekranda görünmeleri bilinçli. */

.nav-durum{
  margin-top:auto;padding:16px 16px 14px;
  border-top:1px solid var(--kenar);
}
.nav-durum-baslik{
  font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ikincil);margin:0 0 10px;
}
.nav-durum-satir{
  display:flex;align-items:center;gap:8px;
  padding:4px 0;font-size:11.5px;min-width:0;
}
.nav-durum-ad{flex:none;}
.nav-durum-not{
  margin-left:auto;color:var(--ikincil);font-size:10.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.nokta{width:6px;height:6px;border-radius:50%;flex:none;}
.nokta-iyi{background:var(--olumlu-dolgu);}
.nokta-kapali{background:var(--uyari-dolgu);}
.nokta-hata{background:var(--uyari-dolgu);}
.nokta-bilinmiyor{background:var(--ikincil-cizgi);}

.panel-nav .tema-secim{margin:12px 16px 0;justify-content:center;}
.panel-nav .tema-secim button{flex:1;padding:6px 4px;}

/* Sistem durumu geldiği için kullanıcı bloğu artık boşluğu itmiyor */
.panel-nav-alt{margin-top:14px;}

/* ─── Üst bar ────────────────────────────────────────────────── */

.panel-govde{min-width:0;}

.ust-bar{
  min-height:var(--ust-yukseklik);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 30px;
  border-bottom:1px solid var(--kenar);
  background:var(--zemin);
  position:sticky;top:0;z-index:20;
}
.ust-bar .baslik-blok{min-width:0;}
.ust-bar .ust-eyebrow{
  font-size:9.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ikincil);display:block;margin-bottom:2px;
}
.ust-bar h1{font-size:22px;line-height:1.2;}
.ust-bar .sag{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ust-bar .tarih{font-size:12px;color:var(--ikincil);
                font-variant-numeric:tabular-nums;white-space:nowrap;}

/* Arama — pill */
.ara-form{position:relative;display:flex;align-items:center;}
.ara-form svg{
  position:absolute;left:13px;width:15px;height:15px;
  color:var(--ikincil-cizgi);pointer-events:none;
}
.ara-form input{
  width:clamp(180px,24vw,320px);height:40px;
  padding:0 14px 0 36px;
  font-family:var(--font-govde);font-size:13.5px;
  background:var(--zemin);color:var(--metin);
  border:1px solid var(--kenar);border-radius:var(--r-pil);
}
.ara-form input::placeholder{color:var(--ikincil-cizgi);}
.ara-form input:focus-visible{border-color:var(--aksan);outline:none;
                              box-shadow:var(--parilti-aksan);}

/* Zil */
.zil{position:relative;width:40px;height:40px;flex:none;
     display:grid;place-items:center;
     border:1px solid var(--kenar);border-radius:var(--r-kucuk);
     background:var(--kart);color:var(--ikincil);text-decoration:none;}
.zil:hover{border-color:var(--aksan);color:var(--aksan-metin);}
.zil svg{width:17px;height:17px;}
.zil .rozet{
  position:absolute;top:-6px;right:-6px;
  min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-pil);
  background:var(--uyari-dolgu);color:var(--btn3-fg);
  font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;
  border:2px solid var(--zemin);box-shadow:var(--parilti-uyari);
}

/* ─── Avatar ─────────────────────────────────────────────────── */

.avatar{
  flex:none;display:grid;place-items:center;border-radius:50%;
  font-family:var(--font-baslik);line-height:1;
  background:var(--pil-aksan-bg);color:var(--pil-aksan-fg);
  border:1px solid var(--kenar);
  text-transform:uppercase;letter-spacing:.02em;
}
.avatar-s{width:32px;height:32px;font-size:12px;}
.avatar-m{width:38px;height:38px;font-size:13.5px;}
.avatar-l{width:44px;height:44px;font-size:15px;}
.avatar-t1{background:var(--pil-aksan-bg);color:var(--pil-aksan-fg);}
.avatar-t2{background:var(--pil-olumlu-bg);color:var(--pil-olumlu-fg);}
.avatar-t3{background:var(--pil-gri-bg);color:var(--pil-gri-fg);}
.avatar-t4{background:var(--pil-uyari-bg);color:var(--pil-uyari-fg);}

/* ─── İçerik ─────────────────────────────────────────────────── */

.panel-icerik{padding:0 30px 34px;}

.bolum-etiket{
  font-family:var(--font-govde);
  font-size:10px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--aksan-metin);margin:0 0 14px;display:flex;align-items:center;gap:12px;
}
.bolum-etiket .sag{margin-left:auto;font-weight:400;letter-spacing:0;
                   text-transform:none;font-size:11.5px;}

/* ─── Sayı şeridi ────────────────────────────────────────────── */

.sayilar{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--kart);background-image:var(--kart-gradyan);
  border:1px solid var(--kenar);border-radius:var(--r-kart);
  box-shadow:var(--kart-kabartma);
  margin:22px 0 0;overflow:hidden;
}
.sayilar .hucre{padding:22px 24px 20px;border-right:1px solid var(--kenar);}
.sayilar .hucre:last-child{border-right:0;}

.sayi{
  font-family:var(--font-sayi);font-weight:600;font-size:34px;line-height:1.05;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:block;
}
.sayi-alt{
  font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ikincil);margin-top:10px;display:block;
}
.sayi-not{font-size:10px;letter-spacing:.6px;text-transform:none;font-weight:400;}
.delta{font-size:12px;margin-left:8px;font-weight:600;vertical-align:5px;
       font-family:var(--font-sayi);font-variant-numeric:tabular-nums;}
.delta.artis{color:var(--olumlu);}
.delta.dusus{color:var(--uyari);}
.buyuk-sayi{font-family:var(--font-sayi);font-weight:600;font-size:38px;line-height:1.05;
            letter-spacing:-.02em;font-variant-numeric:tabular-nums;}


.mini-metrik{display:flex;gap:30px;flex-wrap:wrap;}
.mini-metrik .m-sayi{display:block;font-family:var(--font-sayi);font-weight:600;
                     font-size:24px;letter-spacing:-.015em;font-variant-numeric:tabular-nums;}
.mini-metrik .m-ad{display:block;font-size:10px;font-weight:600;letter-spacing:1.4px;
                   text-transform:uppercase;color:var(--ikincil);margin-top:5px;}

/* ─── Kart ───────────────────────────────────────────────────── */

.blok{
  background:var(--kart);background-image:var(--kart-gradyan);
  border:1px solid var(--kenar);border-radius:var(--r-kart);
  box-shadow:var(--kart-kabartma);
  padding:22px 24px 20px;margin-top:16px;
}


/* ─── ZİNCİR — satıştan teslime yol ve nerede koptuğu ────────────
   Panelin imzası. Süs değil: spec §4'ün kritik zinciri bu sistemin
   omurgası ve halkalarından biri kırıkken para veya teslim duruyor.
   Sayı şeridinin altında ince bir satır — ekranın kahramanı sayılar
   kalıyor, zincir bağlamı veriyor. */

.zincir{
  display:flex;align-items:stretch;
  margin-top:10px;padding:0 2px;
  overflow-x:auto;scrollbar-width:none;
}
.zincir::-webkit-scrollbar{display:none;}

.zincir-halka{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:9px 13px;border-radius:var(--r-pil);
  color:var(--metin);text-decoration:none;
  border:1px solid transparent;
}
.zincir-halka:hover{background:var(--kum);border-color:var(--kenar);}

.zincir-nokta{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--ikincil-cizgi);
}
.zincir-ad{
  font-size:11px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;
  white-space:nowrap;
}
.zincir-not{
  font-size:11px;color:var(--ikincil);white-space:nowrap;
}

/* Halkalar arası bağ. Kopuştan SONRAKİ bağlar kesik çizgi. */
.zincir-bag{
  flex:1 1 22px;min-width:16px;align-self:center;
  height:1px;background:var(--kenar);
}
.zincir-bag.kopuk{
  background:none;
  border-top:1px dashed var(--uyari-dolgu);
  opacity:.7;
}

/* Durumlar */
.zincir-halka.d-calisiyor .zincir-nokta{background:var(--olumlu-dolgu);}
.zincir-halka.d-kirik .zincir-nokta{background:var(--uyari-dolgu);}
.zincir-halka.d-kirik .zincir-ad{color:var(--uyari);}
.zincir-halka.d-kurulmamis .zincir-nokta{
  background:none;border:1px solid var(--ikincil-cizgi);
}

/* Kopuştan sonrası: akış oraya ulaşmıyor. Silinmiyor — görünür ama geri
   çekilmiş; "sıra bunlarda değil" demek, "bunlar yok" demek değil. */
.zincir-halka.sonra{opacity:.42;}
.zincir-halka.sonra:hover{opacity:1;}

@media (max-width:900px){
  .zincir{margin-top:8px;}
  .zincir-not{display:none;}
  .zincir-bag{flex-basis:12px;min-width:10px;}
}

/* ─── Uyarı şeridi ───────────────────────────────────────────── */
/* Uyarı HER ZAMAN nokta işareti taşır — aksan da kırmızı ailesinde
   olduğu için ayrım yalnızca renge bırakılmıyor. */

.uyari-serit{
  display:flex;align-items:center;gap:12px;
  background:var(--pil-uyari-bg);
  border:1px solid var(--uyari-kenar);border-radius:var(--r-kart);
  padding:13px 16px;font-size:13px;color:var(--pil-uyari-fg);
}
.uyari-serit .nokta{width:8px;height:8px;border-radius:50%;background:var(--uyari-dolgu);flex:none;}
.uyari-serit b{font-weight:600;}
.uyari-serit .btn{margin-left:auto;flex:none;}

/* ─── Butonlar ───────────────────────────────────────────────── */

.btn{
  font-family:var(--font-govde);font-size:12.5px;font-weight:500;
  padding:8px 15px;border-radius:var(--r-kucuk);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  display:inline-block;line-height:1.5;white-space:nowrap;
}
.btn-birincil{
  background:var(--btn1-bg);background-image:var(--btn1-gradyan);
  color:var(--btn1-fg);border-color:var(--btn1-bg);
  box-shadow:var(--btn1-kenar);
}
.btn-birincil:hover{box-shadow:var(--kat-2), var(--parilti-guclu);}
.btn-ikincil{box-shadow:var(--kat-1);}
.btn-ikincil{background:var(--kart);color:var(--metin);border-color:var(--kenar);}
.btn-ikincil:hover{border-color:var(--aksan);color:var(--aksan-metin);}
.btn-yikici{background:var(--uyari-dolgu);color:var(--btn3-fg);border-color:var(--uyari-dolgu);}
.btn-mini{font-size:11.5px;padding:5px 10px;}

/* ─── Durum pilleri ──────────────────────────────────────────── */
/* Uyarı pili nokta taşır; olumlu ve nötr taşımaz. Biçim ayrımı. */

.pil{
  font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pil);white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
}
.pil-aktif{background:var(--pil-olumlu-bg);color:var(--pil-olumlu-fg);}
.pil-taslak{background:var(--pil-gri-bg);color:var(--pil-gri-fg);}
.pil-hata{background:var(--pil-uyari-bg);color:var(--pil-uyari-fg);}
.pil-hata::before{content:"";width:5px;height:5px;border-radius:50%;
                  background:var(--uyari-dolgu);flex:none;}
.pil-marka{background:var(--pil-aksan-bg);color:var(--pil-aksan-fg);}

/* ─── Tablolar ───────────────────────────────────────────────── */

.tablo{width:100%;border-collapse:collapse;font-size:13.5px;}
.tablo th{
  text-align:left;font-size:10px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--ikincil);padding:0 10px 11px;
  border-bottom:1px solid var(--kenar);
}
.tablo td{padding:13px 10px;border-bottom:1px solid var(--kenar);vertical-align:middle;}
.tablo tr:last-child td{border-bottom:0;}
.tablo .sag{text-align:right;font-family:var(--font-sayi);font-weight:600;
            font-variant-numeric:tabular-nums;white-space:nowrap;}
.tablo .dar{width:62px;color:var(--ikincil);font-family:var(--font-sayi);
            font-variant-numeric:tabular-nums;font-size:12px;font-weight:400;}
.tablo .ikincil{color:var(--ikincil);font-size:12px;font-weight:400;}
.satir-vurgu{transition:background-color .15s ease;}

/* Adı + alt bilgi + avatar taşıyan satır */
.kisi-hucre{display:flex;align-items:center;gap:12px;min-width:0;}
.kisi-hucre .ad{font-weight:500;display:block;}
.kisi-hucre .mikro{display:block;font-size:10px;font-weight:600;letter-spacing:1.2px;
                 text-transform:uppercase;color:var(--ikincil);margin-top:3px;}

/* ─── Sol aksan çubuklu liste (referanstaki "Dikkat" kartı) ──── */

.aksanli{list-style:none;margin:0;padding:0;}
.aksanli li{
  position:relative;padding:14px 0 14px 16px;
  border-bottom:1px solid var(--kenar);
}
.aksanli li:last-child{border-bottom:0;}
.aksanli li::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;
  width:2px;border-radius:2px;background:var(--aksan);
}
.aksanli li.uyari::before{background:var(--uyari);}
.aksanli .baslik{font-weight:500;margin:0;}
.sayi-vurgu{font-family:var(--font-sayi);font-weight:600;margin-left:8px;
            font-variant-numeric:tabular-nums;color:var(--aksan-metin);}
.aksanli .mikro{margin:4px 0 0;font-size:10px;font-weight:600;letter-spacing:1.3px;
              text-transform:uppercase;color:var(--ikincil);}

/* ─── Görev listesi ──────────────────────────────────────────── */

.gorevler{list-style:none;margin:0;padding:0;}
.gorevler li{
  display:flex;align-items:flex-start;gap:13px;padding:14px 10px;
  border-bottom:1px solid var(--kenar);margin:0 -10px;border-radius:var(--r-kucuk);
}
.gorevler li:last-child{border-bottom:0;}
.kutucuk{width:15px;height:15px;flex:none;border:1px solid var(--kutucuk-kenar);
         border-radius:4px;background:var(--kart);margin-top:2px;}
.gorev-metin{min-width:0;}
.gorev-metin p{margin:0;}
.gorev-kaynak{font-size:11.5px;color:var(--ikincil);margin-top:4px;}
.gorevler .pil{margin-left:auto;flex:none;}

/* ─── Hafta şeridi ───────────────────────────────────────────── */

.hafta{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
.gun{
  border:1px solid var(--kenar);border-radius:var(--r-kucuk);
  background:var(--kart);padding:11px 11px 12px;min-height:88px;
  display:flex;flex-direction:column;gap:6px;
}
.gun.bugun{border-color:var(--aksan);background:var(--kum);box-shadow:var(--parilti-aksan);}
.gun-harf{font-size:10px;font-weight:600;letter-spacing:1.5px;
          text-transform:uppercase;color:var(--ikincil);}
.gun.bugun .gun-harf{color:var(--aksan-metin);}
.gun-icerik{font-size:12px;line-height:1.4;}
.gun-bos{font-size:12px;color:var(--ikincil);}
.gun-durum{margin-top:auto;font-size:9.5px;font-weight:600;letter-spacing:.9px;
           text-transform:uppercase;}
.durum-yayinda{color:var(--olumlu);}
.durum-planli{color:var(--ikincil);}
.durum-cekilecek{color:var(--aksan-metin);}

/* ─── Çubuklar · ilerleme ────────────────────────────────────── */

.cubuk{height:4px;background:var(--grafik-izgara);border-radius:var(--r-pil);
       margin-top:9px;overflow:hidden;}
.cubuk-dolgu{display:block;height:100%;background:var(--aksan);
             border-radius:var(--r-pil);width:var(--o,0%);}
.cubuk-dolgu.dus{background:var(--uyari-dolgu);}
.ilerleme{height:5px;background:var(--grafik-izgara);border-radius:var(--r-pil);
          overflow:hidden;margin-top:8px;}
.ilerleme span{display:block;height:100%;background:var(--aksan);
               border-radius:var(--r-pil);width:var(--o,0%);}


/* ─── İki sütunlu düzen ──────────────────────────────────────────
   Sol: yapılacak iş. Sağ: bağlam (takvim, akış). Tek sütunda her şey
   aynı ağırlıkta görünüyor ve göz nereye bakacağını bilmiyordu. */

.izgara-2{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);
  gap:16px;align-items:start;margin-top:16px;
}
.izgara-2 > .blok{margin-top:0;}
.yan-sutun{display:flex;flex-direction:column;gap:16px;min-width:0;}

/* ─── Ofis ızgarası: iş + YAPIŞKAN asistan sütunu ──────────────
   `.izgara-2` DEĞİL, ayrı sınıf: o oransal (1.55fr/1fr) ve altı ekranda
   kullanılıyor; asistan sabit 380px istiyor ve `.yan-sutun` başka
   ekranlarda yapışkan OLMAMALI. */

.izgara-ofis{
  display:grid;grid-template-columns:minmax(0,1fr) 380px;
  gap:16px;align-items:start;margin-top:16px;
}
.izgara-ofis > * > .blok:first-child{margin-top:0;}

/* 🔴 `min-height:0` ÜÇ YERDE BİRDEN — hiçbiri isteğe bağlı değil.
   Flex çocuğunun varsayılanı `min-height:auto`: kap içeriği kadar uzar,
   `max-height` etkisiz kalır ve `overflow-y:auto` HİÇBİR HATA VERMEDEN
   çalışmaz. Sütun sayfayla birlikte kayar, yapışkanlık görünmez olur.

   `top` ve `z-index` `.ust-bar`'a bağlı: o `position:sticky; top:0;
   z-index:20`. Asistan onun ALTINA oturur (top) ve ALTINDA kalır (z-index),
   yoksa kaydırınca başlığın üstüne biner. */
.asistan-sutun{
  position:sticky;
  top:calc(var(--ust-yukseklik) + 16px);
  z-index:5;
  display:flex;flex-direction:column;
  max-height:calc(100vh - var(--ust-yukseklik) - 32px);
  min-height:0;
}
.asistan-sutun > .blok{display:flex;flex-direction:column;flex:1;min-height:0;}
.asistan-akis{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
              display:flex;flex-direction:column;gap:10px;}
.asistan-giris{flex:none;padding-top:12px;border-top:1px solid var(--kenar);}

/* `.mikro` tek başına tanımlı DEĞİL — yalnız bağlamsal varyantları var
   (`.akis-govde .mikro` gibi). Yeni kapsayıcı kendi kuralını yazmak zorunda,
   yoksa 10px/uppercase reçetesi sessizce miras alınmaz. */
.asistan-sutun .mikro,
.odak .mikro{
  font-size:10px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ikincil);
}

/* Bugün ekranı KENDİ içinde de iki sütunlu (`.izgara-2`). Asistan sütunuyla
   birlikte üç sütun eder ve 1440px'te bile üçü de dar kalır. İç ızgara
   erken çöker: dış ızgara (iş | asistan) ayrımı daha değerli. */
@media (max-width:1400px){
  .izgara-ofis .izgara-2{grid-template-columns:1fr;}
}

/* ─── İmza öğesi: Günün Odağı ────────────────────────────────
   Sayfanın en üstünde TEK cümle. Panelin tek "yüksek sesli" yeri burası;
   cesaret tek yerde harcanır, geri kalan kartlar sakin kalır. */

.odak{
  margin-top:16px;padding:20px 24px 18px;
  background:var(--kart);background-image:var(--kart-gradyan);
  /* Sol çubuk ÇİZGİ token'ından: 3px'lik anlam taşıyan kenar metin-dışı
     öğedir, WCAG 1.4.11 gereği 3:1 ister. `--aksan` DOLGU token'ı (3,4:1). */
  border:1px solid var(--kenar);border-left:3px solid var(--aksan-cizgi);
  border-radius:var(--r-kart);box-shadow:var(--kart-kabartma);
}
.odak-cumle{
  font-family:var(--font-baslik);font-style:italic;font-weight:400;
  font-size:24px;line-height:1.34;color:var(--metin);
  margin:6px 0 0;text-wrap:balance;
}
.odak-baglanti{
  display:inline-block;margin-top:10px;
  font-size:12px;font-weight:600;color:var(--aksan-metin);text-decoration:none;
}
.odak-baglanti:hover{text-decoration:underline;}

@media (max-width:700px){
  .odak{padding:16px 18px;}
  .odak-cumle{font-size:19px;}
}

/* ─── Kart başlığı: etiket + sağda eylem ─────────────────────── */

.kart-basi{
  display:flex;align-items:center;gap:12px;
  margin:0 0 14px;min-height:20px;
}
.kart-basi .bolum-etiket{margin:0;}
.kart-basi-sag{margin-left:auto;display:flex;align-items:center;gap:10px;
               font-size:11.5px;flex:none;}
.kart-basi-eylem{
  margin-left:auto;flex:none;
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:var(--ikincil);text-decoration:none;
}
.kart-basi-eylem:hover{color:var(--aksan-metin);}
.ikon-mini{width:13px;height:13px;flex:none;}
.ikon-mini.ters{transform:rotate(180deg);}

/* ─── Görev satırı: öncelik çubuğu ───────────────────────────────
   Kritik iş ile "boş yayın günü" aynı ağırlıkta görünmemeli. Kritik
   olanlar üstte (services/ozet.py sıralıyor) ve sol çubuk taşıyorlar. */

.gorevler li{position:relative;padding-left:16px;}
.gorevler li::before{
  content:"";position:absolute;left:0;top:15px;bottom:15px;width:2px;
  border-radius:2px;background:var(--kenar);
}
.gorevler li.kritik::before{background:var(--uyari-dolgu);}
.gorevler li.kritik .gorev-metin p{font-weight:500;}

/* ─── Akış listesi (son hareketler) ──────────────────────────────
   Tablo yerine liste: üç sütunlu tablo dar yan sütunda sıkışıyordu. */

.akis{list-style:none;margin:0;padding:0;}
.akis li{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 0;border-bottom:1px solid var(--kenar);
}
.akis li:last-child{border-bottom:0;padding-bottom:0;}
.akis-an{
  flex:none;width:44px;font-size:11px;color:var(--ikincil);
  font-variant-numeric:tabular-nums;padding-top:1px;
}
.akis-govde{min-width:0;flex:1;}
.akis-baslik{display:block;font-size:13px;line-height:1.4;}
.akis-govde .mikro{
  display:block;font-size:10px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ikincil);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.akis-sag{margin-left:auto;flex:none;padding-top:1px;}

/* Radar bölümlerinin iki yardımcı sınıfı. `.mikro` 10px/uppercase, kısa
   ETİKET içindir; tam cümle onunla basılırsa okunmaz. `.govde-metin`
   aynı kapsayıcıda cümle boyutuna döner. */
.akis-govde .govde-metin{
  text-transform:none;letter-spacing:0;font-size:12.5px;
  font-weight:400;line-height:1.55;
}
.cip-satir{display:flex;flex-wrap:wrap;gap:6px;}

/* ─── Hafta şeridi: dar sütunda dikey ───────────────────────────
   Yan sütunda 7 kutu yan yana sığmıyor; satır olarak diziliyorlar. */

.yan-sutun .hafta{grid-template-columns:1fr;gap:2px;}
.yan-sutun .gun{
  flex-direction:row;align-items:center;gap:10px;
  min-height:0;padding:9px 11px;border:0;border-radius:var(--r-kucuk);
  background:transparent;
}
.yan-sutun .gun + .gun{border-top:1px solid var(--kenar);border-radius:0;}
.yan-sutun .gun-harf{width:30px;flex:none;}
.yan-sutun .gun-icerik{
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;
}
.yan-sutun .gun-bos{margin-left:auto;font-size:11px;}
.yan-sutun .gun.bugun{background:var(--kum);border-radius:var(--r-kucuk);}
.gun-nokta{
  width:6px;height:6px;border-radius:50%;background:var(--olumlu-dolgu);flex:none;
}
.gun-artik{
  margin-left:auto;flex:none;font-size:10px;font-weight:600;
  color:var(--ikincil);font-variant-numeric:tabular-nums;
}
.gun.gecmis{opacity:.55;}

/* ─── Kıvılcım: sayı hücresinin altındaki 7 günlük eğri ──────── */

.sayilar .hucre{position:relative;overflow:hidden;}
.kivilcim{display:block;width:100%;height:28px;margin-top:12px;overflow:visible;}
.kivilcim .cizgi{fill:none;stroke:var(--aksan);stroke-width:1.5;
                 vector-effect:non-scaling-stroke;stroke-linecap:round;
                 stroke-linejoin:round;}
.kivilcim .dolgu{fill:var(--grafik-dolgu);stroke:none;}
.kivilcim .uc{fill:var(--aksan);}

/* İlerleme çubuğu + yanında yazı — makro bu ikisini birlikte basıyor */
.ilerleme-satir{display:flex;align-items:center;gap:11px;}
.ilerleme-satir .ilerleme{flex:1;margin-top:0;}
.ilerleme-yazi{
  font-size:11.5px;color:var(--ikincil);white-space:nowrap;flex:none;
  font-family:var(--font-sayi);font-variant-numeric:tabular-nums;
}
.durum-satir{display:inline-flex;align-items:center;gap:7px;}


/* ─── Filtre şeridi ──────────────────────────────────────────────
   İki sıra: birincil filtreler (durum) ve ikincil (etiket · kaynak).
   İkinciler gizlenmiyor — sayıları da taşıyorlar ve gizlenince
   "kaç etiketim var" bilgisi kayboluyor. */

.filtre-serit{display:flex;flex-direction:column;gap:8px;margin:18px 0 4px;}
.filtreler{display:flex;gap:6px;flex-wrap:wrap;}
.filtre{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:var(--r-pil);
  border:1px solid var(--kenar);background:var(--kart);
  color:var(--ikincil);text-decoration:none;font-size:12px;
}
.filtre:hover{border-color:var(--aksan);color:var(--aksan-metin);}
.filtre[aria-pressed="true"]{
  background:var(--kum);border-color:var(--aksan);color:var(--metin);
  font-weight:500;box-shadow:var(--parilti-aksan);
}
.filtre .n{
  font-size:11px;color:var(--ikincil);font-variant-numeric:tabular-nums;
}
.filtre[aria-pressed="true"] .n{color:var(--aksan-metin);}
.ikincil-serit .filtre{font-size:11.5px;padding:5px 10px;}

/* Kişi satırındaki etiketler */
.etiketler{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;}
.etiket{
  font-size:10px;color:var(--ikincil);
  padding:2px 7px;border-radius:var(--r-pil);background:var(--kum);
}

/* Yan sütundaki dar formlar */
.yan-form{display:flex;flex-direction:column;gap:10px;}
.yan-form.ayrik{margin-top:16px;padding-top:16px;border-top:1px solid var(--kenar);}
.yan-form .e-alan{margin:0;}
.btn.tam{width:100%;text-align:center;}

.dipnot{font-size:11px;margin:14px 2px 0;line-height:1.6;}


/* ─── Yan-sol ızgara ─────────────────────────────────────────────
   Dar seçim sütunu solda, geniş içerik sağda. .izgara-2'nin aynası;
   ikisi de aynı boşluk ve hizalama kurallarını paylaşıyor. */

.izgara-yan-sol{
  display:grid;grid-template-columns:minmax(260px,300px) minmax(0,1fr);
  gap:16px;align-items:start;margin-top:16px;
}
.izgara-yan-sol > * > .blok:first-child{margin-top:0;}
.ana-sutun{min-width:0;display:flex;flex-direction:column;gap:16px;}
.ana-sutun > .blok{margin-top:0;}

/* ─── Seçim listesi (kurslar, funnel'lar gibi) ──────────────────
   Tablo değil liste: dar sütunda üç sütunlu tablo sıkışıyor ve
   satırın tamamının tıklanabilir olması gerekiyor. */

.secim-liste{list-style:none;margin:0;padding:0;}
.secim{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;margin:0 -12px;
  border-radius:var(--r-kucuk);border:1px solid transparent;
  color:var(--metin);text-decoration:none;
}
.secim:hover{background:var(--hover);}
.secim.aktif{
  background:var(--kum);border-color:var(--kenar);
  box-shadow:var(--parilti-aksan);
}
.secim-govde{min-width:0;flex:1;}
.secim-ad{display:block;font-weight:500;font-size:13.5px;}
.secim .mikro{
  display:block;font-size:10px;font-weight:600;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--ikincil);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.secim-sag{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px;}
.secim-sayi{
  font-family:var(--font-sayi);font-size:12px;color:var(--ikincil);
  font-variant-numeric:tabular-nums;
}
.secim-liste li + li{border-top:1px solid var(--kenar);}

/* Satır içi eylem kümesi (↑ ↓ Düzenle) */
.satir-eylem{display:inline-flex;gap:5px;align-items:center;justify-content:flex-end;}
.satir-eylem form{display:contents;}

/* Tek satırlık form: alan + buton yan yana */
.satir-form{display:flex;gap:9px;align-items:flex-end;}
.satir-form .e-alan{flex:1;margin:0;}

.tablo.ust-bosluk{margin-top:14px;}

/* Tablo satırında başlık + altında mikro etiket */
.satir-baslik{display:block;font-weight:500;}
td > .mikro{
  display:block;font-size:10px;font-weight:600;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--ikincil);margin-top:4px;
}
/* İçerik alanının ilk kartı üst bardan sonra nefes alsın. Izgaraların
   kendi üst boşluğu zaten var; yalnızca tek başına duran kart için. */
.panel-icerik > .blok.ilk{margin-top:18px;}

/* ─── Aşama şeridi (içerik kuyruğu) ─────────────────────────────
   Fikirden yayına giden yol. Sıra bilgi taşıyor; numaralandırılmıyor
   çünkü aşamalar sayı değil DURUM — soldan sağa akış yeterli. */

.asama-serit{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px;
  background:var(--kenar);
  border:1px solid var(--kenar);border-radius:var(--r-kart);
  overflow:hidden;margin-top:22px;box-shadow:var(--kart-kabartma);
}
.asama{
  background:var(--kart);background-image:var(--kart-gradyan);
  padding:14px 16px;display:flex;flex-direction:column;gap:7px;min-width:0;
}
.asama-ad{
  font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ikincil);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.asama-sayi{
  font-family:var(--font-sayi);font-weight:600;font-size:22px;line-height:1;
  letter-spacing:-.015em;font-variant-numeric:tabular-nums;
}
.asama.secili{background:var(--kum);}
.asama.secili .asama-ad{color:var(--aksan-metin);}
.asama-ayrik .asama-sayi{color:var(--ikincil);}

/* Seçilemeyen (yalnızca gösterim) satır — hover'da zıplamasın */
.secim.secim-durgun{cursor:default;}
.secim.secim-durgun:hover{background:transparent;}
.secim-durgun .secim-ad{color:var(--metin);text-decoration:none;}
.secim-durgun .secim-ad:hover{color:var(--aksan-metin);}

/* Hafta gezinme bağlantıları */
.hafta-gezinme{
  display:flex;gap:14px;margin:0 0 12px;font-size:11.5px;
}
.hafta-gezinme a{color:var(--ikincil);text-decoration:none;}
.hafta-gezinme a:hover{color:var(--aksan-metin);}

.hafta.hafta-iki{grid-template-columns:repeat(2,1fr);gap:8px;}
.yan-sutun .hafta.hafta-iki .gun{
  flex-direction:column;align-items:flex-start;min-height:88px;
  border:1px solid var(--kenar);border-radius:var(--r-kucuk);padding:10px 11px;
}
.yan-sutun .hafta.hafta-iki .gun + .gun{border-top:1px solid var(--kenar);}
a.gun-icerik{color:var(--metin);text-decoration:none;}
a.gun-icerik:hover{color:var(--aksan-metin);}

/* Çok alanlı form ızgarası */
.alan-izgara{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0 12px;
}
.alan-izgara .e-alan.genis{grid-column:1/-1;}

.mikro.kirilabilir{word-break:break-all;white-space:normal;}

/* İki eşit sütun — yan sütun/ana sütun hiyerarşisi olmayan yerlerde */
.izgara-esit{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;align-items:start;
}
.izgara-esit > .blok{margin-top:16px;}

/* Aralık seçici — üst bardaki 7/30/90 gün */
.aralik-secim{
  display:flex;gap:2px;padding:3px;background:var(--kum);
  border:1px solid var(--kenar);border-radius:var(--r-pil);
}
.aralik-secim a{
  font-size:11px;font-weight:600;letter-spacing:.6px;
  padding:6px 11px;border-radius:var(--r-pil);border:1px solid transparent;
  color:var(--ikincil);text-decoration:none;white-space:nowrap;
}
.aralik-secim a[aria-pressed="true"]{
  background:var(--kart);color:var(--metin);border-color:var(--kenar);
}

/* Huni çubuğunun hücresi — tabloda oranla aynı hizada dursun */
.cubuk-hucre{width:38%;}
.cubuk-hucre .cubuk{margin-top:0;}

.alan-grafik{display:block;width:100%;height:120px;}

/* ─── Sekmeler (modül içi bölümler) ─────────────────────────── */

/* ─── Kırıntı (breadcrumb) ──────────────────────────────────────
   Funnel'da dört farklı geri etiketi ("← Funnel listesi" / "← Diyagram" /
   "Bloklara dön" / "Vazgeç") İKİ farklı Jinja bloğunda duruyordu; geri
   düğmesi ekranlar arasında yer değiştiriyordu. Tek desen: kırıntı
   `baslik_yani`da, eylemler `baslik_sag`da.

   Yalnız `display/gap/tipografi` taşır — dolgu, kenarlık, gölge YOK ki
   `.sekmeler` ile aynı yuvada durduğunda hizayı bozmasın. */
.iz{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;
    font-size:11px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;
    color:var(--ikincil);}
.iz a{color:var(--ikincil);text-decoration:none;}
.iz a:hover{color:var(--aksan-metin);}
.iz [aria-current]{color:var(--metin);}
.iz-ayrac{color:var(--ikincil-cizgi);font-weight:400;}

.sekmeler{display:flex;gap:2px;padding:3px;background:var(--kum);
          border:1px solid var(--kenar);border-radius:var(--r-pil);
          box-shadow:var(--kat-1);}
.sekmeler a{
  font-size:11.5px;font-weight:600;letter-spacing:.5px;
  padding:6px 13px;border-radius:var(--r-pil);border:1px solid transparent;
  color:var(--ikincil);text-decoration:none;white-space:nowrap;
}
.sekmeler a[aria-current="page"]{
  background:var(--kart);color:var(--metin);border-color:var(--kenar);
  box-shadow:var(--kat-1);
}

/* ─── Kural şeridi ──────────────────────────────────────────────
   Erişim kuralı koda gömülü kalırsa altı ay sonra kimsenin
   hatırlamadığı bir davranışa dönüşüyor. Ekranda yazılı duruyor. */

.kural-serit{
  display:flex;align-items:flex-start;gap:11px;
  background:var(--kum);border:1px solid var(--kenar);
  border-radius:var(--r-kart);box-shadow:var(--kat-1);
  padding:13px 16px;margin-top:18px;font-size:13px;line-height:1.6;
}
.kural-serit .nokta{margin-top:6px;}

/* ─── Yetki kutucukları ─────────────────────────────────────── */

.yetki-kutulari{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;}
.yetki-kutu{
  display:flex;align-items:flex-start;gap:10px;flex:1 1 210px;min-width:0;
  padding:12px 13px;border-radius:var(--r-kucuk);
  border:1px solid var(--kenar);background:var(--kart);
  box-shadow:var(--kat-1);cursor:pointer;
}
.yetki-kutu:hover{border-color:var(--kutucuk-kenar);}
.yetki-kutu.secili{
  border-color:var(--aksan);background:var(--kum);
  box-shadow:var(--parilti-aksan);
}
.yetki-kutu input{margin:2px 0 0;accent-color:var(--aksan);flex:none;}
.yetki-govde{min-width:0;}
.yetki-ad{display:block;font-size:13px;font-weight:500;}
.yetki-kutu .mikro{
  display:block;font-size:11px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ikincil);margin-top:3px;
}
.yetki-kutulari .btn{align-self:center;flex:none;}
.yetki-kutulari.dikey{flex-direction:column;gap:8px;}
.yetki-kutulari.dikey .yetki-kutu{flex:none;}

.uyari-metin{color:var(--uyari);margin:0;font-size:12.5px;}
.arsiv-satir{
  display:flex;align-items:center;gap:12px;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--kenar);
}
.arsiv-satir .mikro{
  font-size:10px;font-weight:600;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--ikincil);
}

/* ─── Yetki listesi (kişi detayı) ───────────────────────────── */

.yetki-liste{list-style:none;margin:0;padding:0;}
.yetki-liste li{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--kenar);flex-wrap:wrap;
}
.yetki-liste li:last-child{border-bottom:0;padding-bottom:0;}
.yetki-durum{flex:none;min-width:96px;}
.yetki-liste .yetki-govde{min-width:0;flex:1;}
.yetki-liste .yetki-ad{display:block;font-size:13.5px;font-weight:500;}
.yetki-liste .mikro{
  display:block;font-size:11px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ikincil);margin-top:3px;
}
.yetki-eylem{margin-left:auto;flex:none;}
.yetki-form{display:flex;gap:7px;align-items:center;}
.yetki-form input[type=text]{
  font-family:var(--font-govde);font-size:12.5px;padding:7px 10px;width:190px;
  background:var(--kum);color:var(--metin);
  border:1px solid var(--kenar);border-radius:var(--r-kucuk);
  box-shadow:var(--ic-golge);
}
.yetki-form input[type=text]:focus-visible{
  outline:none;border-color:var(--aksan);background:var(--kart);
  box-shadow:var(--parilti-aksan);
}

/* ─── Kelime bulutu ─────────────────────────────────────────────
   Boyut DEĞİŞMİYOR — büyüyen yazı okunurluğu bozuyor ve sıralamayı
   yanıltıcı biçimde abartıyor. Sayı yanında rakamla yazılı. */
.kelime-bulutu{display:flex;flex-wrap:wrap;gap:7px;}
.kelime{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:var(--r-pil);
  background:var(--kum);border:1px solid var(--kenar);
  font-size:12px;box-shadow:var(--kat-1);
}
.kelime-n{
  font-family:var(--font-sayi);font-size:10.5px;font-weight:600;
  color:var(--aksan-metin);font-variant-numeric:tabular-nums;
}

/* ─── Boş durum ──────────────────────────────────────────────── */

.bos-durum{text-align:center;padding:38px 20px;color:var(--ikincil);}
.bos-durum p{margin:0 0 16px;}
.bos-durum strong{display:block;color:var(--metin);font-family:var(--font-baslik);
                  font-size:18px;font-weight:400;margin-bottom:7px;}

/* ─── Genel (panel dışı) sayfalar ────────────────────────────── */

.ust{display:flex;align-items:center;justify-content:space-between;gap:var(--bosluk);
     padding:16px 26px;border-bottom:1px solid var(--kenar);background:var(--kart);}
.marka{font-family:var(--font-baslik);font-size:17px;color:var(--metin);text-decoration:none;}
.menu a{color:var(--ikincil);text-decoration:none;margin-left:20px;font-size:13px;}
.menu a:hover{color:var(--aksan-metin);}
.govde{max-width:900px;margin:0 auto;padding:38px 26px 70px;}
.kart{background:var(--kart);background-image:var(--kart-gradyan);
      border:1px solid var(--kenar);border-radius:var(--r-kart);
      padding:26px;margin-bottom:var(--bosluk);}
.ipucu{color:var(--ikincil);margin:0;}
.bos{color:var(--uyari);margin:0;}
/* Genel sayfaların altbilgisi. TEK KELİMELİK GLOBAL SINIF — bileşen içinde
   `.alt` adını bir daha kullanma: dolgusu ve üst çizgisi oraya da sızar.
   Mikro etiket için `.mikro` var. (Bu çakışma bir kez yaşandı: marka bloğunda
   26px sol dolgu metni kaydırdı, 20px dikey dolgu kutuyu 54px yaptı ve
   border-top ortaya hayalet bir çizgi çizdi.) */
.alt{padding:20px 26px;border-top:1px solid var(--kenar);color:var(--ikincil);font-size:13px;}

/* ─── Tema anahtarı ──────────────────────────────────────────── */

.tema-secim{
  display:flex;gap:2px;padding:3px;background:var(--kum);
  border:1px solid var(--kenar);border-radius:var(--r-pil);
}
.tema-secim button{
  font-family:var(--font-govde);font-size:10.5px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;padding:6px 12px;
  border:1px solid transparent;border-radius:var(--r-pil);background:transparent;
  color:var(--ikincil);cursor:pointer;
}
.tema-secim button[aria-pressed="true"]{
  background:var(--kart);color:var(--metin);border-color:var(--kenar);
}

/* ─── Hareket ────────────────────────────────────────────────────
   TABANDA HER ŞEY GÖRÜNÜR. İçerik opacity:0 ile BAŞLAMAZ; animasyon
   yalnızca hareket tercihi serbestse eklenir. Çalışmazsa sayfa yerinde.
   ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:no-preference){

  /* ── Sayfa açılışı: kademeli beliriş ──
     İçerik opacity:0 ile BAŞLAMAZ; `both` yalnızca animasyon çalışırken
     geçerli. Bu blok hiç uygulanmazsa sayfa olduğu gibi görünür. */
  .bel{animation:bel .5s cubic-bezier(.22,.68,.28,1) both;animation-delay:var(--g,0ms);}
  @keyframes bel{from{opacity:0;transform:translateY(9px);}}

  /* Sayı şeridi hücreleri sırayla gelsin — göz soldan sağa akar */
  .sayilar .hucre{animation:bel .5s cubic-bezier(.22,.68,.28,1) both;}
  .sayilar .hucre:nth-child(1){animation-delay:40ms;}
  .sayilar .hucre:nth-child(2){animation-delay:100ms;}
  .sayilar .hucre:nth-child(3){animation-delay:160ms;}
  .sayilar .hucre:nth-child(4){animation-delay:220ms;}

  /* ── Grafikler ── */
  .kivilcim .cizgi{stroke-dasharray:240;stroke-dashoffset:240;
                   animation:ciz 1.1s cubic-bezier(.3,.7,.3,1) .2s forwards;}
  @keyframes ciz{to{stroke-dashoffset:0;}}
  .kivilcim .uc{animation:uc-bel .4s ease-out 1.15s both;}
  @keyframes uc-bel{from{opacity:0;transform:scale(.4);transform-origin:center;}}

  .cubuk-dolgu,.ilerleme span{animation:buyu .8s cubic-bezier(.22,.68,.28,1) both;
                              animation-delay:var(--g,0ms);}
  @keyframes buyu{from{width:0;}}

  /* ── Geçişler ──
     Süreler kısa (140-200ms): uzun geçiş arayüzü ağır hissettirir. */
  .panel-menu a,.btn,.ikon-btn,.zil,.gun,.pil,.avatar{
    transition:background-color .16s ease,border-color .16s ease,
               color .16s ease,box-shadow .18s ease,transform .16s ease;
  }
  .blok,.sayilar{transition:border-color .2s ease,box-shadow .2s ease;}
  .ara-form input{transition:border-color .16s ease,box-shadow .18s ease;}

  /* ── Etkileşim geri bildirimi ── */
  /* Menü öğesi üzerine gelince ikon aksana döner — nereye gittiğin belli olsun */
  .panel-menu a:hover .nav-ikon{color:var(--aksan-metin);}

  /* Tıklama anında hafif çökme: dokunsal geri bildirim */
  .btn:active,.ikon-btn:active,.zil:active{transform:translateY(1px);}

  /* Tıklanabilir kartlar hafifçe kalkar. Bilgi kartları (.blok) HAREKET
     ETMEZ — tıklanmıyorlar, kalkmaları yanlış vaat olurdu. */
  .u-kart:hover,.e-tip:hover,.gun:not(.bugun):hover{
    transform:translateY(-1px);border-color:var(--aksan);
  }
  .blok:hover{border-color:var(--kutucuk-kenar);}

  .satir-vurgu:hover{background:var(--hover);}
  .gorevler li:hover{background:var(--hover);}
  .gorevler li{transition:background-color .16s ease;}

  /* Kaydırınca beliren kartlar. `.bekliyor` sınıfını YALNIZCA JS koyuyor;
     JS çalışmazsa sınıf hiç eklenmez ve kart normal görünür. Bu yüzden
     burada opacity:0 güvenli — koşulsuz değil, JS'in varlığına bağlı. */
  .panel-icerik .blok.bekliyor{opacity:0;transform:translateY(12px);}
  .panel-icerik .blok.gorundu{
    animation:bel .55s cubic-bezier(.22,.68,.28,1) both;
    animation-delay:var(--g,0ms);
  }

  /* Zincir soldan sağa kuruluyor. Sıra bilgi taşıyor: akış bu yönde
     ilerliyor ve kopuş noktasında duruyor. */
  .zincir-halka{animation:bel .4s cubic-bezier(.22,.68,.28,1) both;
                animation-delay:var(--g,0ms);}
  .zincir-bag{animation:bag-uzat .32s ease-out both;animation-delay:var(--g,0ms);}
  @keyframes bag-uzat{from{transform:scaleX(0);}}
  .zincir-bag{transform-origin:left center;}

  /* Aktif menü öğesinin aksan çubuğu açılışta uzasın — küçük bir imza */
  .panel-menu .aktif::before{animation:cubuk-uzat .45s cubic-bezier(.22,.68,.28,1) .1s both;}
  @keyframes cubuk-uzat{from{transform:scaleY(0);}}
}


/* ─── Dar ekran ──────────────────────────────────────────────── */

/* Asistan sütunu daralır ama hâlâ yapışkan — çöküş 1120'de. */
@media (max-width:1200px){
  .izgara-ofis{grid-template-columns:minmax(0,1fr) 320px;}
}

@media (max-width:1120px){
  .izgara-2{grid-template-columns:1fr;}
  .izgara-yan-sol{grid-template-columns:1fr;}
  /* Tek sütunda yapışkanlık anlamsız: sütun içeriğin ALTINA iner, orada
     yapışık kalırsa ekranın yarısını kalıcı yer. Kendi kaydırması kalır
     ki sohbet sayfayı yutmasın. */
  .izgara-ofis{grid-template-columns:1fr;}
  .asistan-sutun{position:static;max-height:none;z-index:auto;}
  .asistan-akis{max-height:420px;}
  .yan-sutun .hafta{grid-template-columns:repeat(7,1fr);gap:8px;}
  .yan-sutun .gun{flex-direction:column;align-items:flex-start;min-height:76px;
                  border:1px solid var(--kenar);border-radius:var(--r-kucuk);}
  .yan-sutun .gun + .gun{border-top:1px solid var(--kenar);border-radius:var(--r-kucuk);}
  .yan-sutun .gun-harf{width:auto;}
}

@media (max-width:900px){
  .panel{grid-template-columns:1fr;}
  .panel-nav{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;
             border-right:0;border-bottom:1px solid var(--kenar);
             padding:12px 16px;position:static;height:auto;}
  .panel-marka{border-bottom:0;padding:0;margin:0 14px 0 0;}
  .panel-menu{flex-direction:row;flex-wrap:wrap;padding:0;}
  .panel-nav-alt{margin:0 0 0 auto;border-top:0;padding:0;}
  .nav-durum{display:none;}
  .panel-nav .tema-secim{margin:0;}
  .panel-icerik{padding:0 16px 26px;}
  .ust-bar{padding:12px 16px;position:static;}
  .ara-form input{width:100%;}
  .sayilar{grid-template-columns:repeat(2,1fr);}
  .sayilar .hucre:nth-child(2n){border-right:0;}
  .sayilar .hucre:nth-child(-n+2){border-bottom:1px solid var(--kenar);}
  .hafta{grid-template-columns:repeat(3,1fr);}
}


/* ─── Ofis›Fikirler: aşama şeridi ────────────────────────────
   Durum sırası ANLAM taşıyor (soldan sağa ilerler); şerit hem sayaç hem
   süzgeç. Numaralandırılmıyor — sıra zaten yatay dizilimde okunuyor. */

.asama-serit{display:flex;flex-wrap:wrap;gap:8px;}
.asama{
  flex:1 1 120px;min-width:110px;padding:12px 14px;
  background:var(--kum);border:1px solid var(--kenar);
  border-radius:var(--r-kucuk);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:2px;
}
.asama:hover{border-color:var(--aksan-cizgi);}
.asama.aktif{background:var(--kart);border-color:var(--aksan-cizgi);
             box-shadow:var(--kat-1);}
.asama-sayi{font-family:var(--font-sayi);font-weight:600;font-size:22px;
            line-height:1.05;font-variant-numeric:tabular-nums;}
.asama-ad{font-size:11px;font-weight:600;letter-spacing:1.1px;
          text-transform:uppercase;color:var(--ikincil);}

/* ─── Ofis›Takvim: aylık ızgara ──────────────────────────────── */

.takvim-gezinme{display:flex;gap:6px;margin-bottom:12px;}
.takvim-baslik,
.takvim-izgara{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;}
.takvim-baslik{margin-bottom:4px;}
.takvim-baslik .mikro{
  font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--ikincil);text-align:center;
}
.takvim-hucre{
  min-height:82px;padding:6px;background:var(--kart);
  border:1px solid var(--kenar);border-radius:var(--r-kucuk);
  display:flex;flex-direction:column;gap:3px;min-width:0;
}
.takvim-hucre.disari{background:var(--zemin);opacity:.55;}
.takvim-hucre.gecmis{background:var(--kum);}
.takvim-hucre.bugun{border-color:var(--aksan-cizgi);box-shadow:var(--kat-1);}
.takvim-gun{font-family:var(--font-sayi);font-size:12px;font-weight:600;
            color:var(--ikincil);font-variant-numeric:tabular-nums;}
.takvim-hucre.bugun .takvim-gun{color:var(--aksan-metin);}
.takvim-kayit{
  display:flex;align-items:center;gap:4px;
  font-size:11px;line-height:1.3;padding:3px 5px;
  background:var(--kum);border-radius:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.takvim-kayit form{display:inline;margin-left:auto;}
.takvim-kaldir{
  border:0;background:none;cursor:pointer;padding:0 2px;
  color:var(--ikincil);font-size:13px;line-height:1;
}
.takvim-kaldir:hover{color:var(--uyari);}
.takvim-hucre .mikro{font-size:10px;color:var(--ikincil);}

@media (max-width:820px){
  /* Yedi sütun dar ekranda okunmuyor; ay ızgarası listeye döner. */
  .takvim-baslik{display:none;}
  .takvim-izgara{grid-template-columns:1fr;}
  .takvim-hucre{min-height:0;flex-direction:row;align-items:center;flex-wrap:wrap;}
  .takvim-hucre.disari{display:none;}
}
/* ─── Görev listesi (Ofis›Görevler + Bugün) ──────────────────
   Kutucuk GERÇEK: bir form düğmesi, tıklanır, geri alınır. Bugün ekranındaki
   "Sistem uyarıları" listesinde kutucuk YOKTUR — o liste türetiliyor,
   işaretlenecek bir şey yok. Bir zamanlar orada dekoratif bir kutucuk vardı;
   tıklanamayan kutucuk yalandır. */

.gorev-liste{list-style:none;margin:0;padding:0;}
.gorev-satir{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 0;border-bottom:1px solid var(--kenar);
}
.gorev-satir:last-child{border-bottom:0;}
.gorev-kutu{
  flex:none;width:19px;height:19px;margin-top:1px;
  border:1.5px solid var(--kenar);border-radius:5px;
  background:var(--kart);cursor:pointer;padding:0;
  font-size:12px;line-height:1;color:var(--aksan-metin);
}
.gorev-kutu:hover{border-color:var(--aksan-cizgi);}
.gorev-govde{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.gorev-baslik{font-size:13.5px;line-height:1.45;}
.gorev-satir.bitti .gorev-baslik{text-decoration:line-through;color:var(--ikincil);}
.gorev-satir.bitti .gorev-kutu{background:var(--kum);border-color:var(--aksan-cizgi);}
.gorev-sag{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none;}
.gorev-liste .mikro{
  font-size:10px;font-weight:600;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--ikincil);
}

/* ─── Asistan sütunu: balonlar ve aksiyon kartı ──────────────── */

/* Başlık `kart()` makrosuyla değil ELLE yazıldı: makro `sag` değerini
   metin olarak kaçırıyor, burada durum noktası + sayaç işaretlemesi var.
   Makroyu HTML kabul edecek şekilde gevşetmek sekiz modülün her başlığını
   enjeksiyona açardı — bir ekran için sistem geneli risk alınmadı. */
.asistan-basi{align-items:center;}
.asistan-kim{display:flex;align-items:center;gap:8px;min-width:0;}
.asistan-kim .bolum-etiket{margin:0;}
.asistan-sayac{
  margin-left:auto;flex:none;
  font-family:var(--font-sayi);font-size:10.5px;color:var(--ikincil);
  font-variant-numeric:tabular-nums;   /* 9/60 → 10/60 başlığı zıplatmasın */
}
.asistan-uyari{margin:0 0 10px;}

/* Gün ayracı: ortada etiket, iki yana saç teli çizgi. Metin SUNUCUDA
   yerel güne göre üretiliyor (UTC'ye göre bölünseydi akşam yazılan her
   mesaj "yarın"a düşerdi). */
.asistan-gun{
  display:flex;align-items:center;gap:10px;
  margin:4px 0 2px;color:var(--ikincil);
  font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
}
.asistan-gun::before,.asistan-gun::after{
  content:"";flex:1;height:1px;background:var(--kenar);
}

/* Balon etiketi: kim · hangi sekme · saat. `context_tab` yazılıyor ama
   HİÇ OKUNMUYORDU — hangi ekranda sorulduğu cevabın anlamını değiştirir. */
.balon-etiket{
  display:block;margin-bottom:4px;
  font-size:9.5px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--ikincil);
}

/* Hızlı eylem çipleri — `.filtre` diliyle aynı. Gerçek submit düğmeleri:
   JS'siz tarayıcıda `hazir` anahtarı sunucuya gidiyor. */
.asistan-cipler{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.asistan-cipler .filtre{font-size:11px;padding:5px 11px;}

/* Yazma alanı + yuvarlak gönder düğmesi. Düğme metnin ÜSTÜNDE duruyor;
   textarea'nın sağ dolgusu düğme genişliği kadar açılıyor, yoksa uzun
   cümlenin son harfleri düğmenin altında kayboluyordu. */
.asistan-yaz{position:relative;}
.asistan-yaz textarea{
  width:100%;resize:vertical;min-height:62px;
  padding-right:46px;margin:0;
}
.asistan-gonder{
  position:absolute;right:7px;bottom:7px;
  width:32px;height:32px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;
  background:var(--btn1-bg);background-image:var(--btn1-gradyan);
  color:var(--btn1-fg);border:1px solid var(--btn1-bg);
  box-shadow:var(--btn1-kenar);
}
.asistan-gonder:hover{box-shadow:var(--kat-2), var(--parilti-guclu);}
.asistan-gonder:focus-visible{outline:2px solid var(--aksan-cizgi);outline-offset:2px;}
.asistan-gonder[disabled]{opacity:.55;cursor:default;}
.asistan-gonder .ikon{width:16px;height:16px;}
.ikon.ters{transform:rotate(180deg);}

/* Yetki notu: ekranda YAZILI olmalı, koda gömülü değil. Metin araç
   kümesiyle örtüşmek zorunda — arşivleme aracı eklenirse bu cümle de
   güncellenir (scripts/dogrula.py örtüşmeyi denetliyor). */
.asistan-dip{
  margin:8px 0 0;font-size:10.5px;line-height:1.5;color:var(--ikincil);
}
.asistan-dip b{color:var(--metin);font-weight:600;}


.balon{max-width:100%;padding:9px 12px;border-radius:10px;font-size:12.5px;
       line-height:1.55;}
.balon p{margin:0;}
.balon-user{background:var(--kum);border:1px solid var(--kenar);
            align-self:flex-end;border-bottom-right-radius:3px;}
.balon-assistant{background:var(--kart);border:1px solid var(--kenar);
                 align-self:flex-start;border-bottom-left-radius:3px;
                 box-shadow:var(--kat-1);}

/* Aksiyon kartı: asistan bir şey YAZDIĞINDA beliriyor. Altın kenar
   "burada kayıt oluştu" demek — sohbet ile iş arasındaki tek görsel fark. */
.aksiyon-karti{
  margin-top:8px;padding:8px 10px;
  background:var(--pil-aksan-bg);border:1px solid var(--aksan-cizgi);
  border-radius:var(--r-kucuk);
}
.aksiyon-karti ul{list-style:none;margin:4px 0 0;padding:0;}
.aksiyon-karti li{font-size:11.5px;line-height:1.5;color:var(--metin);}
.aksiyon-karti li::before{content:"→ ";color:var(--aksan-metin);}

.asistan-giris textarea{width:100%;resize:vertical;margin-bottom:6px;}

.alan.yatay{flex-direction:row;align-items:center;gap:8px;}
.alan.yatay input[type=checkbox]{width:auto;margin:0;}

/* ─── Nabız çubukları ─────────────────────────────────────────
   Bar + sayı + KİŞİ sayısı. Kişi sayısı gösterilmesi bilinçli: k≥3
   kuralının ekrandaki karşılığı, "kaç mesaj" değil "kaç kişi". */

.nabiz-liste{list-style:none;margin:0;padding:0;display:flex;
             flex-direction:column;gap:9px;}
.nabiz-liste li{display:grid;grid-template-columns:minmax(0,1fr) 90px auto;
                align-items:center;gap:10px;}
.nabiz-ad{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nabiz-cubuk{display:block;height:7px;background:var(--kum);
             border-radius:var(--r-pil);overflow:hidden;}
.nabiz-cubuk > span{display:block;height:100%;width:var(--o);
                    background:var(--aksan);border-radius:var(--r-pil);}
.nabiz-sayi{font-family:var(--font-sayi);font-size:11.5px;font-weight:600;
            color:var(--ikincil);font-variant-numeric:tabular-nums;
            white-space:nowrap;}

@media (max-width:560px){
  .nabiz-liste li{grid-template-columns:minmax(0,1fr) auto;}
  .nabiz-cubuk{grid-column:1 / -1;}
}

/* ─── Kişi detayı: erişim listesi ve tehlikeli alan ─────────────
   "Alan yetkisi" ile "kurs erişimi" aynı düzlemde duruyordu ve fark
   yalnızca beş satırlık bir dipnottaydı. Artık iki ayrı bölüm; kurs
   erişiminde HİÇ FORM YOK — elle verilemeyeceğini düğme yokluğu
   anlatıyor, metin değil. */
.erisim-liste{list-style:none;margin:0;padding:0;}
.erisim-liste li{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 0;font-size:13.5px;
}
.erisim-liste li + li{border-top:1px solid var(--kenar);}
.kaynak-rozet{
  margin-left:auto;font-size:11px;color:var(--ikincil);
  padding:2px 9px;border-radius:var(--r-pil);
  background:var(--kum);border:1px solid var(--kenar);
}

/* Yıkıcı olmayan ama gündelik de olmayan işler: parola, arşiv.
   Sipariş tablosuyla aynı düzlemdeydiler; kapalı <details> onları
   görüş alanından çıkarıyor, KALDIRMIYOR. */
.tehlike-blok > summary{
  list-style:none;cursor:pointer;
  font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ikincil);
}
.tehlike-blok > summary::-webkit-details-marker{display:none;}
.tehlike-blok > summary:hover{color:var(--metin);}
.tehlike-blok[open] > summary{margin-bottom:12px;}
.tehlike-govde{border-top:1px solid var(--kenar);padding-top:12px;}