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

/* Base */
:root{
  --bg:#f5f6f8; --text:#111827; --muted:#6b7280; --primary:#2563eb; --primary-600:#1d4ed8; --primary-700:#1e40af; --surface:#ffffff; --border:#e5e7eb; --success:#10b981; --danger:#dc2626;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--text); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif}
.container{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:.6; transform:translateY(4px)} to{opacity:1; transform:translateY(0)}}

/* Buttons */
.btn{background:var(--primary); color:#fff; padding:10px 14px; border-radius:10px; border:none; cursor:pointer; transition:transform .08s ease, box-shadow .2s ease; display:inline-flex; align-items:center; gap:8px}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(37,99,235,.25)}
.btn:active{transform:translateY(0)}
.btn.secondary{background:#374151}
.btn.danger{background:var(--danger)}

/* Cards Grid */
.cards-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px}
.candidate-card{background:#fffaf2; border:1px solid #eadfd0; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(0,0,0,.06)}
.candidate-photo{width:100%; height:180px; object-fit:cover}
.candidate-photo.placeholder{display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted); background:linear-gradient(135deg,#f3f4f6,#e5e7eb)}
.candidate-info{padding:14px; text-align:center}
.candidate-name{font-weight:700; font-size:18px; margin-bottom:6px; text-align:center}
.section-label{text-align:center}
.section-text{text-align:center}
.candidate-visi,.candidate-misi{font-size:13px; color:var(--muted); line-height:1.45}
.candidate-card .choose-btn{margin:0; width:100%; border-radius:0 0 16px 16px; background:#1f2937; justify-content:center; padding:14px 16px; font-size:16px; min-height:48px; letter-spacing:.2px}

/* Modal */
.modal{position:fixed; inset:0; display:grid; place-items:center; visibility:hidden}
.modal[aria-hidden="false"]{visibility:visible}
.modal-open{overflow:hidden}
.modal-overlay{position:absolute; inset:0; background:rgba(17,24,39,.6); backdrop-filter:blur(1px)}
.modal-content{position:relative; width:100%; max-width:520px; background:var(--surface); border-radius:16px; padding:18px; box-shadow:0 20px 48px rgba(0,0,0,.25); animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:.6; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
.modal-close{position:absolute; top:10px; right:12px; background:transparent; border:none; font-size:22px; cursor:pointer; color:#6b7280}
.modal-sub{color:var(--muted); margin-top:-2px; margin-bottom:10px}

/* Form */
label{font-weight:600; display:block; margin:10px 0 6px}
input, select, textarea{width:100%; padding:10px; border:1px solid var(--border); border-radius:10px}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(37,99,235,.12)}

/* Alerts */
.alert{padding:12px 14px; border-radius:10px; margin-bottom:12px}
.alert.success{background:#ecfee9; border:1px solid #9ae6b4}
.alert.error{background:#fee2e2; border:1px solid #fca5a5}

/* Table */
th{font-weight:700}
table{border:1px solid var(--border); border-radius:12px; overflow:hidden}
th, td{border-bottom:1px solid var(--border);}

/* Header */
header{background:linear-gradient(90deg, #0f172a, #1f2937);} 
nav a{padding:6px 8px; border-radius:8px}
nav a:hover{background:rgba(255,255,255,.12)}

/* Hero Landing */
.hero-landing{background:#f9f4ef; border:1px solid #eadfd0; border-radius:18px; padding:28px 20px; text-align:center; margin-bottom:18px; position:relative; overflow:hidden}
.hero-landing:before{content:""; position:absolute; left:-40px; bottom:-40px; width:160px; height:160px; background:radial-gradient(circle at 40% 40%, rgba(122,27,27,.15), rgba(122,27,27,.02)); border-radius:50%}
.hero-landing:after{content:""; position:absolute; right:-40px; bottom:-30px; width:220px; height:220px; background:radial-gradient(circle at 60% 40%, rgba(122,27,27,.18), rgba(122,27,27,.03)); border-radius:50%}
.hero-title{color:#7a1b1b; font-family:Merriweather, serif; font-weight:800; letter-spacing:1.2px; font-size:28px; text-transform:uppercase}
.hero-sub{color:#7a1b1b; font-family:Merriweather, serif; font-weight:800; font-size:22px; margin-top:4px; text-transform:uppercase}
.hero-location div{color:#7a1b1b; font-family:Merriweather, serif; font-weight:700; font-size:14px; letter-spacing:1px; margin-top:2px; text-transform:uppercase}
.hero-note{color:var(--muted); margin-bottom:12px}
.hero-svg{position:absolute; pointer-events:none}
.hero-left{left:0; top:0; width:180px; height:180px}
.hero-right{right:0; bottom:0; width:240px; height:200px}

/* Candidate info blocks */
.info-block{margin-top:8px}
.section-label{font-weight:800; font-size:12px; letter-spacing:1px; color:#7a1b1b; margin-bottom:4px}
.section-text{font-size:15px; color:#374151; line-height:1.65}
.candidate-visi,.candidate-misi{font-size:15px; color:var(--muted); line-height:1.65}
.candidate-card .choose-btn{margin:0; width:100%; border-radius:0 0 16px 16px; background:#1f2937; justify-content:center; padding:14px 16px; font-size:16px; min-height:48px; letter-spacing:.2px}

/* Modal */
.modal{position:fixed; inset:0; display:grid; place-items:center; visibility:hidden}
.modal[aria-hidden="false"]{visibility:visible}
.modal-open{overflow:hidden}
.modal-overlay{position:absolute; inset:0; background:rgba(17,24,39,.6); backdrop-filter:blur(1px)}
.modal-content{position:relative; width:100%; max-width:520px; background:var(--surface); border-radius:16px; padding:18px; box-shadow:0 20px 48px rgba(0,0,0,.25); animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:.6; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
.modal-close{position:absolute; top:10px; right:12px; background:transparent; border:none; font-size:22px; cursor:pointer; color:#6b7280}
.modal-sub{color:var(--muted); margin-top:-2px; margin-bottom:10px}

/* Form */
label{font-weight:600; display:block; margin:10px 0 6px}
input, select, textarea{width:100%; padding:10px; border:1px solid var(--border); border-radius:10px}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(37,99,235,.12)}

/* Alerts */
.alert{padding:12px 14px; border-radius:10px; margin-bottom:12px}
.alert.success{background:#ecfee9; border:1px solid #9ae6b4}
.alert.error{background:#fee2e2; border:1px solid #fca5a5}

/* Table */
th{font-weight:700}
table{border:1px solid var(--border); border-radius:12px; overflow:hidden}
th, td{border-bottom:1px solid var(--border);}

/* Header */
header{background:linear-gradient(90deg, #0f172a, #1f2937);} 
nav a{padding:6px 8px; border-radius:8px}
nav a:hover{background:rgba(255,255,255,.12)}

/* Hero Landing */
.hero-landing{background:#f9f4ef; border:1px solid #eadfd0; border-radius:18px; padding:28px 20px; text-align:center; margin-bottom:18px; position:relative; overflow:hidden}
.hero-landing:before{content:""; position:absolute; left:-40px; bottom:-40px; width:160px; height:160px; background:radial-gradient(circle at 40% 40%, rgba(122,27,27,.15), rgba(122,27,27,.02)); border-radius:50%}
.hero-landing:after{content:""; position:absolute; right:-40px; bottom:-30px; width:220px; height:220px; background:radial-gradient(circle at 60% 40%, rgba(122,27,27,.18), rgba(122,27,27,.03)); border-radius:50%}
.hero-title{color:#7a1b1b; font-family:Merriweather, serif; font-weight:800; letter-spacing:1.2px; font-size:28px; text-transform:uppercase}
.hero-sub{color:#7a1b1b; font-family:Merriweather, serif; font-weight:800; font-size:22px; margin-top:4px; text-transform:uppercase}
.hero-location div{color:#7a1b1b; font-family:Merriweather, serif; font-weight:700; font-size:14px; letter-spacing:1px; margin-top:2px; text-transform:uppercase}
.hero-note{color:var(--muted); margin-bottom:12px}
.hero-svg{position:absolute; pointer-events:none}
.hero-left{left:0; top:0; width:180px; height:180px}
.hero-right{right:0; bottom:0; width:240px; height:200px}

/* Candidate info blocks */
.info-block{margin-top:8px}
.section-label{font-weight:800; font-size:12px; letter-spacing:1px; color:#7a1b1b; margin-bottom:4px}
.section-text{font-size:13px; color:#374151; line-height:1.55}

@media(min-width:768px){
  .hero-title{font-size:34px}
  .hero-sub{font-size:26px}
  .hero-location div{font-size:16px}
}

/* Hero separators */
.hero-line{position:absolute; left:20px; right:20px; height:2px; background:#e1c8bb}
.hero-top{top:16px}
.hero-bottom{bottom:16px}

/* Refined letter spacing */
.hero-title{letter-spacing:2px}
.hero-sub{letter-spacing:1.6px}
.hero-location div{letter-spacing:1.6px}
/* Tampilkan foto penuh tanpa terpotong */
.candidate-photo{width:100%; height:220px; object-fit:contain}
.candidate-photo.placeholder{display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted); background:linear-gradient(135deg,#f3f4f6,#e5e7eb); height:220px}