/*
 * dark.css - Tema gelap untuk tampilan web
 */

body.dark-mode {
    --primary-color: #007bff;
    --secondary-color: #f8f9fa;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --info-color: #6c757d;
    --background-color: #1a1a1a;
    --card-background: #2c2c2c;
    --text-color: #f8f9fa;
    --border-color: #444;
    --border-radius: 12px;
    --box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.dark-mode {
    background-color: var(--background-color);
    color: var(--text-color);
    /* ... properti lain tetap sama ... */
}

body.dark-mode .container {

    /* ... properti lain tetap sama ... */
}

body.dark-mode .header h2 {
    color: var(--primary-color);
    /* ... properti lain tetap sama ... */
}

body.dark-mode .logout a {
    color: var(--secondary-color);
    /* ... properti lain tetap sama ... */
}

body.dark-mode .logout a:hover {
    color: #f8f9fa;
    background-color: var(--border-color);
}

body.dark-mode .user-profile {
    background-color: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
    /* ... properti lain tetap sama ... */
}

body.dark-mode .user-profile h2 {
    color: var(--primary-color);
    /* ... properti lain tetap sama ... */
}

body.dark-mode .tes-list h3 {
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
    /* ... properti lain tetap sama ... */
}

body.dark-mode .tes-item {
    background-color: var(--card-background);
    border-color: var(--border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* ... properti lain tetap sama ... */
}

body.dark-mode .tes-item h3 {
    color: var(--primary-color);
    /* ... properti lain tetap sama ... */
}

body.dark-mode .tes-item p {
    color: var(--secondary-color);
    /* ... properti lain tetap sama ... */
}

body.dark-mode .tes-item a {
    color: white;
    /* ... properti lain tetap sama ... */
}

body.dark-mode .btn-primary {
    background-color: var(--primary-color);
}

body.dark-mode .btn-review {
    background-color: var(--success-color);
}

body.dark-mode .statistik {
    color: var(--secondary-color);
}

/* Review Jawaban */
body.dark-mode .header h2 {
    color: var(--primary-color);
}

body.dark-mode .score-info {
    color: var(--secondary-color);
}

body.dark-mode .score-info strong {
    color: var(--text-color);
}

body.dark-mode .soal {
    background-color: var(--background-color);
    border-color: var(--border-color);
}

body.dark-mode .soal strong {
    color: var(--primary-color);
}

body.dark-mode .jawaban-user {
    color: var(--text-color);
}

body.dark-mode .kunci-jawaban {
    color: var(--secondary-color);
}

body.dark-mode .status {
    color: var(--text-color);
}

/* Mulai Tes */
body.dark-mode .header h2 {
    color: var(--primary-color);
}

body.dark-mode .progress {
    color: var(--secondary-color);
}

body.dark-mode .soal-card {
    background-color: var(--card-background);
    border-color: var(--border-color);
}

body.dark-mode .soal-card strong {
    color: var(--primary-color);
}

body.dark-mode hr {
    border-color: var(--border-color);
}

body.dark-mode .pilihan label {
    background-color: var(--background-color);
    border-color: var(--border-color);
}

body.dark-mode .pilihan label:hover {
    background-color: var(--success-color);
}

body.dark-mode .pilihan input[type="radio"]:checked + label {
    background-color: var(--success-color);
}

body.dark-mode textarea {
    background-color: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .submit-btn {
    background-color: var(--primary-color);
}

/* Hasil Tes */
body.dark-mode h2 {
    color: var(--primary-color);
}

body.dark-mode .score-display {
    border-color: var(--primary-color);
    background: rgba(0, 123, 255, 0.1);
    color: var(--primary-color);
}

body.dark-mode .hasil-list li {
    background-color: var(--background-color);
}

body.dark-mode .hasil-list li strong {
    color: var(--text-color);
}

body.dark-mode .btn {
    background-color: var(--primary-color);
}

body.dark-mode .main-article {
    background-color:var(--background-color);
}

body.dark-mode .category-link { color: white;}
body.dark-mode .excerpt,body.dark-mode #indeks .excerpt {color: #fff;}

body.dark-mode .meta-info time {
    color: #cdcdcd;
}
body.dark-mode #populer .category-link {
    color: #ffffff;
}
body.dark-mode #topik .article-details h3 a {
    color: #6fd2e3;
}
body.dark-mode #topik .topik_berita .main-article {
    background: #000000;
}
body.dark-mode #infografik .main-article,body.dark-mode #populer .main-article,body.dark-mode #video .main-article,body.dark-mode #poling .poling {border: 1px solid #414141;}
body.dark-mode #video .main-article a,body.dark-mode #infografik .main-article a,body.dark-mode .halaman .main-article h3 a,body.dark-mode #populer .main-article h3 a,body.dark-mode #terbaru .main-article h3 a,body.dark-mode #indeks .main-article h3 a,body.dark-mode #detail h1 {
    color: #4DD0E1;
}
body.dark-mode #detail footer,body.dark-mode #detail header {    background-color: #1a1a1a;}
body.dark-mode #detail tr:nth-child(even) {    background-color: #161616;}
body.dark-mode #detail table,body.dark-mode #detail thead,body.dark-mode #detail ins {    background-color: #000;}