@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

:root {
    /* Tema Neo Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --text-main: #ffffff;
    --text-muted: #a0a0a0;
    --accent: #00f2fe;
    --accent-hover: #4facfe;
    --danger: #ff4b2b;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Poppins', sans-serif; 
}

body {
    background: #0f2027; /* Fallback warna solid */
    background: linear-gradient(to right, #203a43, #0f2027, #2c5364); /* Elegan Dark Blue */
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

/* =========================================
   AREA UMUM (PENGUNJUNG & ADMIN)
   ========================================= */
.header { 
    text-align: center; 
    margin-bottom: 30px; 
    animation: fadeIn 1s ease-in-out; 
}
.header img { 
    width: 120px; 
    filter: drop-shadow(0 0 10px rgba(0, 242, 254, 0.5)); 
    margin-bottom: 10px; 
}
.header h1 { 
    font-weight: 800; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
}

/* Card Kaca (Wadah Utama) */
.glass-container {
    width: 100%;
    max-width: 600px;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--glass-shadow);
}

/* List Kandidat di HP */
.candidate-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.3s ease;
}
.candidate-card:hover { 
    transform: translateY(-3px); 
    border-color: var(--accent); 
}

.info h2 { font-size: 1.2rem; font-weight: 600; }
.info span { 
    font-size: 0.85rem; 
    color: var(--accent); 
    background: rgba(0, 242, 254, 0.1); 
    padding: 3px 8px; 
    border-radius: 20px; 
}

.action-area { text-align: right; }
.vote-count { 
    font-size: 1.5rem; 
    font-weight: 800; 
    margin-bottom: 5px; 
    display: block; 
    color: var(--accent); 
}

/* Tombol / Buttons */
button {
    background: linear-gradient(45deg, var(--accent), var(--accent-hover));
    border: none;
    color: #fff;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.4);
    transition: all 0.3s ease;
}
button:hover { 
    box-shadow: 0 6px 20px rgba(0, 242, 254, 0.6); 
    transform: scale(1.05); 
}
button:disabled { 
    background: #555; 
    cursor: not-allowed; 
    box-shadow: none; 
    color: #888; 
    transform: none; 
}
.btn-danger { 
    background: linear-gradient(45deg, #ff416c, var(--danger)); 
    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.4); 
}

/* Input untuk Form Admin */
input, select {
    width: 100%; 
    padding: 10px; 
    margin-bottom: 15px;
    background: rgba(255,255,255,0.1); 
    border: 1px solid var(--glass-border);
    color: white; 
    border-radius: 10px; 
    outline: none;
}
input::placeholder { color: #ccc; }

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


/* =========================================
   AREA KHUSUS VIDEOTRON (LAYAR BESAR 16:9) 
   (DESAIN 3 SEJAJAR KIRI - TENGAH - KANAN)
   ========================================= */
.videotron-wrapper {
    width: 100%;
    max-width: 1400px; /* Diperlebar agar 3 card leluasa */
    margin: 0 auto;
    text-align: center;
    padding: 20px;
}

.videotron-header h1 {
    font-size: 4rem;
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 242, 254, 0.8);
    margin-bottom: 60px;
    text-transform: uppercase;
}

/* MENGUNCI 3 CARD SEJAJAR */
.podium-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Memaksa 3 kolom sejajar rata */
    gap: 40px;
    align-items: stretch; /* Tinggi ketiga card akan selalu sama rata */
}

.podium-card {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 50px 30px;
    box-shadow: var(--glass-shadow);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* Animasi detak tipis */
.podium-card:hover { transform: scale(1.02); }

/* Label Peringkat (Bulatan di atas card) */
.rank-badge {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.podium-card h2 { font-size: 2.5rem; margin: 20px 0 10px; color: #fff; line-height: 1.2; }
.podium-card .category { font-size: 1.5rem; color: var(--text-muted); display: block; margin-bottom: 30px; }
.podium-card .vote-count { font-size: 5rem; font-weight: 900; color: var(--accent); text-shadow: 0 0 15px rgba(0, 242, 254, 0.6); }

/* Pewarnaan Juara Berdasarkan Peringkat */
.rank-1 { border: 2px solid #ffd700; box-shadow: 0 0 30px rgba(255, 215, 0, 0.2); }
.rank-1 .rank-badge { background: linear-gradient(45deg, #bf953f, #fcf6ba, #b38728, #fbf5b7); color: #000; }
.rank-1 .vote-count { color: #ffd700; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }

.rank-2 { border: 2px solid #c0c0c0; }
.rank-2 .rank-badge { background: linear-gradient(45deg, #8a8a8a, #c0c0c0, #e8e8e8); color: #000; }
.rank-2 .vote-count { color: #c0c0c0; text-shadow: 0 0 20px rgba(192, 192, 192, 0.5); }

.rank-3 { border: 2px solid #cd7f32; }
.rank-3 .rank-badge { background: linear-gradient(45deg, #cd7f32, #a0522d, #8b4513); color: #fff; }
.rank-3 .vote-count { color: #cd7f32; text-shadow: 0 0 20px rgba(205, 127, 50, 0.5); }

/* Responsivitas Layar Kecil (Hanya berjaga-jaga jika Videotron Resolusi Rendah) */
@media (max-width: 900px) {
    .podium-container { grid-template-columns: 1fr; }
    .videotron-header h1 { font-size: 2.5rem; }
    .podium-card { padding: 30px 20px; }
}
/* =========================================
   UPGRADE FITUR: SKELETON, PROGRESS BAR, SWAL 3D
   ========================================= */

/* 1. Skeleton Loading (Instagram Style) */
.skeleton-box {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 10px;
    height: 20px;
    margin-bottom: 10px;
}
.skeleton-card { padding: 15px; border: 1px solid var(--glass-border); border-radius: 15px; margin-bottom: 15px; background: rgba(0,0,0,0.2); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* 2. SweetAlert 3D Glassmorphism (Bukan popup bawaan standar) */
.swal-glass {
    background: rgba(20, 30, 40, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 242, 254, 0.4) !important;
    border-radius: 25px !important;
    color: white !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 20px rgba(0, 242, 254, 0.1) !important;
}
.swal2-title, .swal2-html-container { color: #fff !important; }

/* 3. Progress Bar Videotron */
.progress-container { width: 100%; background: rgba(0,0,0,0.3); border-radius: 20px; height: 12px; margin-top: 15px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.progress-fill { height: 100%; border-radius: 20px; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); }
.percent-text { font-size: 1.2rem; font-weight: bold; color: #fff; margin-top: 5px; display: block; }
.fill-1 { background: linear-gradient(90deg, #b38728, #ffd700); box-shadow: 0 0 10px #ffd700; }
.fill-2 { background: linear-gradient(90deg, #8a8a8a, #c0c0c0); box-shadow: 0 0 10px #c0c0c0; }
.fill-3 { background: linear-gradient(90deg, #a0522d, #cd7f32); box-shadow: 0 0 10px #cd7f32; }

/* 4. Mini Statistik Admin */
.admin-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.stat-box { background: rgba(0,242,254,0.1); border: 1px solid var(--accent); padding: 15px; border-radius: 15px; text-align: center; }
.stat-box h3 { font-size: 2rem; color: var(--accent); }
.btn-excel { background: linear-gradient(45deg, #1D976C, #93F9B9); color: #000; margin-top:10px;}