@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--navy:#123b78;--blue:#1d4ed8;--sky:#eaf3ff;--gold:#f8b72a;--ink:#172033;--muted:#65728a;--line:#e2e8f0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:#f8fafc;color:var(--ink);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.55}.container{width:min(1160px,calc(100% - 40px));margin:auto}.site-header{position:sticky;top:0;z-index:30;background:#ffffffed;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:12px;color:var(--navy);text-decoration:none}.brand-mark{display:grid;place-items:center;width:44px;height:44px;background:var(--navy);color:white;border-radius:13px;font-weight:900}.brand b{display:block;letter-spacing:.04em;font-size:14px}.brand small{display:block;color:var(--muted);font-size:11px}.nav-links{display:flex;align-items:center;gap:25px}.nav-links a{color:#34435c;text-decoration:none;font-size:13px;font-weight:700}.nav-links a:hover,.text-link:hover{color:var(--blue)}.nav-links .nav-cta{background:var(--navy);color:#fff;padding:11px 16px;border-radius:11px}.hero{position:relative;overflow:hidden;padding:86px max(20px,calc((100% - 1160px)/2));display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:60px;color:#fff;background:radial-gradient(circle at 90% 0%,#2860a6 0,transparent 36%),linear-gradient(125deg,#102d5c,#123b78 65%,#164e8b)}.hero:after{content:"";position:absolute;right:-90px;bottom:-190px;width:390px;height:390px;border-radius:50%;border:1px solid #ffffff1c;box-shadow:0 0 0 50px #ffffff08,0 0 0 100px #ffffff05;pointer-events:none}.hero-copy,.count-card{position:relative;z-index:1;animation:rise .6s ease both}.eyebrow{font-size:11px;letter-spacing:.15em;font-weight:900;color:#c7ddff}.eyebrow.blue{color:#1d4ed8}.hero h1{font-size:clamp(40px,5vw,65px);line-height:1.08;letter-spacing:-.045em;margin:18px 0}.hero h1 span{color:#a9d5ff}.hero-copy>p{max-width:570px;color:#dce9ff;line-height:1.85;font-size:15px}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:26px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:11px;padding:13px 20px;font:700 14px Inter, sans-serif;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px)}.btn-gold{background:var(--gold);color:#1c2434}.btn-gold:hover{background:#ffd15b}.btn-glass{color:#fff;border:1px solid #ffffff55;background:#ffffff0d}.hero-copy>small{display:block;color:#bed5f6;font-size:11px;margin-top:20px}.count-card{border:1px solid #ffffff30;background:#ffffff12;border-radius:22px;padding:26px;backdrop-filter:blur(12px);box-shadow:0 20px 55px #061b3d40}.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.muted-light{color:#c6d8f4;font-size:11px}.card-top h2{font-size:19px;margin:5px 0}.status-pill{font-size:10px;border-radius:30px;background:#ffffff20;padding:7px 10px;white-space:nowrap}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:22px 0 14px}.countdown>div{background:#fff;color:var(--navy);border-radius:12px;padding:13px 6px;text-align:center}.countdown b{display:block;font-size:27px;line-height:1.3}.countdown span{font-size:10px;color:#65728a}.participation{border-top:1px solid #ffffff25;margin-top:22px;padding-top:18px}.participation>div:first-child,.result-row>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px}.participation small{display:block;margin-top:8px;font-size:10px;color:#c6d8f4}.progress{height:8px;background:#e9eef7;border-radius:50px;overflow:hidden;margin-top:11px}.progress i{display:block;height:100%;background:linear-gradient(90deg,#60a5fa,#f8b72a);border-radius:50px}.section{max-width:1160px;margin:auto;padding:78px 20px}.section-heading{text-align:center;max-width:650px;margin:0 auto 36px}.section-heading h2,.cta h2{font-size:clamp(27px,4vw,38px);letter-spacing:-.035em;line-height:1.2;margin:10px 0}.section-heading p,.cta p{color:var(--muted);font-size:14px;line-height:1.8}.candidate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.candidate{overflow:hidden;border:1px solid var(--line);background:#fff;border-radius:18px;box-shadow:0 5px 20px #0f172a06;transition:transform .25s,box-shadow .25s}.candidate:hover{transform:translateY(-5px);box-shadow:0 18px 40px #123b7817}.candidate-cover{height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;gap:10px;font-size:11px;font-weight:800;letter-spacing:.08em}.candidate-cover img{width:100%;height:100%;object-fit:cover}.tone-1{background:linear-gradient(135deg,#1e40af,#60a5fa)}.tone-2{background:linear-gradient(135deg,#0e7490,#67e8f9)}.tone-0{background:linear-gradient(135deg,#4338ca,#a78bfa)}.number{display:grid;place-items:center;width:65px;height:65px;border-radius:18px;background:#ffffff22;border:1px solid #ffffff45;font-size:25px}.candidate-body{padding:23px}.candidate h3{font-size:18px;line-height:1.4;margin:0 0 14px}.candidate h3 span{color:#94a3b8}.candidate h4{font-size:12px;color:var(--navy);margin:18px 0 5px}.candidate p{font-size:12px;color:var(--muted);line-height:1.8;margin:0;overflow-wrap:anywhere}.text-link{display:inline-block;color:var(--blue);font-size:12px;font-weight:700;text-decoration:none;margin-top:16px}.empty,.locked{padding:36px 25px;background:white;border:1px solid var(--line);border-radius:18px;text-align:center;color:var(--muted);font-size:13px}.cta{padding:20px;background:var(--sky)}.cta-inner{max-width:780px;margin:auto;background:white;border-radius:24px;padding:48px 25px;text-align:center;box-shadow:0 5px 24px #123b7808}.cta-icon,.lock-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:#e3edff;color:var(--navy);font-size:25px;margin:0 auto 15px}.cta p{max-width:600px;margin:10px auto 22px}.btn-primary{background:var(--navy);color:#fff}.btn-primary:hover{background:#1e4e93;box-shadow:0 8px 20px #123b7826}.btn-full{width:100%;margin-top:12px}.btn-outline{background:#fff;border:1px solid var(--line);color:var(--ink)}.locked{max-width:760px;margin:auto;padding:35px}.locked h3{color:var(--ink);font-size:19px;margin:12px 0 6px}.locked p{max-width:500px;margin:0 auto;line-height:1.8}.result-panel{max-width:780px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}.result-note{font-size:11px;color:#16803d;font-weight:800}.result-row{margin:22px 0}.result-row>div:first-child{font-size:12px;font-weight:700}.muted{color:var(--muted);font-size:12px}.footer{background:#0b1730;color:#a7b3c8;text-align:center;padding:35px 0}.footer b{color:white;font-size:13px;letter-spacing:.08em}.footer p{font-size:12px;margin:5px}.footer small{font-size:10px}.flash-wrap{padding-top:15px}.alert{border-radius:11px;padding:12px 15px;font-size:13px;margin:10px 0}.alert.success{background:#e7f8ed;color:#166534}.alert.error{background:#fff0f0;color:#991b1b}.alert.info{background:#eaf3ff;color:#1e40af}.form-page{min-height:calc(100vh - 170px);padding:55px 20px;display:grid;place-items:start center;background:linear-gradient(180deg,#edf4ff,#f8fafc)}.form-card{width:min(560px,100%);padding:32px;background:white;border:1px solid var(--line);border-radius:22px;box-shadow:0 15px 50px #123b7810}.back-link{display:block;margin-bottom:25px;text-decoration:none;color:#52627a;font-size:12px}.form-card h1{font-size:30px;line-height:1.2;letter-spacing:-.03em;margin:10px 0}.stack{display:flex;flex-direction:column;gap:10px;margin-top:24px}.stack label{font-size:12px;font-weight:800}.stack input{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:13px 14px;font:14px Inter,sans-serif;outline:none}.stack input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61c}.tiny{font-size:10px;color:var(--muted);line-height:1.6}.ballot-list{display:grid;gap:10px;margin:20px 0}.ballot-option{display:flex;align-items:center;gap:13px;border:1px solid var(--line);padding:14px;border-radius:13px;cursor:pointer;transition:border .2s,background .2s}.ballot-option:has(input:checked){border-color:#2563eb;background:#eff6ff}.ballot-option input{accent-color:#1d4ed8;width:17px;height:17px}.ballot-number{display:grid;place-items:center;flex:0 0 39px;height:39px;border-radius:10px;background:#e8f0ff;color:var(--navy);font-weight:900}.ballot-name{display:grid;gap:4px}.ballot-name b{font-size:13px}.ballot-name small{font-size:10px;color:var(--muted);line-height:1.5}.modal{display:none;position:fixed;inset:0;z-index:60;background:#08162cb8;align-items:center;justify-content:center;padding:20px}.modal.show{display:flex}.modal-box{width:min(440px,100%);padding:25px;border-radius:18px;background:white;box-shadow:0 30px 90px #0003}.modal-box h2{margin:0;font-size:23px}.modal-box p{color:var(--muted);font-size:13px;line-height:1.8}.modal-box .actions{margin-top:20px}.modal-box .btn{flex:1;font-size:12px;padding:12px 9px}.admin-wrap{max-width:1160px;margin:30px auto;padding:0 20px}.admin-head{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.admin-head h1{margin:0}.admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.admin-nav a{padding:9px 12px;background:white;border:1px solid var(--line);border-radius:9px;color:var(--navy);font-size:12px;text-decoration:none;font-weight:700}.admin-panel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:22px;margin:16px 0;overflow:auto}.admin-panel h2{font-size:19px;margin-top:0}.admin-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.admin-form label{display:grid;gap:5px;font-size:12px;font-weight:700}.admin-form input,.admin-form select,.admin-form textarea{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:8px;font:13px Inter,sans-serif}.admin-form textarea{min-height:90px}.admin-form .wide{grid-column:1/-1}.table{border-collapse:collapse;width:100%;font-size:12px}.table th,.table td{padding:11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.table th{background:#f8fafc}.inline-form{display:inline-flex;gap:5px;align-items:center}.inline-form input,.inline-form select{padding:7px;border:1px solid var(--line);border-radius:6px;max-width:150px}.danger{background:#b91c1c;color:white}.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.stat{padding:18px;border-radius:13px;background:#eff6ff}.stat span{display:block;color:#52627a;font-size:11px}.stat b{display:block;color:var(--navy);font-size:26px;margin-top:5px}.notice{font-size:12px;color:#8a4b0b;background:#fff7e6;border-radius:9px;padding:12px;line-height:1.7}@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:850px){.hero{grid-template-columns:1fr;gap:35px;padding-top:55px;padding-bottom:55px}.hero-copy{max-width:700px}.count-card{max-width:620px;width:100%}.candidate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-links{gap:12px}.nav-links a:not(.nav-cta){display:none}}@media(max-width:560px){.container{width:calc(100% - 28px)}.nav{height:68px}.brand-mark{width:39px;height:39px}.brand b{font-size:11px}.brand small{font-size:9px}.nav-links .nav-cta{font-size:11px;padding:10px}.hero{padding:48px 18px}.hero h1{font-size:43px}.hero-copy>p{font-size:13px}.count-card{padding:19px}.countdown{gap:6px}.countdown>div{padding:10px 3px}.countdown b{font-size:22px}.card-top h2{font-size:15px}.section{padding:58px 16px}.candidate-grid{grid-template-columns:1fr}.candidate-cover{height:190px}.cta-inner{padding:36px 19px}.form-page{padding:28px 13px}.form-card{padding:23px 18px}.form-card h1{font-size:26px}.admin-wrap{padding:0 12px}.admin-panel{padding:15px}.admin-form,.stat-grid{grid-template-columns:1fr}.admin-form .wide{grid-column:auto}.table{min-width:560px}.modal-box .actions{flex-direction:column}}

