/* ============================================================
 * AkuWibu — Tema Bersama (Dark/Light) + Aksen Neo-Brutalism
 * Dipakai di semua halaman publik: index, blog, baca, legal.
 * ============================================================ */

/* Font display dipakai untuk judul berkarakter */
.font-display { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.02em; }

/* ===== Aksen neo-brutalism: shadow keras + border tegas ===== */
.nb-card { border: 2px solid #3f3f46; box-shadow: 6px 6px 0 0 rgba(0,0,0,0.75); }
.nb-pop { transition: transform .12s ease, box-shadow .12s ease; }
.nb-pop:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 0 rgba(0,0,0,0.9); }
.nb-tab-active { box-shadow: 3px 3px 0 0 #0e7490; }

/* Grid halus ala terminal untuk latar hero */
.grid-bg {
    background-image:
        linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* =========================================================
   LIGHT MODE
   Prinsip: hanya terangkan PERMUKAAN HALAMAN (body & kartu).
   Elemen kontras gelap (bg-black/80, bg-zinc-800, tombol gelap)
   SENGAJA dibiarkan gelap agar teks terangnya tetap terbaca.
   ========================================================= */
.light ::-webkit-scrollbar-track { background: #f1f5f9; }
.light ::-webkit-scrollbar-thumb { background: #cbd5e1; }
.light body, html.light body { background: #f1f5f9; color: #1e293b; }

/* Permukaan utama halaman jadi terang */
.light .bg-black { background-color: #f1f5f9 !important; }
.light .bg-zinc-950, .light .bg-zinc-950\/90, .light .bg-zinc-950\/80,
.light .bg-zinc-950\/70, .light .bg-zinc-950\/50 { background-color: #ffffff !important; }
.light .bg-zinc-900\/60, .light .bg-zinc-900\/50, .light .bg-zinc-900\/40 { background-color: #ffffff !important; }
/* Matikan gradient HANYA untuk background kartu, bukan teks gradient (bg-clip-text) */
.light .bg-gradient-to-b:not(.bg-clip-text),
.light .bg-gradient-to-r:not(.bg-clip-text) { background-image: none !important; background-color: #ffffff !important; }

/* Teks default pada permukaan terang */
.light .text-white { color: #0f172a !important; }
.light .text-zinc-100, .light .text-zinc-200, .light .text-zinc-300 { color: #334155 !important; }
.light .text-zinc-400, .light .text-zinc-500, .light .text-zinc-600 { color: #475569 !important; }

/* Border halus */
.light .border-zinc-800, .light .border-zinc-800\/80, .light .border-zinc-900,
.light .border-zinc-700, .light .border-zinc-700\/60 { border-color: #e2e8f0 !important; }

/* ---- KUNCI KONTRAS: elemen gelap tetap gelap + teks terang ---- */
.light .bg-zinc-900 { background-color: #0f172a !important; }
.light .bg-zinc-800, .light .bg-zinc-800\/60 { background-color: #1e293b !important; }
.light .bg-black\/60, .light .bg-black\/80 { background-color: #0f172a !important; }

/* Paksa teks terang di elemen gelap, baik di elemen itu sendiri maupun turunannya */
.light .bg-zinc-900, .light .bg-zinc-900 *,
.light .bg-zinc-800, .light .bg-zinc-800 *,
.light .bg-zinc-800\/60, .light .bg-zinc-800\/60 *,
.light .bg-black\/60, .light .bg-black\/60 *,
.light .bg-black\/80, .light .bg-black\/80 * {
    color: #e2e8f0 !important;
}
.light .bg-zinc-900 .text-white, .light .bg-zinc-800 .text-white,
.light .bg-black\/60 .text-white, .light .bg-black\/80 .text-white { color: #ffffff !important; }

/* Aksen warna di dalam elemen gelap tetap cerah */
.light .bg-zinc-900 .text-cyan-400, .light .bg-zinc-800 .text-cyan-400,
.light .bg-black\/60 .text-cyan-400, .light .bg-black\/80 .text-cyan-400,
.light .bg-zinc-900.text-cyan-400, .light .bg-zinc-800.text-cyan-400 { color: #22d3ee !important; }
.light .bg-zinc-900 .text-emerald-400, .light .bg-black\/60 .text-emerald-400,
.light .bg-black\/80 .text-emerald-400 { color: #34d399 !important; }
.light .bg-zinc-900 .text-rose-400, .light .bg-black\/60 .text-rose-400,
.light .bg-black\/80 .text-rose-400 { color: #fb7185 !important; }

/* Kartu neo-brutalism di light mode */
.light .nb-card { border-color: #0f172a; box-shadow: 6px 6px 0 0 rgba(15,23,42,0.15); }
.light .nb-pop:hover { box-shadow: 8px 8px 0 0 rgba(15,23,42,0.18); }
.light .nb-tab-active { box-shadow: 3px 3px 0 0 #0f172a; }

/* Aksen cyan pada permukaan terang */
.light .text-cyan-400 { color: #0e7490 !important; }

/* Artikel (baca.php) di light mode: jaga keterbacaan body konten */
.light .article-body h2, .light .article-body h3 { color: #0f172a !important; }
.light .article-body p, .light .article-body ul, .light .article-body ol, .light .article-body li { color: #334155 !important; }
.light .article-body strong { color: #0f172a !important; }
.light .article-body code { background-color: #e2e8f0 !important; color: #0e7490 !important; }
.light .article-body pre { background-color: #0f172a !important; border-color: #0f172a !important; }
.light .article-body pre code { background-color: transparent !important; color: #e2e8f0 !important; }
.light .article-body blockquote { color: #475569 !important; }

/* Jaring pengaman: teks varian terang (200/300) di dalam artikel JANGAN pudar
   di light mode. Warna apa pun digelapkan ke nuansa senada yang kontras. */
.light .article-body [class*="text-cyan-2"], .light .article-body [class*="text-cyan-3"] { color: #0e5063 !important; }
.light .article-body [class*="text-indigo-2"], .light .article-body [class*="text-indigo-3"],
.light .article-body [class*="text-violet-2"], .light .article-body [class*="text-violet-3"],
.light .article-body [class*="text-purple-2"], .light .article-body [class*="text-purple-3"] { color: #4338ca !important; }
.light .article-body [class*="text-blue-2"], .light .article-body [class*="text-blue-3"],
.light .article-body [class*="text-sky-2"], .light .article-body [class*="text-sky-3"] { color: #1e40af !important; }
.light .article-body [class*="text-amber-2"], .light .article-body [class*="text-amber-3"],
.light .article-body [class*="text-yellow-2"], .light .article-body [class*="text-yellow-3"],
.light .article-body [class*="text-orange-2"], .light .article-body [class*="text-orange-3"] { color: #92400e !important; }
.light .article-body [class*="text-emerald-2"], .light .article-body [class*="text-emerald-3"],
.light .article-body [class*="text-green-2"], .light .article-body [class*="text-green-3"] { color: #065f46 !important; }
.light .article-body [class*="text-rose-2"], .light .article-body [class*="text-rose-3"],
.light .article-body [class*="text-red-2"], .light .article-body [class*="text-red-3"],
.light .article-body [class*="text-pink-2"], .light .article-body [class*="text-pink-3"] { color: #9f1239 !important; }

/* Halaman legal (.doc) di light mode */
.light .doc h2 { color: #0f172a !important; }
.light .doc p, .light .doc ul, .light .doc li { color: #334155 !important; }
.light .doc a { color: #0e7490 !important; }
.light .doc strong { color: #0f172a !important; }

/* =========================================================
   LIGHT MODE — Box callout warna lembut (summary & isi artikel)
   Box ini aslinya bg gelap-transparan + teks terang. Di light mode
   kita jadikan tint lembut dengan teks GELAP agar kontras terbaca.
   Berlaku di summary bawaan baca.php maupun box dalam .article-body.
   ========================================================= */

/* --- Cyan (box callout lembut) --- */
.light .bg-cyan-950\/20, .light .bg-cyan-950\/30, .light .bg-cyan-950\/40 {
    background-color: #ecfeff !important;
    border-color: #a5f3fc !important;
}
.light .bg-cyan-950\/20, .light .bg-cyan-950\/30, .light .bg-cyan-950\/40,
.light .bg-cyan-950\/20 *, .light .bg-cyan-950\/30 *, .light .bg-cyan-950\/40 *,
.light .text-cyan-200 { color: #0e5063 !important; }

/* --- Cyan badge pekat (pill kategori): tint + teks cyan gelap --- */
.light .bg-cyan-950\/70, .light .bg-cyan-950\/80, .light .bg-cyan-950\/60 {
    background-color: #cffafe !important; border-color: #67e8f9 !important;
}
.light .bg-cyan-950\/70, .light .bg-cyan-950\/80, .light .bg-cyan-950\/60,
.light .bg-cyan-950\/70 *, .light .bg-cyan-950\/80 *, .light .bg-cyan-950\/60 * { color: #0e5063 !important; }

/* --- Purple / Violet / Indigo / Blue --- */
.light [class*="bg-purple-950"], .light [class*="bg-violet-950"],
.light [class*="bg-indigo-950"] {
    background-color: #f5f3ff !important; border-color: #ddd6fe !important;
}
.light [class*="bg-purple-950"] *, .light [class*="bg-violet-950"] *,
.light [class*="bg-indigo-950"] *,
.light .text-purple-200, .light .text-purple-300,
.light .text-violet-200, .light .text-violet-300,
.light .text-indigo-200, .light .text-indigo-300 { color: #4338ca !important; }
.light [class*="bg-blue-950"], .light [class*="bg-sky-950"] {
    background-color: #eff6ff !important; border-color: #bfdbfe !important;
}
.light [class*="bg-blue-950"] *, .light [class*="bg-sky-950"] *,
.light .text-blue-200, .light .text-blue-300,
.light .text-sky-200, .light .text-sky-300 { color: #1e40af !important; }

/* --- Amber / Kuning --- */
.light [class*="bg-amber-950"], .light [class*="bg-yellow-950"] {
    background-color: #fffbeb !important; border-color: #fde68a !important;
}
.light [class*="bg-amber-950"] *, .light [class*="bg-yellow-950"] *,
.light .text-amber-200, .light .text-amber-300 { color: #92400e !important; }

/* --- Emerald / Hijau --- */
.light [class*="bg-emerald-950"], .light [class*="bg-green-950"] {
    background-color: #ecfdf5 !important; border-color: #a7f3d0 !important;
}
.light [class*="bg-emerald-950"] *, .light [class*="bg-green-950"] *,
.light .text-emerald-200, .light .text-emerald-300 { color: #065f46 !important; }

/* --- Rose / Merah --- */
.light [class*="bg-rose-950"], .light [class*="bg-red-950"] {
    background-color: #fff1f2 !important; border-color: #fecdd3 !important;
}
.light [class*="bg-rose-950"] *, .light [class*="bg-red-950"] *,
.light .text-rose-200, .light .text-rose-300 { color: #9f1239 !important; }

/* Border aksen samar (dipakai banyak box callout) agar tetap terlihat */
.light .border-cyan-900\/40, .light .border-cyan-800\/40, .light .border-cyan-800\/60 { border-color: #a5f3fc !important; }