/** * ZekPrep — Paylaşılan Tasarım Tokenleri * ═══════════════════════════════════════════════════════════ * Tüm sayfalara 'e ekle: * * * Bu dosya yalnızca CSS custom property tanımları içerir. * Hiçbir element stilini doğrudan değiştirmez — güvenle import edilir. * ═══════════════════════════════════════════════════════════ */ /* ── Canonical Renk Paleti ─────────────────────────────── */ :root { /* GOLD — tüm sayfalarda bu değer kullanılır (#D4AF37) */ --zp-gold: #D4AF37; --zp-gold-light: #F0DC82; --zp-gold-dark: #A88B22; --zp-gold-dim: rgba(212, 175, 55, 0.08); --zp-gold-border: rgba(212, 175, 55, 0.22); /* TEAL */ --zp-teal: #14B8A6; --zp-teal-light: #2DD4C8; --zp-teal-dark: #0D9488; --zp-teal-dim: rgba(20, 184, 166, 0.08); /* BLUE */ --zp-blue: #3B82F6; --zp-blue-light: #60A5FA; --zp-blue-dim: rgba(59, 130, 246, 0.08); /* PURPLE */ --zp-purple: #8B5CF6; --zp-purple-dim: rgba(139, 92, 246, 0.08); /* STATUS */ --zp-green: #10B981; --zp-green-dim: rgba(16, 185, 129, 0.08); --zp-red: #EF4444; --zp-red-dim: rgba(239, 68, 68, 0.08); --zp-orange: #F59E0B; --zp-orange-dim: rgba(245, 158, 11, 0.08); /* ── Font Stack ─────────────────────────────────────── */ /* Serif (başlıklar, hero) */ --zp-font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; /* Sans (gövde, UI) */ --zp-font-sans: 'DM Sans', 'Inter', system-ui, sans-serif; /* Mono (sayılar, kodlar) */ --zp-font-mono: 'DM Mono', 'JetBrains Mono', monospace; /* ── Animasyon ────────────────────────────────────────── */ --zp-ease: cubic-bezier(0.16, 1, 0.3, 1); --zp-transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease, opacity 0.14s ease, box-shadow 0.14s ease; /* ── Boyutlar ─────────────────────────────────────────── */ --zp-sidebar-w: 252px; --zp-topbar-h: 50px; --zp-radius-sm: 6px; --zp-radius-md: 10px; --zp-radius-lg: 14px; --zp-radius-xl: 18px; } /* ── Tema: Dark (varsayılan) ──────────────────────────── */ [data-theme="dark"], html.dark { --zp-bg: #08090D; --zp-bg2: #0F1218; --zp-bg3: #161B24; --zp-bg4: #1C2230; --zp-bg5: #232A3A; --zp-ink: #E4E4E7; --zp-ink2: #A1A1AA; --zp-ink3: #71717A; --zp-ink4: #3F3F46; --zp-border: rgba(255, 255, 255, 0.06); --zp-border2: rgba(255, 255, 255, 0.12); --zp-card-bg: #161B24; --zp-shadow: 0 2px 20px rgba(0, 0, 0, 0.55); } /* ── Tema: Light ──────────────────────────────────────── */ [data-theme="light"], html.light { --zp-bg: #F1F5F9; --zp-bg2: #E8EDF5; --zp-bg3: #FFFFFF; --zp-bg4: #F8FAFC; --zp-bg5: #EEF2F8; --zp-ink: #1E293B; --zp-ink2: #334155; --zp-ink3: #64748B; --zp-ink4: #94A3B8; --zp-border: rgba(0, 0, 0, 0.07); --zp-border2: rgba(0, 0, 0, 0.13); --zp-card-bg: #FFFFFF; --zp-shadow: 0 1px 12px rgba(15, 23, 42, 0.06), 0 4px 24px rgba(15, 23, 42, 0.04); } /* ── Scrollbar (tüm sayfalar için standart) ──────────── */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--zp-gold); } [data-theme="light"] ::-webkit-scrollbar-thumb, html.light ::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.12); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover, html.light ::-webkit-scrollbar-thumb:hover { background: var(--zp-gold-dark); } /* ── Focus visible (erişilebilirlik) ─────────────────── */ :focus-visible { outline: 2px solid var(--zp-gold); outline-offset: 3px; border-radius: var(--zp-radius-sm); }