.brand-logo{width:44px;height:44px;object-fit:contain;border-radius:8px;background:#fff;padding:2px;border:1px solid #e2e8f0}.admin-nav a:hover{background:#eff6ff;border-color:#bfdbfe}.report-table{min-width:0}

/* Fix ukuran foto paslon dan popup detail */
.candidate-cover{position:relative;display:flex;width:100%;height:220px;min-height:220px;max-height:220px;padding:0;border:0;overflow:hidden;cursor:pointer;text-align:center;appearance:none}
.candidate-cover img{display:block;width:100%;height:100%;min-height:220px;max-height:220px;object-fit:cover;object-position:center}
.candidate-photo-trigger .photo-open-hint{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;color:#fff;background:linear-gradient(transparent,#07172be0);font-size:10px;letter-spacing:0;opacity:0;transition:opacity .2s}
.candidate-photo-trigger:hover .photo-open-hint,.candidate-photo-trigger:focus-visible .photo-open-hint{opacity:1}
.candidate-photo-trigger:focus-visible{outline:3px solid #f8b72a;outline-offset:-3px}
.photo-modal{display:none;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;padding:20px}
.photo-modal.show{display:flex}
.photo-modal-backdrop{position:absolute;inset:0;background:#071426d9;backdrop-filter:blur(5px)}
.photo-modal-box{position:relative;z-index:1;width:min(620px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:20px;box-shadow:0 30px 100px #0005;animation:rise .2s ease both}
.photo-modal-box>img{display:block;width:100%;height:min(62vh,520px);object-fit:contain;object-position:center;background:#edf2f8}
.photo-modal-close{position:absolute;right:12px;top:12px;z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#123b78;font-size:28px;line-height:1;box-shadow:0 3px 15px #0002;cursor:pointer}
.photo-modal-caption{padding:20px 24px 24px;text-align:center}
.photo-modal-number{display:inline-block;padding:6px 11px;border-radius:30px;background:#eaf3ff;color:#123b78;font-size:11px;font-weight:900;letter-spacing:.08em}
.photo-modal-caption h2{margin:12px 0 0;color:#172033;font-size:clamp(20px,4vw,27px);line-height:1.35}
body.modal-open{overflow:hidden}
/* Grafik hasil realtime di dashboard admin */
.live-chart-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.live-chart-heading h2{margin-bottom:4px}
.live-status{display:inline-flex;align-items:center;gap:7px;border-radius:30px;background:#e7f8ed;color:#166534;padding:7px 11px;font-size:10px;font-weight:900;letter-spacing:.08em}
.live-status i{display:block;width:7px;height:7px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px #16a34a20}
.live-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 24px}
.live-summary>div{padding:15px;border-radius:12px;background:#eff6ff}
.live-summary span{display:block;color:#52627a;font-size:11px}
.live-summary b{display:block;margin-top:5px;color:#123b78;font-size:24px}
.live-chart{display:grid;gap:19px}
.live-chart-row{min-width:0}
.live-chart-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px}
.live-chart-label span{overflow-wrap:anywhere}
.live-chart-label strong{white-space:nowrap;text-align:right}
.live-track{height:13px;margin-top:9px}
.live-track i{transition:width .55s ease}
.live-updated{margin:18px 0 0;color:#64748b;font-size:10px;text-align:right}
@media(max-width:560px){.candidate-cover,.candidate-cover img{height:220px;min-height:220px;max-height:220px}.photo-modal{padding:12px}.photo-modal-box{max-height:calc(100vh - 24px)}.photo-modal-box>img{height:min(52vh,420px)}.photo-modal-caption{padding:17px}.live-summary{grid-template-columns:1fr}.live-summary b{font-size:22px}.live-chart-label{align-items:flex-start;flex-direction:column;gap:5px}.live-chart-label strong{text-align:left}}