/* D1 Maritime — UI System v3 Marka: teal #1f8a8a + lacivert #0c1b2c Çift temalı: açık (gündüz/ofis) + koyu (köprüüstü/gece). Tema ile belirlenir; ayarlanmamışsa işletim sistemi tercihi (prefers-color-scheme) uygulanır. KURAL: sayfa modüllerinde sabit hex renk KULLANILMAZ — buradaki semantik token'lar kullanılır, yoksa koyu temada bozulur. */ :root { /* Backgrounds — serin, denizci grisi */ --bg: #f5f7f9; --bg-shaded: #eef1f4; --surface: #ffffff; --surface-2: #f7f9fa; --surface-3: #e9edf1; /* Sidebar — derin lacivert (her iki temada da koyu) */ --sidebar: #0a1420; --sidebar-2: #101d2c; --sidebar-text: #ccd6e0; --sidebar-text-2: #8496a6; --sidebar-text-3: #5a6b7a; --sidebar-active: rgba(20, 184, 178, 0.14); /* Text */ --text: #0c1b2c; --text-2: #4a5a6a; --text-3: #8494a3; --text-inverse: #ffffff; /* Accent — lacivert birincil, marka teali vurgu */ --accent: #0c1b2c; --accent-2: #16293c; --accent-soft: #dde3e9; --accent-bg: #eef1f4; --coral: #0e8a88; /* marka teali (tarihsel isim: coral) */ --coral-hover: #0b6f6d; --coral-soft: #d9f2f1; /* Varsayılan buton (koyu temada ters çevrilir) */ --btn-bg: #0c1b2c; --btn-fg: #ffffff; /* States */ --warn: #c2760a; --warn-bg: #fdf3e3; --warn-strong: #8a5108; --danger: #d4342c; --danger-bg: #fdecea; --danger-strong: #9b241e; --success: #17864a; --success-bg: #e6f6ec; --success-strong: #0f6135; --info: #2563eb; --info-bg: #e6edfd; --info-strong: #1a4bc0; /* Risk isi haritasi — her iki temada da DOYGUN kalir (arka plan tonu degil) */ --risk-low: #1e9e57; --risk-med: #e0a815; --risk-high: #dd7722; --risk-critical: #c0392b; --on-accent: #ffffff; /* var(--accent) dolgu uzerindeki yazi */ --on-strong: #ffffff; /* guclu renk dolgu uzerindeki yazi rengi */ --purple: #8e44ad; --purple-bg: #f4ecf7; /* Borders — subtle */ --border: rgba(12, 27, 44, 0.07); --border-2: rgba(12, 27, 44, 0.13); --border-3: rgba(12, 27, 44, 0.22); /* Yüzey üstü katmanlar */ --topbar-bg: rgba(245, 247, 249, 0.85); --overlay: rgba(12, 27, 44, 0.45); --select-arrow-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%234a5a6a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Shadows — refined */ --shadow-xs: 0 1px 2px rgba(12, 27, 44, 0.04); --shadow-sm: 0 1px 2px rgba(12, 27, 44, 0.05), 0 1px 3px rgba(12, 27, 44, 0.04); --shadow-md: 0 2px 8px rgba(12, 27, 44, 0.06), 0 1px 3px rgba(12, 27, 44, 0.04); --shadow-lg: 0 12px 32px rgba(12, 27, 44, 0.08), 0 4px 8px rgba(12, 27, 44, 0.04); --shadow-xl: 0 24px 60px rgba(12, 27, 44, 0.12), 0 8px 16px rgba(12, 27, 44, 0.06); /* Radii */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px; /* Type stacks */ --serif: 'Fraunces', Georgia, serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, Menlo, monospace; /* Layout */ --sidebar-w: 240px; --topbar-h: 60px; /* Easing */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* Transitions */ --t-fast: 120ms; --t-base: 180ms; --t-slow: 280ms; } /* ============ KOYU TEMA ============ Aynı token adları — bileşen CSS'i değişmeden tüm uygulama dönüşür. Köprüüstü/gece kullanımı için düşük parlaklık, yüksek okunabilirlik. */ :root[data-theme="dark"] { --bg: #0a1017; --bg-shaded: #070c12; --surface: #111a24; --surface-2: #172230; --surface-3: #1f2c3b; --sidebar: #070d15; --sidebar-2: #0d1620; --sidebar-text: #c3d0dc; --sidebar-text-2: #7d8fa0; --sidebar-text-3: #5b6b7a; --sidebar-active: rgba(45, 212, 191, 0.16); --text: #e6ecf2; --text-2: #a3b1bf; --text-3: #6f8090; --text-inverse: #0a1017; --accent: #e6ecf2; --accent-2: #ffffff; --accent-soft: #243545; --accent-bg: #172230; --coral: #2dd4bf; --coral-hover: #5eead4; --coral-soft: rgba(45, 212, 191, 0.16); --btn-bg: #243545; --btn-fg: #e6ecf2; --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, 0.14); --warn-strong: #fcd34d; --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.14); --danger-strong: #fca5a5; --success: #4ade80; --success-bg: rgba(74, 222, 128, 0.14); --success-strong: #86efac; --info: #60a5fa; --info-bg: rgba(96, 165, 250, 0.14); --info-strong: #93c5fd; --risk-low: #1a8a4c; --risk-med: #c2900f; --risk-high: #c26a1c; --risk-critical: #a83228; --on-accent: #0a1017; --on-strong: #0a1017; --purple: #c084fc; --purple-bg: rgba(192, 132, 252, 0.14); --border: rgba(255, 255, 255, 0.08); --border-2: rgba(255, 255, 255, 0.14); --border-3: rgba(255, 255, 255, 0.24); --topbar-bg: rgba(10, 16, 23, 0.85); --overlay: rgba(0, 0, 0, 0.65); --select-arrow-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23a3b1bf' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35); --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4); color-scheme: dark; } /* Kullanıcı tema seçmediyse işletim sistemi tercihini uygula */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a1017; --bg-shaded: #070c12; --surface: #111a24; --surface-2: #172230; --surface-3: #1f2c3b; --sidebar: #070d15; --sidebar-2: #0d1620; --sidebar-text: #c3d0dc; --sidebar-text-2: #7d8fa0; --sidebar-text-3: #5b6b7a; --sidebar-active: rgba(45, 212, 191, 0.16); --text: #e6ecf2; --text-2: #a3b1bf; --text-3: #6f8090; --text-inverse: #0a1017; --accent: #e6ecf2; --accent-2: #ffffff; --accent-soft: #243545; --accent-bg: #172230; --coral: #2dd4bf; --coral-hover: #5eead4; --coral-soft: rgba(45, 212, 191, 0.16); --btn-bg: #243545; --btn-fg: #e6ecf2; --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, 0.14); --warn-strong: #fcd34d; --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.14); --danger-strong: #fca5a5; --success: #4ade80; --success-bg: rgba(74, 222, 128, 0.14); --success-strong: #86efac; --info: #60a5fa; --info-bg: rgba(96, 165, 250, 0.14); --info-strong: #93c5fd; --risk-low: #1a8a4c; --risk-med: #c2900f; --risk-high: #c26a1c; --risk-critical: #a83228; --on-accent: #0a1017; --on-strong: #0a1017; --purple: #c084fc; --purple-bg: rgba(192, 132, 252, 0.14); --border: rgba(255, 255, 255, 0.08); --border-2: rgba(255, 255, 255, 0.14); --border-3: rgba(255, 255, 255, 0.24); --topbar-bg: rgba(10, 16, 23, 0.85); --overlay: rgba(0, 0, 0, 0.65); --select-arrow-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23a3b1bf' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35); --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4); color-scheme: dark; } }