/* =========================================================
   OSIS VOTING - Main Stylesheet
   SMK Negeri 1 Pengasih
   Tema terang / dominan putih dengan aksen ungu-pink
   ========================================================= */

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

:root{
  --primary: #4F46E5;
  --primary-dark: #4338CA;
  --primary-2: #7C3AED;
  --secondary: #DB2777;
  --accent: #0891B2;
  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;

  /* Nama variabel dipertahankan agar semua rule & inline style lain
     tetap kompatibel — nilainya saja yang diganti ke tema terang. */
  --bg-dark: #FFFFFF;         /* dasar background utama (sekarang putih) */
  --bg-dark-2: #FFFFFF;       /* background sidebar admin (sekarang putih) */
  --surface: rgba(255,255,255,.80);   /* kartu "glass" */
  --surface-solid: #FFFFFF;   /* kartu solid (modal form dsb) */
  --border: rgba(17,24,39,.09);
  --text: #111827;            /* teks utama, gelap */
  --text-muted: #64748B;      /* teks sekunder */

  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 20px 45px rgba(79,70,229,.10), 0 6px 18px rgba(15,23,42,.06);
  --shadow-sm: 0 8px 20px rgba(15,23,42,.06);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter','Segoe UI',sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(79,70,229,.09), transparent 38%),
    radial-gradient(circle at 88% 22%, rgba(219,39,119,.08), transparent 42%),
    radial-gradient(circle at 50% 95%, rgba(8,145,178,.07), transparent 40%),
    var(--bg-dark);
  color:var(--text);
  min-height:100vh;
  line-height:1.6;
}

h1,h2,h3,h4,h5,h6,
.btn,.brand h1,.logo-circle,.badge,.nomor-urut,
.stat-card .stat-value,.hasil-percent,.countdown .box .num{
  font-family:'Poppins','Segoe UI',sans-serif;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* ---------- Layout Helpers ---------- */
.container{max-width:1180px; margin:0 auto; padding:0 20px;}
.center-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.text-center{text-align:center;}
.mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;} .mt-4{margin-top:32px;}
.mb-1{margin-bottom:8px;} .mb-2{margin-bottom:16px;} .mb-3{margin-bottom:24px;}
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-1{gap:8px;} .gap-2{gap:16px;} .gap-3{gap:24px;}

