/* Sense Proje Takip · tasarım jetonları · ayrışan sistem (21 Eki 2026; 17 Eki "sade sistem"in yerini aldı)
   Sabit renk yalnızca bu dosyada yazılır; diğer her yer var(--...) kullanır. Metin/zemin çiftleri WCAG AA (4,5:1) üstünde.
   Katman: zemin › yüzey (kart, panel) › yüzey-2 (panel içindeki kart, rozet) › yüzey-3 (üzerine gelme, gri hap); kart çerçevesi görünür.
   Renk her biri tek anlam: mor = marka ve etkileşim (düğme, bağlantı, seçili; yalnızca tıklanır öğe) · çivit dolgu = Onaylandı · yeşil = rahat ve bitti (risk yeşil,
   Tamamlandı, Start verildi) · sarı = dikkat (risk sarı, Onay bekliyor) · turuncu = yaklaşıyor (risk turuncu) · kırmızı = acil ve hata
   (risk kırmızı, geciken, hata) · mavi = süren iş (Devam ediyor) · gri-mavi = teklif/sunum süreci. Soluk tonlar, neon yok; her rengin koyu
   (açıkta açık) zemin tonu var. Renk tek başına anlam taşımaz: yanında hep yazı ("5 hafta", "Onay bekliyor").
   Gradyan, parlama, halka gölge, animasyon yok; tek gölge diyalogda (--golge-diyalog). Geçiş yalnızca etkileşimde (160 ms).
   Yazı: 6 boyut (12 / 13 / 15 / 17 / 22 / 30 px), 3 ağırlık (400 / 500 / 600). Köşe: kart 16, kontrol 10, hap ve sayaç 999.
   Eski jeton adları (--yazi-s, --kalin, --kose-m, --basari, --risk-sari …) geriye uyumludur.
   Tema: varsayılan koyu (sistem açık olsa da); açık yalnızca <html data-tema="acik"> ile. */

