/* ==========================================================================
MİNİK ŞİRİNLER ANAOKULU & KREŞ — TASARIM TOKENLARI
--------------------------------------------------------------------------
Sürüm : 1.0
Tarih : 2026-07-31
Dosya : public/css/tokens.css (Express static kökünde servis edilir)
Bağımlılık : yok. Saf CSS custom property. Build adımı gerektirmez.
KULLANIM
KURAL: Bileşen CSS'inde ASLA çıplak HEX yazma. Sadece var(--...) kullan.
Yeni bir renk gerekiyorsa önce buraya token olarak ekle.
ERİŞİLEBİLİRLİK: Bu dosyadaki tüm --ink-* ve --on-* eşleşmeleri
WCAG 2.1 AA (≥4.5:1 normal metin) için hesaplanarak doğrulanmıştır.
Kontrast oranları yorum satırlarında yazılıdır. Değiştirmeden önce
docs/05-tasarim-sistemi.md → Bölüm 2'yi oku.
========================================================================== */
/* FONTLAR: bkz. fonts.css (once fonts.css, sonra tokens.css yuklenir) */
:root {
/* ========================================================================
1. RENK — HAM PALET (primitive)
------------------------------------------------------------------------
Türetme yöntemi (deterministik, sRGB doğrusal karışım):
tint(c, p) = c + (255 - c) * p → beyaza doğru (50…400)
shade(c, p) = c * (1 - p) → siyaha doğru (600…800)
Basamak oranları: 50=%94 100=%88 200=%76 300=%58 400=%30
600=%14 700=%30 800=%46
Bu ölçek MATEMATİKSELDİR; erişilebilir olan değerler bölüm 2'deki
--ink-* / --fill-* semantik tokenlarıdır. Ham ölçeği doğrudan metin
rengi olarak KULLANMA.
==================================================================== */
/* --- Lacivert (marka metin rengi) --- */
--navy-50: #F2F3F6;
--navy-100: #E6E7ED;
--navy-200: #CCD0DB;
--navy-300: #A6ACBF;
--navy-400: #6B7595;
--navy-500: #2B3A67; /* MARKA */
--navy-600: #253259;
--navy-700: #1E2948;
--navy-800: #171F38;
/* --- Pembe / magenta (marka vurgu) --- */
--pink-50: #FEF4F8;
--pink-100: #FDE9F1;
--pink-200: #FBD4E3;
--pink-300: #F8B3CE;
--pink-400: #F381AE;
--pink-500: #EE4B8B; /* MARKA — büyük metin/dekor içindir, küçük metin DEĞİL */
--pink-600: #CD4078;
--pink-700: #A73461;
--pink-800: #81284B;
/* --- Mor (birincil eylem) --- */
--purple-50: #F7F4FB;
--purple-100: #EFEAF7;
--purple-200: #DFD5F0;
--purple-300: #C7B5E5;
--purple-400: #A284D3;
--purple-500: #7A4FC0; /* MARKA — beyaz metinle 5.66:1, AA geçer */
--purple-600: #6944A5;
--purple-700: #553786;
--purple-800: #422B68;
/* --- Sarı (rozet / dikkat) --- */
--yellow-50: #FFFCF3;
--yellow-100: #FFF9E8;
--yellow-200: #FFF2D0;
--yellow-300: #FFE8AD;
--yellow-400: #FFD976;
--yellow-500: #FFC93C; /* MARKA — ÜZERİNE ASLA BEYAZ METİN (1.54:1) */
--yellow-600: #DBAD34;
--yellow-700: #B28D2A;
--yellow-800: #8A6D20;
/* --- Yeşil --- */
--green-50: #F6FBF7;
--green-100: #EEF7EE;
--green-200: #DCF0DD;
--green-300: #C3E4C4;
--green-400: #9AD29D;
--green-500: #6FBF73; /* MARKA */
--green-600: #5FA463;
--green-700: #4E8650;
--green-800: #3C673E;
/* --- Mavi --- */
--blue-50: #F4FAFD;
--blue-100: #EAF5FB;
--blue-200: #D5EAF8;
--blue-300: #B5DAF2;
--blue-400: #84C2E9;
--blue-500: #4FA8E0; /* MARKA */
--blue-600: #4490C1;
--blue-700: #37769D;
--blue-800: #2B5B79;
/* --- Turuncu --- */
--orange-50: #FFF9F3;
--orange-100: #FEF2E7;
--orange-200: #FDE5CE;
--orange-300: #FCD2A9;
--orange-400: #F9B470;
--orange-500: #F79433; /* MARKA */
--orange-600: #D47F2C;
--orange-700: #AD6824;
--orange-800: #85501C;
/* --- Nötrler / zemin --- */
--cream: #FFFBF2; /* sayfa zemini — marka kimliğinin temeli */
--cream-deep: #FDF4E3; /* alternatif bölüm zemini, hafif daha sıcak */
--white: #FFFFFF;
--black: #000000;
/* ========================================================================
2. RENK — SEMANTİK TOKENLAR (WCAG AA doğrulanmış)
------------------------------------------------------------------------
Kod içinde SADECE bu bölümdeki tokenları kullan.
Yorumdaki oranlar gerçek hesaplanmış WCAG 2.1 kontrast oranlarıdır.
==================================================================== */
/* --- Zeminler --- */
--bg-page: var(--cream); /* #FFFBF2 */
--bg-page-alt: var(--cream-deep);
--bg-surface: var(--white); /* kartlar, yüzen nav */
--bg-surface-2: #FBF7EE; /* iç içe kart / tablo zebra */
--bg-overlay: rgb(23 31 56 / 0.55); /* modal arkası (navy-800 %55) */
--bg-inverse: var(--navy-500);
/* --- Metin mürekkepleri ---
Doğrulanan en kötü zemin: mor-200 (#DFD5F0)
ink-strong 7.83:1 | ink-body 5.06:1
ink-muted SADECE krem/beyaz/-50/-100 üzerinde kullanılır (en kötü 4.94:1) */
--ink-strong: #2B3A67; /* başlıklar. krem 10.68:1 / beyaz 11.03:1 — AAA */
--ink-body: #4C567F; /* gövde metni. krem 6.90:1 / beyaz 7.13:1 — AAA */
--ink-muted: #5A6485; /* yardımcı metin. krem 5.65:1 / beyaz 5.84:1 — AA+ */
--ink-subtle: #767E9E; /* SADECE dekoratif/devre dışı. 3.87:1 — AA DEĞİL */
--ink-inverse: #FFFFFF; /* koyu/renkli dolgu üzerindeki metin */
/* --- Marka mürekkepleri (açık zemin üzerinde METİN ve İKON için) ---
Hepsi krem, beyaz, kendi-50 ve kendi-100 zeminlerinde ≥4.5:1.
Aynı değerler dolgu olarak da kullanılabilir (üzerine beyaz metin ≥4.5:1). */
--ink-pink: #BC3B6E; /* krem 5.10:1 | beyaz 5.26:1 | pink-100 4.54:1 */
--ink-purple: #7A4FC0; /* krem 5.48:1 | beyaz 5.66:1 | purple-100 4.80:1 */
--ink-yellow: #8C6F21; /* krem 4.61:1 | beyaz 4.76:1 | yellow-100 4.53:1 */
--ink-green: #487C4B; /* krem 4.77:1 | beyaz 4.93:1 | green-100 4.50:1 */
--ink-blue: #37749B; /* krem 4.92:1 | beyaz 5.08:1 | blue-100 4.58:1 */
--ink-orange: #A16021; /* krem 4.83:1 | beyaz 4.99:1 | orange-100 4.53:1 */
/* --- Dolgular (üzerine BEYAZ metin gelir) --- */
--fill-primary: #7A4FC0; /* mor. beyaz metin 5.66:1 — AA */
--fill-primary-hover: #6E47AD; /* 6.63:1 */
--fill-primary-active: #64419D; /* 7.54:1 */
--fill-secondary: #CD4078; /* pembe. beyaz metin 4.56:1 — AA
DİKKAT: ham marka pembesi #EE4B8B
beyaz metinle 3.49:1 — AA'da KALIR. */
--fill-secondary-hover: #B83A6C; /* 5.44:1 */
--fill-secondary-active: #A83462; /* 6.30:1 */
--fill-dark: #2B3A67; /* lacivert. beyaz metin 11.03:1 */
--fill-dark-hover: #27345D;
--fill-dark-active: #233054;
/* --- Sarı özel durum: üzerine ASLA beyaz metin gelmez --- */
--fill-accent: #FFC93C; /* sarı rozet/kart */
--on-fill-accent: #2B3A67; /* sarı üzerine lacivert metin — 7.18:1, AAA */
/* --- Renkli dolgular üzerine beyaz metin (program kartı ok butonları vb.) --- */
--fill-green: #487C4B; /* beyaz metin 4.93:1 */
--fill-blue: #37749B; /* beyaz metin 5.08:1 */
--fill-orange: #A16021; /* beyaz metin 4.99:1 */
/* --- Pastel yumuşak zeminler (ikon dairesi / kart zemini) ---
Bu zeminlerin üzerine --ink-strong (başlık) ve --ink-body (açıklama) gelir.
İkon rengi olarak eşleşen --ink-* tokenı kullanılır (≥4.5:1). */
--soft-pink: var(--pink-100); /* ink-strong 9.51:1 */
--soft-purple: var(--purple-100); /* ink-strong 9.34:1 */
--soft-yellow: var(--yellow-100); /* ink-strong 10.49:1 */
--soft-green: var(--green-100); /* ink-strong 10.07:1 */
--soft-blue: var(--blue-100); /* ink-strong 9.96:1 */
--soft-orange: var(--orange-100); /* ink-strong 10.02:1 */
/* Program kartlarının doygun pastel zemini (mockup'taki 4 kart) */
--tile-pink: var(--pink-200); /* ink-strong 8.21:1 */
--tile-blue: var(--blue-200); /* ink-strong 8.91:1 */
--tile-green: var(--green-200); /* ink-strong 9.22:1 */
--tile-orange: var(--orange-200); /* ink-strong 9.07:1 */
/* --- Kenarlıklar ---
Dekoratif kenarlar 3:1 kuralına tabi DEĞİLDİR (WCAG 1.4.11 sadece
bilgi taşıyan UI bileşeni sınırları için geçerli).
Form girdisi kenarı bilgi taşır → --border-strong (3.21:1) kullan. */
--border-soft: #F0E7D8; /* kart içi ince ayırıcı — dekoratif */
--border: #E7DCC8; /* varsayılan kart/bölüm kenarı — dekoratif */
--border-strong: #988C74; /* FORM GİRDİSİ kenarı. krem 3.21:1 — AA (1.4.11) */
--border-hover: #7D7360; /* girdi hover. 4.53:1 */
--border-brand: #EE4B8B; /* pembe çerçeveli hayalet buton (dekoratif) */
/* --- Odak halkası ---
Tek renk halka her zeminde 3:1 tutturamaz (mor buton üzerinde mor halka
1.63:1 olur). Bu yüzden ÇİFT KATMAN kullanılır:
içte 2px beyaz boşluk + dışta 3px koyu mor. */
--focus-ring: #553786; /* krem 8.93:1 | sarı 6.00:1 | yeşil 4.12:1 */
--focus-ring-inner: #FFFFFF; /* mor dolgu üzerinde 5.66:1 */
--focus-ring-width: 3px;
--focus-ring-inner-width: 2px;
--focus-ring-offset: 2px;
/* --- Durum renkleri --- */
--success-bg: #EAF6EF;
--success-ink: #1E6B3E; /* kendi zemininde 5.86:1 | krem 6.30:1 */
--success-fill: #2C8554; /* beyaz metin 4.58:1 */
--success-border:#B7DFC8;
--error-bg: #FCEBEE;
--error-ink: #98203A; /* kendi zemininde 7.01:1 | krem 7.81:1 */
--error-fill: #C62B48; /* beyaz metin 5.47:1 */
--error-border: #F3C2CC;
--warning-bg: #FEF4E4;
--warning-ink: #8A5308; /* kendi zemininde 5.80:1 | krem 6.12:1 */
--warning-fill: #A4690A; /* beyaz metin 4.56:1 */
--warning-border:#F6DCB0;
--info-bg: #EAF3FA;
--info-ink: #1D5580; /* kendi zemininde 7.02:1 | krem 7.63:1 */
--info-fill: #2A7ABC; /* beyaz metin 4.56:1 */
--info-border: #BFDBEE;
/* --- Devre dışı --- */
--disabled-bg: #E9EAF0;
--disabled-ink: #767E9E; /* 3.33:1 — WCAG devre dışı öğeleri muaf tutar */
--disabled-border: #D6D9E3;
/* ========================================================================
3. TİPOGRAFİ
==================================================================== */
--font-heading: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
--font-body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
/* Akışkan boyut ölçeği — 360px'de min, 1280px'de maks, arada lineer */
--fs-display: clamp(2.5rem, 1.6196rem + 3.9130vw, 4.75rem); /* 40 → 76px */
--fs-h1: clamp(2rem, 1.4130rem + 2.6087vw, 3.5rem); /* 32 → 56px */
--fs-h2: clamp(1.6875rem, 1.3207rem + 1.6304vw, 2.625rem); /* 27 → 42px */
--fs-h3: clamp(1.375rem, 1.1793rem + 0.8696vw, 1.875rem); /* 22 → 30px */
--fs-h4: clamp(1.1875rem, 1.0652rem + 0.5435vw, 1.5rem); /* 19 → 24px */
--fs-h5: clamp(1.0625rem, 0.9891rem + 0.3261vw, 1.25rem); /* 17 → 20px */
--fs-h6: clamp(0.96875rem, 0.9321rem + 0.1630vw, 1.0625rem);/* 15.5 → 17px */
--fs-lead: clamp(1.0625rem, 0.9891rem + 0.3261vw, 1.25rem); /* 17 → 20px */
--fs-body: clamp(1rem, 0.9755rem + 0.1087vw, 1.0625rem);/* 16 → 17px */
--fs-sm: clamp(0.90625rem, 0.8940rem + 0.0543vw, 0.9375rem);/* 14.5 → 15px */
--fs-xs: clamp(0.8125rem, 0.8003rem + 0.0543vw, 0.84375rem);/* 13 → 13.5px */
--fs-label: clamp(0.78125rem, 0.7690rem + 0.0543vw, 0.8125rem);/* 12.5 → 13px */
--lh-display: 1.02;
--lh-h1: 1.08;
--lh-h2: 1.14;
--lh-h3: 1.22;
--lh-h4: 1.30;
--lh-h5: 1.35;
--lh-h6: 1.40;
--lh-lead: 1.62;
--lh-body: 1.70; /* Türkçe uzun kelimeler için cömert satır yüksekliği */
--lh-sm: 1.60;
--lh-xs: 1.50;
--lh-label: 1.40;
--ls-display: -0.02em;
--ls-h1: -0.015em;
--ls-h2: -0.01em;
--ls-h3: -0.005em;
--ls-h4: 0;
--ls-h5: 0;
--ls-h6: 0.005em;
--ls-body: 0;
--ls-label: 0.08em; /* "ANAOKULU & KREŞ" / "HAKKIMIZDA" harf aralığı */
--fw-regular: 400;
--fw-medium: 500; /* Nunito'da mevcut; ayrı dosya inmesin diye kullanılmaz */
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold:800; /* SADECE Baloo 2 — Nunito 800 dosyası yüklenmiyor */
--measure: 68ch; /* okunabilir paragraf genişliği */
--measure-tight:52ch;
/* ========================================================================
4. BOŞLUK (spacing) — 4px tabanlı
==================================================================== */
--sp-0: 0;
--sp-px: 0.0625rem; /* 1px */
--sp-0-5: 0.125rem; /* 2px */
--sp-1: 0.25rem; /* 4px */
--sp-1-5: 0.375rem; /* 6px */
--sp-2: 0.5rem; /* 8px */
--sp-2-5: 0.625rem; /* 10px */
--sp-3: 0.75rem; /* 12px */
--sp-4: 1rem; /* 16px */
--sp-5: 1.25rem; /* 20px */
--sp-6: 1.5rem; /* 24px */
--sp-7: 1.75rem; /* 28px */
--sp-8: 2rem; /* 32px */
--sp-10: 2.5rem; /* 40px */
--sp-12: 3rem; /* 48px */
--sp-14: 3.5rem; /* 56px */
--sp-16: 4rem; /* 64px */
--sp-20: 5rem; /* 80px */
--sp-24: 6rem; /* 96px */
--sp-28: 7rem; /* 112px */
--sp-32: 8rem; /* 128px */
--sp-40: 10rem; /* 160px */
/* Bölüm dikey boşluğu — mobilde daralır */
--section-y: clamp(3rem, 1.6957rem + 5.7971vw, 6.5rem); /* 48 → 104px */
--section-y-sm: clamp(2rem, 1.3478rem + 2.8986vw, 3.75rem); /* 32 → 60px */
--gutter: clamp(1rem, 0.6739rem + 1.4493vw, 1.875rem); /* 16 → 30px */
/* Konteyner genişlikleri */
--container: 1200px;
--container-wide: 1360px;
--container-text: 760px; /* blog yazısı, yasal metin */
/* Dokunma hedefi — WCAG 2.5.8 minimum 24px, biz 44px hedefliyoruz */
--tap-min: 44px;
/* ========================================================================
5. KÖŞE YARIÇAPI (radius)
------------------------------------------------------------------------
Marka kimliği "her şey yuvarlak". Ölçek cömerttir.
==================================================================== */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 16px; /* küçük kart, girdi */
--r-lg: 20px; /* standart kart */
--r-xl: 24px; /* yüzen nav bar, büyük kart */
--r-2xl: 32px; /* hero görseli, program kartı */
--r-3xl: 40px; /* dev bölüm kartları */
--r-pill: 999px; /* buton, rozet, etiket, avatar */
--r-circle:50%;
/* ========================================================================
6. GÖLGE (shadow)
------------------------------------------------------------------------
Gölge rengi lacivertten türetilir (rgb 43 58 103) — krem zeminde
nötr griden çok daha doğal durur. Her seviye iki katmanlıdır:
yakın/keskin + uzak/yayvan.
==================================================================== */
--shadow-rgb: 43 58 103;
--shadow-xs: 0 1px 2px rgb(var(--shadow-rgb) / 0.06);
--shadow-sm: 0 1px 3px rgb(var(--shadow-rgb) / 0.07),
0 4px 8px rgb(var(--shadow-rgb) / 0.05);
--shadow-md: 0 2px 4px rgb(var(--shadow-rgb) / 0.06),
0 8px 20px rgb(var(--shadow-rgb) / 0.08);
--shadow-lg: 0 4px 8px rgb(var(--shadow-rgb) / 0.06),
0 16px 36px rgb(var(--shadow-rgb) / 0.10);
--shadow-xl: 0 8px 16px rgb(var(--shadow-rgb) / 0.07),
0 28px 60px rgb(var(--shadow-rgb) / 0.13);
/* Yüzen nav bar — mockup'taki "zeminden ayrık kart" hissi */
--shadow-nav: 0 2px 6px rgb(var(--shadow-rgb) / 0.06),
0 12px 32px rgb(var(--shadow-rgb) / 0.10);
/* Renkli buton altına kendi renginde hafif hale */
--shadow-primary: 0 6px 18px rgb(122 79 192 / 0.32);
--shadow-secondary: 0 6px 18px rgb(205 64 120 / 0.30);
--shadow-accent: 0 6px 18px rgb(255 201 60 / 0.38);
--shadow-inset: inset 0 2px 4px rgb(var(--shadow-rgb) / 0.06);
/* ========================================================================
7. KENARLIK KALINLIĞI
==================================================================== */
--bw-hair: 1px; /* ayırıcı çizgi */
--bw-thin: 1.5px; /* kart kenarı */
--bw-base: 2px; /* form girdisi, hayalet buton */
--bw-thick: 3px; /* odak halkası, aktif sekme alt çizgisi */
/* İnce çizgi ikonlar için standart kalem kalınlığı */
--icon-stroke: 1.75;
--icon-stroke-bold: 2.25;
/* ========================================================================
8. GEÇİŞ (transition) SÜRELERİ ve EASING
==================================================================== */
--dur-instant: 80ms;
--dur-fast: 140ms; /* renk/opaklık — hover */
--dur-base: 220ms; /* dönüşüm, boyut */
--dur-slow: 340ms; /* açılır menü, akordeon */
--dur-slower: 520ms; /* modal, story geçişi */
--dur-story: 5000ms; /* Instagram story ilerleme çubuğu (foto) */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* varsayılan giriş */
--ease-in: cubic-bezier(0.55, 0, 1, 0.45);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* hafif zıplama — çocuk hissi */
--ease-linear: linear; /* ilerleme çubuğu */
--t-color: color var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
--t-shadow: box-shadow var(--dur-base) var(--ease-out);
--t-move: transform var(--dur-base) var(--ease-spring);
/* ========================================================================
9. KATMAN (z-index)
==================================================================== */
--z-base: 0;
--z-doodle: 1; /* dekoratif SVG'ler — içeriğin ALTINDA */
--z-raised: 10;
--z-sticky: 100;
--z-nav: 200;
--z-dropdown: 300;
--z-overlay: 400;
--z-modal: 500;
--z-story: 600; /* tam ekran Instagram story görüntüleyici */
--z-toast: 700;
--z-tooltip: 800;
/* ========================================================================
10. BİLEŞEN ÖLÇÜLERİ
==================================================================== */
--btn-h-sm: 36px;
--btn-h-md: 46px;
--btn-h-lg: 56px;
--btn-px-sm: var(--sp-4);
--btn-px-md: var(--sp-6);
--btn-px-lg: var(--sp-8);
--input-h: 50px;
--input-px: var(--sp-4);
--nav-h: 76px;
--nav-h-mobile: 64px;
--icon-circle-sm: 44px;
--icon-circle-md: 56px;
--icon-circle-lg: 72px;
--wave-h: clamp(38px, 5vw, 72px); /* dalgalı ayırıcı yüksekliği */
--story-avatar: clamp(64px, 16vw, 84px); /* Instagram story yuvarlak avatarı */
}
/* ==========================================================================
11. HAREKET AZALTMA (prefers-reduced-motion)
--------------------------------------------------------------------------
Vestibüler rahatsızlığı olan kullanıcılar için tüm dekoratif hareket durur.
Süreler sıfırlanmaz, 1ms'e çekilir — böylece transitionend olayları
yine tetiklenir ve JS mantığı bozulmaz (story ilerlemesi buna bağlıdır).
========================================================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-instant: 1ms;
--dur-fast: 1ms;
--dur-base: 1ms;
--dur-slow: 1ms;
--dur-slower: 1ms;
--ease-spring: linear;
/* --dur-story SIFIRLANMAZ: story süresi içerik zamanlamasıdır,
animasyon değil. Ancak ilerleme çubuğu animasyonu yerine
basamaklı (step) gösterime düşürülür — bkz. components.css */
}
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
12. YÜKSEK KONTRAST / ZORLANMIŞ RENK MODU
--------------------------------------------------------------------------
Windows Yüksek Kontrast modunda tarayıcı renkleri ezer. Dekoratif
doodle'lar gizlenir, kenarlıklar sistem rengine bağlanır.
========================================================================== */
@media (forced-colors: active) {
:root {
--shadow-xs: none; --shadow-sm: none; --shadow-md: none;
--shadow-lg: none; --shadow-xl: none; --shadow-nav: none;
--shadow-primary: none; --shadow-secondary: none; --shadow-accent: none;
}
.doodle, .wave-divider { display: none; }
.btn, .card, .input { border: 1px solid currentColor; }
}
/* ==========================================================================
13. KARANLIK MOD — BİLİNÇLİ OLARAK YOK
--------------------------------------------------------------------------
Bu proje karanlık mod DESTEKLEMEZ. Gerekçe için
docs/05-tasarim-sistemi.md → Bölüm 9.
Tarayıcı/işletim sistemi karanlık tercih ettiğinde sayfanın
otomatik ters çevrilmesini engellemek için color-scheme sabitlenir.
Bu SATIRI SİLME: silinirse form girdileri, kaydırma çubukları ve
tarih seçiciler işletim sisteminin koyu temasına düşer ve krem
zemin üzerinde okunmaz hale gelir.
========================================================================== */
:root {
color-scheme: light;
}