/* ============================================================= dark-theme.css — Hayfala Quran 🌙 Override hardcoded colors & rgba values for dark mode. Loaded AFTER base.css and page CSS. Active when ⚠️ PENTING: pakai html[data-theme="dark"] (bukan hanya [data-theme="dark"]) agar spesifisitasnya (0,1,1) mengalahkan :root (0,1,0) yang ada di file page-specific CSS. ============================================================= */ /* ── HTML & BODY ───────────────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; background: #0F0F17 !important; color: #D0D0DE !important; } html[data-theme="dark"] body { background: #0F0F17; color: #D0D0DE; } /* ── TOP BAR ───────────────────────────────────────────────── */ html[data-theme="dark"] .topbar { background: rgba(15, 15, 23, .92); border-bottom-color: rgba(255, 255, 255, .06); } html[data-theme="dark"] .tb-greet { color: rgba(255, 255, 255, .5); } html[data-theme="dark"] .tb-greet strong { color: #F0F0F5; } /* ── BOTTOM NAVIGATION ─────────────────────────────────────── */ html[data-theme="dark"] .nav-bar { background: rgba(15, 15, 23, .92); border-color: rgba(255, 255, 255, .06); box-shadow: 0 2px 0 rgba(255, 255, 255, .04) inset, 0 10px 36px rgba(0, 0, 0, .35); } html[data-theme="dark"] .nl { color: #5C5C78; } html[data-theme="dark"] .nl.on { color: #7B6FFF; } html[data-theme="dark"] .nl:hover { background: rgba(255, 255, 255, .04); } html[data-theme="dark"] .nl.on .nav-dot { background: #7B6FFF; } /* ── SECTION LABELS ────────────────────────────────────────── */ html[data-theme="dark"] .sec-label, html[data-theme="dark"] .sh-title { color: #F0F0F5; } html[data-theme="dark"] .sh-link { color: #7B6FFF; } /* ── MODALS ────────────────────────────────────────────────── */ html[data-theme="dark"] .modal-bg { background: rgba(0, 0, 0, .65); } html[data-theme="dark"] .modal { background: #16161F; border: 1px solid #2A2A3A; } html[data-theme="dark"] .modal-handle { background: #3A3A50; } html[data-theme="dark"] .search-input { background: #1A1A26; border-color: #2A2A3A; color: #D0D0DE; } html[data-theme="dark"] .search-input:focus { border-color: #7B6FFF; background: #12121A; } html[data-theme="dark"] .search-input::placeholder { color: #5C5C78; } /* ── AVATAR ────────────────────────────────────────────────── */ html[data-theme="dark"] .avatar { background: #3A3A50; color: #D0D0DE; } html[data-theme="dark"] .avatar:hover { background: #7B6FFF; } /* ── BACK BUTTON ───────────────────────────────────────────── */ html[data-theme="dark"] .back-btn { border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .back-btn:hover { background: #1A1A26; } /* ── STREAK TAG ────────────────────────────────────────────── */ html[data-theme="dark"] .streak-tag { background: rgba(240, 146, 46, .12); border-color: rgba(240, 146, 46, .2); color: #F0922E; } /* ── GENERIC CARD (.cc) ────────────────────────────────────── */ html[data-theme="dark"] .cc { background: #16161F; border-color: #2A2A3A; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } /* ── CARD TYPOGRAPHY ───────────────────────────────────────── */ html[data-theme="dark"] .cc-eye { color: #5C5C78; } html[data-theme="dark"] .cc-eye.violet { color: #7B6FFF; } /* ── QUICK MENU ────────────────────────────────────────────── */ html[data-theme="dark"] .qm-item { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .qm-item:hover { border-color: rgba(123, 111, 255, .25); background: rgba(123, 111, 255, .06); } html[data-theme="dark"] .qm-lbl { color: #9898B0; } /* ── ARABIC / CONTENT CARD ─────────────────────────────────── */ html[data-theme="dark"] .arabic { background: #1A1A26; color: #F0F0F5; } html[data-theme="dark"] .latin { color: #5C5C78; } html[data-theme="dark"] .trans { color: #9898B0; border-bottom-color: #2A2A3A; } html[data-theme="dark"] .ref { background: #1A1A26; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .act-btn { background: #1A1A26; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .act-btn:hover { background: rgba(123, 111, 255, .12); border-color: #7B6FFF; color: #7B6FFF; } html[data-theme="dark"] .shuffle-btn { background: #1A1A26; border-color: #2A2A3A; color: #5C5C78; } html[data-theme="dark"] .shuffle-btn:hover { background: rgba(123, 111, 255, .12); border-color: #7B6FFF; color: #7B6FFF; } /* ── STREAK CARD ───────────────────────────────────────────── */ html[data-theme="dark"] .streak-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .streak-info-title { color: #D0D0DE; } html[data-theme="dark"] .sc { background: #1A1A26; border-color: #2A2A3A; } html[data-theme="dark"] .sc.done { background: rgba(46, 204, 113, .12); border-color: rgba(46, 204, 113, .2); } html[data-theme="dark"] .sc-lbl { color: #5C5C78; } html[data-theme="dark"] .sc-tick { border-color: #3A3A50; } html[data-theme="dark"] .sd { background: #2A2A3A; } /* ── DZIKIR TABS ───────────────────────────────────────────── */ html[data-theme="dark"] .dzk-tab { background: #16161F; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .dzk-tab.on { background: rgba(123, 111, 255, .12); border-color: #7B6FFF; color: #7B6FFF; } /* ── DZIKIR ITEM ───────────────────────────────────────────── */ html[data-theme="dark"] .dzk-item { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .dzk-arabic { color: #F0F0F5; } html[data-theme="dark"] .dzk-count { color: #5C5C78; } html[data-theme="dark"] .dzk-trans { color: #9898B0; } /* ── DOA CARD ──────────────────────────────────────────────── */ html[data-theme="dark"] .doa-item, html[data-theme="dark"] .doa-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .doa-title { color: #D0D0DE; } html[data-theme="dark"] .doa-arabic { background: #1A1A26; color: #F0F0F5; } html[data-theme="dark"] .doa-trans { color: #9898B0; } /* ── KALKULATOR WAKAF ──────────────────────────────────────── */ html[data-theme="dark"] .kalk-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .kalk-lbl { color: #D0D0DE; } html[data-theme="dark"] .kalk-inp, html[data-theme="dark"] .kalk-input { background: #1A1A26; border-color: #2A2A3A; color: #D0D0DE; } html[data-theme="dark"] .kalk-inp:focus, html[data-theme="dark"] .kalk-input:focus { border-color: #7B6FFF; background: #12121A; } html[data-theme="dark"] .kalk-res, html[data-theme="dark"] .kalk-result { background: #1A1A26; border-color: #2A2A3A; } html[data-theme="dark"] .kalk-res-lbl { color: #9898B0; } html[data-theme="dark"] .kalk-res-val { color: #D0D0DE; } /* ── CAROUSEL ──────────────────────────────────────────────── */ html[data-theme="dark"] .carousel-item { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .cnav { background: #16161F; border-color: #2A2A3A; color: #9898B0; } /* ── MARQUEE PILL ──────────────────────────────────────────── */ html[data-theme="dark"] .ph-pill { border-color: rgba(255, 255, 255, .08); color: #9898B0; } /* ── IBADAH ────────────────────────────────────────────────── */ html[data-theme="dark"] .cat-item { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .cat-item:hover { border-color: rgba(123, 111, 255, .2); } html[data-theme="dark"] .cat-name { color: #D0D0DE; } html[data-theme="dark"] .cat-desc { color: #5C5C78; } html[data-theme="dark"] .cat-ico.violet { background: rgba(123, 111, 255, .12); } html[data-theme="dark"] .cat-ico.amber { background: rgba(240, 146, 46, .12); } html[data-theme="dark"] .cat-ico.sage { background: rgba(46, 204, 113, .12); } html[data-theme="dark"] .cat-ico.ink { background: rgba(255, 255, 255, .06); } html[data-theme="dark"] .quran-resume { background: #16161F; border-color: #2A2A3A; } /* ── IBADAH: Tabs & Pills ──────────────────────────────────── */ html[data-theme="dark"] .doa-cat { background: #16161F; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .doa-cat.on { background: rgba(123, 111, 255, .12); border-color: #7B6FFF; color: #7B6FFF; } /* ── IBADAH: Tasbih ────────────────────────────────────────── */ html[data-theme="dark"] .tasbih-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .tasbih-act, html[data-theme="dark"] .tt { background: #1A1A26; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .tt.on { background: rgba(123, 111, 255, .12); border-color: #7B6FFF; color: #7B6FFF; } /* ── GAME: Hero Stats ──────────────────────────────────────── */ html[data-theme="dark"] .hero-stats { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .hs-xp-track { background: #2A2A3A; } /* ── GAME: Game Cards ──────────────────────────────────────── */ html[data-theme="dark"] .game-card { border-color: #2A2A3A; } html[data-theme="dark"] .game-card .gc-title { color: #F0F0F5; } html[data-theme="dark"] .game-card .gc-desc { color: #9898B0; } html[data-theme="dark"] .game-card.violet { background: rgba(123, 111, 255, .08); border-color: rgba(123, 111, 255, .15); } html[data-theme="dark"] .game-card.amber { background: rgba(240, 146, 46, .08); border-color: rgba(240, 146, 46, .15); } html[data-theme="dark"] .game-card.sage { background: rgba(46, 204, 113, .08); border-color: rgba(46, 204, 113, .15); } html[data-theme="dark"] .game-card.rose { background: rgba(244, 63, 94, .08); border-color: rgba(244, 63, 94, .15); } /* ── GAME: Rank Card ───────────────────────────────────────── */ html[data-theme="dark"] .rank-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .rank-row { border-bottom-color: #2A2A3A; } html[data-theme="dark"] .rank-row.me { background: rgba(123, 111, 255, .12); } html[data-theme="dark"] .rank-name { color: #D0D0DE; } /* ── GAME: Juz Picker ──────────────────────────────────────── */ html[data-theme="dark"] .juz-acak-btn, html[data-theme="dark"] .juz-btn { background: #1A1A26; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .juz-btn:hover { border-color: #7B6FFF; background: rgba(123, 111, 255, .12); color: #7B6FFF; } /* ── GAME: Quiz ────────────────────────────────────────────── */ html[data-theme="dark"] .q-prog-bar { background: #2A2A3A; } html[data-theme="dark"] .q-opt { background: #1A1A26; border-color: #2A2A3A; color: #D0D0DE; } html[data-theme="dark"] .q-opt:hover:not(.picked) { border-color: #7B6FFF; background: rgba(123, 111, 255, .12); } html[data-theme="dark"] .q-opt.correct { background: rgba(46, 204, 113, .12); border-color: #2ECC71; } html[data-theme="dark"] .q-opt.wrong { background: rgba(244, 63, 94, .12); border-color: #f43f5e; } /* ── GAME: Result ──────────────────────────────────────────── */ html[data-theme="dark"] .result-stats { background: #1A1A26; border-color: #2A2A3A; } html[data-theme="dark"] .rbtn.outline { background: transparent; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .rbtn.outline:hover { background: #1A1A26; } /* ── GAME: Toast ───────────────────────────────────────────── */ html[data-theme="dark"] .toast { background: #F0F0F5; color: #12121A; } /* ── GAME: Category chip ───────────────────────────────────── */ html[data-theme="dark"] .cat-chip { background: #1A1A26; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .cat-chip.on { background: rgba(123, 111, 255, .12); border-color: #7B6FFF; color: #7B6FFF; } /* ── QURAN: Search ─────────────────────────────────────────── */ html[data-theme="dark"] .search-box { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .search-box input { color: #D0D0DE; } html[data-theme="dark"] .search-box input::placeholder { color: #5C5C78; } /* ── QURAN: Pills ──────────────────────────────────────────── */ html[data-theme="dark"] .pill { background: #16161F; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .pill.on { background: #7B6FFF; border-color: #7B6FFF; color: white; } html[data-theme="dark"] .pill.makkah.on { background: #F0922E; border-color: #F0922E; } html[data-theme="dark"] .pill.madinah.on { background: #2ECC71; border-color: #2ECC71; } /* ── QURAN: Surah Card ─────────────────────────────────────── */ html[data-theme="dark"] .scard { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .scard:hover { border-color: rgba(123, 111, 255, .25); } html[data-theme="dark"] .scard:active { background: rgba(123, 111, 255, .08); } html[data-theme="dark"] .scard .scard-name { color: #F0F0F5; } html[data-theme="dark"] .scard .scard-info { color: #5C5C78; } html[data-theme="dark"] .scard .scard-ar { color: #7B6FFF; } /* ── QURAN: Daily Card ─────────────────────────────────────── */ html[data-theme="dark"] .daily-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .daily-trans { background: #1A1A26; color: #9898B0; } /* ── QURAN: Skeleton ───────────────────────────────────────── */ html[data-theme="dark"] .sk, html[data-theme="dark"] .sk-card { background: #1A1A26; border-color: #2A2A3A; } /* ── QURAN SURAH: Ayah ─────────────────────────────────────── */ html[data-theme="dark"] .ayah-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .ayah-text { color: #F0F0F5; } html[data-theme="dark"] .ayah-trans { color: #9898B0; } html[data-theme="dark"] .ayah-tools button { background: #1A1A26; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .ayah-num { background: #1A1A26; color: #7B6FFF; } /* ── WAKAF ─────────────────────────────────────────────────── */ html[data-theme="dark"] .stat-c { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .stat-l { color: #5C5C78; } html[data-theme="dark"] .chip { background: #16161F; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .chip.on { background: rgba(46, 204, 113, .12); border-color: #2ECC71; color: #2ECC71; } html[data-theme="dark"] .prog-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .prod-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .inf-inner { background: linear-gradient(135deg, rgba(46, 204, 113, .08) 0%, rgba(123, 111, 255, .06) 100%); } html[data-theme="dark"] .testi-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .testi-amiin { border-top-color: #2A2A3A; } /* ── WAKAF DETAIL ──────────────────────────────────────────── */ html[data-theme="dark"] .detail-card { background: #16161F; border-color: #2A2A3A; } /* ── WAKAF CHECKOUT ────────────────────────────────────────── */ html[data-theme="dark"] .checkout-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .nom-chip { background: #1A1A26; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .nom-chip.on { background: rgba(46, 204, 113, .12); border-color: #2ECC71; color: #2ECC71; } /* ── HADITS ────────────────────────────────────────────────── */ html[data-theme="dark"] .hadits-card { background: #16161F; border-color: #2A2A3A; } /* ── DZIKIR page card ──────────────────────────────────────── */ html[data-theme="dark"] .dzikir-card { background: #16161F; border-color: #2A2A3A; } /* ── JADWAL SHOLAT ─────────────────────────────────────────── */ html[data-theme="dark"] .jadwal-card, html[data-theme="dark"] .day-card, html[data-theme="dark"] .azan-card, html[data-theme="dark"] .method-card, html[data-theme="dark"] .month-card, html[data-theme="dark"] .kiblat-card, html[data-theme="dark"] .week-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .day-card-head { border-bottom-color: #2A2A3A; } html[data-theme="dark"] .day-card-title { color: #D0D0DE; } html[data-theme="dark"] .day-row { border-bottom-color: #2A2A3A; } html[data-theme="dark"] .day-row-name { color: #D0D0DE; } html[data-theme="dark"] .loc-btn { background: #16161F; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .tab-nav { border-color: #2A2A3A; } html[data-theme="dark"] .tab-btn { color: #5C5C78; } html[data-theme="dark"] .tab-btn.on { color: #7B6FFF; border-bottom-color: #7B6FFF; } html[data-theme="dark"] .search-item { border-bottom-color: #2A2A3A; color: #D0D0DE; } html[data-theme="dark"] .search-item:hover { background: #1A1A26; } html[data-theme="dark"] .cal-hdr-d { color: #5C5C78; } html[data-theme="dark"] .cal-day { color: #9898B0; } html[data-theme="dark"] .cal-day.today { background: #7B6FFF; color: white; } html[data-theme="dark"] select { background: #1A1A26; border-color: #2A2A3A; color: #D0D0DE; } /* ── TRACKER ───────────────────────────────────────────────── */ html[data-theme="dark"] .tracker-card, html[data-theme="dark"] .stat-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .date-nav { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .dn-btn { border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .habit-item { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .habit-name { color: #D0D0DE; } html[data-theme="dark"] .habit-time { color: #5C5C78; } html[data-theme="dark"] .grp-label { color: #5C5C78; } html[data-theme="dark"] .prog-track { background: #2A2A3A; } html[data-theme="dark"] .prog-row { color: #9898B0; } html[data-theme="dark"] .prog-lbl { color: #9898B0; } html[data-theme="dark"] .add-btn { background: #16161F; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .juz-grid .juz-cell { border-color: #2A2A3A; } html[data-theme="dark"] .bar-chart .bar-bg { background: #2A2A3A; } html[data-theme="dark"] .badge-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .hc.h0 { background: #1A1A26; } /* ── ARTIKEL ───────────────────────────────────────────────── */ html[data-theme="dark"] .article-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .article-title { color: #D0D0DE; } html[data-theme="dark"] .article-meta { color: #5C5C78; } html[data-theme="dark"] .article-body { color: #9898B0; } html[data-theme="dark"] .article-img-placeholder { background: linear-gradient(135deg, #1A1A26, #16161F) !important; } /* ── VIDEO ─────────────────────────────────────────────────── */ html[data-theme="dark"] .video-embed-box { border-color: #2A2A3A; } html[data-theme="dark"] .video-info-bar { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .vib-title { color: #D0D0DE; } html[data-theme="dark"] .vib-channel { color: #9898B0; } html[data-theme="dark"] .vib-desc { color: #5C5C78; } html[data-theme="dark"] .vid-item { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .vid-item.active { border-color: #7B6FFF; background: rgba(123, 111, 255, .06); } html[data-theme="dark"] .vid-title { color: #D0D0DE; } html[data-theme="dark"] .vid-channel { color: #5C5C78; } /* ── IMSAK STRIP ───────────────────────────────────────────── */ html[data-theme="dark"] .imsak-strip { background: #16161F; border-color: #2A2A3A; } /* ── ALERT ─────────────────────────────────────────────────── */ html[data-theme="dark"] .alert { background: rgba(240, 146, 46, .08); border-color: rgba(240, 146, 46, .2); } html[data-theme="dark"] .alert-txt { color: #D0D0DE; } /* ── SURAH DETAIL SELECTOR ─────────────────────────────────── */ html[data-theme="dark"] .surah-selector { background: #16161F; border-color: #2A2A3A; } /* ── GENERIC INPUT/SELECT ──────────────────────────────────── */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] textarea { background: #1A1A26; border-color: #2A2A3A; color: #D0D0DE; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #5C5C78; } /* ── GENERIC CARD-LIKE ELEMENTS ────────────────────────────── */ html[data-theme="dark"] .card, html[data-theme="dark"] .info-card, html[data-theme="dark"] .penerima-item, html[data-theme="dark"] .doa-head, html[data-theme="dark"] .other-card { background: #16161F; border-color: #2A2A3A; } /* ── STICKY CTA ────────────────────────────────────────────── */ html[data-theme="dark"] .sticky-cta { background: rgba(15, 15, 23, .95); border-top-color: #2A2A3A; } html[data-theme="dark"] .sticky-inner { background: #16161F; } html[data-theme="dark"] .cta-collected { color: #D0D0DE; } html[data-theme="dark"] .cta-pct { color: #5C5C78; } /* ── ARTICLE DETAIL (adab-berdoa) ──────────────────────────── */ html[data-theme="dark"] .art-body { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .art-body h2 { color: #F0F0F5; } html[data-theme="dark"] .art-body h3 { color: #F0F0F5; } html[data-theme="dark"] .art-body p { color: #9898B0; } html[data-theme="dark"] .art-body li { color: #9898B0; } html[data-theme="dark"] .art-body strong { color: #F0F0F5; } html[data-theme="dark"] .art-body hr { border-top-color: #2A2A3A; } html[data-theme="dark"] .art-h1 { color: #F0F0F5; } html[data-theme="dark"] .art-meta { color: #5C5C78; } html[data-theme="dark"] .arabic-block { background: rgba(46, 204, 113, .08); } html[data-theme="dark"] .arabic-text { color: #F0F0F5; } html[data-theme="dark"] .callout-amber { background: rgba(240, 146, 46, .08); } html[data-theme="dark"] .callout-violet { background: rgba(123, 111, 255, .08); } html[data-theme="dark"] .num-badge { background: rgba(240, 146, 46, .12); } html[data-theme="dark"] .num-title { color: #F0F0F5; } html[data-theme="dark"] .num-desc { color: #9898B0; } html[data-theme="dark"] .art-footer { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .footer-tag { background: #1A1A26; color: #5C5C78; } html[data-theme="dark"] .sidebar-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .sidebar-title { border-bottom-color: #2A2A3A; color: #5C5C78; } html[data-theme="dark"] .rel-item { border-bottom-color: #2A2A3A; } html[data-theme="dark"] .rel-item:hover { background: #1A1A26; } html[data-theme="dark"] .rel-title { color: #D0D0DE; } html[data-theme="dark"] .mobile-related { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .mobile-rel-header { border-bottom-color: #2A2A3A; color: #5C5C78; } html[data-theme="dark"] .mob-rel-card { border-color: #2A2A3A; background: #16161F; } html[data-theme="dark"] .mob-rel-title { color: #D0D0DE; } /* ── HERO (DOA, HADITS, DZIKIR, etc.) ──────────────────────── */ html[data-theme="dark"] .hero { border-color: #2A2A3A; } html[data-theme="dark"] .hero-stats .hs-num { color: #F0F0F5; } html[data-theme="dark"] .hero-stats .hs-lbl { color: #5C5C78; } /* ── CAT SCROLL (DOA, etc.) ────────────────────────────────── */ html[data-theme="dark"] .cat-btn { background: #16161F; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .cat-btn.on { background: #7B6FFF; border-color: #7B6FFF; color: white; } html[data-theme="dark"] .dpn-btn { background: #1A1A26; border-color: #2A2A3A; color: #9898B0; } /* ── DOA PAGE: doa dots ────────────────────────────────────── */ html[data-theme="dark"] .doa-dots .dot { background: #2A2A3A; } html[data-theme="dark"] .doa-dots .dot.on { background: #7B6FFF; } /* ── THEME TOGGLE BUTTON ───────────────────────────────────── */ .theme-toggle { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--ink-100); background: var(--ink-050); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; color: var(--ink-500); flex-shrink: 0; padding: 0; } .theme-toggle:hover { background: var(--violet-lt); border-color: var(--violet); color: var(--violet); } .theme-toggle svg { width: 16px; height: 16px; transition: transform .3s ease; } html[data-theme="dark"] .theme-toggle { border-color: #2A2A3A; background: #1A1A26; color: #F0922E; } html[data-theme="dark"] .theme-toggle:hover { background: rgba(240, 146, 46, .12); border-color: #F0922E; } html[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); } /* ============================================================= 🔥 INTENTIONALLY-DARK ELEMENTS These use var(--ink-900) as background to appear dark in light mode. In dark mode, --ink-900 becomes light (#F0F0F5), so we must force them back to a dark color. ============================================================= */ /* ── PRAYER HERO (beranda) ─────────────────────────────────── */ html[data-theme="dark"] .prayer-hero { background: #0A0A12 !important; } html[data-theme="dark"] .prayer-hero .ph-date, html[data-theme="dark"] .prayer-hero .ph-hijri { color: rgba(255, 255, 255, .4); } html[data-theme="dark"] .prayer-hero .ph-name { color: white; } html[data-theme="dark"] .prayer-hero .ph-time { color: rgba(255, 255, 255, .9); } html[data-theme="dark"] .prayer-hero .ph-loc { color: rgba(255, 255, 255, .35); } /* ── WAKAF HERO (beranda & wakaf) ──────────────────────────── */ html[data-theme="dark"] .wh { background: #0A0A12 !important; } html[data-theme="dark"] .wh-title { color: white; } html[data-theme="dark"] .wh-label { color: rgba(255, 255, 255, .3); } html[data-theme="dark"] .wh-desc { color: rgba(255, 255, 255, .42); } html[data-theme="dark"] .wh-btn, html[data-theme="dark"] .wh-btn-p { background: #16161F !important; color: #D0D0DE !important; border: 1px solid #2A2A3A; } html[data-theme="dark"] .wh-btn:hover, html[data-theme="dark"] .wh-btn-p:hover { background: #1A1A26 !important; } /* ── RING HERO (tracker - daily check) ─────────────────────── */ html[data-theme="dark"] .ring-hero { background: #0A0A12 !important; } html[data-theme="dark"] .ring-title { color: white; } html[data-theme="dark"] .ring-sub { color: rgba(255, 255, 255, .5); } html[data-theme="dark"] .ring-num { color: white; } html[data-theme="dark"] .ring-of { color: rgba(255, 255, 255, .5); } html[data-theme="dark"] .ring-pill { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); } /* ── TARGET HERO (tracker - target khatam) ─────────────────── */ html[data-theme="dark"] .t-hero { background: #0A0A12 !important; color: white; } html[data-theme="dark"] .t-big { color: white; } html[data-theme="dark"] .t-lbl { color: rgba(255, 255, 255, .45); } html[data-theme="dark"] .t-stat-n { color: white; } html[data-theme="dark"] .t-stat-l { color: rgba(255, 255, 255, .4); } /* ── TOAST (game, doa, beranda) - was dark, keep readable ──── */ html[data-theme="dark"] .toast { background: #F0F0F5 !important; color: #0A0A12 !important; } /* ── CTA BUTTONS hover states using var(--ink-900) ─────────── */ html[data-theme="dark"] .inf-cta:hover { background: #0A0A12; } html[data-theme="dark"] .cta-btn:hover { background: #0A0A12; } /* ============================================================= 🔳 HARDCODED WHITE BACKGROUNDS Elements that use `background: white` instead of var(--white) and thus don't respond to dark mode variable changes. ============================================================= */ /* ── QURAN SURAH PAGE ──────────────────────────────────────── */ html[data-theme="dark"] .surah-header { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .surah-info-card { background: #16161F; } html[data-theme="dark"] .surah-bismillah { background: #16161F; border-color: #2A2A3A; } /* ── JADWAL SHOLAT ─────────────────────────────────────────── */ html[data-theme="dark"] .prayer-table { background: #16161F; } html[data-theme="dark"] .prayer-row { border-bottom-color: #2A2A3A; } html[data-theme="dark"] .tab-content { background: #16161F; border-color: #2A2A3A; } /* ── TRACKER: habit list, stat card ────────────────────────── */ html[data-theme="dark"] .habit-list, html[data-theme="dark"] .s-list { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .hr { border-bottom-color: #2A2A3A; } html[data-theme="dark"] .hr.done { background: linear-gradient(135deg, rgba(46, 204, 113, .08), #16161F); } html[data-theme="dark"] .h-ico { background: #1A1A26; color: #5C5C78; } html[data-theme="dark"] .hr.done .h-ico { background: rgba(46, 204, 113, .12); color: #2ECC71; } html[data-theme="dark"] .h-n { color: #D0D0DE; } html[data-theme="dark"] .hr.done .h-n { color: #5C5C78; } html[data-theme="dark"] .h-s { color: #5C5C78; } html[data-theme="dark"] .h-tick { border-color: #2A2A3A; } html[data-theme="dark"] .j-none { background: #1A1A26; border-color: #2A2A3A; color: #5C5C78; } html[data-theme="dark"] .stat-num { color: #F0F0F5; } html[data-theme="dark"] .stat-lbl { color: #5C5C78; } html[data-theme="dark"] .s-row { border-bottom-color: #2A2A3A; } html[data-theme="dark"] .s-name { color: #D0D0DE; } html[data-theme="dark"] .s-meta { color: #5C5C78; } html[data-theme="dark"] .badge-name { color: #D0D0DE; } html[data-theme="dark"] .bar { background: rgba(123, 111, 255, .15); } html[data-theme="dark"] .h0 { background: #1A1A26; } /* ── DOA PAGE: specific cards & elements ───────────────────── */ html[data-theme="dark"] .doa-card-head { border-bottom-color: #2A2A3A; } html[data-theme="dark"] .doa-arabic-wrap { background: linear-gradient(135deg, rgba(46, 204, 113, .06), rgba(123, 111, 255, .06)); border-top-color: #2A2A3A; border-bottom-color: #2A2A3A; } html[data-theme="dark"] .doa-arabic { color: #F0F0F5; } html[data-theme="dark"] .doa-act { border-color: #2A2A3A; color: #5C5C78; } html[data-theme="dark"] .doa-num { background: rgba(240, 146, 46, .12); } html[data-theme="dark"] .doa-dot { background: #2A2A3A; } html[data-theme="dark"] .doa-dot.on { background: #F0922E; } html[data-theme="dark"] .doa-extra { border-top-color: #2A2A3A; } html[data-theme="dark"] .skel { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .skel-line, html[data-theme="dark"] .skel-arabic { background: #2A2A3A; } html[data-theme="dark"] .skel::after { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .04) 50%, transparent 100%); } /* ── GAME PAGE: modal, quiz ────────────────────────────────── */ html[data-theme="dark"] .quiz-foot { background: #16161F; border-top-color: #2A2A3A; } html[data-theme="dark"] .q-text { color: #F0F0F5; } html[data-theme="dark"] .q-arab { background: #1A1A26; color: #F0F0F5; } html[data-theme="dark"] .q-close { background: #1A1A26; border-color: #2A2A3A; color: #9898B0; } html[data-theme="dark"] .q-next-btn:disabled { background: #2A2A3A; color: #5C5C78; } html[data-theme="dark"] .modal-drag { background: #3A3A50; } html[data-theme="dark"] .cat-item { border-color: #2A2A3A; } html[data-theme="dark"] .cat-item:hover, html[data-theme="dark"] .cat-item.active { border-color: #7B6FFF; background: rgba(123, 111, 255, .08); } html[data-theme="dark"] .ci-name { color: #D0D0DE; } html[data-theme="dark"] .ci-count { color: #5C5C78; } html[data-theme="dark"] .rs-item { background: #1A1A26; } html[data-theme="dark"] .rs-num { color: #F0F0F5; } html[data-theme="dark"] .rs-lbl { color: #5C5C78; } html[data-theme="dark"] .result-title { color: #F0F0F5; } html[data-theme="dark"] .result-sub { color: #9898B0; } html[data-theme="dark"] .rr-av { background: #2A2A3A; } html[data-theme="dark"] .rr-name { color: #D0D0DE; } html[data-theme="dark"] .rr-xp { color: #9898B0; } html[data-theme="dark"] .rank-head { border-bottom-color: #2A2A3A; } html[data-theme="dark"] .rank-row { border-bottom-color: #2A2A3A; } /* ── GAME PAGE: hero stats specific ────────────────────────── */ html[data-theme="dark"] .hs-level, html[data-theme="dark"] .hs-name { color: #F0F0F5; } html[data-theme="dark"] .hs-rank { color: #5C5C78; } /* ── VIDEO ─────────────────────────────────────────────────── */ html[data-theme="dark"] .video-sticky-container { background: #0F0F17; } /* ── ARTICLE CARD image placeholder ────────────────────────── */ html[data-theme="dark"] .article-img-placeholder { background: linear-gradient(135deg, rgba(123, 111, 255, .08), rgba(240, 146, 46, .08)) !important; } html[data-theme="dark"] .article-img { background: linear-gradient(135deg, rgba(123, 111, 255, .12), rgba(240, 146, 46, .12)); } /* ── WAKAF: other-card (detail page) ───────────────────────── */ html[data-theme="dark"] .other-card { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .other-card-title { color: #D0D0DE; } html[data-theme="dark"] .other-card-track { background: #2A2A3A; } html[data-theme="dark"] .other-card-foot { color: #5C5C78; } /* ── WAKAF: stats-strip ────────────────────────────────────── */ html[data-theme="dark"] .stats-strip { background: #16161F; border-color: #2A2A3A; } /* ── WAKAF: tab-nav, tab-pane ──────────────────────────────── */ html[data-theme="dark"] .tab-nav { border-bottom-color: #2A2A3A; } html[data-theme="dark"] .tab-btn { color: #5C5C78; background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .tab-btn.on { background: rgba(123, 111, 255, .12); border-color: #7B6FFF; color: #7B6FFF; } /* ── WAKAF: penerima, doa items ────────────────────────────── */ html[data-theme="dark"] .penerima-item { border-bottom-color: #2A2A3A; } html[data-theme="dark"] .pen-loc { color: #D0D0DE; } html[data-theme="dark"] .pen-n { color: #5C5C78; } html[data-theme="dark"] .pen-ico { color: #7B6FFF; } html[data-theme="dark"] .doa-head { border-bottom-color: #2A2A3A; } html[data-theme="dark"] .doa-name { color: #D0D0DE; } html[data-theme="dark"] .doa-msg { color: #9898B0; } html[data-theme="dark"] .doa-nominal { color: #2ECC71; } html[data-theme="dark"] .doa-time { color: #5C5C78; } html[data-theme="dark"] .doa-av { background: #2A2A3A; color: #D0D0DE; } /* ── WAKAF: sticky CTA ─────────────────────────────────────── */ html[data-theme="dark"] .sticky-cta { background: rgba(15, 15, 23, .95); } html[data-theme="dark"] .sticky-inner { background: #16161F; border-color: #2A2A3A; } /* ── WAKAF CHECKOUT: form ──────────────────────────────────── */ html[data-theme="dark"] .form-input, html[data-theme="dark"] .form-select, html[data-theme="dark"] .form-textarea { background: #1A1A26; border-color: #2A2A3A; color: #D0D0DE; } html[data-theme="dark"] .toggle { background: #2A2A3A; } html[data-theme="dark"] .pay-item { background: #16161F; border-color: #2A2A3A; } html[data-theme="dark"] .pay-item.on { border-color: #2ECC71; background: rgba(46, 204, 113, .06); } html[data-theme="dark"] .pay-name { color: #D0D0DE; } /* ── SMOOTH TRANSITION ─────────────────────────────────────── */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important; }