/* ---------- Glass Card ---------- */
.glass{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

/* ---------- Topbar / Brand ---------- */
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand .logo-circle{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:20px; color:#fff;
  box-shadow:0 8px 20px rgba(79,70,229,.35);
  flex-shrink:0;
}
.brand h1{font-size:17px; margin:0; color:var(--text); line-height:1.3;}
.brand small{color:var(--text-muted); font-size:12px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:12px; border:none; cursor:pointer;
  font-weight:600; font-size:14px; transition:.25s ease; text-decoration:none;
}
.btn-primary{ background:linear-gradient(90deg,var(--primary),var(--primary-2)); color:#fff; box-shadow:0 10px 25px rgba(79,70,229,.30);}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(79,70,229,.42);}
.btn-secondary{ background:linear-gradient(90deg,var(--secondary),#f472b6); color:#fff; box-shadow:0 10px 25px rgba(219,39,119,.28);}
.btn-outline{ background:transparent; border:1px solid var(--border); color:var(--text);}
.btn-outline:hover{ background:rgba(79,70,229,.06); border-color:rgba(79,70,229,.3);}
.btn-success{ background:var(--success); color:#fff;}
.btn-danger{ background:var(--danger); color:#fff;}
.btn-sm{padding:8px 14px; font-size:13px; border-radius:8px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}

/* ---------- Forms ---------- */
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; margin-bottom:6px; font-size:13px; color:var(--text-muted); font-weight:600;}
.form-control{
  width:100%; padding:13px 16px; border-radius:12px;
  border:1px solid var(--border); background:#F7F7FB;
  color:var(--text); font-size:14px; transition:.2s;
}
.form-control:focus{ outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(79,70,229,.16);}
textarea.form-control{resize:vertical; min-height:100px;}
.input-icon{position:relative;}
.input-icon .form-control{padding-left:44px;}
.input-icon i{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-muted);}
.password-toggle{position:absolute; right:14px; top:50%; transform:translateY(-50%); cursor:pointer; color:var(--text-muted); background:none; border:none;}

/* ---------- Alerts ---------- */
.alert{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-radius:12px; margin-bottom:18px; font-size:14px;
  border:1px solid transparent; animation:slideIn .3s ease;
}
.alert-success{ background:rgba(22,163,74,.08); color:#15803d; border-color:rgba(22,163,74,.25);}
.alert-error{ background:rgba(220,38,38,.07); color:#b91c1c; border-color:rgba(220,38,38,.22);}
.alert-info{ background:rgba(8,145,178,.08); color:#0e7490; border-color:rgba(8,145,178,.22);}
.alert button{background:none; border:none; color:inherit; font-size:18px; cursor:pointer; line-height:1;}
@keyframes slideIn{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Badges ---------- */
.badge{ display:inline-block; padding:4px 12px; border-radius:99px; font-size:12px; font-weight:600;}
.badge-success{ background:rgba(22,163,74,.12); color:#15803d;}
.badge-warning{ background:rgba(217,119,6,.14); color:#92400e;}
.badge-danger{ background:rgba(220,38,38,.12); color:#991b1b;}
.badge-info{ background:rgba(79,70,229,.12); color:#3730a3;}

/* =========================================================
   HALAMAN LOGIN PEMILIH
   ========================================================= */
.login-wrap{ max-width:940px; width:100%; display:grid; grid-template-columns:1.1fr 1fr; overflow:hidden;}
.login-visual{
  background:linear-gradient(160deg, var(--primary) 0%, var(--primary-2) 55%, var(--secondary) 120%);
  padding:48px 40px; position:relative; display:flex; flex-direction:column; justify-content:space-between;
}
.login-visual::before{
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='1' fill='white' opacity='0.15'/%3E%3C/svg%3E");
  opacity:.5;
}
.login-visual .content{position:relative; z-index:1;}
.login-visual h2{ color:#fff; font-size:26px; line-height:1.4; margin-bottom:12px;}
.login-visual p{ color:rgba(255,255,255,.85); font-size:14px;}
.login-visual .brand h1{ color:#fff; }
.countdown{ display:flex; gap:10px; margin-top:24px;}
.countdown .box{ background:rgba(255,255,255,.18); border-radius:12px; padding:12px 14px; text-align:center; min-width:64px;}
.countdown .box .num{font-size:22px; font-weight:700; color:#fff;}
.countdown .box .label{font-size:10px; color:rgba(255,255,255,.8); text-transform:uppercase; letter-spacing:.5px;}
.login-form-side{ padding:48px 40px; background:#fff; }

@media (max-width:820px){
  .login-wrap{ grid-template-columns:1fr; }
  .login-visual{ display:none; }
}

/* =========================================================
   HALAMAN VOTING - KARTU KANDIDAT
   ========================================================= */
.page-header{ text-align:center; padding:50px 20px 20px;}
.page-header h1{ font-size:28px; color:var(--text); margin-bottom:8px;}
.page-header p{ color:var(--text-muted);}

.kandidat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:26px; padding:20px; max-width:1180px; margin:0 auto;
}
.kandidat-card{
  border-radius:var(--radius); overflow:hidden; position:relative;
  transition:.3s ease; display:flex; flex-direction:column;
}
.kandidat-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px rgba(79,70,229,.16), 0 8px 20px rgba(15,23,42,.08); }
.kandidat-photo-wrap{
  position:relative; height:230px; overflow:hidden;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex; align-items:center; justify-content:center;
}
.kandidat-photo-wrap img{ width:100%; height:100%; object-fit:cover;}
.kandidat-photo-wrap .no-photo{ font-size:64px; font-weight:800; color:rgba(255,255,255,.4);}
.nomor-urut{
  position:absolute; top:14px; left:14px; background:#fff; color:var(--text);
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; box-shadow:0 6px 14px rgba(15,23,42,.25);
}
.kandidat-body{ padding:20px; flex:1; display:flex; flex-direction:column; background:#fff;}
.kandidat-body h3{ margin:0 0 4px; font-size:17px; color:var(--text);}
.kandidat-body .pasangan{ color:var(--text-muted); font-size:13px; margin-bottom:14px;}
.kandidat-body .visi{ font-size:13px; color:var(--text-muted); margin-bottom:16px; flex:1; }
.kandidat-body .btn{ margin-top:auto; }
.detail-toggle{ background:none; border:none; color:var(--accent); font-size:12px; cursor:pointer; padding:0; margin-bottom:14px; text-decoration:underline;}
.misi-list{ font-size:12.5px; color:var(--text-muted); padding-left:18px; display:none; margin-bottom:14px;}
.misi-list.show{ display:block; }

/* Modal konfirmasi */
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:999; padding:20px;
}
.modal-overlay.show{ display:flex; }
.modal-box{
  max-width:420px; width:100%; padding:30px; text-align:center; animation:pop .25s ease;
  background:#fff;
}
@keyframes pop{ from{transform:scale(.9); opacity:0;} to{transform:scale(1); opacity:1;} }
.modal-box .icon-check{
  width:64px; height:64px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex; align-items:center; justify-content:center; font-size:28px; color:#fff;
}
.modal-box h3{ color:var(--text); margin-bottom:8px;}
.modal-box p{ color:var(--text-muted); font-size:14px; margin-bottom:22px;}
.modal-actions{ display:flex; gap:12px; }
.modal-actions .btn{ flex:1; }

/* =========================================================
   HALAMAN HASIL / RESULTS
   ========================================================= */
.hasil-card{ padding:22px; margin-bottom:18px; background:#fff;}
.hasil-row{ display:flex; align-items:center; gap:16px; margin-bottom:16px;}
.hasil-row .avatar{
  width:52px; height:52px; border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; flex-shrink:0; overflow:hidden;
}
.hasil-row .avatar img{width:100%;height:100%;object-fit:cover;}
.hasil-info{ flex:1; }
.hasil-info .name{ font-weight:600; color:var(--text); font-size:14px;}
.hasil-info .sub{ font-size:12px; color:var(--text-muted);}
.progress-track{ background:rgba(17,24,39,.06); border-radius:99px; height:10px; overflow:hidden; margin-top:6px;}
.progress-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--primary),var(--secondary)); transition:width 1s ease;}
.hasil-percent{ font-weight:700; color:var(--text); min-width:56px; text-align:right;}

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-bottom:24px;}
.stat-card{ padding:22px; display:flex; align-items:center; gap:16px; background:#fff;}
.stat-card .stat-icon{
  width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; flex-shrink:0;
}
.stat-card .stat-value{ font-size:22px; font-weight:800; color:var(--text); }
.stat-card .stat-label{ font-size:12px; color:var(--text-muted);}

/* =========================================================
   ADMIN LAYOUT
   ========================================================= */
.admin-layout{ display:flex; min-height:100vh; }
.sidebar{
  width:260px; flex-shrink:0; background:var(--bg-dark-2); border-right:1px solid var(--border);
  padding:24px 18px; position:fixed; top:0; bottom:0; left:0; overflow-y:auto; z-index:50; transition:.3s;
  box-shadow:2px 0 24px rgba(15,23,42,.04);
}
.sidebar nav{ margin-top:30px; display:flex; flex-direction:column; gap:4px;}
.sidebar nav a{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px;
  color:var(--text-muted); font-size:14px; font-weight:500; transition:.2s;
}
.sidebar nav a i{ width:18px; text-align:center;}
.sidebar nav a:hover{ background:rgba(79,70,229,.06); color:var(--primary);}
.sidebar nav a.active{ background:linear-gradient(90deg,var(--primary),var(--primary-2)); color:#fff; box-shadow:0 8px 18px rgba(79,70,229,.3);}
.sidebar .logout-link{ margin-top:24px; border-top:1px solid var(--border); padding-top:18px;}

.main-content{ margin-left:260px; flex:1; padding:28px 32px; min-width:0;}
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:12px;}
.topbar h2{ color:var(--text); margin:0; font-size:20px;}
.topbar .admin-chip{ display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:99px;}
.menu-toggle{ display:none; background:none; border:1px solid var(--border); color:var(--text); padding:8px 12px; border-radius:8px; cursor:pointer;}

@media (max-width:920px){
  .sidebar{ left:-280px; }
  .sidebar.show{ left:0; }
  .main-content{ margin-left:0; padding:20px; }
  .menu-toggle{ display:inline-flex; }
}

/* ---------- Tabel ---------- */
.table-wrap{ overflow-x:auto; border-radius:var(--radius);}
table{ width:100%; border-collapse:collapse; min-width:640px;}
thead th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-muted); padding:14px 16px; border-bottom:1px solid var(--border); background:#F9FAFB;
}
tbody td{ padding:14px 16px; border-bottom:1px solid var(--border); font-size:14px;}
tbody tr{ background:#fff; }
tbody tr:hover{ background:#FAFAFE;}
tbody tr:last-child td{ border-bottom:none;}
.action-icons{ display:flex; gap:8px;}
.action-icons a, .action-icons button{
  width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:#F9FAFB; color:var(--text); cursor:pointer;
}
.action-icons a:hover{ background:rgba(79,70,229,.10); color:var(--primary);}
.action-icons .del:hover{ background:rgba(220,38,38,.10); color:#b91c1c;}

.card-section{ padding:24px; margin-bottom:24px; background:#fff;}
.card-section h3{ margin-top:0; color:var(--text); font-size:16px; margin-bottom:18px; display:flex; align-items:center; gap:10px;}

.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.search-box{ position:relative; max-width:280px; width:100%;}
.search-box input{ padding-left:40px; }
.search-box i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted);}

/* Modal Admin (form tambah/edit) */
.modal-form-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; align-items:flex-start; justify-content:center;
  z-index:999; padding:40px 20px; overflow-y:auto;
}
.modal-form-overlay.show{ display:flex; }
.modal-form-box{ max-width:520px; width:100%; padding:28px; background:var(--surface-solid); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow);}
.modal-form-box h3{ color:var(--text); margin-top:0;}
.modal-close{ float:right; background:none; border:none; color:var(--text-muted); font-size:20px; cursor:pointer;}
.foto-preview{ width:100px; height:100px; border-radius:12px; object-fit:cover; margin-bottom:10px; background:#F3F4F6;}

footer.site-footer{ text-align:center; padding:26px 20px; color:var(--text-muted); font-size:12.5px;}

::-webkit-scrollbar{ width:8px; height:8px;}
::-webkit-scrollbar-thumb{ background:rgba(17,24,39,.15); border-radius:99px;}
::-webkit-scrollbar-track{ background:transparent;}