:root {
  color-scheme: dark;

  /* Katmanlar: zemin › yüzey (kart, panel) › yüzey-2 (panel içi kart, rozet) › yüzey-3 (üzerine gelme, gri hap) */
  --zemin: #0c0c0f;
  --yuzey: #17171c;
  --yuzey-2: #212128;
  --yuzey-3: #2b2b33;
  --yuzey-ic: var(--yuzey-2);   /* panelin içindeki kart (proje kartı, görev kartı) */
  /* Çizgi: kart çerçevesi (görünür) › bir ton açık (üzerine gelme, panel içi kart) › form alanı çerçevesi (3:1) */
  --cizgi: #2f2f38;
  --cizgi-2: #40404b;
  --cizgi-guclu: #6e6e7a;
  /* Metin: birincil › ikincil (etiket) › üçüncül (yalnızca metin dışı işaret ve üstü çizili çizgisi; gövde metninde AA altı) */
  --metin: #f4f4f7;
  --metin-2: #a6a6b2;
  --metin-3: #7c7c88;

  /* Anlam paleti: metin/işaret rengi + koyu zemin tonu (hap, satır zemini) */
  --yesil: #4cc38a;
  --yesil-zemin: #13261d;
  --sari: #e8c547;
  --sari-zemin: #29240f;
  --turuncu: #f0904a;
  --turuncu-zemin: #2c1c10;
  --kirmizi: #ef5f67;
  --kirmizi-zemin: #2e1416;
  --kirmizi-cizgi: #5a2a2e;     /* kırmızı riskli kartın hafif kırmızı çerçevesi, geciken satırın çizgisi */
  --mavi: #64a8f0;
  --mavi-zemin: #12202f;
  --teklif: #a3b6d6;            /* gri-mavi: teklif ve sunum süreci (belirgin ton, zemini yüzeyden ayrışır) */
  --teklif-zemin: #1f2a3b;
  --civit: #2f4f8a;             /* çivit (lacivert) dolgu: yalnızca Onaylandı süreç hapı; üstünde --civit-yazi */
  --civit-yazi: #f1f4fb;

  /* Marka vurgusu (Sense lacivert-mor): etkileşim (birincil düğme, bağlantı, seçili sekme/gezinme, odak) ve Onaylandı grubu.
     --vurgu metin/çizgi/odak, --vurgu-dolgu birincil düğme zemini, --vurgu-yazi onun yazısı, --vurgu-zemin mor zemin tonu */
  --vurgu: #a89cff;
  --vurgu-dolgu: #5b4bd8;
  --vurgu-yazi: var(--metin);
  --vurgu-zemin: #1e1a33;

  /* Görev durumları (dolu hap): metin rengi + zemin tonu. Anahtarlar: baslanmadi · devam · onay_bekliyor · tamamlandi */
  --durum-baslanmadi: var(--metin-2);
  --durum-baslanmadi-zemin: var(--yuzey-3);
  --durum-devam: var(--mavi);
  --durum-devam-zemin: var(--mavi-zemin);
  --durum-onay-bekliyor: var(--sari);
  --durum-onay-bekliyor-zemin: var(--sari-zemin);
  --durum-tamamlandi: var(--yesil);
  --durum-tamamlandi-zemin: var(--yesil-zemin);

  /* Risk: yeşil (>3 ay) · sarı (1-3 ay) · turuncu (2 hafta - 1 ay) · kırmızı (<2 hafta); rozet, ilerleme dolgusu, satır işareti */
  --risk-yesil: var(--yesil);
  --risk-sari: var(--sari);
  --risk-turuncu: var(--turuncu);
  --risk-kirmizi: var(--kirmizi);
  --risk-yesil-metin: var(--yesil);
  --risk-sari-metin: var(--sari);
  --risk-turuncu-metin: var(--turuncu);
  --risk-kirmizi-metin: var(--kirmizi);
  --risk-yesil-zemin: var(--yesil-zemin);
  --risk-sari-zemin: var(--sari-zemin);
  --risk-turuncu-zemin: var(--turuncu-zemin);
  --risk-kirmizi-zemin: var(--kirmizi-zemin);
  --risk-kirmizi-cerceve: var(--kirmizi-cizgi);
  /* Liste: geciken görev satırı (kırmızımsı zemin + çizgi) */
  --geciken-zemin: #221518;
  --geciken-cizgi: var(--kirmizi-cizgi);

  /* Süreç grupları (renkli hap başlık; kartlar boyanmaz): sunum gri, teklif gri-mavi, Onaylandı çivit dolgu + açık yazı (tek dolu hap;
     mor yalnızca tıklanır öğede), Start verildi yeşil, Arşiv yalnızca çerçeve + soluk yazı */
  --surec-teklif: var(--teklif);
  --surec-teklif-zemin: var(--teklif-zemin);
  --surec-sunum: var(--metin-2);      /* Sunum: nötr gri hap (Teklif gri-mavi dolguyla ayrışır; aynı aile, bir adım geride) */
  --surec-sunum-zemin: var(--yuzey-3);
  --surec-onay: var(--civit-yazi);
  --surec-onay-zemin: var(--civit);
  --surec-start: var(--yesil);
  --surec-start-zemin: var(--yesil-zemin);
  --surec-arsiv: var(--metin-2);
  --surec-arsiv-zemin: transparent;
  --surec-arsiv-cizgi: var(--cizgi-2);

  /* Proje kimliği (28 Eki 2026): yalnızca proje hapında ([data-proje-renk="1..5"], Benim panelim › Tüm görevlerim). Anlam taşımaz,
     yalnızca projeleri birbirinden ayırır; risk/durum/süreç tonlarıyla karışmasın diye camgöbeği, pembe, bronz, zeytin, orkide.
     Yazı + soluk zemin çifti; proje adı hep yazılı. */
  --proje-1: #4fc1c9;
  --proje-1-zemin: #10282a;
  --proje-2: #e88cc4;
  --proje-2-zemin: #2e1726;
  --proje-3: #cfa27a;
  --proje-3-zemin: #2a1f15;
  --proje-4: #b4c46a;
  --proje-4-zemin: #22270f;
  --proje-5: #d79be6;
  --proje-5-zemin: #28172d;

  /* Anlam jetonları: başarı yeşil, uyarı sarı, hata kırmızı */
  --vurgu-gradyan: var(--vurgu); /* artık düz renk: gradyan yok */
  --basari: var(--yesil);
  --basari-zemin: var(--yesil-zemin);
  --uyari: var(--sari);
  --uyari-zemin: var(--sari-zemin);
  --hata: var(--kirmizi);
  --hata-zemin: var(--kirmizi-zemin);
  --dugme-ana: var(--vurgu-dolgu);
  --dugme-ana-yazi: var(--vurgu-yazi);
  --odak: var(--vurgu);

  /* Gölge: yalnızca diyalog. --golge-1/--golge-2 geriye uyumlu, gölge vermez */
  --golge-1: none;
  --golge-2: none;
  --golge-diyalog: 0 24px 64px rgba(0, 0, 0, 0.6);
  --perde: rgba(0, 0, 0, 0.6);

  /* Yazı: Poppins (400/500/600), yoksa sistem yazısı (SF / Segoe) */
  --yazi-aile: "Poppins", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --yazi-aile-baslik: "Poppins", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --yazi-mini: 0.75rem;     /* 12 px: etiket (büyük harf + harf aralığı), hap */
  --yazi-kucuk: 0.8125rem;  /* 13 px: ikincil bilgi, rozet */
  --yazi-govde: 0.9375rem;  /* 15 px: gövde, düğme, sekme, panel başlığı */
  --yazi-orta: 1.0625rem;   /* 17 px: kart başlığı, metin değer */
  --yazi-baslik: 1.375rem;  /* 22 px: sayfa başlığı (proje adı) */
  --yazi-buyuk: 1.875rem;   /* 30 px: üst özet sayıları (KPI), giriş başlığı */
  --agirlik-normal: 400;
  --agirlik-orta: 500;
  --agirlik-kalin: 600;
  --agirlik-baslik: var(--agirlik-kalin); /* başlık ve değer; müşteri sayfası 500'e indirir (musteri.css) */
  --harf-baslik: -0.01em;
  --harf-buyuk: -0.02em;
  --harf-etiket: 0.06em;    /* büyük harfli küçük etiket */
  --satir: 1.5;
  --satir-sik: 1.25;
  /* Geriye uyumlu adlar (en yakın ölçek değerine) */
  --yazi-xs: var(--yazi-kucuk);
  --yazi-s: var(--yazi-kucuk);
  --yazi-m: var(--yazi-govde);
  --yazi-l: var(--yazi-orta);
  --yazi-xl: var(--yazi-baslik);
  --yazi-2xl: var(--yazi-buyuk);
  --yazi-3xl: var(--yazi-buyuk);
  --kalin: var(--agirlik-kalin);
  --cok-kalin: var(--agirlik-kalin);
  --ince: var(--agirlik-normal);

  /* Aralık */
  --a-1: 4px;
  --a-2: 8px;
  --a-3: 12px;
  --a-4: 16px;
  --a-5: 24px;
  --a-6: 32px;
  --a-7: 48px;
  --a-8: 64px;
  --dokunma: 44px;            /* dokunmatik ve <600 px'te her etkileşim hedefinin en küçük boyu (bilesenler.css sonu) */

  /* Köşe: kart 16, kontrol 10 (düğme, alan, rozet, etiket), tam yuvarlak hap, sayaç ve nokta */
  --kose-kart: 16px;
  --kose-kontrol: 10px;
  --kose-tam: 999px;
  --kose-s: var(--kose-kontrol);
  --kose-m: var(--kose-kontrol);
  --kose-l: var(--kose-kart);

  /* Tam ekran uygulama kabuğu (bilesenler.css .k-*): ince ikon rayı + tam genişlik içerik; ortalanmış dar sayfa yok */
  --ray-genislik: 64px;
  --yazi-ray: 0.6875rem;      /* 11 px: YALNIZCA ray (.k-ray) ikon yazıları ve sayıları; başka yerde kullanılmaz */
  --pano-bosluk: clamp(12px, 0.8vw, 16px);
  --izgara-en-dar: 280px;     /* .k-izgara kartı: 1920'de 5-6, 1440'ta 4 sütun */
  --metin-genislik: 70ch;     /* .k-metin: uzun paragraf */
  --ilerleme-kalin: 5px;      /* proje kartındaki ilerleme çubuğu */
  /* Eski (kaldırılacak): ortalanmış sayfa genişliği ve ana sayfa kart genişliği; sayfalar .k-kabuk'a geçince silinir */
  --sayfa-genislik: 1440px;
  --kart-en-dar: 300px;

  /* Logo (public/ortak/marka/sense-logo.png, beyaz/şeffaf): koyu temada olduğu gibi, açıkta ters çevrilir */
  --logo-ust: 28px;
  --logo-giris: 40px;
  --logo-filtre: none;

  /* Müşteri sayfası tasarımcısı (28 Eki 2026, docs/referans/tasarimci-prototip.html; yalnızca /p/<id>/tasarim düzenleyici yüzeyi):
     seçim çerçevesi ve tutamaç (mor, vurgu ailesi), veri öğesi çerçevesi, ölçek notu çizgisi; tuval çevresi, cetvel, hizalama
     kılavuzu (pembe), referans çizgisi (camgöbeği), ızgara, önizleme ve telefon çerçevesi. Müşterinin tasarım renkleri burada değil, belgede. */
  --vurgu-secim: #7c6cff;
  --vurgu-secim-soluk: rgba(124, 108, 255, 0.6);
  --vurgu-cizgi: #3a3266;
  --vurgu-veri-cizgi: #2b2550;
  --td-alan: #08080a;
  --td-serit: #0e0e12;
  --td-cetvel: #141418;
  --td-cetvel-cizgi: #4a4a55;
  --td-cetvel-yazi: #7c7c89;
  --td-kilavuz: #ff4fa3;
  --td-rehber: #22d3ee;
  --td-tutamac: #ffffff;
  --td-secim-yazi: #ffffff;
  --td-izgara: rgba(255, 255, 255, 0.07);
  --td-onizleme: #050507;
  --td-onizleme-ust: #101014;
  --td-telefon: #1b1b20;
  --td-telefon-cizgi: #33333b;
  --td-tel-dugme: rgba(20, 20, 26, 0.85);
  --td-sil-zemin: rgba(12, 12, 15, 0.8);
  --td-golge-sayfa: 0 0 0 1px var(--cizgi-2), 0 30px 80px rgba(0, 0, 0, 0.5);
  --td-golge-acilir: 0 18px 50px rgba(0, 0, 0, 0.5);
  --td-golge-cekmece: -24px 0 64px rgba(0, 0, 0, 0.45);
  --td-golge-telefon: 0 0 0 1px var(--td-telefon-cizgi), 0 30px 80px rgba(0, 0, 0, 0.6);

  /* Geçiş: yalnızca etkileşimde, renk / opaklık / transform */
  --gecis: 160ms;
  --gecis-soluk: 180ms;       /* görev tamamlanınca satırın yumuşak soluklaşması (Benim panelim) */
  --gecis-egri: cubic-bezier(0.2, 0, 0, 1);
}

