/* =============================================================
VassSite — KANONİK TEMA (yalnız değişkenler)
Tüm renk / ölçü değerleri burada tanımlanır; başka dosyalar
yalnız var(--...) kullanır. Ayrıntı: docs/vasssite/TEMA.md
Bu dosyada eleman kuralı YOKTUR (yalnız :root ve html[data-*]; tek istisna kökteki
color-scheme — açık temada tarayıcı varsayılanıyla aynıdır), bu yüzden her sayfaya güvenle yüklenebilir:
Sayfalar bu dosyayı app-theme.css / site.css / admin.css'ten ÖNCE
ile yükler (layout'lar ve modül Main sayfaları).
Adlandırma: kategori önce (--color-*, --space-*, --radius-*,
--shadow-*, --font-*); tasarım dili ve bileşenler --vs-*. Eski adlar en altta takma ad.
============================================================= */
:root {
/* ---------- Marka ---------- */
--color-ink: #0A1628;
--color-ink-soft: #1E293B;
--color-accent: #0066FF;
--color-accent-hi: #0052CC;
--color-accent-lo: #E6F0FF;
--color-on-accent: #FFFFFF; /* vurgu zemini üstündeki metin / düğme topu */
/* ---------- Nötrler ---------- */
--color-bg: #FFFFFF;
--color-surface: #FAFBFC;
--color-surface-2: #F4F6F8;
--color-border: #E5E7EB;
--color-border-soft:#F1F3F5;
/* ---------- Metin ---------- */
--color-text: #0F172A;
--color-text-soft: #475569;
--color-text-mute: #94A3B8;
/* ---------- Anlamsal ---------- */
--color-success: #10B981;
--color-warning: #F59E0B;
--color-danger: #EF4444;
--color-danger-lo: #FEE2E2; /* hata halkası / açık hata zemini */
--color-danger-fg: #B91C1C; /* açık zemin üstünde hata metni */
/* ---------- Kurumsal site / yönetim paneli tonları ----------
site.css ve admin.css'in eski değerleri birebir korunur
(ekranlar değişmesin diye). Birleştirme ayrı karar. */
--color-site-text: #334155;
--color-site-text-soft: #64748B;
--color-site-surface: #F8FAFC;
--color-site-surface-2: #F1F5F9;
--color-site-border: #E2E8F0;
--color-site-border-soft: #EEF2F6;
--color-site-accent-lo: #EFF6FF;
--radius-site-lg: 20px;
--shadow-site-sm: 0 1px 2px rgba(15,23,42,0.04);
--shadow-site-md: 0 8px 24px rgba(15,23,42,0.06), 0 2px 6px rgba(15,23,42,0.04);
--shadow-site-lg: 0 24px 60px rgba(15,23,42,0.10), 0 8px 20px rgba(15,23,42,0.06);
--font-site: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--duration-site: 220ms;
--container-site: 1200px;
/* ---------- Boşluk (4px taban) ---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ---------- Köşe ---------- */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 999px;
/* ---------- Gölge ---------- */
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
--shadow-md: 0 4px 14px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
--shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
--shadow-xl: 0 32px 80px rgba(15, 23, 42, 0.12), 0 8px 24px rgba(15, 23, 42, 0.06);
/* ---------- Yazı ailesi ---------- */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
/* ---------- Yazı ölçeği (rem; kullanıcı tercihi --font-size-base'i değiştirir) ---------- */
--font-size-base: 18px;
--font-size-2xs: 0.7143rem;
--font-size-xs: 0.7857rem;
--font-size-sm: 0.8571rem;
--font-size-md: 1rem;
--font-size-lg: 1.1429rem;
--font-size-xl: 1.2857rem;
--font-size-2xl: 1.4286rem;
--font-size-3xl: 1.7143rem;
--font-size-4xl: 2rem;
--font-size-5xl: 2.2857rem;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--line-height-tight: 1.2;
--line-height-snug: 1.35;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
--letter-spacing-tight: -0.01em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.04em;
--letter-spacing-wider: 0.08em;
/* ---------- Hareket ---------- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--duration: 240ms;
/* ---------- Yüzey (kart / liste) ---------- */
--card-bg: #FFFFFF;
--card-grad: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
--card-border: #CBD5E1;
--card-border-soft: #E5E7EB;
--card-highlight: rgba(255, 255, 255, 0.95);
--card-shadow-soft: rgba(15, 23, 42, 0.04);
--card-shadow-base: rgba(15, 23, 42, 0.06);
--card-shadow-hover: rgba(15, 23, 42, 0.08);
--input-border: #CBD5E1;
--input-bg: #FFFFFF;
--modal-backdrop: rgba(10, 22, 40, 0.55);
/* Pencere (modal) ile ekran kenarı arası boşluk: küçük ekranda daralır, büyük ekranda 32px */
--modal-kenar: clamp(8px, 2.5vmin, 32px);
--skel-from: #F4F6F8;
--skel-via: #ECEFF3;
--brand-fill: #0A1628;
--brand-fill-hover: #1E293B;
--brand-fill-fg: #FFFFFF;
--month-done-bg: #ECFDF5;
--month-done-fg: #047857;
--month-done-border: #A7F3D0;
--sig-stroke: #0A1628;
/* =========================================================
APPLE SİSTEM PALETİ (Human Interface mantığı) — açık tema
Yeni bileşenler ve yeni ekranlar bunları kullanır. Mevcut ekranlar
eski --color-* değerleriyle kalır. Koyu karşılıklar KOYU TEMA bloğunda.
Vurgu rengi kullanıcı tercihinden gelir (--color-accent); burada sabit vurgu yok.
========================================================= */
--color-system-red: #FF3B30;
--color-system-green: #34C759;
--color-system-orange: #FF9500;
--color-system-blue: #007AFF;
--color-system-gray: #8E8E93;
--color-white: #FFFFFF;
--color-label: #000000;
--color-label-2: rgba(60, 60, 67, 0.60);
--color-label-3: rgba(60, 60, 67, 0.30);
--color-label-4: rgba(60, 60, 67, 0.18);
--color-fill: rgba(120, 120, 128, 0.20);
--color-fill-2: rgba(120, 120, 128, 0.16);
--color-fill-3: rgba(118, 118, 128, 0.12);
--color-fill-4: rgba(116, 116, 128, 0.08);
--color-separator: rgba(60, 60, 67, 0.29);
--color-grouped-bg: #F2F2F7;
--color-grouped-bg-2: #FFFFFF;
--color-grouped-bg-3: #F2F2F7;
--color-material: rgba(246, 246, 248, 0.78); /* açılır menü / panel: saydam + bulanık */
--color-material-sheet: rgba(255, 255, 255, 0.86); /* sheet / dialog */
/* =========================================================
TASARIM DİLİ ÖLÇEKLERİ (--vs-*)
========================================================= */
/* yazı: sistem yazı tipi önce, yerel Inter (OFL) yedek */
--vs-yazi-ailesi: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Variable", Inter, "Segoe UI", sans-serif;
/* yazı boyutu: Apple metin stilleri, rem (14px tabanda karşılığı) — kullanıcı yazı ölçeğiyle büyür */
--vs-yazi-2xs: 0.7857rem; /* 11 caption 2 */
--vs-yazi-xs: 0.8571rem; /* 12 caption 1 */
--vs-yazi-sm: 0.9286rem; /* 13 footnote */
--vs-yazi-md: 1.0714rem; /* 15 subheadline (alan metni) */
--vs-yazi-lg: 1.2143rem; /* 17 body / headline */
--vs-yazi-xl: 1.4286rem; /* 20 title 3 */
--vs-yazi-2xl: 1.5714rem; /* 22 title 2 */
--vs-yazi-3xl: 2rem; /* 28 title 1 */
--vs-yazi-4xl: 2.4286rem; /* 34 large title */
--vs-agirlik-normal: 400;
--vs-agirlik-orta: 500;
--vs-agirlik-yari-kalin: 600;
--vs-agirlik-kalin: 700;
--vs-satir-yuksekligi: 1.3;
--vs-harf-araligi: -0.01em;
/* köşe yarıçapı */
--vs-kose-xs: 6px;
--vs-kose-sm: 8px;
--vs-kose-md: 10px;
--vs-kose-lg: 12px;
--vs-kose-xl: 16px;
--vs-kose-2xl: 22px;
--vs-kose-tam: 999px;
/* dokunma alanı (Apple HIG: en az 44 pt) */
--vs-dokunma: 44px;
/* çizgi ve ayırıcı */
--vs-cizgi: 1px;
--vs-ayirici: var(--color-separator);
--vs-ayirici-kalinlik: 0.5px;
/* gölge katmanları (yumuşak) */
--vs-golge-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
--vs-golge-2: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
--vs-golge-3: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.10);
--vs-golge-4: 0 24px 64px rgba(0, 0, 0, 0.20), 0 4px 16px rgba(0, 0, 0, 0.10);
/* saydamlık / bulanıklık (backdrop-filter) */
--vs-bulaniklik: saturate(180%) blur(24px);
/* hareket */
--vs-sure-hizli: 120ms;
--vs-sure-kisa: 200ms;
--vs-sure-orta: 320ms;
--vs-sure-uzun: 480ms;
--vs-egri-ios: cubic-bezier(0.32, 0.72, 0, 1); /* iOS sayfa / panel eğrisi */
--vs-egri-yay: cubic-bezier(0.34, 1.32, 0.64, 1); /* hafif taşan yay (spring) */
--vs-egri-standart: cubic-bezier(0.25, 0.1, 0.25, 1);
/* anlamsal sistem renkleri */
--vs-renk-vurgu: var(--color-accent);
--vs-renk-hata: var(--color-system-red);
--vs-renk-basari: var(--color-system-green);
--vs-renk-uyari: var(--color-system-orange);
--vs-renk-bilgi: var(--color-system-blue);
/* odak ve hata halkası (saydam) */
--vs-odak-halka: color-mix(in srgb, var(--color-accent) 32%, transparent);
--vs-hata-halka: color-mix(in srgb, var(--color-system-red) 28%, transparent);
--vs-halka-genislik: 4px;
/* =========================================================
YOĞUNLUK DÜZEYLERİ — değerler YALNIZ burada.
Etkin düzey kökte data-yogunluk="siki|normal|rahat" ile seçilir
(varsayılan sıkı; dokunmatik ve dar ekranda otomatik rahat, bkz. aşağıdaki @media).
kontrol = giriş yüksekliği, yazi = alan yazısı, satir = vs-grup satırı,
aralik = form satırları arası, ic-bosluk = kontrol iç boşluğu
Değerler varsayılan yazı ölçeğindeki (kök 18px) piksellerdir; kullanıcının yazı ölçeği
tercihiyle (data-font-scale / setFontSize) --vs-yazi-olcegi kadar orantılı büyür / küçülür.
Dokunma alt sınırı (--vs-dokunma, 44px) ölçekten bağımsızdır.
========================================================= */
--vs-yazi-olcegi: 1; /* kök yazı boyutu / 18px — aşağıda data-font-scale'e göre */
--vs-siki-kontrol: calc(30px * var(--vs-yazi-olcegi));
--vs-siki-yazi: calc(13px * var(--vs-yazi-olcegi));
--vs-siki-satir: calc(34px * var(--vs-yazi-olcegi));
--vs-siki-aralik: calc(8px * var(--vs-yazi-olcegi));
--vs-siki-ic-bosluk: calc(8px * var(--vs-yazi-olcegi));
--vs-normal-kontrol: calc(36px * var(--vs-yazi-olcegi));
--vs-normal-yazi: calc(14px * var(--vs-yazi-olcegi));
--vs-normal-satir: calc(40px * var(--vs-yazi-olcegi));
--vs-normal-aralik: calc(10px * var(--vs-yazi-olcegi));
--vs-normal-ic-bosluk: calc(10px * var(--vs-yazi-olcegi));
--vs-rahat-kontrol: calc(44px * var(--vs-yazi-olcegi));
--vs-rahat-yazi: calc(15px * var(--vs-yazi-olcegi));
--vs-rahat-satir: calc(48px * var(--vs-yazi-olcegi));
--vs-rahat-aralik: calc(12px * var(--vs-yazi-olcegi));
--vs-rahat-ic-bosluk: calc(12px * var(--vs-yazi-olcegi));
/* etkin düzey (varsayılan: sıkı) — bileşenler yalnız bunları kullanır */
--vs-kontrol: var(--vs-siki-kontrol);
--vs-yazi: var(--vs-siki-yazi);
--vs-satir: var(--vs-siki-satir);
--vs-aralik: var(--vs-siki-aralik);
--vs-ic-bosluk: var(--vs-siki-ic-bosluk);
--vs-dokunma-alt: 0px; /* rahat düzeyde 44px: hiçbir hedef bunun altına inmez */
/* form yerleşimi */
--vs-form-aralik: var(--vs-aralik);
--vs-izgara-asgari: 220px; /* vs-izgara asgari sütun genişliği (asgari-sutun özelliği ezer) */
--vs-izgara-sutun-aralik: calc(var(--vs-aralik) * 2);
--vs-alan-yan-etiket-genislik: calc(var(--vs-yazi) * 9); /* etiket-konum="yan" */
/* =========================================================
VERİ GİRİŞİ BİLEŞENLERİ (wwwroot/Components)
Bileşen CSS'i yalnız bu değişkenleri kullanır.
========================================================= */
/* zemin / metin */
--vs-alan-zemin: var(--color-grouped-bg-2);
--vs-alan-zemin-salt-okunur: var(--color-fill-4);
--vs-alan-zemin-pasif: var(--color-fill-3);
--vs-alan-metin: var(--color-label);
--vs-alan-metin-pasif: var(--color-label-3);
--vs-alan-placeholder: var(--color-label-3);
/* kenarlık */
--vs-alan-kenarlik: var(--color-separator);
--vs-alan-kenarlik-hover: var(--color-label-3);
--vs-alan-kenarlik-kalinlik: var(--vs-cizgi);
/* odak / hata */
--vs-alan-odak: var(--vs-renk-vurgu);
--vs-alan-odak-halka: var(--vs-odak-halka);
--vs-alan-halka-genislik: var(--vs-halka-genislik);
--vs-alan-hata: var(--vs-renk-hata);
--vs-alan-hata-halka: var(--vs-hata-halka);
--vs-alan-hata-metin: var(--vs-renk-hata);
/* Alan çıkışında kaydetme geri bildirimi (AlanTemeli.kayitDurumu) */
--vs-alan-kaydediliyor: var(--vs-renk-uyari);
--vs-alan-kaydediliyor-halka: color-mix(in srgb, var(--vs-renk-uyari) 24%, transparent);
--vs-alan-kaydedildi: var(--vs-renk-basari);
--vs-alan-kaydedildi-halka: color-mix(in srgb, var(--vs-renk-basari) 28%, transparent);
--vs-alan-kaydedildi-zemin: color-mix(in srgb, var(--vs-renk-basari) 10%, transparent);
/* pasif */
--vs-alan-pasif-opaklik: 0.45;
/* etiket / zorunlu / bilgi / mesaj */
--vs-alan-etiket: var(--color-label-2);
--vs-alan-etiket-yazi: calc(var(--vs-yazi) - 2px);
--vs-alan-etiket-agirlik: var(--vs-agirlik-orta);
--vs-alan-etiket-bosluk: calc(var(--vs-aralik) / 2);
--vs-alan-zorunlu: var(--vs-renk-hata);
--vs-alan-zorunlu-isaret: "*";
--vs-alan-bilgi: var(--color-system-gray);
--vs-alan-bilgi-boyut: 1.1em;
--vs-alan-bilgi-kenarlik: 0.09em;
--vs-alan-mesaj-yazi: calc(var(--vs-yazi) - 2px);
/* ölçü — yoğunluk düzeyinden türetilir */
--vs-alan-kose: calc(var(--vs-kontrol) * 0.22);
--vs-alan-ic-bosluk: var(--vs-ic-bosluk);
--vs-alan-ic-bosluk-kucuk: calc(var(--vs-ic-bosluk) * 0.75);
--vs-alan-ic-bosluk-buyuk: calc(var(--vs-ic-bosluk) * 1.33);
--vs-alan-yukseklik: max(var(--vs-kontrol), var(--vs-dokunma-alt));
--vs-alan-yukseklik-kucuk: max(calc(var(--vs-kontrol) - 4px), var(--vs-dokunma-alt));
--vs-alan-yukseklik-buyuk: calc(var(--vs-kontrol) + 8px);
--vs-alan-yazi: var(--vs-yazi);
--vs-alan-yazi-kucuk: calc(var(--vs-yazi) - 1px);
--vs-alan-yazi-buyuk: calc(var(--vs-yazi) + 2px);
--vs-alan-satir-bosluk: var(--vs-ic-bosluk);
--vs-alan-gecis-sure: var(--vs-sure-kisa);
--vs-alan-gecis-egri: var(--vs-egri-ios);
/* onay kutusu (macOS yuvarlatılmış kare / iOS yuvarlak) */
--vs-onay-boyut: calc(var(--vs-kontrol) * 0.5);
--vs-onay-boyut-yuvarlak: calc(var(--vs-kontrol) * 0.55);
--vs-onay-kose: calc(var(--vs-onay-boyut) * 0.25);
--vs-onay-zemin: var(--color-grouped-bg-2);
--vs-onay-kenarlik: var(--color-label-3);
--vs-onay-dolu: var(--vs-renk-vurgu);
--vs-onay-isaret: var(--color-on-accent);
--vs-onay-isaret-kalinlik: 2px;
--vs-onay-sure: var(--vs-sure-kisa);
--vs-onay-egri: var(--vs-egri-yay);
/* aç/kapa anahtarı (iOS) */
--vs-anahtar-yukseklik: calc(var(--vs-kontrol) * 0.7); /* rahat: 31 (iOS) */
--vs-anahtar-genislik: calc(var(--vs-anahtar-yukseklik) * 1.645); /* rahat: 51 (iOS) */
--vs-anahtar-bosluk: 2px;
--vs-anahtar-uzama: calc(var(--vs-anahtar-yukseklik) * 0.2); /* basılıyken topuz uzar */
--vs-anahtar-zemin: var(--color-fill);
--vs-anahtar-zemin-acik: var(--vs-renk-basari);
--vs-anahtar-topuz: var(--color-white);
--vs-anahtar-topuz-golge: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
--vs-anahtar-sure: var(--vs-sure-orta);
--vs-anahtar-egri: var(--vs-egri-yay);
/* açılır liste / menü (Popover) */
--vs-liste-zemin: var(--color-material);
--vs-liste-bulaniklik: var(--vs-bulaniklik);
--vs-liste-kenarlik: var(--color-label-4);
--vs-liste-golge: var(--vs-golge-3);
--vs-liste-kose: var(--vs-kose-lg);
--vs-liste-ic-bosluk: calc(var(--vs-ic-bosluk) / 2);
--vs-liste-ara-bosluk: calc(var(--vs-aralik) / 2); /* alan ile liste arası */
--vs-liste-satir-yukseklik: max(calc(var(--vs-kontrol) - 4px), var(--vs-dokunma-alt));
--vs-liste-satir-kose: calc(var(--vs-alan-kose) * 0.7);
--vs-liste-satir-bosluk: var(--vs-ic-bosluk);
--vs-liste-uzerinde: var(--vs-renk-vurgu);
--vs-liste-uzerinde-metin: var(--color-on-accent);
--vs-liste-isaret: var(--vs-renk-vurgu);
--vs-liste-bos-metin: var(--color-label-2);
--vs-liste-azami-yukseklik: 20rem;
--vs-liste-acilis-olcek: 0.96;
--vs-liste-sure: var(--vs-sure-kisa);
--vs-liste-egri: var(--vs-egri-ios);
/* seçim oku (ince chevron) */
--vs-secim-ok: var(--color-label-2);
--vs-secim-ok-boyut: calc(var(--vs-yazi) * 0.45);
--vs-secim-ok-kalinlik: 1.5px;
/* yerel