/* ========================================================================== DESIGN TOKENS — Vadi Sürücü Kursu v5.0 Tüm renkler, spacing, radius ve gölge değerleri buradan yönetilir. ========================================================================== */ :root{ /* --- Brand palette (v5.0) --- */ --c-primary: #05BFDB; --c-primary-dark: #0A9FB6; /* WCAG AA (4.5:1) uyumlu erişilebilir ton — marka rengi #05BFDB değiştirilmiyor, sadece metin/beyaz-metin-üzeri-arkaplan gibi kontrast gerektiren yerlerde kullanılır. */ --c-primary-a11y: #037688; /* Metin olarak kullanılan teal — tema değişince yön değiştirir (açık modda koyu, koyu modda parlak olmalı). --c-primary-a11y (arka plan/beyaz-metin-üzeri) sabit kalır. */ --c-primary-text: var(--c-primary-a11y); --c-primary-100: #E3FBFE; --c-primary-50: #F1FDFE; --c-hover: #F58220; --c-hover-dark: #DC7217; --c-dark: #0F172A; --c-bg: #F8FAFC; --c-card: #FFFFFF; --c-border: #E5E7EB; --c-body: #475569; --c-body-light: #64748B; /* Sayfa başlık/gövde metni — dark mode'da bu token değişir, --c-dark (marka lacivert rengi, buton/modal arka planlarında kullanılır) sabit kalır. */ --c-heading: var(--c-dark); --gradient-primary: linear-gradient(120deg, #05BFDB, #0A9FB6); --gradient-hover: linear-gradient(120deg, #F58220, #DC7217); --gradient-dark: linear-gradient(160deg, #0F172A, #1E293B); /* --- Radius --- */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px; /* --- Shadow --- */ --shadow-sm: 0 2px 8px rgba(15,23,42,.06); --shadow-md: 0 12px 32px rgba(15,23,42,.09); --shadow-lg: 0 24px 60px rgba(15,23,42,.14); --shadow-glow: 0 12px 32px rgba(5,191,219,.35); --shadow-glow-hover: 0 12px 32px rgba(245,130,32,.35); /* --- Type --- */ --ff-display: 'Poppins', sans-serif; --ff-body: 'Inter', sans-serif; /* --- Layout --- */ --container: 1240px; --header-h: 90px; --sp-section: 80px; --sp-paragraph: 28px; --sp-heading: 40px; --header-bg: rgba(255,255,255,.75); --c-card-glass: rgba(255,255,255,.7); } /* ========================================================================== DARK MODE (altyapı) — ile aktifleşir. Marka renkleri (primary/hover/dark) ve modal/dropdown gibi kasıtlı olarak her zaman açık kalan yüzeyler (mega menü, arama, popup'lar) değişmez; sadece ana sayfa yüzeyleri (arkaplan, kart, kenarlık, metin) tema değiştirir. ========================================================================== */ html[data-theme="dark"]{ --c-bg: #0B1220; --c-card: #131C2E; --c-border: #26334A; --c-body: #B6C2D9; --c-body-light: #8493AC; --c-heading: #F1F5F9; --c-primary-50: #0E2530; --c-primary-100: #123241; --shadow-sm: 0 2px 8px rgba(0,0,0,.35); --shadow-md: 0 12px 32px rgba(0,0,0,.45); --shadow-lg: 0 24px 60px rgba(0,0,0,.55); --header-bg: rgba(11,18,32,.92); --c-card-glass: rgba(19,28,46,.7); --c-primary-text: var(--c-primary); } /* Modal/dropdown/panel gibi kasıtlı olarak HER ZAMAN açık kalan yüzeyler: arka planları hardcoded beyaz olduğundan, paylaşılan token'lar (body/border/ heading rengi) bu yüzeylerin İÇİNDE tema ne olursa olsun açık-mod değerlerinde sabit kalmalı — aksi halde koyu modda "koyu metin yerine açık metin, hâlâ beyaz zemin" gibi okunmaz kombinasyonlar oluşur. */ .mobile-nav,.mega,.search-modal,.welcome-popup,.exam-modal,.cookie-banner,.chat-panel, .hero-slide-visual .float-badge,.hero-slide-visual .plate-tag,.hero-info-card{ --c-bg: #F8FAFC; --c-card: #FFFFFF; --c-border: #E5E7EB; --c-body: #475569; --c-body-light: #64748B; --c-heading: #0F172A; --c-primary-text: #037688; --c-primary-50: #F2FAFC; --c-primary-100: #E3FBFE; color: var(--c-heading); /* miras alınan color, üst elemandan gelen ÇÖZÜLMÜŞ değeri taşır; token'ı yeniden tanımlamak yetmez, zinciri burada yeniden başlatmak gerekir */ }