/* ========================================================================== Heracles Destek Paneli — Tasarım Sistemi (token katmanı) -------------------------------------------------------------------------- Tüm renkler burada tanımlı semantik token'lardan okunur. Açık tema varsayılandır; koyu tema hem sistem tercihinden hem de özniteliğinden devreye girer. Not: Uygulama içindeki eski değişken adları (--bg-card, --text-main ...) geriye dönük uyumluluk için token'lara bağlanmıştır. ========================================================================== */ :root { color-scheme: light; /* Tipografi — CSP harici font yüklemesini engellediği için sistem yığını kullanılır; böylece yazı tipi her ortamda ilk boyamada hazırdır. */ --font-primary: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono", monospace; /* Yüzeyler */ --surface-page: #f5f7fb; --surface-1: #ffffff; --surface-2: #eef1f7; --surface-3: #e5e9f2; --surface-inset: #f7f9fc; --surface-overlay: rgba(15, 23, 42, 0.42); --surface-sidebar: #ffffff; --surface-navbar: rgba(255, 255, 255, 0.86); /* Kenarlıklar */ --border: #e2e7f0; --border-strong: #cbd4e2; /* Metin */ --text-1: #0f172a; --text-2: #4a5568; --text-3: #78849a; --text-on-accent: #ffffff; /* Vurgu */ --accent: #4f46e5; --accent-hover: #4338ca; --accent-soft: #eef0ff; --accent-soft-strong: #e0e4ff; --accent-border: #c7ccfb; --accent-text: #4338ca; /* Durum renkleri: solid = dolgu, soft = arka plan, text = soft üstü yazı */ --success: #059669; --success-soft: #e7f6f0; --success-text: #047857; --warning: #d97706; --warning-soft: #fdf3e3; --warning-text: #b45309; --danger: #dc2626; --danger-soft: #fdecec; --danger-text: #b91c1c; --info: #2563eb; --info-soft: #e8effd; --info-text: #1d4ed8; --purple: #7c3aed; --purple-soft: #f1eafe; --purple-text: #6d28d9; --teal: #0d9488; --teal-soft: #e3f5f3; --teal-text: #0f766e; --cyan: #0891b2; --cyan-soft: #e2f4f9; --cyan-text: #0e7490; --amber: #ca8a04; --amber-soft: #fbf3d9; --amber-text: #a16207; --orange: #ea580c; --orange-soft: #fdeee3; --orange-text: #c2410c; --neutral-soft: #eef1f6; --neutral-text: #52607a; /* Yükseklik */ --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05); --shadow-2: 0 4px 10px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-3: 0 18px 40px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.07); --shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.22); /* Geometri */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; /* Hareket */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --speed: 160ms; /* --- Eski değişken adları (geriye dönük uyumluluk) --- */ --bg-dark: var(--surface-page); --bg-sidebar: var(--surface-sidebar); --bg-card: var(--surface-1); --bg-card-solid: var(--surface-1); --bg-card-hover: var(--surface-2); --border-color: var(--border); --border-focus: var(--accent); --text-main: var(--text-1); --text-muted: var(--text-2); --text-dim: var(--text-3); --primary: var(--accent); --primary-hover: var(--accent-hover); --primary-light: var(--accent-soft); --primary-glow: rgba(79, 70, 229, 0.24); --success-light: var(--success-soft); --warning-light: var(--warning-soft); --danger-light: var(--danger-soft); --info-light: var(--info-soft); --purple-light: var(--purple-soft); --teal-light: var(--teal-soft); --shadow-sm: var(--shadow-1); --shadow-md: var(--shadow-2); --shadow-lg: var(--shadow-3); --backdrop-blur: blur(14px); } /* Koyu tema — sistem tercihi (kullanıcı açık temayı sabitlemediyse) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --surface-page: #0b0f19; --surface-1: #141a27; --surface-2: #1c2434; --surface-3: #243045; --surface-inset: #0f1421; --surface-overlay: rgba(2, 6, 16, 0.68); --surface-sidebar: #0e131e; --surface-navbar: rgba(14, 19, 30, 0.84); --border: #263145; --border-strong: #35435c; --text-1: #eef2f8; --text-2: #9dabc0; --text-3: #74829a; --text-on-accent: #ffffff; --accent: #6366f1; --accent-hover: #818cf8; --accent-soft: rgba(99, 102, 241, 0.16); --accent-soft-strong: rgba(99, 102, 241, 0.26); --accent-border: rgba(129, 140, 248, 0.38); --accent-text: #a5b4fc; --success: #10b981; --success-soft: rgba(16, 185, 129, 0.16); --success-text: #34d399; --warning: #f59e0b; --warning-soft: rgba(245, 158, 11, 0.16); --warning-text: #fbbf24; --danger: #ef4444; --danger-soft: rgba(239, 68, 68, 0.16); --danger-text: #f87171; --info: #3b82f6; --info-soft: rgba(59, 130, 246, 0.16); --info-text: #60a5fa; --purple: #8b5cf6; --purple-soft: rgba(139, 92, 246, 0.16); --purple-text: #c4b5fd; --teal: #14b8a6; --teal-soft: rgba(20, 184, 166, 0.16); --teal-text: #2dd4bf; --cyan: #06b6d4; --cyan-soft: rgba(6, 182, 212, 0.16); --cyan-text: #22d3ee; --amber: #eab308; --amber-soft: rgba(234, 179, 8, 0.16); --amber-text: #fde047; --orange: #f97316; --orange-soft: rgba(249, 115, 22, 0.16); --orange-text: #fb923c; --neutral-soft: rgba(148, 163, 184, 0.14); --neutral-text: #cbd5e1; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.42); --shadow-3: 0 24px 48px rgba(0, 0, 0, 0.58); --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.3); --primary-glow: rgba(99, 102, 241, 0.32); } } /* Koyu tema — kullanıcı tercihi (sistem ayarını ezer) */ :root[data-theme="dark"] { color-scheme: dark; --surface-page: #0b0f19; --surface-1: #141a27; --surface-2: #1c2434; --surface-3: #243045; --surface-inset: #0f1421; --surface-overlay: rgba(2, 6, 16, 0.68); --surface-sidebar: #0e131e; --surface-navbar: rgba(14, 19, 30, 0.84); --border: #263145; --border-strong: #35435c; --text-1: #eef2f8; --text-2: #9dabc0; --text-3: #74829a; --text-on-accent: #ffffff; --accent: #6366f1; --accent-hover: #818cf8; --accent-soft: rgba(99, 102, 241, 0.16); --accent-soft-strong: rgba(99, 102, 241, 0.26); --accent-border: rgba(129, 140, 248, 0.38); --accent-text: #a5b4fc; --success: #10b981; --success-soft: rgba(16, 185, 129, 0.16); --success-text: #34d399; --warning: #f59e0b; --warning-soft: rgba(245, 158, 11, 0.16); --warning-text: #fbbf24; --danger: #ef4444; --danger-soft: rgba(239, 68, 68, 0.16); --danger-text: #f87171; --info: #3b82f6; --info-soft: rgba(59, 130, 246, 0.16); --info-text: #60a5fa; --purple: #8b5cf6; --purple-soft: rgba(139, 92, 246, 0.16); --purple-text: #c4b5fd; --teal: #14b8a6; --teal-soft: rgba(20, 184, 166, 0.16); --teal-text: #2dd4bf; --cyan: #06b6d4; --cyan-soft: rgba(6, 182, 212, 0.16); --cyan-text: #22d3ee; --amber: #eab308; --amber-soft: rgba(234, 179, 8, 0.16); --amber-text: #fde047; --orange: #f97316; --orange-soft: rgba(249, 115, 22, 0.16); --orange-text: #fb923c; --neutral-soft: rgba(148, 163, 184, 0.14); --neutral-text: #cbd5e1; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.42); --shadow-3: 0 24px 48px rgba(0, 0, 0, 0.58); --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.3); --primary-glow: rgba(99, 102, 241, 0.32); } /* ---------- Temel sıfırlama ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } /* [hidden], display kuralı olan sınıflar tarafından ezilmemelidir. */ [hidden] { display: none !important; } body { font-family: var(--font-primary); background-color: var(--surface-page); color: var(--text-1); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease); } a { color: var(--accent-text); text-decoration: none; transition: color var(--speed) var(--ease); } a:hover { color: var(--accent); text-decoration: underline; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } svg { display: block; } code { font-family: var(--font-mono); font-size: 0.92em; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Yalnızca ekran okuyucular için */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* İnce kaydırma çubukları */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: var(--border-strong); border: 3px solid transparent; background-clip: content-box; border-radius: var(--radius-full); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }