/* 1) GLOBAL VARIABLES */
:root {
  --bg-page: #f6f8fb;
  --bg-soft: #ffffff;

  --text-main: #1a1a1a;
  --text-muted: #6b6b6b;

  --nav-bg: linear-gradient(180deg,#1f2a32,#162026);

  --accent: #ffbf00;
  --accent-dark: #e0a700;

  --wave-fill: #ffffff;

  --card-shadow: 0 10px 22px rgba(0,0,0,0.06);
  --card-border: rgba(0,0,0,0.04);

  --hero-darken: rgba(0,0,0,0);
}


/* 2) DARK MODE VARIABLE OVERRIDES (Bersih & Terpusat) */
body.dark-mode {
  --bg-page: #0d0e10;
  --bg-soft: #141416;
  --text-main: #e6e6e6;
  --text-muted: #bdbdbd;

  --nav-bg: linear-gradient(180deg,#0a0a0a,#050505);

  --accent: #ffd84d;
  --accent-dark: #ffcf5a;

  --wave-fill: #0f1112;

  --card-shadow: 6px 6px 18px rgba(0,0,0,0.5);
  --card-border: rgba(255,255,255,0.06);

  --hero-darken: rgba(0,0,0,0.1);
}


/* 3) GLOBAL BASE*/
body {
  background: var(--bg-page);
  color: var(--text-main);
  transition: background-color 300ms ease, color 300ms ease;
}

.container, 
section, 
.feature-card, 
.material-card, 
.sub-card, 
.card, 
#materi {
  transition: background-color 300ms ease, color 300ms ease;
}


/* 4) NAVBAR- */
.cilok-nav,
nav.navbar {
  background: var(--nav-bg) !important;
  transition: background 300ms ease;
}


/* 5) WAVE SHAPES (Hero & Materi Header)- */
.hero-wave svg path,
.materi-header .wave path {
  fill: var(--wave-fill) !important;
  transition: fill 300ms ease;
}


/* 6) CARD COMPONENTS (Feature, Material, Sub, etc.) */
.feature-card,
.material-card,
.sub-card,
.card {
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  color: var(--text-main);
  border-radius: 12px;
}


/* 7) FOOTER */
footer {
  background: linear-gradient(180deg,#1f2a32,#162026);
}

body.dark-mode footer {
  background: #000 !important;
}


/* 8) THEME TOGGLE BUTTON*/
.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;

  background: var(--bg-soft);
  color: var(--text-main);

  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  transition: all .25s ease;
}

body.dark-mode .theme-btn {
  background: #111;
  border-color: rgba(255,255,255,0.10);
  color: var(--accent);
}


/* 9) TYPOGRAPHY */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5 {
  color: #fff !important;
}

body.dark-mode p,
body.dark-mode small {
  color: #dcdcdc !important;
}


/* 10) PAGE NUMBER BADGE*/
body.dark-mode .page-number-badge {
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  background: transparent !important;
}

body:not(.dark-mode) .page-number-badge {
  border: 2px solid #444 !important;
  color: #333 !important;
  background: transparent !important;
}


/* 11) BUTTON NAVIGASI (Previous / Next) */
.btn-nav {
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 500;
  transition: all .25s ease;
}

/* Light */
body:not(.dark-mode) .btn-nav {
  background: transparent;
  border: 2px solid #333;
  color: #222;
}

body:not(.dark-mode) .btn-nav:hover {
  background: #333;
  color: #fff;
}

/* Dark */
body.dark-mode .btn-nav {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}

body.dark-mode .btn-nav:hover {
  background: #fff;
  color: #000;
}


/* 12) SUB HEADER (Pembelajaran Text) */
.sub-header small {
  transition: color 200ms linear;
}

/* Light */
body:not(.dark-mode) .sub-header small {
  color: var(--text-muted) !important;
}

body:not(.dark-mode) .sub-header h5 {
  color: var(--text-main) !important;
}

/* Dark */
body.dark-mode .sub-header small {
  color: #d5d5d5 !important;
}

body.dark-mode .sub-header h5 {
  color: #fff !important;
}


/* 13) QUIZ STYLE (Elegan + Dark Mode Compatibility) */

/* Dark mode quiz card */
body.dark-mode .quiz-question {
  background: #1b1b1b !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #eee !important;
}

/* Teks kuis */
body.dark-mode .quiz-question p,
body.dark-mode .quiz-question strong,
body.dark-mode .quiz-question label {
  color: #e9e9e9 !important;
}

/* Correct answer (dark mode) */
body.dark-mode .correct {
  background: #0f2d14 !important;
  border-color: #1d6b36 !important;
  color: #b2f3c0 !important;
}

/* Wrong answer (dark mode) */
body.dark-mode .wrong {
  background: #2d0f0f !important;
  border-color: #8b1e1e !important;
  color: #ffbcbc !important;
}


/* 14) SUB-MATERI INFO */
body.dark-mode .submateri-info {
  color: #e6e6e6 !important;
  font-weight: 500 !important;
}

body:not(.dark-mode) .submateri-info {
  color: #1a1a1a !important;
}


/* -15) OVERRIDE (Safety Layer) */
body.dark-mode {
  background-color: #0d0e10 !important;
}
/* DARK MODE — GLOBAL PATCH */

/* 1) Semua section besar ikut gelap otomatis */
body.dark-mode section,
body.dark-mode .dynamic-bg {
    background: var(--bg-page) !important;
}

/* 2) Hero wave dan wave lain ikut dark-mode */
body.dark-mode .hero-wave svg path,
body.dark-mode .tujuan-wave svg path,
body.dark-mode .wave-premium svg path {
    fill: var(--wave-fill) !important;
}

/* 3) Tujuan Section — warna teks jangan memudar */
body.dark-mode .tujuan-section {
    background: var(--bg-page) !important;
}
body.dark-mode .tujuan-section h2,
body.dark-mode .tujuan-section h3,
body.dark-mode .tujuan-section p,
body.dark-mode .tujuan-section li {
    color: #e6e6e6 !important;
}

/* 4) Icon checklist di tujuan */
body.dark-mode .tujuan-list i {
    color: var(--accent) !important;
}

/* 5) Material Card — pastikan bagian bawah TIDAK hitam solid */
body.dark-mode .material-card {
    background: var(--bg-soft) !important;
    border-color: var(--card-border) !important;
}

/* Text di dalam card */
body.dark-mode .material-card .card-title {
    color: #fff !important;
}
body.dark-mode .material-card .card-text {
    color: #dcdcdc !important;
}

/* Button pada material-card agar terlihat */
body.dark-mode .material-card .btn-cta {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.15) !important;
    color: #fff !important;
}
body.dark-mode .material-card .btn-cta:hover {
    background: var(--accent) !important;
    color: #000 !important;
}

