/* ============================================================================
   Bizz İntranet — Tasarım Token Katmanı
   Kaynak: Claude Design projesi "Intranet Bizz" → Bizz İntranet Tasarım Sistemi
           (tokens/colors · typography · spacing · radius-shadow · layout · motion · dark)

   TEK KAYNAK: renk, tipografi, boşluk, yarıçap, gölge, yerleşim, hareket.
   Her iki yüzey (front + admin) bu dosyayı yükler.

   Marka rengi panelden ayarlanabilir: layout, SiteSettings.ThemeBrandColor
   değerini :root{--brand: ...} olarak bu varsayılanın ÜZERİNE inline basar.
   Ton merdiveni --brand'den türetilmediği için, panelden özel renk verildiğinde
   yalnız --brand ve --brand-500 değişir; merdiven kurumsal varsayılanı korur.

   KURAL: bileşen CSS'lerinde HEX yazılmaz — yalnız bu dosyada.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────────
   FONT · Manrope (self-hosted — izole kurum ağı, dış CDN yasak)
   Manrope DEĞİŞKEN (variable) fonttur: tek dosya 200–800 ağırlık aralığını
   taşır, ayrı 500/600/700/800 dosyası gerekmez. Alt küme başına bir dosya:
     manrope-latin.woff2      → temel latin + ı, ç, ö, ü, ₺ ailesi dışı simgeler
     manrope-latin-ext.woff2  → ğ, ş, İ ve genişletilmiş latin + ₺ (U+20BA)
   Kaynak: Google Fonts v20 (SIL Open Font License 1.1) — dosyalar REPODA yerel,
   çalışma zamanında hiçbir dış isteğe çıkılmaz.
   ───────────────────────────────────────────────────────────────────────────── */
