/* =========================================================
   CostChief — tasarım değişkenleri (TEK KAYNAK)
   Kural belgesi: TASARIM_DILI.md 2. sürüm (bağlayıcı); değerler
   docs/tasarim/referans/ taslaklarından birebir.
   Bu dosyada tanımlı bir --cc-* değişkeni başka hiçbir dosyada
   yeniden tanımlanmaz; değer değişecekse burada değişir.
   İçerik: değişkenler · yerel font yüzleri · ikon temel kuralı · gövde fontu.
   ========================================================= */

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-latin-wght400-700.7d86b71812ae.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-latin-wght400-800.216211a16485.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Renk: marka (lacivert) — §1.1 --- */
  --cc-navy: #002442;
  --cc-navy-700: #173655;
  --cc-navy-100: #dae7f1;
  --cc-icon-tile: #e6eef6;
  --cc-navy-50: #eef4f9;
  --cc-hover: #f3f7fb;
  --cc-hover-border: #e1e9f1;
  --cc-on-navy: #ffffff;
  --cc-on-navy-muted: #a9bdd0;
  --cc-on-navy-eyebrow: #8aa2b8;
  --cc-on-navy-icon: #dae7f1;
  --cc-primary: var(--cc-navy);

  /* --- Renk: eylem (turuncu) — §1.2 --- */
  --cc-action: #f16d0a;
  --cc-action-hover: #e3640b;
  --cc-on-action: var(--cc-navy);
  --cc-action-text: #b4480a;
  --cc-action-soft: #ffe9d9;
  --cc-action-ring: rgba(241, 109, 10, .16);
  --cc-on-navy-action: #ff9d4d;
  --cc-action-shadow: 0 10px 24px rgba(241, 109, 10, .32);
  --cc-action-shadow-sm: 0 10px 22px rgba(241, 109, 10, .30);

  /* --- Renk: güven (camgöbeği) — §1.3 --- */
  --cc-trust: #01b0ae;
  --cc-trust-text: #007c7a;
  --cc-trust-bg: #ddf5f4;
  --cc-on-navy-trust: #5fe0dd;

  /* --- Renk: durum — §1.4 --- */
  --cc-success: #16a34a;
  --cc-success-bg: #ecfdf3;
  --cc-success-text: #15803d;
  --cc-success-border: #bbe7cc;
  --cc-warning: #e0a100;
  --cc-warning-bg: #fdf3d6;
  --cc-warning-text: #8a6100;
  --cc-danger: #dc3545;
  --cc-danger-bg: #fee2e2;
  --cc-danger-text: #b91c1c;
  --cc-progress: #4ade80;
  --cc-dot-idle: #9aa7b5;
  --cc-info: var(--cc-navy);
  --cc-info-bg: var(--cc-icon-tile);
  --cc-info-text: var(--cc-navy);

  /* --- Renk: nötr ve yüzey — §1.6 --- */
  --cc-text: #1f2937;
  --cc-text-secondary: #5b6b7c;
  --cc-text-muted: #6b7280;
  --cc-text-menu: #4b5b6c;
  --cc-text-cell: #4b5563;
  --cc-text-legend: #374151;
  --cc-icon-disabled: #8797a8;
  --cc-border: #e5e7eb;
  --cc-border-soft: #e9edf2;
  --cc-border-row: #eef1f4;
  --cc-border-dashed: #d5dde6;
  --cc-border-control: #cfd8e2;
  --cc-border-strong: #868e9b;
  --cc-bg: #f4f6f9;
  --cc-bg-subtle: #fafbfd;
  --cc-bg-muted: #eef1f4;
  --cc-bg-table-head: #f7f9fb;
  --cc-surface: #ffffff;
  --cc-warm-surface: #fffaf5;
  --cc-warm-border: #fbe3cf;
  --cc-warm-end: #fff4ea;
  --cc-backdrop: rgba(0, 36, 66, .48);

  /* --- Işık ailesi — §1.8 · §5.12 --- */
  --cc-light-1: #0f4c81;
  --cc-light-2: #2f7fc1;
  --cc-light-3: #9fd0f2;
  --cc-light-border: #b9d6ee;
  --cc-light-glow: 0 0 12px 1px rgba(47, 127, 193, .45);

  /* --- Odak — §1.8 --- */
  --cc-focus-outline: 2px solid var(--cc-navy);
  --cc-focus-offset: 2px;
  --cc-focus-ring: 0 0 0 3px rgba(0, 36, 66, .16);

  /* --- Yazı — §2 --- */
  --cc-family-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cc-family-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cc-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cc-font-10: 10px;
  --cc-font-11: 11px;
  --cc-font-12: 12px;
  --cc-font-13: 13px;
  --cc-font-14: 14px;
  --cc-font-15: 15px;
  --cc-font-16: 16px;
  --cc-font-17: 17px;
  --cc-font-18: 18px;
  --cc-font-20: 20px;
  --cc-font-22: 22px;
  --cc-font-24: 24px;
  --cc-font-26: 26px;
  --cc-font-28: 28px;
  --cc-font-30: 30px;
  --cc-font-display: 40px;
  --cc-lh-12: 16px;
  --cc-lh-14: 20px;
  --cc-lh-16: 24px;
  --cc-lh-20: 28px;
  --cc-lh-28: 36px;
  --cc-lh-display: 48px;
  --cc-weight-regular: 400;
  --cc-weight-medium: 500;
  --cc-weight-semibold: 600;
  --cc-weight-bold: 700;
  --cc-weight-heavy: 800;
  --cc-tracking-tight: -0.03em;
  --cc-tracking-brand: -0.02em;
  --cc-tracking-heading: -0.01em;
  --cc-tracking-eyebrow: .04em;
  --cc-tracking-tag: .06em;
  --cc-tracking-section: .08em;
  --cc-tracking-group: .12em;
  --cc-tracking-page: .14em;

  /* --- Köşe — §3.1 --- */
  --cc-radius-sm: 6px;
  --cc-radius-xs: 8px;
  --cc-radius-md: 10px;
  --cc-radius-row: 12px;
  --cc-radius-lg: 14px;
  --cc-radius-tile: 16px;
  --cc-radius-card: 18px;
  --cc-radius-hero-sm: 22px;
  --cc-radius-hero: 24px;
  --cc-radius-pill: 999px;

  /* --- Gölge — §3.2 --- */
  --cc-shadow-flat: 0 1px 2px rgba(0, 36, 66, .05);
  --cc-shadow-section: 0 1px 2px rgba(0, 36, 66, .05), 0 8px 24px rgba(0, 36, 66, .05);
  --cc-shadow-raised: 0 2px 4px rgba(0, 36, 66, .06), 0 30px 70px rgba(0, 36, 66, .22);
  --cc-shadow-raised-sm: 0 2px 4px rgba(0, 36, 66, .06), 0 24px 50px rgba(0, 36, 66, .20);
  --cc-shadow-hover: 0 1px 2px rgba(0, 36, 66, .05), 0 18px 36px rgba(0, 36, 66, .12);
  --cc-shadow-menu: 0 1px 2px rgba(0, 36, 66, .06), 0 24px 56px rgba(0, 36, 66, .18);
  --cc-shadow-bulk: 0 18px 40px rgba(0, 36, 66, .35);

  /* --- Boşluk — §3.3 --- */
  --cc-space-1: 4px;
  --cc-space-2: 8px;
  --cc-space-3: 12px;
  --cc-space-4: 16px;
  --cc-space-6: 24px;
  --cc-space-8: 32px;

  /* --- Kabuk — §6 (taslak 01) --- */
  --cc-kabuk-menu: 272px;
  --cc-kabuk-satir: 48px;
  --cc-kabuk-alt-satir: 40px;
  --cc-kabuk-aralik: 14px;
  --cc-kabuk-marka-ic: 22px 22px 20px;
  --cc-kabuk-liste-ic: 6px 12px;
  --cc-kabuk-alt-girinti: 50px;
  --cc-kabuk-logo: 46px;
  --cc-kabuk-logo-gorsel: 38px;
  --cc-kabuk-cubuk: 60px;
  --cc-kabuk-cubuk-mobil: 56px;
  --cc-kabuk-zil: 42px;
  --cc-kabuk-kimlik: 50px;
  --cc-kabuk-avatar: 40px;
  --cc-kabuk-rozet: 18px;
  --cc-kabuk-ayrac: 30px;
  --cc-kabuk-menu-kutu: 336px;
  --cc-kabuk-firma-kare: 40px;
  --cc-kabuk-menu-avatar: 44px;
  --cc-kabuk-satir-sm: 44px;
  --cc-radius-firma: 11px;
  --cc-on-navy-hover: rgba(255, 255, 255, .08);
  --cc-on-navy-line: rgba(255, 255, 255, .14);
  --cc-on-navy-glass: rgba(255, 255, 255, .05);
  --cc-on-navy-glass-hover: rgba(255, 255, 255, .11);
  --cc-on-navy-line-hover: rgba(255, 255, 255, .22);
  --cc-on-navy-ring: 0 0 0 2px var(--cc-navy);
  --cc-kabuk-sayac: 19px;
  --cc-kabuk-nokta: 7px;

  /* --- Ana sayfa — §6.3 · §7 (taslak 01 · 02 · 03) --- */
  --cc-ana-kenar: 40px;
  --cc-ana-kenar-mobil: 16px;
  --cc-sahne-alt: 108px;
  --cc-sahne-alt-sade: 30px;
  --cc-sahne-alt-mobil: 96px;
  --cc-sahne-binis: -84px;
  --cc-sahne-binis-mobil: -72px;
  --cc-sahne-izgara: 36px;
  --cc-sahne-izgara-mobil: 32px;
  --cc-sahne-cizgi: rgba(255, 255, 255, .045);
  --cc-sahne-mavi: rgba(47, 127, 193, .42);
  --cc-sahne-mavi-yok: rgba(47, 127, 193, 0);
  --cc-sahne-sicak: rgba(241, 109, 10, .16);
  --cc-sahne-sicak-yok: rgba(241, 109, 10, 0);
  --cc-sahne-mavi-boy: 640px;
  --cc-sahne-mavi-sag: -140px;
  --cc-sahne-mavi-ust: -220px;
  --cc-sahne-sicak-en: 520px;
  --cc-sahne-sicak-boy: 420px;
  --cc-sahne-sicak-alt: -260px;
  --cc-cam-zemin: rgba(255, 255, 255, .06);
  --cc-cam-kenar: rgba(255, 255, 255, .12);
  --cc-cam-ikon: rgba(255, 255, 255, .10);
  --cc-cam-eylem: rgba(241, 109, 10, .18);
  --cc-cam-guven: rgba(1, 176, 174, .20);
  --cc-cam-iz: rgba(255, 255, 255, .16);
  --cc-rozet-boy: 46px;
  --cc-rozet-boy-mobil: 52px;
  --cc-rozet-ikon: 30px;
  --cc-rozet-halka-cizgi: 3.5px;
  --cc-gorev-ic: 30px 32px;
  --cc-gorev-ic-mobil: 22px 20px;
  --cc-bolum-ic: 26px 26px 12px;
  --cc-bolum-ic-2: 22px 24px 24px;
  --cc-adim-daire: 28px;
  --cc-adim-halka: 0 0 0 4px rgba(241, 109, 10, .16);
  --cc-hareket-ikon: 36px;
  --cc-modul-ikon: 40px;
  --cc-hap-boy: 34px;
  --cc-hap-dugme: 46px;
  --cc-hap-dugme-mobil: 50px;
  --cc-cizim-halka: 1.5px dashed #f1c4a0;
  --cc-karsilama-max: 400px;
  --cc-gir-mesafe: 14px;
  --cc-isik-cizgi: 2px;
  --cc-isik-kayma: -3px;
  --cc-ok-kayma: 4px;
  --cc-parilti-en: 110px;
  --cc-parilti-boy: 4px;
  --cc-parilti-bas: -130px;
  --cc-parilti-son: 640px;
  --cc-parilti-bulanik: .4px;
  --cc-cizgi-orta: 2px;
  --cc-cizgi-kalin: 1.5px;
  /* Görev kartı çizimi (0,5 ölçek + halka ≈ 184×140): içerik bu kadar yer bırakır. */
  --cc-gorev-cizim-yer: 200px;
  --cc-gorev-cizim-boy: 136px;
  /* Mobil üst çubukta sayfa adının yerine küçük logo (≤576 px). */
  --cc-ust-logo: 30px;
  --cc-ust-logo-ic: 3px;
  /* Kullanıcılar tablosu (2026-09-19): kullanıcı sütunu en az 220 px; satır alt
     sınırı = o + sabit sütunlar (13 + 8,5 + 7 rem) + 3 boşluk + 2 kenar dolgusu. */
  --cc-ekip-kullanici-min: 220px;
  --cc-ekip-satir-min: calc(var(--cc-ekip-kullanici-min) + 28.5rem + 5rem);
  --cc-ekip-davet-satir-min: calc(var(--cc-ekip-kullanici-min) + 37rem + 6rem);
  /* Detay sayfası (TASARIM_DILI §12.1 · taslak 05/06, 2026-09-19). Taslakla ±.01 alfa
     farklı olanlar mevcut cam / sahne değişkenlerini kullanır (cırcır: yeni renk yok). */
  --cc-detay-bant-son: #073a63;
  --cc-detay-bant-ic: 24px 28px;
  --cc-detay-bant-ic-mobil: 18px;
  --cc-detay-bant-golge: 0 12px 32px rgba(0, 36, 66, .18);
  --cc-detay-logo: 68px;
  --cc-detay-logo-mobil: 52px;
  --cc-detay-logo-golge: 0 8px 20px rgba(0, 36, 66, .18);

  /* Düzenleme paneli (docs/tasarim/referans/07-duzenleme-paneli-OKU.md).
     ⚠️ Perde ve panel gölgesi `rgba(0,20,40,…)` ailesinden — proje gölge
     ailesi `rgba(0,36,66,…)`den FARKLI; taslağın değeri korundu. */
  --cc-panel-en: 540px;
  --cc-panel-perde: rgba(0, 20, 40, .42);
  --cc-panel-golge: -24px 0 60px rgba(0, 20, 40, .28);
  --cc-panel-cubuk-golge: 0 -8px 24px rgba(0, 36, 66, .06);
  --cc-panel-baslik-ic-ust: 22px;
  --cc-panel-govde-ic-y: 20px;
  --cc-panel-kart-ic: 18px;
  --cc-panel-kapat: 36px;
  --cc-panel-dugme-ic-x: 22px;
  --cc-panel-kayma: 60px;
  --cc-panel-kayma-mobil: 24px;
  --cc-panel-cizgi: 1px;
  /* Sayaç kartı: KENDİ gölgesi (satır içi stildeki değerin aynısı) + yapışkan
     bant. ⛔ TEK TOKEN: tasarım cırcırı yalnız "tek token başvurusu" olan bir
     değeri dağınıklık saymıyor; iki parça CSS'te yazılsaydı sayaç artardı. */
  --cc-panel-sayac-golge:
    0 12px 28px rgba(0, 43, 69, .10),
    0 calc(var(--cc-panel-govde-ic-y) * -1) 0 var(--cc-space-6) var(--cc-bg);
  --cc-detay-cam-boy: 40px;
  --cc-detay-doluluk-boy: 60px;
  --cc-detay-halka: 40px;
  --cc-detay-panel: 340px;
  --cc-detay-etiket: 160px;
  --cc-detay-satir-boy: 48px;
  --cc-detay-durum: 136px;
  --cc-detay-eylem-yuva: 28px;
  --cc-detay-dokunma: 40px;
  --cc-detay-sekme-boy: 44px;
  --cc-detay-hap-boy: 36px;
  --cc-detay-solma: 64px;
  --cc-detay-durtme: -18px;
  --cc-detay-satir-hover: #f6f9fc;
  --cc-detay-duzeltme-zemin: #fff8f2;
  --cc-detay-duzeltme-yazi: #9a3d06;
  --cc-detay-duzeltme-hap: #fff1e6;
  --cc-detay-bant-eylem-yazi: #ffc08a;
  --cc-detay-bant-uyari-zemin: rgba(224, 161, 0, .20);
  --cc-detay-bant-uyari-yazi: #ffdd80;
  --cc-detay-bant-guven-yazi: #7fe6e3;
  --cc-detay-alt-bosluk: 110px;

  /* --- Hareket — §4 --- */
  --cc-dur-fast: 120ms;
  --cc-dur-base: 200ms;
  --cc-dur-slow: 280ms;
  --cc-dur-light: 340ms;
  --cc-dur-enter: 500ms;
  --cc-dur-glint: 900ms;
  --cc-dur-skeleton: 1400ms;
  --cc-dur-ambient: 32s;
  --cc-dur-ring: 780ms;
  --cc-ease: cubic-bezier(.2, .8, .2, 1);
  --cc-ease-glint: cubic-bezier(.3, .6, .3, 1);
  --cc-ambient-state: running;

  /* Bootstrap'ın kendi yazı yığını da bizim gövde fontumuza bağlanır. */
  --font-family-sans-serif: var(--cc-family-body);

  /* =======================================================================
     AÇILIŞ SAYFASI — `--cc-lan-*` (templates/public/index.html ·
     static/public/css/landing.css). Kaynak: docs/tasarim/referans/landing/
     costchief-anasayfa-taslak.html; değerler oradan ÖLÇÜLEREK türetildi.

     ⛔ ADLANDIRMA ROLE VE KADEMEYE GÖRE, KULLANIM YERİNE GÖRE DEĞİL.
        Bir kademe basamağı tek yerde kullanılıyor olabilir; bu onu
        silmek için sebep değildir — merdivenin ortası boşalırsa bir
        sonraki değer literal olarak geri döner.

     ⛔ AÇILIŞ SAYFASI KABUK/DETAY TOKEN'LARINA BAĞLANMAZ. Değer aynı olsa
        bile `--cc-kabuk-*` / `--cc-detay-*` yeniden kullanılmadı: o
        token'lar başka bir ekranın kararını taşıyor ve orada değişirse
        açılış sayfası sessizce bozulurdu.
     ======================================================================= */

  /* --- Açılış · renk: lacivert kademeleri --- */
  --cc-lan-navy-950: #001a33;
  --cc-lan-navy-850: #03224a;
  --cc-lan-navy-800: #06294a;
  --cc-lan-navy-700: #0b3358;
  --cc-lan-navy-600: #1d4a75;
  --cc-lan-navy-500: #2a5d8f;

  /* --- Açılış · renk: çelik mavisi kademeleri --- */
  --cc-lan-celik-900: #0c447c;
  --cc-lan-celik-700: #1f6fb5;
  --cc-lan-celik-500: #3d8fd6;
  --cc-lan-celik-300: #6db4f2;
  --cc-lan-celik-200: #9fd0ff;
  --cc-lan-celik-100: #cfe6ff;

  /* --- Açılış · renk: nötr kademeleri — koyu zemin üstü metin ve çizgi --- */
  --cc-lan-notr-100: #c6d5e4;
  --cc-lan-notr-200: #b9c6d6;
  --cc-lan-notr-300: #a9c0d8;
  --cc-lan-notr-400: #8fa9c4;
  --cc-lan-notr-500: #6b8199;
  --cc-lan-notr-550: #5d7590;
  --cc-lan-notr-600: #526b85;
  --cc-lan-notr-700: #47607a;

  /* --- Açılış · renk: yeşil kademeleri --- */
  --cc-lan-yesil-50: #e8f4e1;
  --cc-lan-yesil-200: #9fe0b8;
  --cc-lan-yesil-400: #4fbf7f;
  --cc-lan-yesil-700: #2e7d4f;
  --cc-lan-yesil-900: #0c3a2a;
  --cc-lan-zeytin-900: #27500a;

  /* --- Açılış · renk: sıcak kademeleri --- */
  --cc-lan-sicak-300: #ffc79a;
  --cc-lan-sicak-400: #ffb27a;
  --cc-lan-sicak-800: #7a3503;
  --cc-lan-sicak-900: #4a2308;
  --cc-lan-sicak-950: #3a1d08;

  /* --- Açılış · renk: siyah --- */
  --cc-lan-siyah: #000000;

  /* --- Açılış · renk: saydamlıklar — beyaz --- */
  --cc-lan-ak-35: rgba(255, 255, 255, .35);
  --cc-lan-ak-75: rgba(255, 255, 255, .75);
  --cc-lan-ak-96: rgba(255, 255, 255, .96);

  /* --- Açılış · renk: saydamlıklar — çelik · mavi · turuncu --- */
  --cc-lan-celik-cam-16: rgba(109, 180, 242, .16);
  --cc-lan-celik-cam-22: rgba(109, 180, 242, .22);
  --cc-lan-celik-cam-30: rgba(109, 180, 242, .30);
  --cc-lan-mavi-cam-22: rgba(61, 143, 214, .22);
  --cc-lan-mavi-cam-35: rgba(61, 143, 214, .35);
  --cc-lan-turuncu-cam-35: rgba(241, 109, 10, .35);

  /* --- Açılış · renk: saydamlıklar — perde --- */
  --cc-lan-perde-72: rgba(0, 26, 51, .72);
  --cc-lan-perde-90: rgba(0, 26, 51, .90);

  /* --- Açılış · gölge ve parıltı (bütün beyan TEK token) --- */
  --cc-lan-golge-cubuk: 0 12px 32px -20px rgba(0, 36, 66, .35);
  --cc-lan-golge-kart: 0 24px 60px -32px rgba(0, 36, 66, .35);
  --cc-lan-golge-satir: 0 8px 20px -14px rgba(0, 36, 66, .4);
  --cc-lan-golge-kayok: 0 8px 20px -8px rgba(0, 36, 66, .5);
  --cc-lan-golge-yuzer: 0 10px 30px -12px rgba(0, 36, 66, .5);
  --cc-lan-golge-panel: 0 40px 100px -50px rgba(0, 36, 66, .45);
  --cc-lan-golge-derman: 0 40px 90px -45px rgba(0, 36, 66, .8);
  --cc-lan-golge-sahne: 0 50px 120px -50px rgba(0, 36, 66, .72);
  --cc-lan-golge-bolum-koyu: 0 50px 140px -50px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .07);
  --cc-lan-golge-bildirim: 0 12px 30px -8px rgba(0, 0, 0, .6);
  --cc-lan-golge-depo: 0 30px 70px -30px rgba(0, 0, 0, .8);
  --cc-lan-golge-tel: 0 40px 90px -24px rgba(0, 0, 0, .85), 0 0 0 1.5px rgba(160, 190, 220, .28), inset 0 0 0 1.5px rgba(255, 255, 255, .06);
  --cc-lan-tel-tus-golge: 0 46px 0 #1b2430, 0 88px 0 #1b2430;
  --cc-lan-golge-eylem: 0 24px 70px -20px rgba(241, 109, 10, .55);
  --cc-lan-golge-yuva: 0 10px 30px -12px rgba(61, 143, 214, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
  --cc-lan-golge-yuva-parlak: 0 10px 36px -8px rgba(109, 180, 242, .95), inset 0 1px 0 rgba(255, 255, 255, .12);
  --cc-lan-golge-secili: 0 16px 40px -22px rgba(61, 143, 214, .7);
  --cc-lan-golge-secili-celik: 0 18px 50px -20px rgba(109, 180, 242, .75);
  --cc-lan-parilti-celik-sm: 0 0 18px -2px rgba(109, 180, 242, .8);
  --cc-lan-parilti-celik: 0 0 10px 2px rgba(109, 180, 242, .9);
  --cc-lan-parilti-turuncu: 0 0 12px 3px rgba(241, 109, 10, .9);
  --cc-lan-parilti-yesil: 0 0 12px 3px rgba(79, 191, 127, .9);
  --cc-lan-halka-eylem: 0 0 0 4px rgba(241, 109, 10, .25);
  --cc-lan-halka-odak: 0 0 0 3px rgba(61, 143, 214, .25);
  --cc-lan-ic-halka-ak: inset 0 0 0 3px #fff;
  --cc-lan-ic-halka-navy: inset 0 0 0 3px #062440;
  --cc-lan-parilti-tur-sm: 0 0 10px var(--cc-action);

  /* --- Açılış · gradyan (bütün beyan TEK token) --- */
  --cc-lan-izgara: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  --cc-lan-imlec-isigi: radial-gradient(720px circle at var(--cc-lan-mx, 72%) var(--cc-lan-my, 58%), rgba(61, 143, 214, .22), transparent 62%);
  --cc-lan-duvar-zemin: linear-gradient(180deg, #012a4d, #001a33);
  --cc-lan-akis-zemin: linear-gradient(180deg, rgba(0, 30, 58, .92), rgba(0, 18, 38, .96));
  --cc-lan-kutu-zemin: linear-gradient(180deg, #0e3a63, #0a2f52);
  --cc-lan-yuva-zemin: linear-gradient(180deg, #0e3a63, #082844);
  --cc-lan-telekran-zemin: linear-gradient(180deg, #07223f, #041426);
  --cc-lan-tel-zemin: linear-gradient(145deg, #2b3644, #0a0f16 40%, #1b2430);
  --cc-lan-cam-parilti: linear-gradient(125deg, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, 0) 32%);
  --cc-lan-sayi-zemin: linear-gradient(180deg, #fff, #9fd0ff);
  --cc-lan-cik-zemin: linear-gradient(180deg, rgba(14, 58, 99, .85), rgba(6, 36, 64, .85));
  --cc-lan-fx-hale: radial-gradient(closest-side, rgba(61, 143, 214, .38), rgba(61, 143, 214, .10) 55%, transparent 75%);
  --cc-lan-fx-golge-zemin: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
  --cc-lan-maske-alt: linear-gradient(180deg, #000, transparent 85%);
  --cc-lan-maske-sag: linear-gradient(90deg, #000 0, #000 86%, transparent);
  --cc-lan-maske-sol: linear-gradient(90deg, transparent 0, #000 14%);

  /* --- Açılış · filtre --- */
  --cc-lan-isik-celik: drop-shadow(0 0 7px #6db4f2);
  --cc-lan-isik-turuncu: drop-shadow(0 0 8px #f16d0a);
  --cc-lan-fx-dusen-golge: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));

  /* --- Açılış · bulanıklık --- */
  --cc-lan-bulanik-sm: 8px;
  --cc-lan-bulanik-md: 10px;

  /* --- Açılış · ölçü (rol adıyla) --- */
  --cc-lan-cubuk-boy: 3px;
  --cc-lan-nokta: 9px;
  --cc-lan-etiket-boy: 15px;
  --cc-lan-ikon-sm: 17px;
  --cc-lan-ikon-md: 19px;
  --cc-lan-ikon-lg: 23px;
  --cc-lan-kamera-boy: 25px;
  --cc-lan-kare-sm: 26px;
  --cc-lan-serit-boy: 30px;
  --cc-lan-ikon-xl: 34px;
  --cc-lan-marka-sm: 38px;
  --cc-lan-marka: 44px;
  --cc-lan-marka-lg: 46px;
  --cc-lan-gez-boy: 47px;
  --cc-lan-yuva: 50px;
  --cc-lan-dugme-boy: 52px;
  --cc-lan-ok-en: 60px;
  --cc-lan-altyazi-boy: 62px;
  --cc-lan-sutun-sm: 70px;
  --cc-lan-ust-boy: 76px;
  --cc-lan-cizim-sm: 80px;
  --cc-lan-sutun-md: 84px;
  --cc-lan-kamera-en: 86px;
  --cc-lan-sutun-lg: 90px;
  --cc-lan-sutun-xl: 92px;
  --cc-lan-kiv-en: 96px;
  --cc-lan-sutun-2xl: 100px;
  --cc-lan-cizim-md: 104px;
  --cc-lan-capa-kayma: 124px;
  --cc-lan-capa-ust: 130px;
  --cc-lan-alan-boy: 132px;
  --cc-lan-sutun-3xl: 144px;
  --cc-lan-sutun-4xl: 150px;
  --cc-lan-ekran-boy: 180px;
  --cc-lan-sutun-yan: 230px;
  --cc-lan-sutun-yan-lg: 270px;
  --cc-lan-panel-genis: 300px;
  --cc-lan-kure-max-sm: 380px;
  --cc-lan-nabiz-x: 400px;
  --cc-lan-kart-boy: 420px;
  --cc-lan-kart-boy-lg: 430px;
  --cc-lan-halka-md: 440px;
  --cc-lan-kure: 520px;
  --cc-lan-zemin-boy: 560px;
  --cc-lan-kure-max: 580px;
  --cc-lan-tel-boy: 608px;
  --cc-lan-halka-lg: 640px;
  --cc-lan-kure-lg: 760px;
  --cc-lan-sayfa-max: 1240px;

  /* --- Boşluk merdiveninin yeni adımları — §3.3'ün devamı --- */
  --cc-space-05: 2px;
  --cc-space-15: 6px;
  --cc-space-25: 10px;
  --cc-space-35: 14px;
  --cc-space-45: 18px;
  --cc-space-5: 20px;
  --cc-space-55: 22px;
  --cc-space-7: 28px;
  --cc-space-9: 36px;
  --cc-space-10: 40px;
  --cc-space-12: 48px;
  --cc-space-14: 56px;
  --cc-space-16: 64px;
  --cc-space-18: 72px;
  --cc-space-22: 88px;
  --cc-space-28: 112px;
  --cc-space-30: 120px;
  --cc-space-40: 160px;

  /* --- Köşe ve çizgi — yeni adımlar --- */
  --cc-radius-xxs: 2px;
  --cc-radius-2xs: 4px;
  --cc-radius-hero-xs: 20px;
  --cc-cizgi-kalin-3: 3px;

  /* --- Yazı — yeni adımlar ve açılış başlık ölçekleri --- */
  --cc-font-48: 48px;
  --cc-font-yari: .5em;
  --cc-lh-32: 32px;
  --cc-lh-40: 40px;
  --cc-lh-44: 44px;
  --cc-lh-56: 56px;
  --cc-lan-h1: clamp(34px, 4.4vw, 62px);
  --cc-lan-h2: clamp(30px, 3.4vw, 46px);
  --cc-lan-h3: clamp(22px, 2.2vw, 30px);
  --cc-lan-h4: clamp(21px, 2vw, 27px);
  --cc-lan-giris: clamp(16.5px, 1.3vw, 18.5px);
  --cc-lan-h2-lg: clamp(30px, 3.4vw, 50px);
  --cc-font-64: 64px;

  /* =======================================================================
     AÇILIŞ SAYFASI · TUR 1b (2026-09-21) — taslağın yeni sürümü
     (docs/tasarim/referans/landing/FARK-tur1b.md). Tur 1'in kuralları aynen:
     önce mevcut --cc-lan-* ve §1 token'ları; renk ΔE (CIELAB) ile katlandı —
     çok kullanımlı ≤3, tek kullanımlık ≤6. Katlananlar YENİ TOKEN AÇMADI:
       #012a4d → --cc-lan-navy-800 (ΔE 1.48)
       #9fb4c9 → --cc-lan-notr-300 (ΔE 4.62)
       #e0e7ef → --cc-hover-border (ΔE 0.72)
       #7f9ab4 → --cc-lan-notr-400 (ΔE 5.75)
       #8b9db1 → --cc-icon-disabled (ΔE 2.80)
       #9fb6cd → --cc-lan-notr-300 (ΔE 3.71)
       #e6ecf3 → --cc-icon-tile (ΔE 1.02)
       #eef1f6 → --cc-bg-muted (ΔE 1.03)
     ⛔ Gölge, gradyan ve clamp() yazı boyu BÜTÜN BEYAN TEK TOKEN (cırcır
        birleşik değeri "dağınık" sayar). `--cc-lan-m-*` = yalnız ≤640 px.
     ⛔ Ölçüler SNAP EDİLMEDİ: masaüstü "tek ekran" ölçütleri (A2) px hassas.
     ======================================================================= */

  /* --- Tur 1b · renk --- */
  --cc-lan-yesil-500: #35c46a;  /* canlı veri noktası; en yakın --cc-success ΔE 11,9 — katlanamadı */
  --cc-lan-lacivert-cam-45: rgba(0, 36, 66, .45);  /* mobil sonuç kutusundaki duraklat düğmesinin kenarı */
  --cc-lan-lacivert-cam-55: rgba(0, 36, 66, .55);  /* telefon maketindeki ayraç çizgisi */
  --cc-lan-celik-cam-10: rgba(109, 180, 242, .10);  /* iletişim ikon zemini (masaüstü) */
  --cc-lan-celik-200-cam-40: rgba(159, 208, 255, .40);  /* iletişim satırı alt çizgisi (masaüstü) */
  --cc-lan-ak-18: rgba(255, 255, 255, .18);  /* mobil sonuç kutusundaki duraklat düğmesi zemini */

  /* --- Tur 1b · gölge --- */
  --cc-lan-golge-cerceve: 0 0 0 1px #e0e7ef;  /* telefon maketi içindeki kart çerçevesi (4 kullanım) */
  --cc-lan-golge-cerceve-sicak: 0 0 0 1px #f6c9a5;  /* telefon maketinde uyarı sayacı çerçevesi */
  --cc-lan-golge-bildirim-acik: 0 16px 36px -10px rgba(0, 36, 66, .5), 0 0 0 1px #e0e7ef;  /* açık zemin telefon bildirimi */
  --cc-lan-golge-sekme: 0 2px 8px -3px rgba(0, 36, 66, .4);  /* mobil sahne seçiminde seçili sekme */
  --cc-lan-golge-secim-m: 0 4px 12px -6px rgba(0, 36, 66, .45);  /* mobil örnek seçiminde seçili düğme */
  --cc-lan-golge-cubuk-m: 0 10px 24px -18px rgba(0, 36, 66, .45);  /* mobil bölüm çubuğu */
  --cc-lan-golge-dil-m: 0 22px 40px -18px rgba(0, 36, 66, .45);  /* mobil dil listesi (Tur 3'e kadar basılmıyor) */
  --cc-lan-golge-menu-m: 0 28px 44px -22px rgba(0, 36, 66, .5);  /* mobil menü açıkken çubuk */
  --cc-lan-halka-canli: 0 0 0 3px rgba(53, 196, 106, .18);  /* canlı veri noktasının halkası */

  /* --- Tur 1b · gradyan --- */
  --cc-lan-telekran-acik: linear-gradient(180deg, #f8fafc, #edf1f6);  /* açık telefon ekranı */
  --cc-lan-telekran-parilti: linear-gradient(125deg, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 30%);  /* açık telefon ekranı cam parıltısı */
  --cc-lan-telkirp-perde: linear-gradient(180deg, rgba(0, 26, 51, 0), rgba(0, 26, 51, .78));  /* masaüstü telefon kırpmasının alt perdesi */

  /* --- Tur 1b · yazı --- */
  --cc-lan-h1-genis: clamp(34px, 3.6vw, 52px);  /* ≥641 px hero başlığı */
  --cc-lan-giris-sm: clamp(16px, 1.15vw, 17.5px);  /* ≥641 px hero alt yazısı */
  --cc-lan-h2-sm: clamp(28px, 2.6vw, 38px);  /* masaüstü iki sütunlu bölüm başlıkları */
  --cc-lan-h2-fx: clamp(30px, 2.5vw, 40px);  /* masaüstü FX100 başlığı */
  --cc-lan-m-h1: clamp(27px, 8.1vw, 33px);  /* mobil hero başlığı */
  --cc-lan-m-h1-tavan: 33px;  /* mobil hero başlığı üst sınırı */
  --cc-lan-m-h2: 27px;  /* mobil bölüm başlığı */
  --cc-lan-m-h2-sm: clamp(21px, 6.1vw, 24.5px);  /* mobil 'nedir' ve harita başlıkları */
  --cc-lan-m-h2-xs: clamp(19px, 5.7vw, 22.5px);  /* mobil 'biz kimiz' başlığı */
  --cc-lan-m-sayi: 25px;  /* mobil bakım kartı yıllık tutarı */

  /* --- Tur 1b · ölçü --- */
  --cc-lan-ok-ucu: 3.5px;  /* mini akış okunun ucu (border üçgeni) */
  --cc-lan-kose-hucre: 5px;  /* mobil makine/kasa hücresi köşesi */
  --cc-lan-m-tel-kose: 27px;  /* mobil telefon ekranı üst köşesi */
  --cc-lan-cubuk-alt: 125px;  /* masaüstü yapışkan üst çubuğun alt kenarı — oturma çizgisi (JS'teki H ile aynı) */
  --cc-lan-cik-baslik-en: 168px;  /* masaüstü ürün ağacı ayrıntı şeridinde başlık sütunu */
  --cc-lan-bagl-en: 470px;  /* masaüstü FX100 haberleşme satırı genişliği */
  --cc-lan-yazi-genis: 1040px;  /* masaüstü tam genişlik giriş yazısı */
  --cc-lan-m-hucre-sm: 29px;  /* mobil makine ızgarası, 40 makine */
  --cc-lan-m-hucre-md: 42px;  /* mobil makine ızgarası, 20 makine */
  --cc-lan-m-hucre-lg: 58px;  /* mobil makine ızgarası, 10 makine */
  --cc-lan-m-dokunma: 42px;  /* mobil dil listesi ve duraklat düğmesi dokunma yüksekliği */
  --cc-lan-m-kaydir-pay: 58px;  /* mobil sektör şeridinin sağ payı (kaydırma oku) */
  --cc-lan-m-secim-boy: 37px;  /* mobil 'siz hangisisiniz' düğmesi */
  --cc-lan-m-sayac-boy: 54px;  /* mobil canlı sayaç satırı */
  --cc-lan-m-satir-boy: 66px;  /* mobil sabit satır yüksekliği (ölçüm kutusu, anlatıcı, aksiyon satırı) */
  --cc-lan-m-sonuc-boy: 74px;  /* mobil sonuç kutusu */
  --cc-lan-kasa-lg: 74px;  /* istasyon kasası, az istasyonlu ızgara */
  --cc-lan-m-eylem-boy: 78px;  /* mobil aksiyon satırı */
  --cc-lan-m-eylem-sutun: 82px;  /* mobil aksiyon satırının sağ sütunu */
  --cc-lan-m-metin-boy: 82px;  /* mobil iletişim metin alanı */
  --cc-lan-m-kure-boy: 168px;  /* mobil küre sahnesi */
  --cc-lan-m-cik-boy: 172px;  /* mobil ürün ağacı çıktı kartı */
  --cc-lan-m-panel-boy: 178px;  /* mobil depo paneli ve telefon maketi */
  --cc-lan-m-ist-boy: 190px;  /* mobil istasyon ızgarası (sekmeli) */
  --cc-lan-m-derman-sm: 194px;  /* mobil 'CostChief ile' kutusu */
  --cc-lan-m-tel-boy: 196px;  /* mobil telefon maketi */
  --cc-lan-m-dert-sm: 204px;  /* mobil 'bugün' kutusu (varsayılan) */
  --cc-lan-m-istler-boy: 206px;  /* mobil istasyon ızgarası */
  --cc-lan-m-dert-boy: 214px;  /* mobil 'bugün' kutusu alt sınırı */
  --cc-lan-m-dert-md: 222px;  /* mobil 'bugün' kutusu; 'CostChief ile' varsayılanı */
  --cc-lan-m-derman-boy: 226px;  /* mobil 'CostChief ile' kutusu alt sınırı */
  --cc-lan-m-derman-lg: 232px;  /* dar mobil (≤380) 'CostChief ile' kutusu */
  --cc-lan-m-tel-en: 330px;  /* mobil telefon maketi genişliği */
  --cc-lan-m-kure: 350px;  /* mobil küre */
  --cc-lan-m-bakim-boy: 470px;  /* mobil bakım kartı alt sınırı */
  --cc-lan-m-bakim-tam: 548px;  /* mobil bakım kartı */
  --cc-lan-m-recete-boy: 530px;  /* mobil reçete kartı alt sınırı */

  /* =======================================================================
     GİRİŞ / ÜYELİK KABUĞU — `--cc-giris-*` (accounts/base_auth.html ·
     static/css/cc_giris.css). Kaynak: docs/tasarim/referans/landing/
     costchief-giris-taslak.html.
     ⛔ ÖNCE `--cc-lan-*` KULLANILDI; yalnız karşılığı OLMAYAN değerler burada.
     Tur 4b (2026-09-21 gece): taslağın yeni sürümü. Renkler ΔE ile katlandı
     (çok kullanımlı ≤3, tek kullanımlık ≤6); başarı/hata PROJE STANDARDI
     (`--cc-success*` · `--cc-danger-text`, §16.1). Katlanamayanlar aşağıda.
     Tur 4'ün halka SVG'si kalktı → `--cc-giris-halka*` ve `--cc-giris-dugme`
     silindi (kullanan kural yok, ölçüldü).
     ======================================================================= */
  --cc-giris-h1: clamp(30px, 2.5vw, 40px);
  --cc-giris-adim: 34px;
  --cc-giris-form-max: 440px;
  --cc-giris-kontrol: 52px;
  --cc-giris-tel-kod: 96px;

  /* --- Tur 4b · ölçü --- */
  --cc-giris-logo: 42px;          /* sol panel logo karesi */
  --cc-giris-marka-yazi: 19px;    /* "CostChief" marka yazısı (taslak birebir) */
  --cc-giris-anlat-max: 500px;    /* sol panel anlatı genişliği */
  --cc-giris-form-genis: 640px;   /* üyelik: iki sütunlu form */
  --cc-giris-damla: 7px;          /* canlı paneldeki akış damlası */
  --cc-giris-m-baslik: 23px;      /* mobil form başlığı */
  --cc-giris-isik-boyut: 620px;   /* sol panel sağ alt ışık */
  --cc-giris-isik-x: 260px;       /* ışığın sağdan taşması */
  --cc-giris-isik-y: 280px;       /* ışığın alttan taşması */

  /* --- Tur 4b · renk (katlanamayanlar) --- */
  --cc-giris-kenar-hover: #9db0c6;       /* alan/onay kutusu hover kenarı — en yakın --cc-lan-notr-400 ΔE 4,56, 4 kullanım */
  --cc-giris-davet-kenar: #f6c9a4;       /* davet satırı kenarı — en yakın --cc-lan-sicak-300 ΔE 6,58 */
  --cc-giris-canli-nokta: #3ddc84;       /* "canlı" noktası — en yakın --cc-lan-yesil-500 ΔE 8,99 */
  --cc-giris-canli-perde: rgba(0, 26, 51, .45);
  --cc-giris-celik-cam-25: rgba(109, 180, 242, .25);
  --cc-giris-celik-cam-40: rgba(109, 180, 242, .40);
  --cc-giris-celik-cam-45: rgba(109, 180, 242, .45);

  /* --- Tur 4b · gölge ve gradyan (bütün beyan TEK token) --- */
  --cc-giris-isik: radial-gradient(closest-side, rgba(61, 143, 214, .28), transparent);
  --cc-giris-canli-zemin: linear-gradient(180deg, rgba(14, 58, 99, .7), rgba(6, 36, 64, .7));
  --cc-giris-golge-sekme: 0 6px 18px -10px rgba(0, 36, 66, .45);
  --cc-giris-golge-dugme: 0 14px 30px -16px rgba(241, 109, 10, .9);
  --cc-giris-kural-ic: inset 0 0 0 2.5px var(--cc-success-bg);
  --cc-giris-nabiz-0: 0 0 0 0 rgba(61, 220, 132, .6);
  --cc-giris-nabiz-1: 0 0 0 8px rgba(61, 220, 132, 0);
  --cc-giris-nabiz-2: 0 0 0 0 rgba(61, 220, 132, 0);
}

/* §4.4 — hareket azaltma tercihinde geçişler anlık, döngüler durur. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cc-dur-fast: 0ms;
    --cc-dur-base: 0ms;
    --cc-dur-slow: 0ms;
    --cc-dur-light: 0ms;
    --cc-dur-enter: 0ms;
    --cc-dur-glint: 0ms;
    --cc-ambient-state: paused;
  }
}

/* §9 — Tabler ikonu (sprite: static/icons/cc-ikonlar.svg). Çizgi nitelikleri
   sprite'ta değil burada; kalınlık duruma göre değişir (hazır 1,75 · aktif 2). */
.cc-ikon {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--cc-ikon-cizgi, 1.75);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}

/* §2.1 — gövde fontu. AdminLTE "Source Sans Pro" istiyor ve o font hiçbir
   yerden yüklenmiyordu; metin kullanıcının sistem fontuna düşüyordu. */
body,
.tooltip,
.popover {
  font-family: var(--cc-family-body);
}