/* ============================================================ Cerkar Makina — Dark Theme Overlay (2026-05-11) ------------------------------------------------------------ Aktif olur: Default LIGHT (warm cream/peach) korunur — toggle ile devreye girer. Vault: feedback_cerkar_dark_toggle (önceki feedback_cerkar_tema_light "default DARK ETME" kuralına sadık — bu sadece kullanıcı opsiyonu). ============================================================ */ /* === Surface tokens — eski Cerkar deep-ink + ivory paleti === Vault feedback_cerkar_tema_light tablosunun "Eski (DARK)" sütunu */ :root[data-theme="dark"] { --color-ink-0: oklch(0.09 0.012 250); /* deepest dark — hero arka plan */ --color-ink-base: oklch(0.12 0.015 250); /* body / primary surface */ --color-ink-elev: oklch(0.16 0.015 250); /* elevated card (bento) */ --color-ink-soft: oklch(0.20 0.018 250); /* divider / hover */ --color-ivory: oklch(0.95 0.012 85); /* primary text (ivory) */ --color-ivory-dim: oklch(0.72 0.015 85); /* secondary text */ --color-ivory-faint: oklch(0.55 0.012 85); /* tertiary / caption */ --blueprint-dot: oklch(0.95 0.012 85 / 0.045); } [data-theme="dark"] { color-scheme: dark; } [data-theme="dark"] body { background-color: var(--color-ink-base); } /* === Bento card — light: deep-ink %8 hairline; dark: ivory %6 === */ [data-theme="dark"] .bento-card { border-color: oklch(0.95 0.012 85 / 0.06); } [data-theme="dark"] .bento-card:hover { border-color: oklch(0.65 0.22 45 / 0.5); box-shadow: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 24px 48px -16px oklch(0 0 0 / 0.55), 0 0 0 1px oklch(0.65 0.22 45 / 0.25), 0 0 32px -10px oklch(0.72 0.18 52 / 0.30); } [data-theme="dark"] .dark-card { border-color: oklch(0.95 0.012 85 / 0.06); } [data-theme="dark"] .dark-card:hover { border-color: oklch(0.65 0.22 45 / 0.5); box-shadow: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 16px 32px -12px oklch(0 0 0 / 0.50); } [data-theme="dark"] .glow-border { border-color: oklch(0.95 0.012 85 / 0.10); } [data-theme="dark"] .btn-ghost { border-color: oklch(0.95 0.012 85 / 0.18); } /* === Header (sticky scroll) === */ [data-theme="dark"] header[data-header].is-scrolled { background: oklch(0.09 0.012 250 / 0.88); backdrop-filter: blur(12px); border-color: oklch(0.95 0.012 85 / 0.06); } /* Hardcoded oklch(0.18 0.018 250 / X) → ivory equivalent (search input, mobile menu, etc) */ [data-theme="dark"] [class*="oklch(0.18_0.018_250"], [data-theme="dark"] header input[type="search"], [data-theme="dark"] #mobile-menu input[type="search"], [data-theme="dark"] [data-menu-toggle] { background-color: oklch(0.95 0.012 85 / 0.04); border-color: oklch(0.95 0.012 85 / 0.12); } [data-theme="dark"] #mobile-menu { background-color: var(--color-ink-elev); border-color: oklch(0.95 0.012 85 / 0.08); } [data-theme="dark"] #mobile-menu a { border-color: oklch(0.95 0.012 85 / 0.08); } /* === Logo swap (cerkar-logo light variant for dark theme) === */ .logo-light { display: none; } .logo-dark { display: inline-block; } [data-theme="dark"] .logo-light { display: inline-block; } [data-theme="dark"] .logo-dark { display: none; } /* === Map iframe — Google's bright map biraz dim et dark zeminde === */ [data-theme="dark"] iframe[src*="google.com/maps"], [data-theme="dark"] iframe[src*="maps.google.com"] { filter: brightness(0.85) contrast(1.05); } /* === Form fields (public iletişim formu) === */ [data-theme="dark"] input:not([type="search"]):not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: oklch(0.16 0.015 250); border-color: oklch(0.95 0.012 85 / 0.15); color: var(--color-ivory); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--color-ivory-faint); } /* === Scrollbar === */ [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-ink-base); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-ink-soft); border-color: var(--color-ink-base); } /* === Footer floating phone button (light mode'da bg-elev kullanıyor) === */ [data-theme="dark"] .fixed.bottom-6 a[href^="tel:"] { background: var(--color-ink-elev); } /* === THEME TOGGLE BUTTON === */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); border: 1px solid oklch(0.18 0.018 250 / 0.12); background: oklch(0.18 0.018 250 / 0.04); cursor: pointer; transition: background 220ms var(--ease-out-expo), border-color 220ms var(--ease-out-expo), color 220ms var(--ease-out-expo); color: var(--color-ivory); } .theme-toggle:hover { border-color: var(--color-copper-500); color: var(--color-copper-500); } [data-theme="dark"] .theme-toggle { border-color: oklch(0.95 0.012 85 / 0.15); background: oklch(0.95 0.012 85 / 0.04); } /* Sun (light tema'da gözükür — "tıkla dark'a geç"), Moon (dark tema'da gözükür) */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* === Smooth global transition between themes === */ html, body { transition: background-color 350ms var(--ease-out-expo), color 350ms var(--ease-out-expo); } .bento-card, .dark-card, .glow-border, header[data-header], input, textarea, select { transition-property: background-color, border-color, color, box-shadow; transition-duration: 350ms; transition-timing-function: var(--ease-out-expo); }