body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f2f5; color: #333; margin: 0; }
.title-container {
    text-align: center; /* Menengahkan semua isinya (termasuk h2) */
    margin-bottom: 2.5rem; /* Memberi jarak ke kartu kandidat di bawahnya */
}
.login-container { width: 100%; max-width: 400px; margin: 10vh auto; padding: 2rem; background-color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 8px; }
.login-container h2 { text-align: center; color: #1c1e21; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; }
.form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #dddfe2; border-radius: 6px; box-sizing: border-box; font-family: inherit; }
button { width: 100%; padding: 12px; border: none; border-radius: 6px; background-color: #1877f2; color: #fff; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.3s; }
button:hover { background-color: #166fe5; }
.error-message { color: #fa3e3e; font-size: 0.9em; text-align: center; }
.main-header { background-color: #fff; padding: 1rem 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; }
.main-header h1 { font-size: 1.5rem; margin: 0; }
.main-header a { text-decoration: none; background-color: #e4e6eb; color: #000; padding: 8px 16px; border-radius: 6px; font-weight: 600; }
main { padding: 2rem; max-width: 1200px; margin: auto;}
.status-message { font-size: 1.1em; font-weight: bold; text-align: center; padding: 1rem; }
/* Kode Perbaikan untuk Centering */
.candidates-grid {
    display: flex; /* Menggunakan Flexbox */
    flex-wrap: wrap; /* Izinkan item untuk pindah ke baris baru */
    justify-content: center; /* INI KUNCINYA: Menengahkan semua item secara horizontal */
    gap: 1.5rem; /* Tetap pertahankan jarak antar kartu */
}
/* Pastikan .candidate-card memiliki lebar */
.candidate-card {
    width: 280px; /* Atur lebar kartu agar konsisten */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
    padding-bottom: 1rem;
}
/* Kode Perbaikan */
.candidate-card img {
    width: 100%;
    aspect-ratio: 1 / 1; /* <--- BARIS INI MEMBUATNYA KOTAK (rasio 1:1) */
    object-fit: cover;   /* Ini memastikan gambar mengisi kotak tanpa gepeng */
}
.candidate-card h3 { margin: 1rem 0 0.5rem 0; }
.candidate-card p { padding: 0 1rem; font-size: 0.9em; color: #65676b; }
.candidate-card .vote-btn { width: calc(100% - 2rem); margin: 1rem; }
.admin-section { background-color: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 2rem; }
.admin-section h2, .admin-section h3 { margin-top: 0; color: #1c1e21;}
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
.result-card { text-align: center; }
.result-card img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.result-card h4 { font-size: 2rem; margin: 0.5rem 0; color: #1877f2; }
.management-area { display: flex; flex-wrap: wrap; gap: 2rem; }
.form-container, .list-container { flex: 1; min-width: 300px;}
#candidate-list div, #voter-list div { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; border-bottom: 1px solid #eee; }
.delete-btn { background-color: #fa3e3e; font-size: 12px; padding: 5px 10px; width: auto; }
.danger-zone { border: 2px solid #fa3e3e; }
.danger-zone button { background-color: #fa3e3e; }
.danger-zone button:hover { background-color: #e03030; }
.vote-btn.voted { background-color: #28a745; border-color: #28a745; cursor: default; }
.vote-btn.disabled { background-color: #6c757d; border-color: #6c757d; cursor: not-allowed; opacity: 0.7; }
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.section-header h2 {
    margin: 0;
}
.export-button {
    background-color: #1d6f42;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.3s;
}
.export-button:hover {
    background-color: #165934;
}
.voter-info {
    flex-grow: 1;
}
.voter-info .password-display {
    font-size: 0.85em;
    color: #65676b;
    font-style: italic;
}
.bulk-status-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 6px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    color: #333;
}
.voter-status {
    margin-left: auto;
    margin-right: 1rem;
}
.status-badge {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-voted {
    background-color: #28a745; /* Hijau */
}
.status-not-voted {
    background-color: #6c757d; /* Abu-abu */
}
.search-container {
    margin-bottom: 1rem;
}

#search-voter-input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 14px;
}

#search-voter-input:focus {
    outline: none;
    border-color: #1877f2;
    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2);
}

#voter-list {
    /* 1. Tentukan tinggi maksimum untuk area daftar.
       Jika daftar lebih pendek dari ini, ukurannya akan normal.
       Jika lebih panjang, scrollbar akan muncul. */
    max-height: 450px; /* Anda bisa sesuaikan angkanya (misal: 500px) */

    /* 2. Tampilkan scrollbar vertikal (sumbu Y) secara otomatis jika kontennya lebih panjang */
    overflow-y: auto;

    /* 3. Beri sedikit padding di kanan agar scrollbar tidak menempel pada teks */
    padding-right: 10px;
}

/* (Opsional) Mempercantik tampilan scrollbar agar lebih tipis dan modern */
#voter-list::-webkit-scrollbar {
    width: 8px; /* Lebar scrollbar */
}

#voter-list::-webkit-scrollbar-track {
    background: #f1f1f1; /* Warna latar belakang track scrollbar */
    border-radius: 10px;
}

#voter-list::-webkit-scrollbar-thumb {
    background: #ccc; /* Warna batang scrollbar */
    border-radius: 10px;
}

#voter-list::-webkit-scrollbar-thumb:hover {
    background: #aaa; /* Warna batang scrollbar saat mouse di atasnya */
}
/*
==============================================
===== GAYA BARU UNTUK DAFTAR USER TERPISAH ===
==============================================
*/

.voter-list-split {
    display: flex;
    gap: 1.5rem; /* Jarak antara dua kolom */
    margin-top: 1rem;
}

.voter-list-column {
    flex: 1; /* Membuat kedua kolom memiliki lebar yang sama */
    background-color: #f9f9f9;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #eee;
}

.voter-list-column h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.5rem;
}

.list-items {
    max-height: 400px; /* Tinggi maksimum sebelum scroll muncul */
    overflow-y: auto;
    padding-right: 10px;
}

/* Penyesuaian untuk item di dalam list */
#voted-list-container .voter-info, 
#not-voted-list-container .voter-info {
    max-width: 70%; /* Batasi lebar info agar status tidak terdorong */
}

/* Penyesuaian untuk Tampilan HP */
@media (max-width: 768px) {
    .voter-list-split {
        flex-direction: column; /* Susun kolom ke bawah di HP */
    }
}


/* Styling untuk scrollbar (dari sebelumnya, pastikan ada) */
.list-items::-webkit-scrollbar {
    width: 8px;
}
.list-items::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.list-items::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
.list-items::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}
.end-vote-button {
    background-color: #e67e22; /* Warna oranye */
    margin-bottom: 1rem;
}
.end-vote-button:hover {
    background-color: #d35400;
}
/*
==============================================
===== GAYA BARU UNTUK PENGUMUMAN PEMENANG ====
==============================================
*/
.winner-announcement { background: linear-gradient(135deg, #fdd835, #f57f17); color: #333; border-radius: 12px; padding: 2rem; text-align: center; margin-bottom: 2rem; border: 3px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.winner-announcement h3 { margin: 0; font-size: 1.5rem; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; }
.winner-announcement .winner-photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 6px solid #fff; box-shadow: 0 5px 20px rgba(0,0,0,0.25); margin: 1rem auto; }
.winner-announcement .winner-name { font-size: 2.5rem; font-weight: 700; font-family: 'Poppins', sans-serif; margin: 0.5rem 0; }
.winner-announcement .winner-votes { font-size: 1.2rem; background-color: rgba(255, 255, 255, 0.3); display: inline-block; padding: 8px 15px; border-radius: 20px; }
.winner-announcement .tie-text { font-size: 1.8rem; font-weight: 700; }
.reopen-vote-button {
    background-color: #3498db; /* Warna biru */
    margin-bottom: 1rem;
}
.reopen-vote-button:hover {
    background-color: #2980b9;
}

/*
======================================================
===== RESPONSIVE - GAYA UNTUK TAMPILAN HP ============
======================================================
*/

/* Terapkan gaya ini jika lebar layar 768px atau lebih kecil */
@media (max-width: 768px) {

    /* Perbaikan Umum */
    body {
        -webkit-text-size-adjust: 100%; /* Mencegah zoom teks otomatis di iOS */
    }
    main {
        padding: 1rem; /* Kurangi padding utama agar tidak terlalu memakan tempat */
    }
    .admin-section {
        padding: 1rem;
    }

    /* Halaman Login */
    .login-container {
        width: 90%;
        padding: 1.5rem;
    }

    /* Header Utama */
    .main-header {
        flex-direction: column; /* Susun judul dan tombol logout ke bawah */
        gap: 10px; /* Beri jarak antara judul dan tombol */
        padding: 1rem;
        text-align: center;
    }
    .main-header h1 {
        font-size: 1.2rem; /* Kecilkan ukuran font header */
    }

    /* Judul Halaman Dashboard */
    .title-container {
        margin-bottom: 1.5rem;
    }
    main h2 {
        font-size: 1.8rem; /* Kecilkan ukuran font judul utama */
    }
    
    /* Kartu Kandidat */
    /* Aturan LAMA di dalam @media block */
/* Aturan BARU di dalam @media block */
/* Aturan BARU di dalam @media block untuk Tampilan Satu Kartu */

/* Aturan BARU di dalam @media block (Untuk Tampilan Daftar ke Bawah) */

.candidates-grid {
    display: flex;
    flex-direction: column;  /* PENTING: Mengubah susunan menjadi vertikal (ke bawah) */
    align-items: center;    /* PENTING: Menengahkan tumpukan kartu secara horizontal */
    gap: 1.5rem;            /* Jarak vertikal antar kartu */
    /* Hapus semua properti scroll horizontal dari sebelumnya */
    padding: 0;
    margin: 0;
}

.candidate-card {
    width: 95%;             /* Lebar kartu 95% dari layar HP */
    max-width: 350px;       /* Batas lebar maksimum agar tidak terlalu besar di tablet */
    /* Hapus semua properti flex dan scroll-snap dari sebelumnya */
}

/* Bonus: Sembunyikan scrollbar agar terlihat lebih bersih seperti aplikasi */
.candidates-grid::-webkit-scrollbar {
    display: none; /* Untuk Chrome, Safari, Opera */
}
.candidates-grid {
    -ms-overflow-style: none;  /* Untuk IE dan Edge */
    scrollbar-width: none;  /* Untuk Firefox */
}
    /* Halaman Admin */
    .section-header {
        flex-direction: column; /* Susun judul dan tombol export ke bawah */
        align-items: flex-start;
        gap: 1rem;
    }
    .management-area {
        flex-direction: column; /* Susun form dan list ke bawah, bukan menyamping */
        gap: 2rem;
    }
    .results-grid {
        /* Aturan grid yang ada sudah cukup responsif, tapi kita bisa pastikan */
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }
    .result-card h4 {
        font-size: 1.5rem;
    }
}