/* /assets/css/root.css Yiğit Yazılım - Theme Tokens (Light / Dark) Bootstrap 5.3 uyumlu semantik tasarım tokenları */ /* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@600;700&family=Poppins:wght@600;700&display=swap'); :root{ /* ========================================================================== Typography ========================================================================== */ --font-heading: "Poppins", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* ========================================================================== Core Surfaces (Light) ========================================================================== */ --bg: #f7f9fc; --surface: #ffffff; --surface-2: #f1f4f9; /* Semantics */ --card: var(--surface); --text: #0f172a; --text-2: #334155; --muted: #64748b; /* Borders / Shadows */ --border: rgba(15, 23, 42, .10); --shadow: 0 10px 30px rgba(15, 23, 42, .08); /* ========================================================================== Brand Palette ========================================================================== */ --primary: #0b2a4a; /* deep navy */ --primary-2: #123a63; /* navy alt */ --accent: #f59e0b; /* warm amber */ --accent-2: #fb923c; /* orange */ --success: #16a34a; --danger: #ef4444; /* Soft brand tints (CSS'te kullanılıyor: page-hero-bg vb.) */ --accent-soft: rgba(245, 158, 11, .20); --primary-soft: rgba(11, 42, 74, .14); /* Radius & motion */ --radius: 16px; --transition: 180ms ease; /* Links */ --link: var(--primary-2); --link-hover: var(--primary); /* Focus ring */ --focus: 0 0 0 .25rem rgba(245, 158, 11, .25); /* ========================================================================== Glass / Overlay tokens (theme safe) - color-mix desteklemeyen tarayıcılar için fallback değerleri vardır ========================================================================== */ /* Fallback (no color-mix) */ --glass-bg: rgba(255,255,255,.78); --glass-border: rgba(15, 23, 42, .08); --glass-text: var(--text); /* Modern browsers */ --glass-bg: color-mix(in srgb, var(--surface) 78%, transparent); --glass-border: color-mix(in srgb, var(--border) 65%, transparent); /* Hero/media okunabilirlik overlay’i (token) */ --overlay-strong: linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.35) 48%, rgba(0,0,0,.08) 75% ); } /* ========================================================================== Dark Theme Overrides Kullanım: veya :root[data-theme="dark"] ========================================================================== */ :root[data-theme="dark"]{ --bg: #0b1220; --surface: #0f1b2d; --surface-2: #12233a; --card: var(--surface); --text: #e6edf7; --text-2: #c7d2e3; --muted: #93a4bd; --border: rgba(230, 237, 247, .10); --shadow: 0 12px 32px rgba(0,0,0,.35); --primary: #8db6ff; --primary-2: #b9d0ff; --accent: #fbbf24; --accent-2: #fb923c; --link: var(--primary-2); --link-hover: var(--primary); /* Soft tints (dark) */ --accent-soft: rgba(251, 191, 36, .22); --primary-soft: rgba(141, 182, 255, .16); /* Glass fallback (no color-mix) */ --glass-bg: rgba(15,27,45,.62); --glass-border: rgba(230,237,247,.12); --glass-text: var(--text); /* Modern browsers */ --glass-bg: color-mix(in srgb, var(--surface) 62%, transparent); --glass-border: color-mix(in srgb, rgba(230,237,247,.18) 60%, transparent); --overlay-strong: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.40) 48%, rgba(0,0,0,.10) 75% ); } /* ========================================================================== Base ========================================================================== */ html, body{ height: 100%; } body{ font-family: var(--font-body); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings */ h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading); letter-spacing: -0.02em; } /* Links */ a{ color: var(--link); text-decoration: none; transition: color var(--transition); } a:hover{ color: var(--link-hover); } /* ========================================================================== Helpers (Bootstrap ile çatışmayacak güvenli yardımcılar) ========================================================================== */ .text-muted-2{ color: var(--muted) !important; } .surface{ background: var(--surface) !important; } .surface-2{ background: var(--surface-2) !important; } .border-soft{ border: 1px solid var(--border) !important; } .shadow-soft{ box-shadow: var(--shadow) !important; } .rounded-2xl{ border-radius: var(--radius) !important; }