/**
 * Theme Name: KMA
 * File: dark-mode.css
 * Description: Stylesheet khusus untuk Mode Gelap (Dark Mode) Tema KMA.
 */

/* ==========================================
   1. VARIABEL CSS DARK MODE
   ========================================== */
[data-theme="dark"] {
    --bg-color: #0f0f0f;
    --card-bg: #1f1f1f;
    --text-color: #f1f1f1;
    --text-muted: #aaaaaa;
    --border-color: #333333;
    --input-bg: #2a2a2a;
    --hover-bg: #383838;
}

/* ==========================================
   2. ATURAN GLOBAL & ELEMEN UTAMA
   ========================================== */
[data-theme="dark"] body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] a {
    color: #e1e1e1;
}

[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
    color: var(--text-color) !important;
}

/* ==========================================
   3. HEADER & NAVIGASI
   ========================================== */
[data-theme="dark"] .kma-header {
    background-color: #181818 !important;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .kma-horizontal-scroll {
    background-color: transparent !important;
}

[data-theme="dark"] .kma-header a,
[data-theme="dark"] .kma-controls button {
    color: var(--text-color) !important;
}

/* ==========================================
   4. CARDS & CONTAINER (Beranda, Archive, Search, Page)
   ========================================== */
[data-theme="dark"] .kma-page-card,
[data-theme="dark"] .kma-post-card,
[data-theme="dark"] .kma-archive-header,
[data-theme="dark"] .kma-search-header,
[data-theme="dark"] .kma-404-card,
[data-theme="dark"] .kma-no-results,
[data-theme="dark"] .kma-no-posts,
[data-theme="dark"] .kma-products div,
[data-theme="dark"] .kma-courses div,
[data-theme="dark"] .kma-business-listings div {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .kma-card-meta,
[data-theme="dark"] .kma-page-header {
    border-color: var(--border-color) !important;
}

/* ==========================================
   5. INPUT, FORM & SEARCH
   ========================================== */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
}

/* ==========================================
   6. MODAL SHARE & POPUP
   ========================================== */
[data-theme="dark"] .kma-modal-content {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color);
}

/* ==========================================
   7. FOOTER
   ========================================== */
[data-theme="dark"] footer,
[data-theme="dark"] .kma-footer {
    background-color: #121212 !important;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted) !important;
}