/* ============================================ DARK MODE — Portofolio yayatiara.my.id Diaktifkan dengan class "dark" pada ============================================ */ /* Background utama */ html.dark body { background: linear-gradient(to top right, #1a1420, #12101a, #1c1420) !important; color: #e5e0e8 !important; } /* Bintik grain */ html.dark .bg-grain { background-image: radial-gradient(rgba(244, 63, 94, 0.08) 1px, transparent 0); } /* Kartu & panel putih transparan -> gelap */ html.dark [class*="bg-white"] { background-color: rgba(38, 32, 46, 0.7) !important; } /* Border putih/terang -> gelap halus */ html.dark [class*="border-white"], html.dark .border-slate-100, html.dark [class*="border-slate-200"] { border-color: rgba(255, 255, 255, 0.08) !important; } /* Teks gelap -> terang */ html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-slate-700 { color: #e8e3ec !important; } html.dark .text-slate-600, html.dark .text-slate-500 { color: #a89db0 !important; } /* Chip / tag teknologi (bg putih + teks slate) */ html.dark .bg-white.text-slate-600 { background-color: rgba(52, 44, 60, 0.85) !important; color: #cfc6d6 !important; } /* Ornamen cahaya background dibuat lebih redup */ html.dark [class*="blur-["] { opacity: 0.35 !important; } /* Aksen pink/rose tetap dipertahankan sebagai identitas — badge & gradient teks tidak diubah supaya ciri khasnya terjaga */ /* ============================================ TOMBOL TOGGLE ============================================ */ #themeToggle { position: fixed; top: 20px; right: 20px; z-index: 50; width: 46px; height: 46px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(244, 63, 94, 0.2); cursor: pointer; box-shadow: 0 8px 20px rgba(244, 63, 94, 0.15); transition: transform 0.3s ease, background 0.3s ease; font-size: 20px; line-height: 1; } #themeToggle:hover { transform: scale(1.1) rotate(15deg); } html.dark #themeToggle { background: rgba(38, 32, 46, 0.85); border-color: rgba(244, 63, 94, 0.35); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } /* ============================================ FIX RESPONSIVE — cegah geser horizontal di HP ============================================ */ html, body { overflow-x: hidden !important; max-width: 100%; } /* Ornamen cahaya blur tidak boleh bikin halaman melebar */ [class*="blur-["] { max-width: 100vw; }