/* ========================================= */
/* == GAYA GLOBAL & DARK MODE == */
/*Zulfy Ganteng*/
/* ========================================= */
:root{
  --bg:#f7f8fcc4;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --brand:#2563eb;
  --brand-2:#10b981;
  --ring:rgba(37,99,235,.25);
  --radius:16px;
  --shadow:0 8px 30px rgba(2,8,23,.08);
  --container:1200px;
}
/* #0f172a; */
html.dark {
  --bg:#0f172a;
  --card:#1e293b;
  --ink:#e2e8f0;
  --muted:#94a3b8;
  --brand:#3b82f6;
  --ring:rgba(59,130,246,.25);
  --shadow:0 8px 30px rgba(0,0,0,.2);
}

*{box-sizing:border-box}
html,body{height:100%}
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    background: var(--bg);
    color: var(--ink);
    /* HAPUS display:flex, flex-direction, dan min-height dari sini */
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* ========================================= */
/* == KOMPONEN UTAMA (HEADER, NAV, FOOTER) == */
/* ========================================= */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #eef2f7}
html.dark .nav {background: rgba(15,23,42,.8); border-bottom-color: #334155;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px}
.brand-logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),#3b82f6);display:grid;place-items:center;color:white;font-weight:900;box-shadow:var(--shadow)}
.menu{display:flex;gap:20px;align-items:center}
.menu a{color:var(--muted);font-weight:600}
.menu a.active{color:var(--brand)}
.cta{display:flex;gap:10px}
.btn{border:1px solid #e5e8ef;background:white;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer}
.btn.primary{background:var(--brand);border-color:var(--brand);color:white}
html.dark .btn {background: var(--card); border-color: #ffffff;} 
/* #334155 */
html.dark .btn.primary {background: var(--brand); border-color: var(--brand); color: white;}
.burger{display:none}
#nav-toggle{display:none}
.drawer{display: none;}
@media (max-width: 900px){
  .menu,.cta{display:none}
  .burger{display:block}
  .drawer{position:fixed;inset:64px 0 auto 0;background:white;border-top:1px solid #eaeef5;box-shadow:var(--shadow);}
  #nav-toggle:checked ~ .drawer{display:block}
  .drawer .stack{display:grid;gap:10px;padding:16px}
  .drawer a{padding:12px 10px;border-radius:12px;color:var(--muted);font-weight:600}
  .drawer a:hover{background:#f3f6fb}
  html.dark .drawer {background: var(--card); border-top-color: #334155;}
  html.dark .drawer a:hover{background: #334155;}
}
.footer{padding:30px 0;color:#475569}
html.dark .footer {
    /* Pastikan footer kembali ke style normalnya */
    padding: 30px 0;
    color: var(--muted);
    border-top: 1px solid #334155;
    background-color: var(--card);
}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
@media (max-width:900px){.footer .cols{grid-template-columns:1fr}}
.foot-brand{display:flex;gap:12px;align-items:center}
.copyright{border-top:1px solid #e9edf5;margin-top:18px;padding-top:12px;font-size:13px;color:#77819a}
html.dark .copyright {border-top-color: #334155;}
.btn:focus,.link:focus,a:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--brand)}

/* ========================================= */
/* == GAYA HALAMAN BERANDA (INDEX.PHP) == */
/* ========================================= */
.hero{padding:56px 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
@media(max-width: 900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:40px;line-height:1.15;margin:0 0 10px 0}
.hero p{color:var(--muted);font-size:18px;margin:0 0 22px 0}
.pillset{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pill{background:#eef4ff;border:1px solid #e1e8ff;color:#1e3a8a;padding:8px 12px;border-radius:999px;font-weight:600;font-size:13px}
.card-illus{background:var(--card);border:1px solid #eef1f7;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.illus{aspect-ratio:4/3;border-radius:14px;background:conic-gradient(from 210deg at 60% 50%, #c7d2fe, #d1fae5, #bfdbfe);display:grid;place-items:center;font-weight:800;color:#0b3b7a}
.actions{display:flex;gap:12px}
.btn.lg{padding:14px 18px;border-radius:14px}
.subtext{font-size:13px;color:var(--muted)}
.section{padding:32px 0}
.section h2{font-size:28px;margin:0 0 6px 0}
.section p.lead{color:var(--muted);margin:0 0 18px 0}
.grid{display:grid;gap:16px}
.grid.col-3{grid-template-columns:repeat(3,1fr)}
.grid.col-4{grid-template-columns:repeat(4,1fr)}
@media (max-width: 1000px){.grid.col-3,.grid.col-4{grid-template-columns:1fr}}
.feature{background:var(--card);border:1px solid #eef1f7;border-radius:16px;padding:16px;box-shadow:var(--shadow);display:grid;gap:10px}
html.dark .feature {border-color: #334155;}
.feature .icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--brand),#60a5fa);display:grid;place-items:center;color:white;font-weight:900}
.feature h3{margin:0;font-size:18px}
.feature p{margin:0;color:var(--muted)}
.feature .go{margin-top:6px}
.progress{background:var(--card);border:1px solid #eef1f7;border-radius:16px;padding:18px;box-shadow:var(--shadow);display:grid;gap:10px}
html.dark .progress {border-color: #334155;}
.bar{height:10px;background:#eef2ff;border-radius:999px;overflow:hidden}
.bar > span{display:block;height:100%;width:42%;background:linear-gradient(90deg,var(--brand),#60a5fa)}
.stats{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted)}

/* ========================================= */
/* == HALAMAN LOGIN & REGISTER == */
/* ========================================= */
.login-container{display:flex;justify-content:center;align-items:center;padding:40px 20px;min-height:calc(100vh - 128px)}
.login-card{background-color:var(--card);border:1px solid #eef1f7;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);width:100%;max-width:400px}
html.dark .login-card{border-color:#334155}
.login-card h2{font-size:24px;margin:0 0 4px 0}
.login-card .lead{font-size:16px;margin-bottom:24px;color:var(--muted)}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-weight:600;margin-bottom:6px}
.form-group input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #e5e8ef;background-color:var(--bg);color:var(--ink);font-size:16px;font-family:inherit}
html.dark .form-group input{border-color:#334155}
.form-group input:focus{outline:3px solid var(--ring);outline-offset:2px;border-color:var(--brand)}
.login-footer{margin-top:20px;text-align:center;font-size:14px;color:var(--muted)}
.error-msg{color:#ef4444;font-size:13px;font-weight:500;margin-top:6px}
.success-msg{background-color:var(--brand-2);color:white;padding:14px;border-radius:12px;text-align:center;font-weight:600;margin-bottom:20px}

/* ========================================= */
/* == STYLES UNTUK HALAMAN MATERI == */
/* ========================================= */
.materi-container{background: #0f172a; min-height: calc(100vh - 64px); color: #e6eef8; font-family: Inter, system-ui; line-height: 1.6;}
.materi-header{padding: 28px 24px; border-bottom: 1px solid rgba(255,255,255,0.04); display: flex; align-items: center; gap: 20px;}
.materi-header .brand{font-weight: 700; font-size: 18px; color: #f59e0b;}
.materi-header .subtitle{color: #94a3b8; font-size: 13px;}
.materi-container .wrap{display: grid; grid-template-columns: 300px 1fr; gap: 20px; padding: 20px;}
.materi-container nav{background: #0b1220; padding: 16px; border-radius: 12px; min-height: 320px; position: sticky; top: 84px;}
.materi-container nav h3{margin: 0 0 12px 0; font-size: 13px; color: #94a3b8;}
.materi-container nav ul{list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px;}
.materi-container nav a{display: block; color: #cfe9ff; text-decoration: none; padding: 10px; border-radius: 8px;}
.materi-container nav a:hover{background: rgba(255,255,255,0.02);}
.materi-container main{padding: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius: 12px;}
.materi-container section{margin-bottom: 28px; padding: 18px; background: rgba(255,255,255,0.03); border-radius: 10px;}
.materi-container h1, .materi-container h2, .materi-container h3{margin: 0 0 8px 0; color: white;}
.materi-container h1{font-size: 20px;}
.materi-container h2{font-size: 16px; color: #f59e0b;}
.materi-container p{color: #d9eefc; margin: 8px 0;}
.materi-container .muted{color: #94a3b8; font-size: 13px;}
.materi-container .text-block{background: rgba(255,255,255,0.02); padding: 12px; border-left: 4px solid rgba(255,255,255,0.03); border-radius: 8px;}
.materi-container .q{margin-top: 10px;}
.materi-container .options{display: flex; flex-direction: column; gap: 8px; margin-top: 8px;}
.materi-container button.opt{background: transparent; border: 1px solid rgba(255,255,255,0.04); padding: 10px; border-radius: 8px; color: #e6eef8; text-align: left; cursor: pointer;}
.materi-container button.opt.correct{border-color: rgba(34,197,94,0.6); background: linear-gradient(90deg,rgba(34,197,94,0.06),transparent);}
.materi-container button.opt.wrong{border-color: rgba(239,68,68,0.6); background: linear-gradient(90deg,rgba(239,68,68,0.04),transparent);}
.materi-container .explain{margin-top: 10px; padding: 10px; background: rgba(0,0,0,0.25); border-radius: 8px; color: #94a3b8;}
.materi-container .cta{display: inline-block; padding: 8px 12px; background: #f59e0b; color: #041024; border-radius: 8px; font-weight: 600; text-decoration: none; cursor: pointer; border: none;}
.materi-container .highlight{background: linear-gradient(90deg, rgba(245,158,11,0.14), rgba(245,158,11,0.03)); padding: 2px 4px; border-radius: 4px;}
.materi-container .note{font-size: 12px; color: #94a3b8; margin-top: 12px;}
.materi-footer{padding: 16px 24px; color: #94a3b8; font-size: 13px; background: #0f172a;}
@media (max-width:900px){.materi-container .wrap{grid-template-columns:1fr;padding:12px}.materi-container nav{order:2}.materi-container nav ul{flex-direction:row;overflow:auto}.materi-container main{order:1}}

/* ========================================= */
/* == STYLES UNTUK HALAMAN MINI TEST (DARK THEME) == */
/* ========================================= */

.mini-test-container {
    /* Menggunakan variabel warna global dari tema utama */
    --primary: var(--brand); /* Tombol utama akan memakai warna biru brand */
    --secondary: var(--ink); /* Judul dan teks penting akan berwarna terang */
    --accent: var(--brand-2); /* Aksen (misal: border) memakai warna hijau brand */
    --background-test: var(--bg); /* Latar belakang sama dengan situs utama */
    --text-test: var(--muted); /* Teks biasa akan berwarna abu-abu terang */
    --highlight: #f59e0b3d; /* Warna sorot diubah agar cocok di tema gelap */
    
    background-color: var(--background-test);
    color: var(--text-test);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    padding: 40px 20px;
}

.mini-test-container .simulator-container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.mini-test-container h1 {
    color: var(--ink); /* Judul utama halaman lebih terang */
}
/* Gaya untuk Live Timer yang Mengambang (di pojok kanan bawah) */
.live-timer {
    position: fixed; /* Diubah menjadi fixed */
    bottom: 20px;    /* Jarak 20px dari bawah */
    right: 20px;     /* Jarak 20px dari kanan */
    z-index: 1000;   /* Pastikan selalu di atas */
    
    background-color: var(--card);
    border: 1px solid #334155;
    color: var(--brand-2);
    font-weight: 700;
    font-size: 1.1rem;
    padding: 8px 16px;
    border-radius: 999px;
    width: fit-content;
    box-shadow: var(--shadow);
}

/* Mengubah kartu simulator menjadi gelap */
.mini-test-container .simulator,
.mini-test-container .stats-panel {
    background-color: var(--card);
    border: 1px solid #334155;
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 30px;
    margin-bottom: 20px;
}

.mini-test-container .reading-text {
    font-size: 1.1rem;
    margin-bottom: 25px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.03); /* Latar teks sedikit berbeda */
    border-left: 4px solid var(--brand);
    line-height: 1.8;
}

.mini-test-container .reading-text p {
    margin: 0;
    color: var(--ink);
}

.mini-test-container .controls {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.mini-test-container button {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mini-test-container button:hover {
    filter: brightness(110%);
    transform: translateY(-1px);
}

.mini-test-container .explanation {
    padding: 15px;
    margin-top: 15px;
    border-radius: 8px;
    animation: fadeIn 0.3s ease-out;
}

.mini-test-container .explanation.correct {
    background-color: rgba(16, 185, 129, 0.1);
    border-left: 4px solid var(--accent);
    color: #a7f3d0;
}

.mini-test-container .explanation.wrong {
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 4px solid #ef4444;
    color: #fca5a5;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1, transform: translateY(0); }
}

.mini-test-container .stats-title {
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--ink);
}

.mini-test-container .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.mini-test-container .stat-item {
    background-color: rgba(255, 255, 255, 0.03);
    padding: 10px;
    border-radius: 6px;
}

.mini-test-container .stat-label {
    font-size: 0.8rem;
    color: var(--muted);
}

.mini-test-container .stat-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--ink);
}

.mini-test-container .section-title {
    color: var(--ink);
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid #334155;
    padding-bottom: 8px;
}

.mini-test-container .question {
    margin-bottom: 20px;
    padding: 15px;
    background-color: transparent; /* Tidak perlu background karena sudah di dalam kartu */
    border-radius: 8px;
    color: var(--ink);
}

.mini-test-container .options {
    margin-top: 10px;
}

.mini-test-container .options label {
    display: block;
    margin: 8px 0;
    cursor: pointer;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #334155;
    transition: background-color 0.2s;
    color: var(--muted);
}

.mini-test-container .options label:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.mini-test-container .options label.correct {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: var(--accent);
    color: #a7f3d0;
    font-weight: bold;
}

.mini-test-container .options label.wrong {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: var(--muted);
}

.mini-test-container .options input[type="radio"] {
    margin-right: 10px;
    accent-color: var(--brand);
}
/* ========================================= */
/* == STYLES UNTUK HALAMAN VOCABULARY == */
/* ========================================= */
.vocabulary-container {
    padding: 40px 20px;
    background-color: var(--bg);
    font-family: 'Poppins', sans-serif;
}

.vocabulary-container .container {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--card);
    border-radius: 15px;
    box-shadow: var(--shadow);
    padding: 30px;
    position: relative;
    overflow: hidden;
    border: 1px solid #334155;
}

.vocabulary-container .header {
    text-align: center;
    margin-bottom: 30px;
}

.vocabulary-container .header h1 {
    color: var(--ink);
    font-size: 2.2rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.vocabulary-container .header p {
    color: var(--muted);
    font-size: 1rem;
    max-width: 700px;
    margin: 0 auto;
}

.vocabulary-container .infographic-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.vocabulary-container .word-column {
    flex: 1;
    min-width: 300px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 20px;
}

.vocabulary-container .category-title {
    font-size: 1.3rem;
    color: var(--ink);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--brand);
    font-weight: 600;
}

.vocabulary-container .word-list {
    list-style-type: none;
    padding: 0;
}

.vocabulary-container .word-item {
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 6px;
    position: relative;
}

.vocabulary-container .word-item:hover {
    background-color: rgba(59, 130, 246, 0.1);
    transform: translateX(5px);
}

.vocabulary-container .word {
    font-weight: 600;
    color: var(--brand);
}

.vocabulary-container .definition-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background-color: #2c3e50; /* Warna pop-up lebih gelap */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.25);
    width: 430px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border-left: 4px solid var(--brand);
}

.vocabulary-container .word-item.active .definition-popup {
    opacity: 1;
    visibility: visible;
}

.vocabulary-container .definition-title {
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.vocabulary-container .definition-text {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.vocabulary-container .example {
    font-style: italic;
    color: var(--brand-2); /* Warna hijau untuk contoh */
    margin-top: 8px;
    font-size: 0.85rem;
}

.vocabulary-container .tooltip-info {
    position: fixed; /* Diubah menjadi fixed */
    bottom: 20px;
    right: 20px;
    z-index: 100; /* Pastikan selalu di atas konten lain */
    
    background-color: var(--brand);
    color: white;
    padding: 10px 20px; /* Sedikit diperbesar agar lebih terlihat */
    border-radius: 999px; /* Bentuk pil */
    font-size: 0.9rem; /* Sedikit perbesar font */
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@media (max-width: 768px) {
    .vocabulary-container .word-column {
        min-width: 100%;
    }
    .vocabulary-container .definition-popup {
        width: 400px;
    }
}
/* ========================================= */
/* == STYLES UNTUK HALAMAN FULL TEST (FINAL) == */
/* ========================================= */

.full-test-container {
    background-color: var(--bg);
    color: var(--ink);
    /* KUNCI UTAMA: Mengatur tinggi container agar mengisi sisa layar di bawah header */
    height: calc(100vh - 64px); 
    display: flex;
    flex-direction: column;
}
.passage-navigation .btn {
    color: var(--ink); /* Mengatur warna teks menjadi warna terang dari tema */
}
.full-test-container .page { 
    display: none; 
    width: 100%;
    height: 100%;
}
.full-test-container .page.active { 
    display: flex; 
}

/* Halaman Instruksi */
#page-instructions {
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.instructions-card {
    background: var(--card);
    padding: 40px;
    max-width: 600px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid #334155;
}
.instructions-card h1 { margin-top: 0; color: var(--ink); }
.instructions-card ul { line-height: 1.8; color: var(--muted); padding-left: 20px; }
.instructions-card li { margin-bottom: 8px; }
.instructions-card button { margin-top: 20px; }

/* Halaman Tes */
#page-test {
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Mencegah scroll di level ini */
}

.test-sub-header {
    height: 60px;
    background: var(--card);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid #334155;
    flex-shrink: 0; /* Header tidak boleh menyusut */
}
.test-sub-header .test-title-left { font-weight: 700; }
.test-sub-header .timer-controls { 
    position: absolute; /* Timer diposisikan absolut terhadap header */
    left: 50%;
    transform: translateX(-50%);
    display: flex; 
    align-items: center; 
    gap: 20px; 
}
.test-sub-header #timer { font-weight: 700; color: var(--brand-2); font-size: 1.2rem;}
.btn-finish {
    padding: 8px 14px;
    border: none;
    background: #ef4444;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.test-layout {
    display: flex;
    width: 100%;
    flex-grow: 1; /* Layout ini mengisi sisa ruang vertikal */
    overflow: hidden; /* KUNCI: Mencegah scroll di layout utama */
}
.passage-area {
    flex: 1;
    min-width: 400px;
    padding: 24px;
    border-right: 1px solid #334155;
    background: var(--card);
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* KUNCI: Hanya passage yang bisa scroll */
}
#passage-content { flex-grow: 1; }
.passage-area h2 { color: var(--ink); margin-top: 0; }
.passage-area p { color: var(--muted); line-height: 1.7; }
.passage-navigation { margin-top: 20px; display: flex; justify-content: space-between; flex-shrink: 0;}

.questions-and-nav {
    flex: 1;
    min-width: 400px;
    display: flex;
    overflow: hidden;
}
.questions-area {
    flex: 3;
    padding: 24px;
    overflow-y: auto; /* KUNCI: Hanya area soal yang bisa scroll */
    background: var(--bg);
}
.navigator-area {
    flex: 1;
    min-width: 260px; /* Lebar minimum untuk 4 kolom navigator */
    max-width: 260px;
    border-left: 1px solid #334155;
    padding: 16px;
    background: var(--card);
    overflow-y: auto;
}

/* Progress Bar */
.progress-container { margin-bottom: 24px; }
.progress { background: #374151; border-radius: 10px; overflow: hidden; height: 10px; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); width: 0%; transition: width .3s ease; }
.progress-text { font-size: 13px; margin-bottom: 8px; color: var(--muted); font-weight: bold; }

/* Soal & Pilihan Jawaban */
.question { margin-bottom: 24px; color: var(--ink); }
.question p { font-weight: 600; margin-top: 0; }
.questions-area label { cursor: pointer; display: block; margin: 8px 0; color: var(--muted); padding: 8px; border-radius: 6px; }
.questions-area label:hover { background-color: rgba(255, 255, 255, 0.03); }
.questions-area input[type="radio"] { accent-color: var(--brand); margin-right: 8px; }

/* Navigator Soal (4 Kolom) */
#navigator {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 kolom per baris */
    gap: 8px;
}
#navigator button {
    width: 100%;
    aspect-ratio: 1 / 1; /* Membuat tombol menjadi kotak sempurna */
    border-radius: 8px; /* Sedikit kotak agar lebih rapi */
    border: 1px solid #4b5563;
    cursor: pointer;
    background: #374151;
    color: var(--ink);
    font-weight: bold;
    transition: all 0.2s ease;
}
#navigator button:hover { background-color: #4b5563; }
#navigator button.visited { border-color: #f59e0b; color: #f59e0b; }
#navigator button.answered { background: var(--brand-2); color: white; border-color: var(--brand-2); }
#navigator button.unanswered {
    background-color: #ef4444; /* Warna merah */
    color: white;
    border-color: #dc2626;
}
/* ========================================= */
/* == STYLES UNTUK ACCORDION MATERI == */
/* ========================================= */
.accordion-trigger {
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 15px; /* Tambah padding agar lebih mudah diklik */
    border-radius: 8px;
    position: relative;
}

.accordion-trigger:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Tambahkan ikon panah/plus */
.accordion-trigger::after {
    content: '+';
    position: absolute;
    right: 20px;
    font-size: 1.5em;
    transition: transform 0.4s ease;
}

.accordion-trigger.active::after {
    transform: rotate(45deg); /* Ubah plus menjadi silang */
}

.accordion-content {
    max-height: 0; /* Sembunyikan konten secara default */
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out; /* Animasi halus */
    padding: 0 20px; /* Hapus padding saat tersembunyi */
}
/* ========================================= */
/* == STYLES UNTUK DROPDOWN HEADER (CLICK) == */
/* ========================================= */
.menu .dropdown {
    position: relative;
    display: inline-block;
}

/* Tombol dropdown itu sendiri */
.menu .dropbtn {
    cursor: pointer;
}

.menu .dropdown-content {
    /* Sembunyikan dropdown secara default */
    display: none;
    position: absolute;
    background-color: var(--card);
    min-width: 160px;
    box-shadow: var(--shadow);
    z-index: 10;
    border-radius: 8px;
    margin-top: 10px;
    border: 1px solid #334155;
    overflow: hidden; /* Pastikan border-radius bekerja */
}

/* Tampilkan dropdown saat class .show ditambahkan oleh JavaScript */
.menu .dropdown-content.show {
    display: block;
}

.menu .dropdown-content a {
    color: var(--muted);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s;
}

.menu .dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--ink);
}
/* Style untuk Penjelasan Informatif di Bawah Soal */
.mini-test-container .explanation {
    margin-top: 15px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--brand);
    border-radius: 0 8px 8px 0;
}
.skill-tag {
    display: inline-block;
    background-color: var(--brand);
    color: white;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.explanation-text {
    margin-top: 8px;
    color: var(--muted);
}
.evidence-highlight {
    background-color: rgba(245, 158, 11, 0.2);
}
/* ========================================= */
/* == STYLE UNTUK KARTU AJAKAN (CTA CARD) == */
/* ========================================= */
.cta-card {
    background: var(--card);
    border: 1px solid #334155; /* Disesuaikan untuk dark mode */
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
}
/* ========================================= */
/* == STYLE UNTUK VIDEO YOUTUBE RESPONSIVE == */
/* ========================================= */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Aspect Ratio 16:9 */
    height: 0;
    overflow: hidden;
    margin: 20px 0;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* ========================================= */
/* == STYLE UNTUK IKON SOSIAL MEDIA FOOTER == */
/* ========================================= */
.footer-social {
    margin-top: 16px;
    display: flex;
    gap: 16px; /* Jarak antar ikon */
}

.footer-social a {
    display: inline-block;
}

.footer-social svg {
    width: 100px;
    height: 100px;
    fill: var(--muted); /* Warna ikon default */
    transition: fill 0.2s ease-in-out;
}
.footer-social img {
    width: 80px;
    height: 80px;
    fill: var(--muted); /* Warna ikon default */
    transition: fill 0.2s ease-in-out;
}

.footer-social a:hover svg {
    fill: var(--ink); /* Warna ikon saat disentuh mouse */
}
/* Style untuk header halaman admin */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.btn-export {
    background-color: #10b981; /* Warna hijau */
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.btn-export:hover {
    background-color: #0f9a6c;
}
/* ========================================= */
/* == STYLE UNTUK NAVIGASI SOAL MINI TEST == */
/* ========================================= */
.mini-test-container .question {
    display: none; /* Sembunyikan semua soal */
}

.mini-test-container .question.active {
    display: block; /* Tampilkan hanya soal yang aktif */
}

.question-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #334155;
}
/* ========================================= */
/* == STYLE BARU UNTUK LEADERBOARD YANG KEREN == */
/* ========================================= */
.leaderboard-table {
    width: 100%;
    margin-top: 15px;
    border-collapse: collapse;
    border-style: hidden; /* Sembunyikan border luar default */
}

.leaderboard-table th, .leaderboard-table td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid #334155;
}

.leaderboard-table th {
    color: var(--muted);
    font-size: 0.9rem;
}

.leaderboard-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.leaderboard-table .rank-cell {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

.leaderboard-table .user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.leaderboard-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* Style untuk Podium */
.leaderboard-table tr.rank-gold {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), transparent);
}
.leaderboard-table tr.rank-silver {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.1), transparent);
}
.leaderboard-table tr.rank-bronze {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.1), transparent);
}

/* Style untuk menyorot baris pengguna yang sedang login */
.leaderboard-table tr.current-user-rank {
    border-left: 4px solid var(--brand);
}
/* ========================================= */
/* == STYLE UNTUK HALAMAN KONTAK == */
/* ========================================= */
.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--muted);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #334155;
    border-radius: var(--radius);
    background-color: var(--card); /* Sedikit bedakan dari background utama */
    color: var(--ink);
    box-sizing: border-box; /* Agar padding tidak menambah lebar */
    font-family: inherit;
    font-size: 1rem;
}

.contact-form textarea {
    resize: vertical; /* Izinkan user mengubah tinggi textarea */
}