/* ==========================================================================
   1. UTILITIES & SCROLLBAR
   ========================================================================== */
/* Custom Scrollbar Universal */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}

/* Hide Scrollbar Utility */
.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}
.no-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* Modal Animation */
#article-modal > div,
#book-modal > div {
    transition: transform 0.2s ease-out;
}

/* ==========================================================================
   PENYESUAIAN LIGHT MODE UNTUK TAMPILAN MOBILE & DESKTOP
   ========================================================================== */

/* Latar Belakang & Frame Utama Web */
html:not(.dark),
html:not(.dark) body {
    background-color: #f4f4f5 !important;
    color: #18181b !important;
}

html:not(.dark) .max-w-md,
html:not(.dark) .max-w-md.md\:max-w-6xl,
html:not(.dark) div[class*="max-w-md"] {
    background-color: #ffffff !important;
    border-color: #e4e4e7 !important;
}

/* KECUALIKAN HEADER HIJAU: Teks nama blog, jam, dan tanggal tetap PUTIH */
html:not(.dark) header,
html:not(.dark) header * {
    color: #ffffff !important;
}

/* Kartu Artikel, Kartu Video, Pustaka, & Konten Utama di Mobile */
html:not(.dark) main .bg-zinc-900,
html:not(.dark) main .bg-zinc-900\/50,
html:not(.dark) main .bg-zinc-900\/90,
html:not(.dark) #article-grid article,
html:not(.dark) #featured-carousel > div,
html:not(.dark) #video-carousel > a,
html:not(.dark) #quick-menu-grid,
html:not(.dark) #category-list-container > div,
html:not(.dark) #book-grid-container > div {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html:not(.dark) main .bg-zinc-800,
html:not(.dark) main .bg-zinc-800\/60 {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

/* Tipografi & Warna Teks Judul di HP */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) article h3,
html:not(.dark) main .text-white,
html:not(.dark) main .text-zinc-100,
html:not(.dark) main .text-zinc-200,
html:not(.dark) main .text-zinc-300,
html:not(.dark) #modal-title,
html:not(.dark) #book-modal-title {
    color: #0f172a !important;
}

html:not(.dark) main .text-zinc-400,
html:not(.dark) main .text-zinc-500 {
    color: #475569 !important;
}

/* Bottom Navigation Dock HP saat Mode Terang */
html:not(.dark) nav.fixed,
html:not(.dark) nav.fixed.bottom-0 {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-color: #cbd5e1 !important;
}

/* Modal Reader Artikel & Buku saat Mode Terang */
html:not(.dark) #article-modal > div,
html:not(.dark) #book-modal > div,
html:not(.dark) #article-modal .bg-zinc-900,
html:not(.dark) #book-modal .bg-zinc-900 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Warna Teks Modal Reader Artikel saat Mode Terang */
html:not(.dark) #modal-content,
html:not(.dark) #modal-content p,
html:not(.dark) #modal-content span,
html:not(.dark) #modal-content li,
html:not(.dark) #modal-content div {
    color: #18181b !important; /* Warna hitam pekat agar kontras dan mudah dibaca */
}

html:not(.dark) #modal-content strong,
html:not(.dark) #modal-content b,
html:not(.dark) #modal-content h1,
html:not(.dark) #modal-content h2,
html:not(.dark) #modal-content h3 {
    color: #000000 !important; /* Warna tebal hitam pekat untuk judul dan teks tebal */
}

/* Penyesuaian Footer Full-Width pada Light Mode */
html:not(.dark) footer {
    background-color: #ffffff !important;
    border-color: #e4e4e7 !important;
}

html:not(.dark) footer .text-zinc-300,
html:not(.dark) footer .text-zinc-400 {
    color: #3f3f46 !important;
}

html:not(.dark) footer .text-zinc-600 {
    color: #71717a !important;
}
/* ==========================================================================
   STATISTIK PENGUNJUNG (GAYA DASBOR ADMIN - LIGHT MODE)
   ========================================================================== */
html:not(.dark) section .bg-zinc-900\/60 {
    background-color: #f8fafc !important; /* Latar kartu terang bersih */
    border-color: #e2e8f0 !important;     /* Garis tepi halus */
}

html:not(.dark) section #stat-total {
    color: #0f172a !important;            /* Angka statistik hitam pekat */
}

html:not(.dark) section .text-zinc-400 {
    color: #64748b !important;            /* Label teks abu-abu gelap jelas */
}

/* Styling Artikel Populer pada Light Mode */
html:not(.dark) #popular-articles-container > div {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html:not(.dark) #popular-articles-container h4 {
    color: #0f172a !important;
}

html:not(.dark) #popular-articles-container span {
    color: #64748b !important;
}