/* ========================================================================= TETİKOĞLU KİMYA — TASARIM SİSTEMİ / TOKENLAR ------------------------------------------------------------------------- Renkler Tetik logosundan alınır: logo kırmızısı (#ED1C24) eylem rengi, lacivert halka (#17469E) kurumsal ana renk, açık mavi halka (#00AEEF) vurgu ve su detayları, beyaz zemin. Logodaki oval halka motifi vitrinde ve bölüm başlıklarında tekrar eder. Tema: açık seçimdir; nitelik yoksa sistem tercihi (prefers-color-scheme) geçerlidir. Kurumsal bölüm ve alt bilgi her iki temada da lacivert kalır. Bu dosya hem katalog (index.html) hem yönetim paneli (admin.html) tarafından kullanılır. ========================================================================= */ :root { /* Renk — açık tema */ --bg: #f4f7fc; --surface: #ffffff; --surface-2: #eef3fa; --tile: #eef4fb; --tile-glow: #ffffff; --ink: #0d2350; --ink-2: #3a4d70; --ink-3: #56678a; --line: #dce5f1; --line-strong: #c1d0e4; --brand: #17469e; --brand-strong: #0f3479; --brand-soft: #e5edf9; --brand-contrast: #ffffff; --accent: #ed1c24; --accent-strong: #c9141b; --accent-soft: #fde8e9; --accent-contrast: #ffffff; --accent-fill: #e11a22; /* beyaz yazılı düğme zemini (WCAG AA 4,8:1) */ --accent-ink: #d4151c; /* açık zeminde kırmızı metin (≥ 4,9:1) */ --aqua: #00aeef; --aqua-soft: #dff4fd; --navy: #0f3479; --navy-2: #17469e; --navy-ink: #eef4ff; --navy-ink-2: #b4c6e6; --navy-line: rgba(180, 198, 230, 0.22); --success: #12805c; --success-soft: #dcf3ea; --danger: #c8283a; --danger-soft: #fbe3e6; --warning: #9a6200; --overlay: rgba(13, 35, 80, 0.5); --shadow-color: 218 60% 22%; --focus: #17469e; --ph-liquid-opacity: 0.28; /* Tipografi */ --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --display-stretch: 104%; /* Tip ölçeği (1.25 oranlı, akışkan) */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --fs-2xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); --fs-3xl: clamp(2rem, 1.5rem + 2vw, 3.1rem); --fs-hero: clamp(2.5rem, 1.6rem + 3.8vw, 5rem); /* Aralık ölçeği */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6.5rem; /* Şekil */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-xl: 24px; --shell: 1320px; --gutter: clamp(16px, 3.5vw, 40px); --header-h: 68px; /* Gölge */ --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.08), 0 1px 1px hsl(var(--shadow-color) / 0.04); --shadow: 0 2px 4px hsl(var(--shadow-color) / 0.06), 0 8px 24px hsl(var(--shadow-color) / 0.08); --shadow-lg: 0 12px 28px hsl(var(--shadow-color) / 0.14), 0 40px 80px hsl(var(--shadow-color) / 0.18); /* Hareket */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #081430; --surface: #0e1e3e; --surface-2: #13264b; --tile: #15294f; --tile-glow: #1f3866; --ink: #eaf0fb; --ink-2: #b8c5dd; --ink-3: #8595b3; --line: #1e3259; --line-strong: #2c4674; --brand: #6fa3ff; --brand-strong: #9cc0ff; --brand-soft: #16305d; --brand-contrast: #081430; --accent: #ff4b53; --accent-strong: #ff737a; --accent-soft: #3d1420; --accent-contrast: #ffffff; --accent-fill: #e5262e; --accent-ink: #ff6b72; --aqua: #33c3f5; --aqua-soft: #0d3350; --success: #43c596; --success-soft: #0f3326; --danger: #ff6b7c; --danger-soft: #3a1219; --warning: #f0b44c; --overlay: rgba(2, 8, 20, 0.7); --shadow-color: 222 60% 3%; --focus: #9cc0ff; --ph-liquid-opacity: 0.6; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #081430; --surface: #0e1e3e; --surface-2: #13264b; --tile: #15294f; --tile-glow: #1f3866; --ink: #eaf0fb; --ink-2: #b8c5dd; --ink-3: #8595b3; --line: #1e3259; --line-strong: #2c4674; --brand: #6fa3ff; --brand-strong: #9cc0ff; --brand-soft: #16305d; --brand-contrast: #081430; --accent: #ff4b53; --accent-strong: #ff737a; --accent-soft: #3d1420; --accent-contrast: #ffffff; --accent-fill: #e5262e; --accent-ink: #ff6b72; --aqua: #33c3f5; --aqua-soft: #0d3350; --success: #43c596; --success-soft: #0f3326; --danger: #ff6b7c; --danger-soft: #3a1219; --warning: #f0b44c; --overlay: rgba(2, 8, 20, 0.7); --shadow-color: 222 60% 3%; --focus: #9cc0ff; --ph-liquid-opacity: 0.6; color-scheme: dark; }