/* ═══════════════════════════════════════════════════════════════════════════ BASE — Simunova CRM Design System v2 Reset · Variables · Typography · Global utilities ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Font: HTML ile yükleniyor (bkz. her sayfanın bölümü) ── */ /* ─── CSS Değişkenleri ────────────────────────────────────────────────────── */ :root { /* ── Surfaces ── */ --c-bg: #F0F2F8; --c-surface: #FFFFFF; --c-surface-alt: #F6F7FB; --c-border: #E2E6F0; --c-border-dark: #C8CDDB; /* ── Sidebar ── */ --c-sidebar: #FFFFFF; --c-sidebar-2: #F4F6FB; --c-sidebar-text: #3B4A5F; --c-sidebar-act: #1E9FFF; /* ── Text ── */ --c-text: #151B2B; --c-text-2: #475069; --c-text-muted: #8E99B4; /* ── Accent ── */ --c-accent: #1E9FFF; --c-accent-dark: #0B7FD4; --c-accent-soft: rgba(30, 159, 255, .08); /* ── Semantic ── */ --c-success: #10B854; --c-success-soft: rgba(16, 184, 84, .08); --c-danger: #E5293E; --c-danger-soft: rgba(229, 41, 62, .08); --c-warning: #D99B06; --c-warning-soft: rgba(217, 155, 6, .08); /* ── Typography ── */ --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* ── Spacing & Radius ── */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; /* ── Shadows ── */ --shadow-xs: 0 1px 2px rgba(21, 27, 43, .03); --shadow-sm: 0 1px 3px rgba(21, 27, 43, .04), 0 1px 2px rgba(21, 27, 43, .02); --shadow: 0 4px 16px rgba(21, 27, 43, .06), 0 1px 3px rgba(21, 27, 43, .03); --shadow-lg: 0 12px 40px rgba(21, 27, 43, .08), 0 4px 12px rgba(21, 27, 43, .03); --shadow-xl: 0 20px 60px rgba(21, 27, 43, .12), 0 8px 20px rgba(21, 27, 43, .05); /* ── Transitions ── */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-snap: cubic-bezier(.3, 1.5, .5, 1); --duration: .2s; --duration-slow: .35s; } /* ─── Koyu Tema ─────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* ── Surfaces ── */ --c-bg: #0F1117; --c-surface: #1A1D27; --c-surface-alt: #21242F; --c-border: #2C3040; --c-border-dark: #3A3F52; /* ── Sidebar ── */ --c-sidebar: #0C1526; --c-sidebar-2: #0F1B30; --c-sidebar-text: #7E92B8; --c-sidebar-act: #4DB4FF; /* ── Text ── */ --c-text: #E2E6F0; --c-text-2: #A0AAC0; --c-text-muted: #6B7590; /* ── Accent ── */ --c-accent: #3AADFF; --c-accent-dark: #1E9FFF; --c-accent-soft: rgba(58, 173, 255, .10); /* ── Semantic ── */ --c-success: #22C96A; --c-success-soft: rgba(34, 201, 106, .10); --c-danger: #F04458; --c-danger-soft: rgba(240, 68, 88, .10); --c-warning: #F0B020; --c-warning-soft: rgba(240, 176, 32, .10); /* ── Shadows (daha yoğun) ── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, .12); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .10); --shadow: 0 4px 16px rgba(0, 0, 0, .20), 0 1px 3px rgba(0, 0, 0, .12); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .28), 0 4px 12px rgba(0, 0, 0, .16); --shadow-xl: 0 20px 60px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .20); color-scheme: dark; } /* ─── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-body); background: var(--c-bg); color: var(--c-text); line-height: 1.6; overflow-x: hidden; } a { color: inherit; text-decoration: none; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; } button { cursor: pointer; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; } input, select, textarea { font-family: var(--font-body); -webkit-tap-highlight-color: transparent; } table, th, td, span, div, p, label, li, h1, h2, h3, h4, h5, h6 { font-family: var(--font-body); } img { max-width: 100%; height: auto; } /* ─── Tipografi ──────────────────────────────────────────────────────────── */ h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.3; } h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; } h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.4; } h4 { font-size: 1rem; font-weight: 600; line-height: 1.45; } h5 { font-size: .9rem; font-weight: 600; line-height: 1.5; } small { font-size: .8rem; } .muted { color: var(--c-text-muted); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ─── Selection ──────────────────────────────────────────────────────────── */ ::selection { background: rgba(30, 159, 255, .18); color: var(--c-text); } /* ─── Focus ring (accessibility) ─────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* ─── Spinner ────────────────────────────────────────────────────────────── */ .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--c-border); border-top-color: var(--c-accent); border-radius: 50%; animation: spin .65s linear infinite; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── Scrollbar ──────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--c-border-dark); border-radius: 99px; transition: background .2s; } ::-webkit-scrollbar-thumb:hover { background: var(--c-text-muted); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--c-border-dark) transparent; }