/* panel404 — design tokens (premium admin theme v5, light + dark)
─────────────────────────────────────────────────────────────────
ALIAS SÖZLEŞMESİ: view/komponent CSS'i renkleri her zaman alias
token'lardan (--bg-*, --text*, --border*, --field-*, --glass-*,
--chart-*, --c-*) veya primitif skalalardan (--gray-*, --blue-*,
--green/amber/red-*) tüketir. Dark tema [data-theme="dark"] bloğu
hem alias'ları hem primitifleri override eder; yeni kod HARD-CODED
HEX KULLANMAMALI, yoksa temadan kopar.
`.theme-light` sınıfı bir alt ağacı her temada aydınlık tutar
(ör. fatura kâğıdı).
── RUNTIME'DA JS OKUYOR — AD VE FORMAT DEĞİŞTİRİLEMEZ ──
--c-brand/green/red/amber/muted/violet/teal/pink
charts.js seriesColor() + PHP spark_color(). ALTI HANELİ HEX
kalmalı: charts.js'in renk probu hex hızlı yolunu kullanıyor,
PHP tarafı da bu değerleri style="" içine basıyor.
--chart-grid/tick/border/empty charts.js chrome.
--bg-page theme.js metaColor() → .
--mx / --my enhance.js kart spot ışığını buraya yazar.
v5 NOTU — renkler yine değişmedi, YAPI ve MALZEME değişti:
hue'lar (mavi/yeşil/amber/kırmızı/nötr rampa) v3'ten beri birebir
aynı. v4 malzemeyi getirdi (gölge merdiveni, iç kenar hairline'ları,
grain, tipografi mekaniği). v5 bunun üstüne KABUK GEOMETRİSİ
(yüzen ray + cam ada), SEMANTİK RADIUS katmanı, BİLEŞİK YÜKSEKLİK
token'ları ve kart spot ışığını ekliyor. Ayrıca komponent
dosyalarında dağınık duran ~30 hard-coded hex (avatar paleti, not
kâğıtları, huni) buraya taşındı — artık tek yerden temalanıyor. */
@font-face {
font-family: 'Inter';
src: url('../../vendor/fonts/inter/InterVariable.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* ── Kayıtlı özel özellikler ──────────────────────────────────────
Kayıt olmadan bu değerler interpolasyona girmez: --spot geçişi
çalışmaz, --mx/--my ise başlangıç değeri taşımaz. Kayıt aynı
zamanda bir güvenlik ağı — @property desteklenmiyorsa değerler
"guaranteed-invalid" olur ve spot gradyanı komple düşer (kart düz
yüzeye döner), bozuk render yerine temiz bir geri çekilme. */
@property --angle { syntax: ''; initial-value: 0deg; inherits: false; }
@property --mx { syntax: ''; initial-value: 50%; inherits: false; }
@property --my { syntax: ''; initial-value: -30%; inherits: false; }
@property --spot { syntax: ''; initial-value: 0; inherits: false; }
:root, .theme-light {
color-scheme: light;
/* Brand blue scale (#157EFB) */
--blue-50: #EFF6FF;
--blue-100: #DBEAFE;
--blue-200: #BFDBFE;
--blue-300: #93C5FD;
--blue-400: #4B9BFD;
--blue-500: #157EFB;
--blue-600: #0B67DE;
--blue-700: #0A52B0;
--blue-800: #0D4489;
--blue-900: #10386B;
--blue-950: #0B2447;
/* Sidebar — derin indigo-lacivert (iki temada da koyu kalır) */
--nav-bg-top: #1C2440;
--nav-bg-bot: #141A30;
--nav-active-glow: 0 6px 18px -4px rgba(21,126,251,.5);
--nav-text: #A8B2CC;
--nav-text-hover: #E8ECF6;
--nav-label: #828FB4; /* v3 #5C6784 → sidebar uzerinde 2.7:1 idi, okunmuyordu */
--nav-border: rgba(255,255,255,.07);
/* v4: kabuk malzemesi */
--nav-glass: rgba(255,255,255,.045); /* hover pill dolgusu */
--nav-edge: rgba(255,255,255,.09); /* pill iç üst hairline */
--nav-sheen: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 180px);
/* Neutrals (cool slate) */
--white: #FFFFFF;
--gray-50: #F6F8FB; /* uygulama arka plani */
--gray-100: #F1F4F9;
--gray-150: #EAEEF4;
--gray-200: #E3E8F0;
--gray-250: #EDF1F6; /* hairline kart kenari */
--gray-300: #CBD3E1;
--gray-400: #94A0B4;
--gray-500: #667085;
--gray-600: #4A5568;
--gray-700: #344054;
--gray-800: #1D2739;
--gray-900: #101828;
/* Semantic */
--green-50: #ECFDF3; --green-100: #D1FADF; --green-500: #12B76A; --green-600: #039855; --green-700: #027A48;
--amber-50: #FFFAEB; --amber-100: #FEF0C7; --amber-500: #F79009; --amber-600: #DC6803; --amber-700: #B54708;
--red-50: #FEF3F2; --red-100: #FEE4E2; --red-500: #F04438; --red-600: #D92D20; --red-700: #B42318;
/* Aliases — yüzeyler & metin
NOT: --bg-page bilerek --gray-50'den (#F6F8FB) daha DERIN. v3'te zemin ile
beyaz kart arasinda neredeyse fark yoktu, her sey duz goruunuyordu; kartin
"yuzmesi" icin zeminin belirgin sekilde koyu olmasi sart. */
--bg-page: #F4F7FC;
--bg-surface: var(--white);
--bg-elevated: #FFFFFF; /* dropdown/modal/toast */
--bg-inset: #F1F4F9; /* th, kanban kolonu, skeleton */
--row-hover: #F3F8FF;
--border: #E2E8F1;
--border-strong: #D5DEEB;
--field-bg: #FFFFFF;
--field-border: #CBD3E1;
--text: var(--gray-700);
--text-heading: var(--gray-900);
--text-muted: var(--gray-500);
/* Ucuncul metin (ipucu, zaman damgasi, alt satir). v3'te --gray-400 kullaniliyordu
ama acik temada beyaz uzerinde 2.6:1 kaliyordu — okunmuyordu. --gray-400 artik
yalniz DEKORATIF kullanimda (ikon, placeholder, chevron, ustu cizili metin). */
--text-subtle: #6E7A90;
--primary: var(--blue-500);
--primary-hover: var(--blue-600);
--highlight: rgba(255,255,255,.65); /* kart üst iç kenar parlaması */
/* Cam (glass) yüzeyler — katman merdiveni, yükseldikçe daha opak/doygun.
v5.1: dropdown ve modal katmanları belirgin şekilde OPAKLAŞTIRILDI.
Önceki değerler (.82/.90) renkli bir yüzeyin — özellikle mavi
gradyan hero'nun — üstünde açıldığında menü metnini okunmaz hale
getiriyordu. Blur ve doygunluk da artırıldı: cam etkisi kaybolmasın,
tersine daha belirgin olsun. Topbar (--glass-1) daha saydam kalıyor,
çünkü o sayfa zemininin üstünde duruyor, içeriğin değil. */
--glass-1: rgba(255,255,255,.72); /* topbar adası */
--glass-2: rgba(255,255,255,.93); /* dropdown / toast / tooltip */
--glass-3: rgba(255,255,255,.96); /* modal / cmdk / login */
--blur-1: blur(20px) saturate(1.7);
--blur-2: blur(26px) saturate(1.9);
--blur-3: blur(30px) saturate(1.9);
--glass-bg: var(--glass-1); /* v3 adı — geriye dönük alias */
--glass-border: rgba(13,38,76,.12);
--backdrop: rgba(9,20,38,.55);
/* ── v4: İÇ KENARLAR (box-shadow parçaları olarak kullanılır) ──
Kullanım: box-shadow: var(--shadow-sm), var(--edge-top); */
--edge-top: inset 0 1px 0 var(--highlight);
--edge-ring: inset 0 0 0 1px rgba(13,38,76,.035);
--edge-inset: inset 0 1px 2px rgba(13,38,76,.05); /* form alanı oyuğu */
/* v5: koyu ray yüzeyinin iç kenarı — açık hairline taşır, gölge değil */
--edge-rail: inset 0 1px 0 rgba(255,255,255,.09),
inset 0 0 0 1px rgba(255,255,255,.05);
/* Gradyanlar */
--accent-grad: linear-gradient(135deg, #4B9BFD 0%, #2E8BFF 20%, #157EFB 58%, #0B67DE 100%);
--hero-grad: linear-gradient(140deg, #4B9BFD 0%, #2E8BFF 16%, #157EFB 46%, #0B4FBE 100%);
--progress-grad: linear-gradient(90deg, #4B9BFD, #2E8BFF 40%, #157EFB);
--border-grad: linear-gradient(135deg, rgba(21,126,251,.45), rgba(21,126,251,.06) 38%, rgba(21,126,251,.06) 62%, rgba(11,103,222,.35));
--page-glow: radial-gradient(1200px 560px at 82% -14%, rgba(21,126,251,.16), transparent 62%),
radial-gradient(900px 460px at -6% 106%, rgba(11,103,222,.12), transparent 58%);
/* v4: yüzey ışığı */
--surface-sheen: linear-gradient(180deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,0) 92px);
--sheen-grad: linear-gradient(105deg, transparent 24%, rgba(255,255,255,.14) 44%,
rgba(255,255,255,.30) 50%, rgba(255,255,255,.14) 56%, transparent 76%);
--hairline: linear-gradient(90deg, transparent, var(--border) 8%, var(--border) 92%, transparent);
--mesh-grad: radial-gradient(900px 620px at 12% 8%, rgba(78,155,253,.55), transparent 62%),
radial-gradient(760px 560px at 88% 22%, rgba(11,103,222,.55), transparent 58%),
radial-gradient(680px 680px at 42% 96%, rgba(13,68,137,.60), transparent 60%),
linear-gradient(155deg, #10386B 0%, #0B2447 100%);
/* v5: kart üst gradyan çizgisi — 2px, uçları sönümlenir */
--rule-grad: linear-gradient(90deg, transparent,
color-mix(in srgb, var(--primary) 55%, transparent) 16%,
var(--blue-400) 50%,
color-mix(in srgb, var(--primary) 55%, transparent) 84%, transparent);
/* v5: "tamamlandı" dolgusu — .gauge-big__fill ve .progress__fill--done ortak */
--success-grad: linear-gradient(90deg, #34D399, #22C55E);
/* v4: film dokusu — body::before ve hero yüzeylerde ek katman.
Yeni DOM elemanı yok, tek background-image katmanı. */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.018'/%3E%3C/svg%3E");
/* ── Chart chrome + seri paleti ───────────────────────────────
charts.js getComputedStyle ile okur, PHP chart_palette() aynı
anahtarları üretir, CSS .chart-legend__dot--{key} ile eşler.
ÜÇ KATMANIN TEK KAYNAĞI — anahtar adları değiştirilemez. */
--chart-grid: #F1F5F9;
--chart-tick: #64748B;
--chart-border: #FFFFFF;
--chart-empty: #E2E8F0;
--c-brand: #157EFB;
--c-green: #12B76A;
--c-red: #F04438;
--c-amber: #F79009;
--c-muted: #94A0B4;
/* v5: çok serili grafikler için ek seriler. Semantik DEĞİLLER —
durum grafikleri chart_palette() sırasını kullanmaya devam eder.
#F4F7FC üzerinde kontrast: violet 4.21, teal 3.43, pink 3.14 (≥3:1). */
--c-violet: #7A5AF8;
--c-teal: #0891B2;
--c-pink: #EE46BC;
/* ── Radii ────────────────────────────────────────────────────
Ham skala aşağıda; komponentler SEMANTİK katmanı tüketir, böylece
"kart ne kadar yuvarlak" kararı tek satırdan değişir. */
--r-xs: 8px;
--r-sm: 10px;
--r-md: 13px;
--r-lg: 16px;
--r-xl: 22px;
--r-2xl: 28px;
--r-full: 999px;
/* v5 semantik katman */
--r-card: var(--r-xl); /* kart, panel, tablo kartı */
--r-rail: var(--r-2xl); /* yüzen sidebar rayı */
--r-island: var(--r-lg); /* cam topbar adası */
--r-field: var(--r-md); /* input, select, textarea */
--r-control: var(--r-sm); /* buton, pill, küçük kontrol */
/* ── Shadows — lacivert-tintli, 3 katmanli (temas + ambiyans + yayilim) ──
Nötr gri gölge "ucuz" görünür; markaya doğru tint'lenmiş gölge yüzeyi
sayfanın içine oturtur. */
--shadow-xs: 0 1px 1.5px rgba(13,38,76,.05), 0 1px 2px rgba(13,38,76,.035);
--shadow-sm: 0 1px 2px rgba(13,38,76,.05), 0 2px 5px -2px rgba(13,38,76,.06),
0 6px 14px -6px rgba(13,38,76,.05);
--shadow-md: 0 1px 2px rgba(13,38,76,.05), 0 4px 10px -3px rgba(13,38,76,.07),
0 14px 28px -10px rgba(13,38,76,.10);
--shadow-lg: 0 1px 2px rgba(13,38,76,.05), 0 8px 20px -6px rgba(13,38,76,.09),
0 28px 56px -16px rgba(13,38,76,.15);
--shadow-xl: 0 2px 4px rgba(13,38,76,.06), 0 16px 36px -10px rgba(13,38,76,.13),
0 48px 88px -28px rgba(13,38,76,.22);
--shadow-primary: 0 1px 2px rgba(10,82,176,.22), 0 4px 12px -2px rgba(21,126,251,.34),
0 12px 24px -8px rgba(21,126,251,.26);
--shadow-ambient: 0 24px 64px -26px rgba(21,126,251,.40);
/* ── v5: BİLEŞİK YÜKSEKLİK ─────────────────────────────────────
Bir custom property gölge LİSTESİ taşıyabilir. Böylece "yükseklik"
tek bir isim olur ve komponent her seferinde üç parçayı elle
dizmez. Değiştirmek isterseniz tek satır. */
--elev-card: var(--shadow-sm), var(--edge-top), var(--edge-ring);
--elev-card-hover: var(--shadow-md), var(--edge-top), var(--edge-ring);
--elev-island: var(--shadow-md), var(--edge-top);
--elev-rail: var(--shadow-lg), var(--edge-rail);
/* ── v5: KART SPOT IŞIĞI ──────────────────────────────────────
enhance.js yalnız --mx/--my yazar (px, kartın border-box'ına
göre); görünürlüğü CSS :hover üzerinden --spot yapar. JS yoksa
kayıtlı başlangıç değerleri devreye girer ve üstten yumuşak bir
parlama kalır — bozulmaz. */
--spot-size: 380px;
--spot-tint: var(--primary);
--spot-max: 9%;
/* Odak halkalari — iki katmanli (yumusak glow + net kenar) */
--ring: 0 0 0 3.5px rgba(21,126,251,.15);
--ring-strong: 0 0 0 1.5px var(--primary), 0 0 0 5px rgba(21,126,251,.16);
--ring-danger: 0 0 0 3.5px rgba(217,45,32,.14);
/* v5: cam üstünde bildirim noktasının halkası. Opak --bg-surface
kullanılırsa camın üstünde yanlış renkte bir disk olarak okunur. */
--dot-ring: color-mix(in srgb, var(--bg-surface) 65%, transparent);
/* Typography */
--font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-features: 'liga' 1, 'calt' 1, 'ss03' 1;
--fs-label: 0.6875rem; /* 11px — caps etiket katmani */
--fs-xs: 0.75rem;
--fs-sm: 0.8125rem;
--fs-base: 0.875rem;
--fs-md: 1rem;
--fs-lg: 1.125rem;
--fs-xl: 1.3125rem;
--fs-2xl: 1.625rem;
--fs-3xl: 1.875rem;
--fs-4xl: 2.375rem; /* 38px */
--fs-5xl: 3rem; /* 48px */
--fs-6xl: 3.75rem; /* 60px — hero display rakamı */
/* Optik harf araligi — buyudukce sikilasir */
--tracking-tighter: -0.035em;
--tracking-tight: -0.022em;
--tracking-normal: -0.006em;
--tracking-wide: 0.02em;
--tracking-caps: 0.085em;
/* Degisken eksen agirliklari (Inter 100–900) */
--fw-normal: 440;
--fw-medium: 520;
--fw-semi: 600;
--fw-bold: 680;
--fw-display: 760;
/* Motion */
--t-fast: 130ms;
--t-base: 200ms;
--t-slow: 300ms;
--t-slower: 460ms;
--ease: cubic-bezier(.4, 0, .2, 1);
--ease-out-expo: cubic-bezier(.16, 1, .3, 1);
--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
--ease-emphasized: cubic-bezier(.2, 0, 0, 1);
/* Z-index */
--z-sticky: 40;
--z-dropdown: 50;
--z-backdrop: 100;
--z-modal: 110;
--z-toast: 120;
/* ── Layout / kabuk geometrisi ────────────────────────────────
Bu DÖRT değer kabuğun tek girdisidir; responsive kırılımlar
kuralları değil bunları .shell üzerinde yeniden tanımlar.
TÜRETİLMİŞ TOKEN YOK — bilerek. `--rail-w: calc(var(--sidebar-w)
+ var(--shell-gap) * 2)` gibi bir token burada :root'ta çözülür ve
HESAPLANMIŞ değeriyle kalıtılır; .shell üzerinde --shell-gap'i
ezmek onu değiştirmez, kırılımlar sessizce yanlış çalışır.
Türev hesaplar kullanım noktasında yapılır (layout.css .main,
pages.css .quote-summary).
DİKKAT: --shell-gap mobilde 0 değil 0px olmalı — calc() içinde
birimsiz 0 ile length toplanamaz, tüm property düşer. */
--sidebar-w: 260px;
--sidebar-w-mini: 76px; /* daraltilmis ray: yalniz ikonlar */
--topbar-h: 64px;
--content-max: 1400px;
--shell-gap: 12px; /* cam topbar adasinin viewport bosluğu */
--gutter: 26px; /* icerik kolonunun yan nefes payi */
/* ── v5: komponent dosyalarından taşınan paletler ─────────────
Bunlar daha önce components.css ve pages.css içinde hard-coded
hex olarak duruyordu; alias sözleşmesini ihlal ediyorlardı. */
/* Deterministik avatar paleti — avatar() helper'ı crc32 % 8 seçer.
Yanlış eşleme "rastgele" görünür, sıra değiştirilmemeli. */
--av-0-bg: #DFEDFE; --av-0-fg: #0A52B0;
--av-1-bg: #DCFCE7; --av-1-fg: #15803D;
--av-2-bg: #FEF3C7; --av-2-fg: #B45309;
--av-3-bg: #FEE2E2; --av-3-fg: #B91C1C;
--av-4-bg: #EDE9FE; --av-4-fg: #6D28D9;
--av-5-bg: #CFFAFE; --av-5-fg: #0E7490;
--av-6-bg: #FCE7F3; --av-6-fg: #BE185D;
--av-7-bg: #F1F5F9; --av-7-fg: #475569;
/* Hızlı not kâğıtları */
--note-sari-bg: #FEF9E7; --note-sari-bd: #FDECC8; --note-sari-fg: #7A5B04;
--note-mavi-bg: #EFF6FF; --note-mavi-bd: #DBEAFE; --note-mavi-fg: #1E40AF;
--note-yesil-bg: #EFFDF4; --note-yesil-bd: #DCFCE7; --note-yesil-fg: #166534;
--note-pembe-bg: #FDF2F8; --note-pembe-bd: #FCE7F3; --note-pembe-fg: #9D174D;
/* Teklif hunisi basamakları (koyulaşan mavi merdiveni) */
--funnel-1: linear-gradient(135deg, #7DBEFD, #479DFC);
--funnel-2: linear-gradient(135deg, #479DFC, #157EFB);
--funnel-3: linear-gradient(135deg, #0B66DA, #0A52B0);
}
/* ── Koyu tema: derin lacivert lüks (hue ~225, #157EFB ile uyumlu) ── */
html[data-theme="dark"] {
color-scheme: dark;
/* Rol-çevrilmiş nötrler: --white kart yüzeyi olur, gri rampası tersine döner */
--white: #111A33;
--gray-50: #0D1428;
--gray-100: #182241;
--gray-150: #1F2A4D;
--gray-200: #263155;
--gray-250: #1E294B;
--gray-300: #33406B;
--gray-400: #6B77A0;
--gray-500: #8B96BC;
--gray-600: #A6B1D2;
--gray-700: #C3CCE5;
--gray-800: #DAE1F2;
--gray-900: #F1F4FC;
/* Marka tint'leri: açık pasteller yerine saydam mavi katmanlar */
--blue-50: rgba(21,126,251,.13);
--blue-100: rgba(21,126,251,.24);
--blue-200: rgba(21,126,251,.36);
--blue-600: #4B9BFD;
--blue-700: #7CB8FE;
/* Semantik tint'ler */
--green-50: rgba(18,183,106,.14); --green-100: rgba(18,183,106,.26); --green-600: #34D399; --green-700: #4ADE97;
--amber-50: rgba(247,144,9,.14); --amber-100: rgba(247,144,9,.26); --amber-600: #F9A23B; --amber-700: #FBBF54;
--red-50: rgba(240,68,56,.15); --red-100: rgba(240,68,56,.28); --red-600: #FB7066; --red-700: #FF8F86;
/* Sidebar bir tık daha derin */
--nav-bg-top: #131A31;
--nav-bg-bot: #0C1122;
--nav-border: rgba(148,163,205,.10);
--nav-glass: rgba(255,255,255,.038);
--nav-edge: rgba(255,255,255,.07);
/* Aliases */
--bg-page: #0B1120;
--bg-surface: #111A33;
--bg-elevated: #16203D;
--bg-inset: #0D1428;
--row-hover: rgba(21,126,251,.07);
--border: #1E294B;
--border-strong: #263155;
--field-bg: #0E1630;
--field-border: #2A3660;
--text: #C3CCE5;
--text-heading: #F1F4FC;
--text-muted: #8B96BC;
--text-subtle: #8692B9;
--primary-hover: #4B9BFD;
--highlight: rgba(255,255,255,.06);
--glass-1: rgba(14,21,45,.78);
--glass-2: rgba(18,26,52,.94);
--glass-3: rgba(20,29,58,.96);
--glass-border: rgba(148,163,205,.20);
--backdrop: rgba(2,6,18,.68);
/* İç kenarlar: koyu yüzeyde alt gölge yerine üst parlama taşır */
--edge-ring: inset 0 0 0 1px rgba(148,163,205,.06);
--edge-inset: inset 0 1px 2px rgba(2,6,18,.45);
--edge-rail: inset 0 1px 0 rgba(255,255,255,.07),
inset 0 0 0 1px rgba(148,163,205,.07);
--hero-grad: linear-gradient(140deg, #2E8BFF 0%, #157EFB 22%, #0F6FE8 50%, #0A3F97 100%);
--page-glow: radial-gradient(1100px 480px at 88% -12%, rgba(21,126,251,.15), transparent 60%),
radial-gradient(800px 400px at -8% 108%, rgba(11,103,222,.10), transparent 55%);
--surface-sheen: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 92px);
--sheen-grad: linear-gradient(105deg, transparent 24%, rgba(255,255,255,.07) 44%,
rgba(255,255,255,.16) 50%, rgba(255,255,255,.07) 56%, transparent 76%);
--mesh-grad: radial-gradient(900px 620px at 12% 8%, rgba(21,126,251,.40), transparent 62%),
radial-gradient(760px 560px at 88% 22%, rgba(11,103,222,.42), transparent 58%),
radial-gradient(680px 680px at 42% 96%, rgba(13,68,137,.50), transparent 60%),
linear-gradient(155deg, #0D1A38 0%, #070D1C 100%);
--success-grad: linear-gradient(90deg, #34D399, #4ADE80);
/* Koyu yüzey grain'i daha görünür taşır */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
--chart-grid: rgba(148,163,205,.09);
--chart-tick: #8B96BC;
--chart-border: #111A33;
--chart-empty: #263155;
/* v5 DÜZELTME: seri renkleri koyu temada da YÜKSELİR. Yeni renk kararı
yok — hex'ler dark temanın zaten tanımladığı --*-600 değerleriyle
birebir aynı, böylece rozet / grafik / sparkline aynı ailede kalır.
v4'te yalnız --c-muted çevriliyordu; diğer dördü light hex'te kalıp
koyu zeminde fazla doygun duruyordu.
#0B1120 üzerinde kontrast: brand 4.85→6.63, green 7.18→9.80,
red 5.01→6.83, amber 8.02→9.20. */
--c-brand: #4B9BFD;
--c-green: #34D399;
--c-red: #FB7066;
--c-amber: #F9A23B;
--c-muted: #6B77A0;
--c-violet: #9B8AFB;
--c-teal: #22CCEE;
--c-pink: #F670C7;
/* Koyu zeminde spot ışığı daha güçlü olmalı, yoksa hiç okunmuyor */
--spot-max: 15%;
/* Gölgeler: daha derin + mavi ambiyans */
--shadow-xs: 0 1px 2px rgba(2,6,18,.5);
--shadow-sm: 0 1px 2px rgba(2,6,18,.45), 0 2px 5px -2px rgba(2,6,18,.5),
0 6px 14px -6px rgba(2,6,18,.55);
--shadow-md: 0 1px 2px rgba(2,6,18,.5), 0 4px 10px -3px rgba(2,6,18,.55),
0 14px 30px -10px rgba(2,6,18,.62);
--shadow-lg: 0 1px 2px rgba(2,6,18,.5), 0 8px 22px -6px rgba(2,6,18,.6),
0 28px 58px -16px rgba(2,6,18,.72);
--shadow-xl: 0 2px 6px rgba(2,6,18,.55), 0 18px 40px -10px rgba(2,6,18,.68),
0 56px 100px -30px rgba(2,6,18,.8);
--shadow-primary: 0 1px 2px rgba(2,6,18,.5), 0 4px 14px -2px rgba(21,126,251,.42),
0 14px 28px -10px rgba(21,126,251,.34);
--shadow-ambient: 0 24px 68px -24px rgba(21,126,251,.50);
--ring: 0 0 0 3.5px rgba(21,126,251,.30);
--ring-strong: 0 0 0 1.5px var(--blue-400), 0 0 0 5px rgba(21,126,251,.28);
--ring-danger: 0 0 0 3.5px rgba(240,68,56,.28);
--dot-ring: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
/* Avatar paleti — koyu temada saydam tint + açık metin */
--av-0-bg: rgba(59,130,246,.22); --av-0-fg: #93C5FD;
--av-1-bg: rgba(34,197,94,.20); --av-1-fg: #86EFAC;
--av-2-bg: rgba(245,158,11,.20); --av-2-fg: #FCD34D;
--av-3-bg: rgba(239,68,68,.20); --av-3-fg: #FCA5A5;
--av-4-bg: rgba(139,92,246,.22); --av-4-fg: #C4B5FD;
--av-5-bg: rgba(6,182,212,.20); --av-5-fg: #67E8F9;
--av-6-bg: rgba(236,72,153,.20); --av-6-fg: #F9A8D4;
--av-7-bg: rgba(148,163,184,.16); --av-7-fg: #CBD5E1;
/* Not kâğıtları — "renkli kâğıt" metaforu korunur: koyu tint, tanınır renk */
--note-sari-bg: rgba(250,204,21,.10); --note-sari-bd: rgba(250,204,21,.22); --note-sari-fg: #FDE68A;
--note-mavi-bg: rgba(59,130,246,.12); --note-mavi-bd: rgba(59,130,246,.26); --note-mavi-fg: #93C5FD;
--note-yesil-bg: rgba(34,197,94,.12); --note-yesil-bd: rgba(34,197,94,.26); --note-yesil-fg: #86EFAC;
--note-pembe-bg: rgba(236,72,153,.12); --note-pembe-bd: rgba(236,72,153,.26); --note-pembe-fg: #F9A8D4;
}
/* ── Cam geri çekilmesi — TEK BLOK ────────────────────────────────
v4'te bu @supports 10 ayrı yerde kopyalanmıştı ve HEPSİ aynı hatayı
taşıyordu: yalnız standart `backdrop-filter` sorgulanıyordu, oysa
Safari 14–17 sadece -webkit- öneklisini destekliyor. Sonuç: o
sürümlerde cam sessizce kayboluyordu.
Artık tek yerde ve token seviyesinde çözülüyor: komponentler
`background: var(--glass-2); backdrop-filter: var(--blur-2)` yazar,
koşul sormaz. Destek yoksa blur `none` (geçerli bir no-op) olur ve
yüzeyler opak alias'lara döner. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root, .theme-light, html[data-theme="dark"] {
--blur-1: none;
--blur-2: none;
--blur-3: none;
--glass-1: var(--bg-surface);
--glass-2: var(--bg-elevated);
--glass-3: var(--bg-elevated);
}
}