/* ============================================================ 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) === input.css'te .is-scrolled !important ile cream bg veriyor (Tailwind cascade garanti için). Dark override'ın çalışması için !important zorunlu (2026-05-17 v2 fix). */ [data-theme="dark"] header[data-header].is-scrolled, [data-theme="dark"] [data-header].is-scrolled { background-color: oklch(0.09 0.012 250 / 0.92) !important; -webkit-backdrop-filter: blur(18px) saturate(1.3) !important; backdrop-filter: blur(18px) saturate(1.3) !important; border-bottom-color: oklch(0.95 0.012 85 / 0.08) !important; } /* Dark variant: search input + mobile menu toggle (input/button-only). ESKİ: [class*="oklch(0.18_0.018_250"] substring selector ile footer/diğer border'larda bg ezilmesine neden oluyordu — kaldırıldı, sadece spesifik element selector'lar (2026-05-17 fix). */ [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; } /* === Sertifika kart frame — dark tema'da cream zemin + copper hairline Mert "aşağı kaydırınca beyaz oluyor" — cert image'lar beyaz dokümanlar, bg-white dark fonda rahatsız. Cream tint + copper inner ring + soft glow ile kart "yüzer" görünüm. */ [data-theme="dark"] .cert-frame { background-color: oklch(0.96 0.014 80) !important; box-shadow: 0 0 0 1px oklch(0.65 0.22 45 / 0.30) inset, 0 12px 32px -10px oklch(0.72 0.18 52 / 0.20); } [data-theme="dark"] .cert-frame ~ figcaption, [data-theme="dark"] figure:has(.cert-frame) figcaption { background-color: oklch(0.16 0.015 250); } /* === 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); } /* === Logo dual variant (light tema'da koyu logo, dark tema'da açık logo) === */ [data-theme="dark"] .logo-dark { display: none !important; } [data-theme="dark"] .logo-light { display: inline-block !important; } /* === Hero slider overlay — dark tema'da daha yumuşak gradient (ürün görseli okunabilir kalsın) === */ [data-theme="dark"] [data-hero-slider] [data-slide] > div.bg-gradient-to-tr { background-image: linear-gradient( to top right, oklch(0.09 0.012 250 / 0.85) 0%, oklch(0.09 0.012 250 / 0.50) 50%, oklch(0.09 0.012 250 / 0.10) 100% ); } [data-theme="dark"] [data-hero-slider] [data-slide] > div.absolute.inset-x-0.bottom-0 { background-image: linear-gradient( to top, oklch(0.09 0.012 250 / 0.80) 0%, oklch(0.09 0.012 250 / 0.20) 60%, transparent 100% ); }