:root {
    --ev-primary: #3a3fe5;
    --ev-primary-dark: #2a2fc4;
    --ev-sky: #4a9bf8;
    --ev-green: #5fd36d;
    --ev-green-dark: #45bd54;
    --ev-red: #f07070;
    --ev-ink: #111827;
    --ev-muted: #6b7280;
    --ev-line: #eceef3;
}

body {
    font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ev-ink);
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { flex: 1 0 auto; }

/* ---------- Header ---------- */
.site-header { background: var(--ev-primary); }
.site-header .navbar { padding: 1.4rem 0; }
.site-header .navbar-brand { font-weight: 600; font-size: 2rem; letter-spacing: -.5px; }
.site-header .nav-link { color: #fff !important; font-weight: 500; padding: .5rem .9rem !important; opacity: .9; }
.site-header .nav-link.active, .site-header .nav-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.btn-pill { border-radius: 50rem; padding: .6rem 1.6rem; font-weight: 500; }
.btn-green { background: var(--ev-green); border-color: var(--ev-green); color: #fff; }
.btn-green:hover, .btn-green:focus { background: var(--ev-green-dark); border-color: var(--ev-green-dark); color: #fff; }
.btn-sky { background: var(--ev-sky); border-color: var(--ev-sky); color: #fff; }
.btn-sky:hover { background: #2f86ec; color: #fff; }
.btn-logout { background: var(--ev-red); border-color: var(--ev-red); color: #fff; }
.btn-logout:hover { background: #e05555; color: #fff; }
.btn-primary-ev { background: var(--ev-primary); border-color: var(--ev-primary); color: #fff; }
.btn-primary-ev:hover { background: var(--ev-primary-dark); color: #fff; }
.disabled-look { pointer-events: none; }

/* ---------- Hero ---------- */
.hero { background: var(--ev-primary); color: #fff; position: relative; padding: 5rem 0 9rem; overflow: hidden; }
.hero h1 { font-weight: 700; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.2; }
.hero p.lead { opacity: .92; max-width: 560px; font-size: 1.1rem; }
.hero .wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 140px; }
.hero-illustration { max-width: 420px; width: 100%; }
.hero .btn-outline-light { border-width: 2px; }
.hero .badge-live { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); border-radius: 50rem; padding: .4rem 1rem; display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--ev-green); box-shadow: 0 0 0 0 rgba(95,211,109,.7); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(95,211,109,0); } 100% { box-shadow: 0 0 0 0 rgba(95,211,109,0); } }

.countdown { display: flex; gap: .75rem; flex-wrap: wrap; }
.countdown div { background: rgba(255,255,255,.12); border-radius: .75rem; padding: .6rem .9rem; min-width: 72px; text-align: center; }
.countdown b { display: block; font-size: 1.6rem; line-height: 1.1; }
.countdown small { opacity: .8; font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; }

/* ---------- Section ---------- */
.section { padding: 4.5rem 0; }
.section-title { font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: .25rem; }
.section-sub { font-size: 1.2rem; color: #222; margin-bottom: 2.5rem; }

.stat-card { border: 1px solid var(--ev-line); border-radius: 1rem; padding: 1.5rem; text-align: center; height: 100%; }
.stat-card .num { font-size: 2.2rem; font-weight: 700; color: var(--ev-primary); }
.stat-card .lbl { color: var(--ev-muted); }

/* ---------- Kandidat card ---------- */
.cand-card {
    border: 1px solid var(--ev-line); border-radius: .5rem; background: #fff; text-align: center;
    padding: 1.75rem 1.25rem; height: 100%; transition: box-shadow .2s, transform .2s, background .2s;
    display: flex; flex-direction: column; align-items: center;
}
.cand-card:hover { box-shadow: 0 10px 30px rgba(17,24,39,.08); transform: translateY(-2px); }
.cand-card .no { font-size: 2.6rem; font-weight: 400; color: var(--ev-primary); line-height: 1; margin-bottom: 1.25rem; }
.cand-card .photo { width: 100%; max-width: 220px; aspect-ratio: 3 / 4; object-fit: cover; background: #f3f4f6; }
.cand-card .name { font-weight: 600; font-size: 1.25rem; margin: 1.5rem 0 .75rem; }
.cand-card .votes { color: var(--ev-primary); font-size: 1.4rem; }
.cand-card .votes b { font-weight: 700; }
.cand-card .progress { width: 100%; height: 8px; border-radius: 50rem; }
.cand-card .progress-bar { background: var(--ev-primary); }

/* Bilik suara */
.vote-option { cursor: pointer; position: relative; }
.vote-option input { position: absolute; opacity: 0; }
.vote-option .radio-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c5c8d3; margin-top: auto; background: #fff; display: inline-block; }
.vote-option input:checked + .cand-card { background: var(--ev-sky); border-color: var(--ev-sky); color: #fff; box-shadow: 0 12px 30px rgba(74,155,248,.35); }
.vote-option input:checked + .cand-card .no { color: #fff; }
.vote-option input:checked + .cand-card .radio-dot { border: 6px solid #fff; background: var(--ev-primary); }
.vote-option input:focus-visible + .cand-card { outline: 3px solid var(--ev-primary); outline-offset: 3px; }

/* ---------- Detail kandidat ---------- */
.detail-table th { width: 30%; background: #fafbfc; font-weight: 600; }
.detail-table td, .detail-table th { padding: 1rem 1.25rem; }
.rich { white-space: pre-line; }

/* ---------- Login ---------- */
.login-illustration { max-width: 420px; width: 100%; }
.form-control-lg.ev { border-radius: .4rem; padding: 1.15rem 1.5rem; font-size: 1.05rem; border-color: #e5e7eb; }
.form-control-lg.ev:focus { border-color: var(--ev-primary); box-shadow: 0 0 0 .2rem rgba(58,63,229,.15); }
.otp-input { letter-spacing: .8rem; text-align: center; font-size: 1.8rem !important; font-weight: 600; }

/* ---------- Thanks ---------- */
.receipt { border: 2px dashed #b7e4c7; background: #f0fbf3; border-radius: 1rem; padding: 2rem; }
.receipt .kode { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.8rem; letter-spacing: .3rem; font-weight: 700; color: #1f7a35; }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--ev-primary) radial-gradient(circle at 0 100%, rgba(255,255,255,.06) 0 30%, transparent 30%);
    color: #fff; padding: 4rem 0 2rem; margin-top: 4rem;
}
.site-footer .footer-brand { font-size: 1.8rem; font-weight: 600; margin-bottom: .75rem; }
.site-footer h6 { font-weight: 600; font-size: 1.15rem; margin-bottom: 1rem; }
.site-footer a { color: #fff; text-decoration: none; opacity: .9; line-height: 2.2; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 991.98px) {
    .site-header .navbar { padding: 1rem 0; }
    .site-header .navbar-brand { font-size: 1.6rem; }
    .hero { padding: 3rem 0 7rem; }
}