@font-face { font-family:"Manrope"; font-weight:200 800; font-style:normal; font-display:swap;
  src:url('../fonts/manrope-latin-ext.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:"Manrope"; font-weight:200 800; font-style:normal; font-display:swap;
  src:url('../fonts/manrope-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; }

:root {
  /* ── Marka · panelden gelen TEK değer ─────────────────────────── */
  --brand: #0FA98B;
  --brand-50: #E8F8F4;
  --brand-100: #C8EFE6;
  --brand-200: #97E1D2;
  --brand-300: #5FCFBA;
  --brand-400: #2BB89E;
  --brand-500: var(--brand);
  --brand-600: #0C8B72;
  --brand-700: #0A6E5A;
  --brand-800: #085243;
  --brand-900: #05372D;
  --brand-contrast: #FFFFFF;      /* aksan dolgu üstündeki metin */
  /* Metin olarak aksan. 600, açık marka zemininde (hayalet buton, aktif menü
     satırı) 3,87:1 kalıyordu; 700 ile 5,65:1. */
  --brand-text: var(--brand-700);

  /* Bağlantı hover rengi. ÖNCE ham --brand (#0FA98B) kullanılıyordu ve sayfa
     zemininde 2,69:1'e düşüyordu: imleci götürünce metin OKUNAKSIZLAŞIYORDU.
     Hover metni daha KOYU olmalı (kontrast artmalı), daha açık değil. */
  --brand-text-hover: var(--brand-800);

  /* METİN/İKON TAŞIYAN aksan dolgusu.
     Şartname §02 "beyaz metin yalnız 600'den itibaren" diyor ve tablosunda
     #FFFFFF/#0C8B72 için 4,8:1 yazıyor — bu değer HATALI, ölçülen 4,24:1 ve AA
     eşiği 4,5. Bu yüzden dolgu 700'den başlar: #FFFFFF/#0A6E5A = 6,19:1.
     --brand (500) üstünde beyaz 2,97:1 — metin taşıyan hiçbir dolgu 500 kullanmaz.
     Metin taşımayan dolgular (ilerleme çubuğu, logo noktası, odak halkası,
     grafik serisi) doğrudan --brand kullanmaya devam eder. */
  --brand-fill: var(--brand-700);
  --brand-fill-hover: var(--brand-800);
  --brand-fill-active: var(--brand-900);

  /* AKSANLI YUZEY — uzerinde --brand-text okunur.
     Merdivenin kendisi (50..900) dolgu ve grafik icindir; ZEMIN olarak bunlar
     kullanilir. Sebep: 50/100/200 koyu temada yeniden tanimlanmadigi icin zemin
     acik kalir, uzerindeki metin --brand-300'e acilir ve kontrast 1:1'e duser
     (giden mesaj balonunda olculen deger 1,01:1). */
  --brand-surface: var(--brand-50);
  --brand-surface-strong: var(--brand-100);
  --brand-surface-border: var(--brand-200);

  /* ── Mürekkep · lacivert tabanlı nötr ──────────────────────────── */
  --ink-0: #FFFFFF;
  --ink-25: #F7F9FB;
  --ink-50: #F1F4F8;
  --ink-100: #E4E9F0;
  --ink-200: #CFD7E3;
  --ink-300: #AEBACB;
  --ink-400: #8494AB;   /* METİN DEĞİL: yalnız ikon, ayraç, dekor (beyazda 3,1:1) */
  --ink-500: #5E6E86;   /* en açık metin tonu — beyazda 5,3:1 */
  --ink-600: #465771;
  --ink-700: #33445C;
  --ink-800: #223146;
  --ink-900: #16233A;
  --ink-1000: #0A1633;

  /* ── Anlamsal yüzeyler ─────────────────────────────────────────── */
  --bg: var(--ink-25);
  --surface: var(--ink-0);
  --surface-2: var(--ink-50);
  --surface-inverse: var(--ink-1000);
  --border: var(--ink-100);
  --border-strong: var(--ink-200);
  --text: var(--ink-1000);
  --text-muted: var(--ink-500);
  --text-on-inverse: var(--ink-0);
  --text-muted-on-inverse: var(--ink-300);
  /* HER İKİ TEMADA da koyu kalan yüzeyler üstündeki metin (hero, sol menü başlığı,
     zorunlu duyuru şeridi, logo--inverse). Bunlar dark blokta YENİDEN TANIMLANMAZ:
     zemin zaten koyudur, metin her iki temada da açık kalmalıdır.
     Şartname §01'in "koyu zeminde koyu metin" hatasını yapısal olarak imkânsız kılar. */
  --on-ink: var(--ink-0);
  --on-ink-muted: var(--ink-300);
  /* ink-400 METİN DEĞİLDİR (beyazda 3,1:1) — yalnız ikon, ayraç, dekor.
     Şartname §06 bu rolü --text-subtle adıyla tanımlar; --icon-decorative
     aynı değerin bileşen katmanındaki takma adıdır. */
  --text-subtle: var(--ink-400);
  --icon-decorative: var(--text-subtle);

  /* ── Durum ─────────────────────────────────────────────────────── */
  --success: #1F8A5C;
  --warning: #B4740B;
  --danger: #C0392B;
  --info: #2563C9;
  --success-bg: #E9F6EF;
  --warning-bg: #FBF3E3;
  --danger-bg: #FBECEA;
  --info-bg: #EAF1FC;
  /* Anlamsal renklerin METİN ve DOLGU rolleri. Ham ton kendi -bg zemininde AA'yı
     geçmiyor: warning 3,50 · success 3,90. -text tonlarıyla 6,2–6,8 arasına çıkar.
     -fill = beyaz metin/ikon taşıyan dolgu; iki temada da aynı kalır. */
  --success-text: #146043;
  --warning-text: #7E5006;
  --danger-text:  #9E2A1E;
  --info-text:    #1B4FA8;
  --success-fill: var(--success-text);
  --warning-fill: var(--warning-text);
  --danger-fill:  var(--danger-text);
  --info-fill:    var(--info-text);

  --focus: var(--brand);

  /* ── Tipografi ─────────────────────────────────────────────────── */
  --font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-body: 500;
  --fw-label: 600;
  --fw-strong: 700;
  --fw-display: 800;

  --fs-display: 44px;  --lh-display: 46px;  --ls-display: -0.03em;
  --fs-h1: 34px;       --lh-h1: 37px;       --ls-h1: -0.025em;
  --fs-h2: 26px;       --lh-h2: 31px;       --ls-h2: -0.02em;
  --fs-h3: 21px;       --lh-h3: 26px;       --ls-h3: -0.015em;
  --fs-h4: 18px;       --lh-h4: 23px;
  --fs-h5: 16px;       --lh-h5: 22px;
  --fs-h6: 14px;       --lh-h6: 20px;
  --fs-body-lg: 16px;  --lh-body-lg: 26px;
  --fs-body: 15px;     --lh-body: 24px;
  --fs-sm: 13px;       --lh-sm: 20px;
  --fs-label: 11px;    --lh-label: 16px;    --ls-label: 0.06em;

  --measure-body: 72ch;
  --measure-article: 65ch;

  /* ── Boşluk ────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  --grid-columns: 12;
  --grid-gutter: 24px;
  /* Dokunmatik hedef — şartname §12/§13:
     --touch-min          bağımsız/birincil kontrol (buton, alan, sekme, liste satırı) · 44px
     --touch-min-compact  yoğun bağlamdaki ikincil hedef (filtre çipi, reaksiyon,
                          tablo satır aksiyonu) — komşu aralığı zorunlu
     --touch-gap-min      komşu hedefler arası en küçük boşluk · 8px */
  --touch-min: 44px;
  --touch-min-compact: 32px;
  --touch-gap-min: 8px;

  /* ── Yarıçap · kenarlık · gölge ────────────────────────────────── */
  --radius-sm: 6px;    /* çip, input, küçük etiket */
  --radius-md: 10px;   /* buton, açılır menü */
  --radius-lg: 14px;   /* kart */
  --radius-xl: 20px;   /* hero, modal */
  --radius-full: 999px;

  --border-width: 1px;

  --shadow-sm: 0 1px 2px rgba(10, 22, 51, .06);
  --shadow-md: 0 4px 12px rgba(10, 22, 51, .08);
  --shadow-lg: 0 12px 32px rgba(10, 22, 51, .14);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  /* ── Yerleşim ──────────────────────────────────────────────────── */
  --nav-w: 248px;
  --nav-w-collapsed: 72px;
  --header-h: 64px;
  --mobile-tabbar-h: 56px;
  /* Üst barın yüksekliği. Ölçülen değer (64px) token'a alındı: tam ekran
     kipindeki uygulama yüzeyleri (Mesajlar, Asistan) kendi yüksekliğini
     "ekran − üst bar" olarak kuruyor ve bunu bir sayı olarak sabitlemek
     ileride üst bar değiştiğinde iki yerde bozulma demekti. */
  --topbar-h: 64px;
  --container: 1240px;
  /* ⚠ ÖLÇÜLEN KUSUR: pano ve liste ekranları da 1240px ile sınırlıydı. 1920px bir
     ekranda ölçüldü — sol menü 248, içerik alanı 1657, kap 1240 ⇒ her iki yanda
     208px BOŞ (toplam 417px). 1240px bir OKUMA ölçüsüdür (uzun satır okumayı
     zorlaştırır), pano için değil: pano taranır, okunmaz.
     Boşluğu boyamak ölü alanı süslemek olurdu; çalışma alanı genişletildi.
     Okuma ekranları (haber/duyuru detayı) 1240px'te KALIR. */
  --container-wide: 1600px;

  --bp-xs: 480px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1440px;

  /* ── Hareket ───────────────────────────────────────────────────── */
  --dur-1: 120ms;  /* hover, odak, çip seçimi */
  --dur-2: 200ms;  /* açılır menü, sekme geçişi, toast */
  --dur-3: 320ms;  /* çekmece, modal, küme paneli */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-inout: cubic-bezier(.4, 0, .2, 1);
  --motion-shift: 8px; /* animasyonlarda izin verilen tek kayma mesafesi */
}

/* ─────────────────────────────────────────────────────────────────────────────
   KOYU TEMA — ayrı stylesheet DEĞİL: aynı token'lar yeniden tanımlanır.
   <html data-mode="dark"> sunucu tarafında basılır (beyaz parlama olmasın).
   ───────────────────────────────────────────────────────────────────────────── */
:root[data-mode="dark"] {
  --bg: var(--ink-1000);
  --surface: var(--ink-900);
  --surface-2: var(--ink-800);
  --surface-inverse: var(--ink-0);
  --border: var(--ink-700);
  --border-strong: var(--ink-600);
  --text: var(--ink-50);
  --text-muted: var(--ink-300);
  --text-on-inverse: var(--ink-1000);
  --text-muted-on-inverse: var(--ink-600);
  --icon-decorative: var(--ink-400);

  --brand-text: var(--brand-300);
  /* Koyuda hover DAHA AÇIK tonla kontrastı artırır (ham --brand 4,43:1 kalıyordu). */
  --brand-text-hover: var(--brand-200);
  --brand-contrast: #04231C;
  /* Koyuda dolgu açılır ve üstündeki metin koyulaşır: #0A1633 / #0FA98B = 7,9:1 (AAA) */
  --brand-fill: var(--brand);
  --brand-fill-hover: var(--brand-400);
  --brand-fill-active: var(--brand-300);
  /* Aksanli yuzeyler koyuda koyu tona iner; ustlerindeki --brand-text (300) okunur kalir */
  --brand-surface: color-mix(in srgb, var(--brand) 12%, var(--ink-1000));
  --brand-surface-strong: color-mix(in srgb, var(--brand) 20%, var(--ink-1000));
  --brand-surface-border: color-mix(in srgb, var(--brand) 40%, var(--ink-900));

  --success-bg: #10301F;
  --warning-bg: #33240A;
  --danger-bg: #3A1A16;
  --info-bg: #122542;
  /* Koyuda metin tonları AÇILIR; -fill değerleri iki temada da aynı kalır. */
  --success-text: #5FD3A0;
  --warning-text: #F0C078;
  --danger-text:  #F5A99E;
  --info-text:    #8FB6F5;

  /* NİYET KODDA SABİTLENDİ: açık temada -fill değerleri var(--*-text) ALIAS'ıydı.
     Koyuda metin tonları açılınca dolgular da açılıyor, üstlerindeki --ink-0
     (beyaz) okunmaz oluyordu — takdir kartının "Takdir" etiketi beyaz üstüne
     açık amber, ölçülen kontrast 1.68:1. Yukarıdaki yorum zaten "-fill iki
     temada da aynı kalır" diyordu; alias bunu bozuyordu. Değerler açık temanın
     koyu tonlarına sabitlendi, böylece beyaz metin iki temada da okunur. */
  --success-fill: #146043;
  --warning-fill: #7E5006;
  --danger-fill:  #9E2A1E;
  --info-fill:    #1B4FA8;

  /* Koyuda gölge yerine yüzey aydınlığı */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MODÜL YÜZEY PALETİ — 8 toz ton (tasarım belgesi · ds-modul-paleti.css)

   NEDEN VAR: sistemde ana sayfa modüllerini ve küme hedeflerini birbirinden
   ayıracak DEKORATİF yüzey tonu yoktu. Elde olan iki merdiven de uygun değil:
     · --brand (mint) tek kromatik merdiven — 11 basamağın hepsi aynı hue
     · --success/--warning/--danger/--info-bg toz pastel karakterinde AMA
       ANLAM TAŞIYOR. "Günün sözü" kartını --warning-bg ile boyamak
       "anlam yalnız renkle verilmez" kuralını çiğnerdi.
   Dekoratif tonlar bu yüzden KENDİ adlarıyla tanımlanır; semantik tonlar
   anlam için serbest kalır. HEX yalnız burada, bir kez.

   KULLANIM KURALLARI:
     1. Ton İÇERİKTEN türer: bir modül ailesi = bir ton. Aynı sayfada aynı
        aile iki farklı ton almaz, iki komşu kart aynı tonu almaz.
     2. Ton yalnız YÜZEY ve KENARLIKtır. Metin her zaman --text/--text-muted.
     3. Bir ekranda en fazla 6 ton; nötr bloklar --mod-stone.
     4. Ton BİLGİ TAŞIMAZ — ton kalkınca ekran hâlâ anlaşılır olmalı.

   ⚠ KOYU TEMA TUZAĞI (tasarım tarafında ÖLÇÜLDÜ): ton, açık pastelin ink'e
   karıştırılmasıyla ÜRETİLMEZ. Pastelin kroması zaten çok düşük olduğu için
   %13'lük karışımda ink'in hue'su baskın çıkar ve sekiz ton tek laciverte
   ÇÖKER (ölçülen yayılım: kanal başına 255'lik ölçekte 1,3–2,5 basamak).
   Koyu ton, aynı hue'nun DOYGUN çıpasından iner.

   KONTRAST (ölçülen, --text = #0A1633 üstünde): sage 16,4 · sand 16,9 ·
   sky 15,8 · rose 16,6 · mint 15,9 · lilac 15,5 · stone 15,6 · clay 16,3 —
   hepsi AA ve AAA üstü.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --mod-sage-bg:  #EDF3EC;   --mod-sage-bd:  #DAE6D8;
  --mod-sand-bg:  #F7F1E4;   --mod-sand-bd:  #EADFC6;
  --mod-sky-bg:   #EBF1F8;   --mod-sky-bd:   #D6E2F0;
  --mod-rose-bg:  #F8EFEC;   --mod-rose-bd:  #EEDCD6;
  --mod-mint-bg:  #E9F5F1;   --mod-mint-bd:  #D2E8E0;
  --mod-lilac-bg: #F1EFF7;   --mod-lilac-bd: #E0DBEE;
  --mod-clay-bg:  #F6F0EA;   --mod-clay-bd:  #E8DCD0;
  --mod-stone-bg: #F1F3F5;   --mod-stone-bd: #E1E4E8;

  /* İKON MÜREKKEBİ — her tonun doygun eşi. Kendi -bg'si üstünde ölçülen
     kontrast 4,8–5,4:1 (ikon için gereken 3:1'in üstünde).
     ⚠ BU MÜREKKEP METİN RENGİ DEĞİLDİR: yalnız ikon ve ince dekoratif çizgi.
     İkonun yanındaki yazı her zaman --text ile yazılır. */
  --mod-sage-ink:  oklch(0.48 0.115 145);
  --mod-sand-ink:  oklch(0.50 0.110 78);
  --mod-sky-ink:   oklch(0.50 0.130 250);
  --mod-rose-ink:  oklch(0.51 0.140 25);
  --mod-mint-ink:  oklch(0.47 0.110 175);
  --mod-lilac-ink: oklch(0.49 0.135 300);
  --mod-clay-ink:  oklch(0.50 0.105 55);
  --mod-stone-ink: var(--ink-600);
}

:root[data-mode="dark"] {
  /* Yüzey L 0.28 → --surface (ink-900, L≈0.24) üstünde hafifçe yükselir;
     kenarlık L 0.42. --text (ink-50) ile ölçülen kontrast ≈ 9:1. */
  --mod-sage-bg:  oklch(0.28 0.050 145);  --mod-sage-bd:  oklch(0.42 0.070 145);
  --mod-sand-bg:  oklch(0.28 0.050 85);   --mod-sand-bd:  oklch(0.42 0.072 85);
  --mod-sky-bg:   oklch(0.28 0.055 250);  --mod-sky-bd:   oklch(0.42 0.075 250);
  --mod-rose-bg:  oklch(0.28 0.055 25);   --mod-rose-bd:  oklch(0.42 0.075 25);
  --mod-mint-bg:  oklch(0.28 0.050 175);  --mod-mint-bd:  oklch(0.42 0.070 175);
  --mod-lilac-bg: oklch(0.28 0.055 300);  --mod-lilac-bd: oklch(0.42 0.075 300);
  --mod-clay-bg:  oklch(0.28 0.048 55);   --mod-clay-bd:  oklch(0.42 0.068 55);
  --mod-stone-bg: var(--ink-900);         --mod-stone-bd: var(--ink-700);

  --mod-sage-ink:  oklch(0.80 0.115 145);
  --mod-sand-ink:  oklch(0.82 0.110 78);
  --mod-sky-ink:   oklch(0.80 0.120 250);
  --mod-rose-ink:  oklch(0.80 0.120 25);
  --mod-mint-ink:  oklch(0.80 0.110 175);
  --mod-lilac-ink: oklch(0.80 0.120 300);
  --mod-clay-ink:  oklch(0.82 0.105 55);
  --mod-stone-ink: var(--ink-300);
}

/* Şartname §06: hareketi azalt tercihi SÜRE TOKEN'LARINI sıfırlar — kayma kalkar,
   yalnız anlık durum değişimi kalır. (base.css ayrıca animasyonları kapatır.) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: .01ms;
    --dur-2: .01ms;
    --dur-3: .01ms;
    --motion-shift: 0px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   GERİYE UYUM KÖPRÜSÜ
   D1 (Şerit A) token adları ~90 yerde kullanılıyor (custom-styles.css,
   themes.css, custom-site.css, Razor inline). Bu blok eski adları yeni
   değerlere bağlar: mevcut CSS kırılmadan yeni palete geçer.

   Yeni kod bu adları KULLANMAZ — yalnız geçiş dönemi içindir.
   Ekranlar yeni bileşen katmanına taşındıkça buradan silinecek.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --brand-2:    var(--brand-400);   /* eski teal aksan → marka ailesi */
  --brand-050:  var(--brand-50);
  --brand-600:  #0C8B72;            /* yeni merdivende zaten var */
  --brand-700:  #0A6E5A;
  --brand-admin: var(--brand);      /* admin yüzeyinde marka */

  --ink:        var(--text);
  --muted:      var(--text-muted);
  --line:       var(--border);

  --ok:         var(--success);
  --warn:       var(--warning);
  /* --danger zaten yeni katmanda tanımlı, ayrıca köprü gerekmiyor */

  --radius:     var(--radius-md);
  --shadow:     var(--shadow-md);
  --font-base:  var(--font-sans);
}