/* Açık tema: yalnızca elle seçilince (<html data-tema="acik">); sistem teması izlenmez.
   Üç katman: açık gri zemin › beyaz yüzey › açık gri yüzey-2. Anlam renkleri beyaz üstünde AA için koyulaşır, zemin tonları açık. */
[data-tema="acik"] {
  color-scheme: light;
  --zemin: #f3f3f6;
  --yuzey: #ffffff;
  --yuzey-2: #ececf1;
  --yuzey-3: #e2e2e8;
  --yuzey-ic: #f8f8fa;
  --cizgi: #dcdce3;
  --cizgi-2: #c4c4ce;
  --cizgi-guclu: #8a8a96;
  --metin: #16161a;
  --metin-2: #5c5c66;
  --metin-3: #8a8a94;
  --yesil: #17703f;
  --yesil-zemin: #e1f3e8;
  --sari: #835600;
  --sari-zemin: #fbefcf;
  --turuncu: #a1470b;
  --turuncu-zemin: #fde7d7;
  --kirmizi: #c2001a;
  --kirmizi-zemin: #fde6e7;
  --kirmizi-cizgi: #f0b8bc;
  --mavi: #1a62ad;
  --mavi-zemin: #e2edf9;
  --teklif: #3d5276;
  --teklif-zemin: #dce4f0;
  --civit: #26437a;
  --civit-yazi: #ffffff;
  --vurgu: #4b3fc4;
  --vurgu-dolgu: #4b3fc4;
  --vurgu-yazi: var(--yuzey);
  --vurgu-zemin: #ecebfb;
  --geciken-zemin: #fdf2f2;
  --proje-1: #0b6b72;
  --proje-1-zemin: #dcf1f2;
  --proje-2: #a3236e;
  --proje-2-zemin: #f9e2ef;
  --proje-3: #7d5129;
  --proje-3-zemin: #f3e8dc;
  --proje-4: #59650f;
  --proje-4-zemin: #edf0d6;
  --proje-5: #7f2e9a;
  --proje-5-zemin: #f3e4f7;
  --golge-diyalog: 0 24px 64px rgba(0, 0, 0, 0.14);
  --perde: rgba(0, 0, 0, 0.28);
  --logo-filtre: invert(1);
  --vurgu-secim: #5b4bd8;
  --vurgu-secim-soluk: rgba(91, 75, 216, 0.55);
  --vurgu-cizgi: #c9c2f2;
  --vurgu-veri-cizgi: #cfc9f5;
  --td-alan: #dcdce3;
  --td-serit: #e8e8ed;
  --td-cetvel: #f8f8fa;
  --td-cetvel-cizgi: #a8a8b4;
  --td-cetvel-yazi: #6a6a76;
  --td-kilavuz: #d6247a;
  --td-rehber: #0e9aa7;
  --td-izgara: rgba(0, 0, 0, 0.08);
  --td-onizleme: #e2e2e8;
  --td-onizleme-ust: #ffffff;
  --td-golge-sayfa: 0 0 0 1px var(--cizgi-2), 0 30px 80px rgba(0, 0, 0, 0.15);
  --td-golge-acilir: 0 18px 50px rgba(0, 0, 0, 0.14);
  --td-golge-cekmece: -24px 0 64px rgba(0, 0, 0, 0.12);
  --td-golge-telefon: 0 0 0 1px var(--td-telefon-cizgi), 0 30px 80px rgba(0, 0, 0, 0.2);
}

/* Temel */
*, *::before, *::after { box-sizing: border-box; }
/* hidden özniteliği her zaman gizler (bileşenin display değeri onu ezmesin; ör. çalışanda "Yeni proje") */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi-aile);
  font-size: var(--yazi-govde);
  font-weight: var(--agirlik-normal);
  line-height: var(--satir);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { font-family: var(--yazi-aile-baslik); line-height: var(--satir-sik); font-weight: var(--agirlik-baslik); letter-spacing: var(--harf-baslik); margin: 0; }
b, strong { font-weight: var(--agirlik-baslik); }
th { font-weight: var(--agirlik-orta); }
a { color: var(--metin); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Sınıfsız metin bağlantısı marka vurgusunda; sınıflı bağlantılar (kart başlığı, gezinme) kendi rengini taşır */
a:not([class]) { color: var(--vurgu); }
:focus-visible { outline: 2px solid var(--odak); outline-offset: 2px; }
img, svg { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  :root { --gecis: 0ms; }
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}