/* Tema "hijau tua" — mengganti tampilan style.css (dimuat setelahnya) */
:root{
  --ink:#0A1A14; --ink2:#10261D; --ink3:#173226;
  --forest:#1F4D3A; --forest2:#2A6049; --sage:#A9B8A8; --terra:#C47A63; --paper:#F2F5F1;
  --cream:#0A1A14; --mist:#EEF2EC; --muted:#5E6E64; --gold:#C47A63; --line:rgba(10,26,20,.12);
  --grad:linear-gradient(90deg,#C47A63,#A9B8A8); --grad2:linear-gradient(135deg,#1F4D3A,#2A6049);
  --serif:'Barlow Condensed','Arial Narrow',sans-serif; --sans:'Inter',system-ui,sans-serif;
  --fg:#EAF0EA;
}
body{background:var(--ink);color:var(--fg);font-size:16px}
h1,h2{font-weight:800;font-style:italic;text-transform:uppercase;line-height:.95;letter-spacing:0}
h2{font-size:clamp(2.4rem,5vw,4rem)}
h3{font-weight:700;letter-spacing:.005em;font-size:1.55rem}
.grad-text{background:none;-webkit-text-fill-color:currentColor;color:var(--sage)}
.lead{color:var(--sage)}
.eyebrow{color:var(--terra)}
.loading{color:var(--sage)}
.pill-tag{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.3rem .8rem;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-family:var(--sans)}
em{font-style:italic}
/* Tombol */
.btn{font-family:var(--sans)}
.btn-light{background:#fff;color:var(--ink)}.btn-light:hover{background:var(--sage)}
.btn-terra{background:var(--terra);color:#fff}.btn-terra:hover{background:#d78d75}
.btn-forest{background:var(--forest);color:#fff}.btn-forest:hover{background:var(--forest2)}
.btn-primary{background:var(--terra);box-shadow:none;background-size:auto}
.btn-primary:hover{background:#d78d75;box-shadow:none;transform:translateY(-2px)}
.btn-dark{background:var(--forest)}.btn-dark:hover{background:var(--forest2)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-ghost{border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{background:#fff;color:var(--ink)}
/* Header */
.topbar{display:none}
header.site{background:rgba(10,26,20,.82);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
header.site .wrap{height:78px}
.brand{font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.35rem;letter-spacing:.01em;color:#fff}
.brand small{font-style:normal;color:var(--sage);letter-spacing:.3em}
nav.main{margin-left:auto}
nav.main>a,nav.main .dd>button{color:#E3EAE3;font-size:.82rem;font-weight:600;padding:.5rem .8rem}
nav.main>a:hover,nav.main .dd:hover>button,nav.main a.active,nav.main .dd.active>button{background:rgba(255,255,255,.12);color:#fff}
nav.main .nav-cta{background:#fff;color:var(--ink);margin-left:.6rem;padding:.7rem 1.4rem;font-size:.85rem}
nav.main .nav-cta:hover{background:var(--sage);color:var(--ink)}
.dd-menu{background:var(--ink2);border:1px solid rgba(255,255,255,.1)}
.dd-menu a:hover{background:var(--forest);color:#fff}
.burger{background:var(--forest)}
/* Hero baru */
.hx{padding:3rem 0 4rem;background:linear-gradient(180deg,#0A1A14,#0A1A14);position:relative}
.hx::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 20% 0,rgba(31,77,58,.55),transparent 65%);pointer-events:none}
.hx-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:2rem;position:relative;align-items:start}
.hx-meta{color:var(--terra);font-size:.72rem;font-weight:600;line-height:1.5;margin-bottom:1rem}
.hx-title{font-size:clamp(3.4rem,8vw,6.8rem);margin:1rem 0 1.2rem;color:#fff;font-weight:800}
.hx-title em{color:var(--sage)}
.hx-desc{max-width:42ch;color:#C9D4C9;font-size:.98rem;margin-bottom:1.4rem}
.hx-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.6rem}
.hx-stats{display:flex;gap:1rem;flex-wrap:wrap}
.hx-stat{background:var(--paper);color:var(--ink);border-radius:14px;padding:1rem 1.3rem;min-width:170px;display:grid;gap:.6rem}
.hx-stat span{font-size:.78rem;font-weight:500;display:flex;justify-content:space-between}
.hx-stat b{font-family:var(--serif);font-size:2.6rem;line-height:1;font-weight:700}
.hx-stat b small{font-size:.9rem;color:var(--terra);margin-left:.3rem}
.hx-panel{position:relative;background:var(--paper);border-radius:18px;overflow:hidden;aspect-ratio:1/.92;color:var(--ink)}
.hx-ghost{position:absolute;inset:6% 0 auto 6%;font-family:var(--serif);font-weight:800;font-style:italic;font-size:clamp(5rem,13vw,10rem);line-height:.82;color:rgba(10,26,20,.06);pointer-events:none}
.hx-tag{position:absolute;top:1.1rem;right:4.4rem;font-size:.78rem;font-weight:600;z-index:3}
.hx-no{position:absolute;top:.9rem;right:1.1rem;font-family:var(--serif);font-size:1.6rem;font-weight:700;border-bottom:3px solid var(--ink);line-height:1.1;z-index:3}
.hx-img{position:absolute;inset:0;display:grid;place-items:end center;background-size:cover;background-position:center}
.hx-img svg{height:92%;width:auto}
/* Pernyataan + strip */
.statement{text-align:center;padding-bottom:3rem;background:var(--ink)}
.statement .big{font-size:clamp(3rem,8vw,6.2rem);margin:1.2rem 0;color:#fff}
.big em{color:var(--sage)}
.st-p{max-width:46ch;margin:0 auto 1.6rem;color:#C9D4C9;font-size:.95rem}
.strip{display:flex;gap:.8rem;overflow-x:auto;padding:3rem 1rem 0;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip>div{flex:0 0 clamp(220px,28vw,360px);aspect-ratio:1.45;border-radius:6px;background-size:cover;background-position:center;scroll-snap-align:start}
/* Event cards */
.events-sec{background:#0C1F18}
.sec-line{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:2.2rem}
.sec-line h2{margin:1rem 0 .6rem}
.sec-line h2 em{color:var(--sage)}
.ev-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:1.1rem}
.ev-card{background:var(--paper);border-radius:14px;padding:.5rem;color:var(--ink);display:flex;flex-direction:column;border:2px solid #fff;transition:.3s}
.ev-card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -20px rgba(0,0,0,.7)}
.ev-img{position:relative;aspect-ratio:1.38;border-radius:10px;background-size:cover;background-position:center;overflow:hidden}
.ev-date{position:absolute;top:0;right:.8rem;background:var(--forest);color:#fff;text-align:center;padding:.7rem .7rem .5rem;border-radius:0 0 10px 10px;line-height:1;min-width:58px}
.ev-date b{display:block;font-family:var(--serif);font-size:1.9rem;font-weight:700}
.ev-date span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;margin-top:.15rem}
.ev-date small{display:block;font-size:.58rem;opacity:.7;margin-top:.1rem}
.ev-status{position:absolute;left:.7rem;bottom:.7rem;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .7rem;border-radius:99px;background:#fff;color:var(--ink)}
.ev-status.buka{background:#7fd6a2}.ev-status.segera{background:#ffd37a}.ev-status.penuh{background:#ff9a8c}.ev-status.selesai{background:#cfd6d0}
.ev-body{padding:1.1rem 1rem .6rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.ev-tag{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent,var(--terra))}
.ev-body h3{font-size:1.75rem;line-height:1.05;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.ev-meta{display:flex;align-items:center;gap:.55rem;font-size:.88rem;font-weight:500;color:#33463c}
.ev-meta svg{width:15px;height:15px;color:var(--accent,var(--terra));flex:none}
.ev-desc{font-size:.88rem;color:var(--muted);line-height:1.55}
.ev-price{font-weight:700;font-size:.9rem}
.ev-btn{margin-top:auto;display:block;text-align:center;background:var(--forest);color:#fff;border-radius:10px;padding:.8rem;font-weight:600;font-size:.88rem;transition:.2s}
.ev-btn:hover{background:var(--forest2)}
.ev-btn.off{background:#9aa89f;pointer-events:none}
.ev-foot{padding:.4rem .5rem .5rem;margin-top:.4rem}
.ev-filter{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.6rem}
.ev-filter input,.ev-filter select{flex:1;min-width:180px;width:auto;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.ev-filter select option{color:#000}
.ev-filter input::placeholder{color:#8fa293}
.back{color:var(--sage);font-weight:600}
.ev-detail{display:grid;grid-template-columns:1.2fr 1fr;gap:2.4rem;align-items:start}
.ev-detail .ev-img{aspect-ratio:1.2;border-radius:16px}
.ev-detail h1{font-size:clamp(2.6rem,6vw,4.6rem);margin:.8rem 0;color:#fff}
.ev-info{display:grid;gap:.7rem;margin:1.4rem 0}
.ev-info div{background:rgba(255,255,255,.07);border-radius:12px;padding:.8rem 1rem;display:flex;justify-content:space-between;gap:1rem;font-size:.92rem}
.ev-info small{color:var(--sage);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:700}
/* Bagian lain pada latar gelap */
.page-hero{background:radial-gradient(800px 380px at 80% 0,rgba(42,96,73,.7),transparent 65%),var(--ink)}
.page-hero h1{font-size:clamp(3rem,7vw,5.6rem);color:#fff}
.page-hero .lead{color:var(--sage)}
.crumbs{color:var(--sage)}
.ribbon{background:var(--forest)}
.dark{background:#0C1F18}
.dark .feature{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.feature .ic{color:#fff}
.feature p{color:#B9C6BB}
.stat b{color:var(--c)}
.stat,.cat-card,.news-card,.form-card,.t-item,.station,.step,details.faq,.sp,.table-wrap,.cat-row,.note.info{color:var(--ink)}
.cat-card .km small,.news-card small{color:var(--muted)}
section[style*="background:var(--mist)"]{background:#0C1F18!important}
.cta-band{background:var(--forest);color:#fff}
.cta-band::after{background:rgba(169,184,168,.12)}
.faq-group h3{color:var(--sage)}
.tab{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.2)}
.tab.on{background:#fff;color:var(--ink)}
.sec-head p,.sec-head .lead{color:var(--sage)}
.sp-tier h4{color:var(--terra)}
.step::before{background:none;-webkit-text-fill-color:currentColor;color:var(--terra)}
.checks li::before{background:var(--terra)}
.collage div:nth-child(1){background:linear-gradient(135deg,#1F4D3A,#2A6049)}
.collage div:nth-child(2){background:linear-gradient(135deg,#C47A63,#8d4e3a)}
.collage div:nth-child(3){background:linear-gradient(135deg,#A9B8A8,#6c8774)}
.collage div:nth-child(4){background:linear-gradient(135deg,#2A6049,#0f3324)}
.hx-grid .btn,.btn{border-radius:999px}
.fieldset-title span{background:var(--terra)}
.success .code{background:none;-webkit-text-fill-color:currentColor;color:var(--forest);border-color:var(--terra)}
.summary{background:linear-gradient(135deg,var(--forest),var(--ink2))}.summary .tot{color:#fff}
footer.site{background:#06110D}
footer.site::before{background:var(--forest)}
.social a:hover{background:var(--terra)}
.demo-banner{background:var(--terra);color:#fff}
.t-item .time,.station b{color:var(--c)}
th{background:var(--forest)}
/* Admin */
body[data-page=admin]{background:var(--mist);color:var(--ink)}
.admin-shell{background:#EEF2EC;color:var(--ink)}
.admin-side{background:var(--ink);position:sticky;top:0;height:100vh;overflow:auto}
.admin-side .grp{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:#6f8578;margin:1rem 0 .3rem 1rem;font-weight:700}
.admin-side button.on{background:var(--forest)}
.admin-main h2{font-size:2.4rem;margin-bottom:.4rem}
.admin-main .sub{color:var(--muted);margin-bottom:1.2rem}
.a-top{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.a-card{background:#fff;border-radius:16px;border:1px solid var(--line);padding:1.3rem}
.a-table td,.a-table th{padding:.65rem .8rem;vertical-align:middle}
.a-table img.thumb{width:64px;height:44px;object-fit:cover;border-radius:8px;background:var(--mist)}
.a-table .acts{display:flex;gap:.3rem;justify-content:flex-end;white-space:nowrap}
.ib{border:1px solid var(--line);background:#fff;border-radius:8px;padding:.35rem .6rem;cursor:pointer;font-size:.78rem;font-weight:600;font-family:inherit;color:var(--ink)}
.ib:hover{background:var(--forest);color:#fff}.ib.danger:hover{background:#c0392b}
.sw{position:relative;display:inline-block;width:38px;height:22px}
.sw input{opacity:0;width:0;height:0}.sw i{position:absolute;inset:0;background:#c5cdc7;border-radius:99px;cursor:pointer;transition:.2s}
.sw i::after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.sw input:checked+i{background:var(--forest2)}.sw input:checked+i::after{transform:translateX(16px)}
.modal{position:fixed;inset:0;background:rgba(6,17,13,.7);display:none;z-index:100;overflow:auto;padding:2rem 1rem}
.modal.on{display:block}
.modal-box{background:#fff;border-radius:20px;max-width:1040px;margin:auto;display:grid;grid-template-columns:1fr;overflow:hidden}
.modal-box.has-prev{grid-template-columns:1.25fr .75fr}
.m-form{padding:1.6rem 1.8rem}
.m-form h3{font-size:2rem;font-style:italic;text-transform:uppercase;margin-bottom:1rem}
.m-prev{background:#0C1F18;padding:1.6rem;position:sticky;top:0;align-self:start}
.m-prev h4{color:var(--sage);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1rem}
.m-foot{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line)}
.imgf{display:grid;gap:.5rem}
.imgf .pv{height:130px;border-radius:12px;background:var(--mist) center/cover;border:1.5px dashed #c5cdc7;display:grid;place-items:center;color:var(--muted);font-size:.8rem;font-weight:500}
.imgf .row{display:flex;gap:.5rem}.imgf .row input[type=text]{flex:1}
.hint{font-weight:400;color:var(--muted);font-size:.75rem}
input[type=color]{padding:.2rem;height:46px}
input[type=checkbox]{width:auto}
.chk{display:flex!important;align-items:center;gap:.6rem;grid-template-columns:none}
.toast{position:fixed;bottom:1.4rem;right:1.4rem;background:var(--ink);color:#fff;padding:.8rem 1.2rem;border-radius:12px;z-index:200;font-weight:600;box-shadow:0 14px 40px -10px rgba(0,0,0,.5)}
.toast.err{background:#c0392b}
.set-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.set-grid .full{grid-column:1/-1}
.set-sec{margin-bottom:1.4rem}.set-sec h3{font-size:1.5rem;margin-bottom:1rem;text-transform:uppercase;font-style:italic}
@media(max-width:960px){
  .hx-grid,.ev-detail{grid-template-columns:1fr}
  .ev-grid{grid-template-columns:repeat(2,1fr)}
  nav.main{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.1)}
  nav.main .nav-cta{margin:0;text-align:center;justify-content:center}
  .dd-menu{background:transparent;border:0}
  .modal-box.has-prev{grid-template-columns:1fr}.m-prev{position:static}
  .admin-side{position:static;height:auto}
}
@media(max-width:640px){.ev-grid{grid-template-columns:1fr}.set-grid{grid-template-columns:1fr}}

/* v3: peta, sertifikat, scanner */
.route-map{height:320px;border-radius:16px;margin-top:1.2rem;overflow:hidden;border:1px solid rgba(255,255,255,.15)}
.cert{background:#fff;color:var(--ink);border-radius:8px;padding:14px;aspect-ratio:1.414;max-width:1000px;margin:auto;background:linear-gradient(135deg,#1F4D3A,#0A1A14 60%,#C47A63)}
.cert-in{background:#FBFCFA;height:100%;border-radius:4px;border:3px double #1F4D3A;display:grid;align-content:center;justify-items:center;text-align:center;padding:2rem;gap:.6rem}
.cert-top{letter-spacing:.4em;font-weight:700;font-size:.8rem;color:var(--terra)}
.cert h1{font-size:clamp(2.2rem,6vw,4.4rem);color:var(--forest)}
.cert-note{color:var(--muted)}
.cert-name{font-family:var(--serif);font-weight:800;font-style:italic;font-size:clamp(2.4rem,7vw,5rem);line-height:1;border-bottom:3px solid var(--terra);padding:0 2rem .4rem;margin:.6rem 0}
.cert-stats{display:flex;gap:2.4rem;margin:1rem 0}
.cert-stats small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:.65rem}
.cert-stats b{font-family:var(--serif);font-size:2rem}
.cert-foot{color:var(--muted);font-size:.85rem}
.scan{width:100%;max-width:420px;border-radius:14px;background:#000;aspect-ratio:1}
.scan-res{padding:1.2rem;border-radius:14px;margin-top:1rem}
@media print{header.site,footer.site,.no-print,.demo-banner{display:none!important}body{background:#fff}.cert{max-width:none;box-shadow:none}@page{size:A4 landscape;margin:8mm}}