/* ============================================ Ek Ders Hesaplama 2026 - Dark Mode Applied via [data-theme="dark"] on ============================================ */ [data-theme="dark"] { --color-bg: #0F172A; --color-bg-alt: #1E293B; --color-bg-card: #1E293B; --color-text: #F8FAFC; --color-text-secondary: #94A3B8; --color-text-muted: #64748B; --color-border: #334155; --color-border-focus: #EF4444; --color-primary: #EF4444; --color-primary-dark: #DC2626; --color-primary-light: rgba(239, 68, 68, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3); } /* Header */ [data-theme="dark"] .site-header { background: rgba(15, 23, 42, 0.95); border-bottom-color: var(--color-border); } /* Hamburger */ [data-theme="dark"] .hamburger-line { background: var(--color-text); } /* Hero */ [data-theme="dark"] .hero-section { background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%); } [data-theme="dark"] .floating-card { background: #1E293B; border: 1px solid var(--color-border); } [data-theme="dark"] .text-gradient { background: linear-gradient(135deg, #EF4444, #F97316); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================ Form Elements - Dark Mode Fix Using background-color instead of background to preserve background-image (select arrow) ============================================ */ [data-theme="dark"] .form-input, [data-theme="dark"] textarea.form-input { background-color: #0F172A; background-image: none; color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .form-select { background-color: #0F172A; color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-color: #0F172A; } [data-theme="dark"] .form-select option { background-color: #0F172A; color: var(--color-text); } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] textarea.form-input:focus { border-color: var(--color-border-focus); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); background-color: #0F172A; } [data-theme="dark"] .form-input::placeholder { color: var(--color-text-muted); } /* Stepper */ [data-theme="dark"] .stepper-btn { background-color: #0F172A; color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .stepper-btn:hover { background-color: var(--color-primary); color: white; } [data-theme="dark"] .stepper-value { background-color: #0F172A; color: var(--color-text); } [data-theme="dark"] .stepper-input { border-color: var(--color-border); } /* Radio Cards */ [data-theme="dark"] .radio-card-content { border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .radio-card input:checked+.radio-card-content { border-color: var(--color-primary); background-color: var(--color-primary-light); } [data-theme="dark"] .radio-indicator { border-color: var(--color-border); } /* Result Cards */ [data-theme="dark"] .result-card { background-color: #0F172A; } /* Features */ [data-theme="dark"] .feature-card { border-color: var(--color-border); background-color: var(--color-bg-card); } [data-theme="dark"] .feature-card:hover { border-color: var(--color-primary); } /* FAQ */ [data-theme="dark"] .faq-item { border-color: var(--color-border); background-color: var(--color-bg-card); } [data-theme="dark"] .faq-question { color: var(--color-text); } /* Footer */ [data-theme="dark"] .site-footer { background: #020617; } /* Info Box */ [data-theme="dark"] .info-box { background: rgba(59, 130, 246, 0.1); } /* Cookie Banner */ [data-theme="dark"] .cookie-banner { background: #1E293B; border-top-color: var(--color-border); } /* Toast */ [data-theme="dark"] .toast { background: #334155; } /* ============================================ SEO Content Section - Dark Mode ============================================ */ [data-theme="dark"] .seo-content-section { background-color: var(--color-bg); } [data-theme="dark"] .seo-content h2 { border-color: var(--color-primary); } /* ============================================ Guide / Info Tables - Dark Mode ============================================ */ [data-theme="dark"] .guide-content .info-table th { background-color: #0F172A; color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .guide-content .info-table td { border-color: var(--color-border); color: var(--color-text-secondary); } [data-theme="dark"] .guide-content .formula-box { background-color: #0F172A; border-left-color: var(--color-primary); color: var(--color-text); } /* ============================================ Error Page - Dark Mode ============================================ */ [data-theme="dark"] .error-code { background: linear-gradient(135deg, #EF4444, #F97316); -webkit-background-clip: text; background-clip: text; } /* ============================================ Skeleton Loader - Dark Mode ============================================ */ [data-theme="dark"] .skeleton { background: #1E293B; } [data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent); } /* ============================================ Contact Form States - Dark Mode ============================================ */ [data-theme="dark"] .form-status.success { background-color: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); } [data-theme="dark"] .form-status.error { background-color: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); } /* ============================================ History Sidebar - Dark Mode ============================================ */ [data-theme="dark"] .history-sidebar { background-color: var(--color-bg-card); border-left: 1px solid var(--color-border); } [data-theme="dark"] .history-item { background-color: #0F172A; border-color: var(--color-border); } /* ============================================ Page Content - Dark Mode ============================================ */ [data-theme="dark"] .page-header { border-bottom-color: var(--color-border); } [data-theme="dark"] .page-content h2 { border-bottom-color: var(--color-primary-light); } /* Transitions for theme switch */ body, .site-header, .site-footer, .calculator-form-wrapper, .result-summary-card, .result-detail-card, .feature-card, .faq-item, .faq-question, .form-input, .form-select, .cookie-banner { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; }