/* Variabel Warna Tema Dark Tech */
:root {
    --accent-color: #08f7fe;
    --dark-bg-primary: #121212;
    --dark-bg-secondary: #1f1f1f;
    --dark-bg-input: #2a2a2a;
    --dark-border-color: #333;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
}

/* Tema Dark Mode untuk Body */
body {
    padding-top: 56px;
    font-family: 'Poppins', sans-serif;
    background-color: var(--dark-bg-primary); 
    color: var(--text-primary); 
}

/* Class untuk warna aksen */
.text-accent {
    color: var(--accent-color);
}

/* Navbar Kustom Dark */
.navbar-custom-dark {
    background-color: var(--dark-bg-secondary);
    border-bottom: 1px solid var(--dark-border-color);
}

/* Styling Kartu Tema Dark */
.card.card-dark-theme {
    background: var(--dark-bg-secondary);
    border-radius: 1rem;
    border: 1px solid var(--dark-border-color);
    box-shadow: 0 0 30px rgba(var(--accent-color), 0.1); /* Glow halus */
    transition: all 0.3s ease;
}

.card.card-dark-theme:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 30px rgba(8, 247, 254, 0.25); /* Glow lebih kuat */
}

/* Garis <hr> kustom */
.hr-custom {
    border-color: var(--dark-border-color);
    opacity: 0.5;
}

.text-muted-custom {
    color: var(--text-secondary);
    font-size: 0.875em;
}

/* Input Form Tema Dark */
.form-control {
    background: var(--dark-bg-input);
    border: 1px solid var(--dark-border-color);
    color: var(--text-primary);
    transition: all 0.3s ease-out;
}

/* Efek "Glow" saat input di-klik (focus) */
.form-control:focus {
    background: #333;
    border-color: var(--accent-color);
    box-shadow: 0 0 15px 2px rgba(8, 247, 254, 0.25); /* Efek glow aksen */
    color: #ffffff;
}

/* Styling placeholder tema dark */
.form-control::placeholder {
    color: #777;
    opacity: 1;
}

/* Tombol Submit Keren (Solid Aksen) */
.btn-submit-custom {
    font-weight: 700;
    border: none;
    background-color: var(--accent-color);
    color: var(--dark-bg-primary); /* Teks hitam kontras */
    border-radius: 0.5rem;
    padding: 0.75rem;
    transition: all 0.3s ease-out;
}

.btn-submit-custom:hover {
    background-color: #ffffff; /* Balik jadi putih */
    color: var(--dark-bg-primary);
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(8, 247, 254, 0.5); /* Glow kuat */
}

/* Footer Kustom Dark */
.footer-custom-dark {
    background-color: var(--dark-bg-secondary);
    border-top: 1px solid var(--dark-border-color);
}

/* Styling logo placeholder (tetap) */
.navbar-brand img {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Styling untuk container hasil (Modal Body) */
#resultOutput {
    background: transparent;
    border: none;
    font-family: 'Poppins', sans-serif;
    color: var(--text-primary);
}

/* Styling untuk List Group hasil */
.result-list .list-group-item {
    background-color: var(--dark-bg-input); 
    border-color: var(--dark-border-color);
    color: var(--text-primary);
    padding: 0.85rem 1.25rem;
    transition: background-color 0.2s ease;
}

/* Efek hover pada setiap baris hasil */
.result-list .list-group-item:hover {
     background-color: #333;
}

/* Styling untuk header kategori (e.g., DATA WILAYAH) */
.result-list .list-group-header {
    font-weight: 700;
    color: var(--accent-color); 
    background-color: var(--dark-bg-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Label data (e.g., "Provinsi") */
.result-label {
    font-weight: 600;
    color: var(--text-secondary);
}

/* Nilai data (e.g., "JAWA BARAT") */
.result-value {
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

/* Styling khusus untuk NIK agar menonjol */
.result-value-nik {
    font-family: 'Consolas', monospace;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--accent-color);
    letter-spacing: 1px;
}

/* Atur sudut atas dan bawah list agar tumpul */
.result-list .list-group-item:first-child {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}
.result-list .list-group-item:last-child {
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

/* Styling Modal Tema Dark */
.modal-content {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border-color);
    border-radius: 1rem;
    box-shadow: 0 0 40px rgba(var(--accent-color), 0.25); /* Glow keren */
}

.modal-header {
    border-bottom: 1px solid var(--dark-border-color);
}

.modal-body {
    padding: 1.5rem; /* Beri ruang lebih */
}

/* Tombol close (X) agar terlihat di background gelap */
.btn-close {
    background-color: #fff; /* Ganti filter default agar terlihat */
    border-radius: 50%;
    opacity: 0.7;
}
.btn-close:hover {
    opacity: 1;
}

/* Penyesuaian responsif */
@media (max-width: 767.98px) {
    .display-4 {
        font-size: 2.5rem;
    }
    .lead {
        font-size: 1rem;
    }
}

/* BARU: Ubah warna spinner di dalam tombol agar kontras */
.btn-submit-custom .spinner-border {
    color: var(--dark-bg-primary); /* Sama seperti warna teks tombol */
    vertical-align: -0.125em; /* Pusatkan spinner */
}

/* BARU: Styling tombol saat proses loading */
.btn-submit-custom:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* BARU: Styling untuk link sosial di footer (Menggantikan .footer-wa-link) */
.footer-social-link {
    color: inherit; /* Mewarisi warna teks dari parent (footer) */
    text-decoration: none; /* Menghilangkan garis bawah */
    transition: color 0.2s ease;
    white-space: nowrap; /* Mencegah link terputus di layar kecil */
}

.footer-social-link:hover {
    color: var(--accent-color); /* Berubah jadi warna aksen saat disentuh mouse */
}

/* BARU: Styling untuk counter di footer */
#viewCounter {
    font-size: 0.9em;
    color: var(--text-secondary); /* Warna abu-abu (sama seperti text-muted) */
}