/* * Light-theme override katmanı — public site. * theme.css (koyu taban) + tailwind.css'ten SONRA yüklenir. * Yalnızca iken devreye girer; koyu tema varsayılan kalır. * * Neden override: sayfalar rengi sabit Tailwind utility'leriyle yazıyor (bg-slate-950, * text-white...). Butonlar text-slate-950 (koyu metin) kullandığından text-white yalnız * başlık/gövde metnidir → light'ta koyuya çevirmek güvenli, buton bozulmaz. * [data-theme="light"] .class = (0,2,0) özgüllük → tek-class utility'yi (0,1,0) yener. */ [data-theme="light"] { color-scheme: light; } /* Sayfa zemini (theme.css'teki koyu gradient'i ezer) */ [data-theme="light"] body { background: radial-gradient(circle at top, rgba(14, 165, 233, 0.10), transparent 32%), linear-gradient(180deg, #f8fafc 0%, #eef2f7 50%, #f8fafc 100%); color: #0f172a; } [data-theme="light"] ::selection { background: rgba(14, 165, 233, 0.22); } /* ---- Metin ---- */ [data-theme="light"] .text-white { color: #0f172a; } [data-theme="light"] .text-slate-200 { color: #1e293b; } [data-theme="light"] .text-slate-300 { color: #334155; } [data-theme="light"] .text-slate-400 { color: #475569; } [data-theme="light"] .text-slate-500 { color: #64748b; } /* sky vurgu metni: koyuda açık, light'ta okunur olması için koyu sky */ [data-theme="light"] .text-sky-200 { color: #0369a1; } [data-theme="light"] .text-sky-300 { color: #0369a1; } [data-theme="light"] .text-sky-400 { color: #0284c7; } /* amber uyarı metni (nadir) */ [data-theme="light"] .text-amber-200 { color: #b45309; } /* KORUNANLAR (override YOK): text-slate-950/900/800/700/600 → zaten koyu metin (buton etiketleri + açık form kartı içi). Light'ta olduğu gibi doğru. */ /* ---- Yüzeyler / arka planlar ---- */ [data-theme="light"] .bg-slate-950\/95 { background-color: rgb(255 255 255 / 0.95); } [data-theme="light"] .bg-slate-950\/80 { background-color: rgb(255 255 255 / 0.82); } [data-theme="light"] .bg-slate-950\/60 { background-color: rgb(248 250 252 / 0.72); } [data-theme="light"] .bg-slate-900 { background-color: #eef2f7; } [data-theme="light"] .bg-slate-900\/60 { background-color: rgb(255 255 255 / 0.72); } [data-theme="light"] .bg-slate-900\/50 { background-color: rgb(255 255 255 / 0.66); } [data-theme="light"] .bg-slate-900\/40 { background-color: rgb(255 255 255 / 0.58); } [data-theme="light"] .bg-slate-800\/40 { background-color: rgb(226 232 240 / 0.55); } [data-theme="light"] .bg-white\/5 { background-color: rgb(15 23 42 / 0.04); } /* KORUNANLAR: bg-white, bg-sky-500, bg-sky-400, bg-sky-500/15, bg-sky-500/5, bg-amber-500/5 → açık yüzey / vurgu butonu; light'ta da doğru çalışır. */ /* ---- Kenarlıklar (beyaz/opak → koyu/ince) ---- */ [data-theme="light"] .border-white\/5 { border-color: rgb(15 23 42 / 0.06); } [data-theme="light"] .border-white\/10 { border-color: rgb(15 23 42 / 0.10); } [data-theme="light"] .border-white\/15 { border-color: rgb(15 23 42 / 0.14); } /* KORUNANLAR: border-sky-400, border-sky-500/20, border-slate-300, border-amber-500/25 → vurgu/açık kenarlık; light'ta doğru. */ /* ---- Hover durumları (koyuda 'hover:text-white' → light'ta koyu) ---- */ [data-theme="light"] .hover\:text-white:hover { color: #0f172a; } [data-theme="light"] .hover\:border-sky-400:hover { border-color: #38bdf8; } /* ---- Header/backdrop: light'ta hafif gölge okunurluğu artırır ---- */ [data-theme="light"] header.sticky { box-shadow: 0 1px 0 rgb(15 23 42 / 0.04); } /* ---- Skip-link (koyuda sky-500 zemin + slate-950 metin, light'ta korunur) ---- */ /* ---- Logo: koyu zemin için beyaz-metinli lockup footer'da; light'ta lacivert lockup daha uygun ---- */ [data-theme="light"] [data-logo="footer-light"] { display: none; } [data-theme="dark"] [data-logo="footer-dark"], :root:not([data-theme="light"]) [data-logo="footer-dark"] { display: none; } /* ---- Header'daki kar tanesi ikonu light'ta koyulaşsın (currentColor değil, sabit PNG) ---- */ /* PNG mavi kalır; light zeminde mavi kar tanesi zaten okunur. Ek işlem gerekmiyor. */ /* ---- Tema toggle butonu: güneş (dark'ta, light'a geç) / ay (light'ta, dark'a geç) ---- */ [data-theme="light"] [data-theme-icon="sun"] { display: none; } [data-theme="dark"] [data-theme-icon="moon"], :root:not([data-theme="light"]) [data-theme-icon="moon"] { display: none; }