/* 6) Roadmap Section — hilangkan putih pekat */
body.dark-mode .roadmap-section {
    background: transparent !important;
}
body.dark-mode .road-icon {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}
body.dark-mode .road-label {
    color: #e6e6e6 !important;
}
body.dark-mode .road-connector {
    background: rgba(255,255,255,0.12) !important;
}

/* 7) Fitur Section */
body.dark-mode .fitur-section {
    background: transparent !important;
}
body.dark-mode .fitur-card {
    background: var(--bg-soft) !important;
    color: #eaeaea !important;
}
body.dark-mode .fitur-card p {
    color: #cfcfcf !important;
}

/* 8) Stats Section */
body.dark-mode .stats-section {
    background: transparent !important;
}
body.dark-mode .stat-card {
    background: var(--bg-soft) !important;
}
/* === DARK MODE PROGRESS BAR FIX === */
body.dark-mode .progress-bar {
    background: linear-gradient(90deg, #ffb300, #ffd257) !important;
}

/* =====================================================
   DARK MODE FIX — QUIZ VIDEO (FINAL PATCH)
   ===================================================== */

/* 1) Wrapper utama kuis video */
body.dark-mode .quiz-wrapper {
  background: var(--bg-soft) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
}

/* Light mode tetap konsisten */
body:not(.dark-mode) .quiz-wrapper {
  background: var(--bg-soft);
}

/* 2) Pastikan container tidak memutihkan area */
body.dark-mode .quiz-wrapper,
body.dark-mode .quiz-wrapper * {
  color: var(--text-main);
}

/* 3) Option radio (form-check) lebih jelas di dark mode */
body.dark-mode .quiz-question .form-check {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  transition: background .2s ease, border-color .2s ease;
}

body.dark-mode .quiz-question .form-check:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

/* 4) Radio button agar tetap kontras */
body.dark-mode .form-check-input {
  background-color: #111;
  border-color: rgba(255,255,255,0.35);
}

body.dark-mode .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* 5) Pastikan tidak ada putih bocor dari Bootstrap card */
body.dark-mode .card,
body.dark-mode .container > .card {
  background: var(--bg-soft) !important;
}