:root{
  --turf:#17603f; --turf-dark:#0e3b27; --line:#f6f5ef; --paper:#f1f3ee;
  --ink:#16221c; --muted:#62716a; --ball:#d9561a; --border:#d7ddd6; --red:#b3261e;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--paper);color:var(--ink);line-height:1.55}
a{color:var(--turf)}
h1,h2,h3{line-height:1.2;margin:0 0 .6rem}
h1{font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.02em}
h2{font-size:1.6rem;margin-top:1.5rem}
.container{max-width:1040px;margin:0 auto;padding:1.5rem 1.2rem 3rem}
.muted{color:var(--muted)}

.nav{background:var(--turf-dark);display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.2rem;flex-wrap:wrap;gap:.5rem}
.nav .brand{color:var(--line);font-weight:800;font-size:1.25rem;text-decoration:none;letter-spacing:.02em}
.nav nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.nav nav a{color:#cfe3d8;text-decoration:none;font-size:.95rem}
.nav nav a:hover{color:#fff}
.nav nav a.btn{color:#fff}

.btn{display:inline-block;background:var(--ball);color:#fff;border:0;border-radius:6px;padding:.65rem 1.1rem;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(.93)}
.btn.sm{padding:.3rem .7rem;font-size:.85rem}
.btn.ghost{background:transparent;color:var(--turf);border:1.5px solid var(--turf)}
.btn.danger{background:var(--red)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ball);outline-offset:2px}

.hero{background:var(--turf);color:var(--line);border-radius:10px;padding:3rem 2rem;margin-bottom:1rem;
  background-image:linear-gradient(90deg,transparent calc(50% - 1px),rgba(246,245,239,.28) calc(50% - 1px),rgba(246,245,239,.28) calc(50% + 1px),transparent calc(50% + 1px))}
.hero p{max-width:34rem;font-size:1.1rem;opacity:.92}
.hero .btn.ghost{color:var(--line);border-color:var(--line)}
.row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.card{background:#fff;border:1px solid var(--border);border-left:5px solid var(--turf);border-radius:6px;padding:1.1rem}
.card p{margin:.3rem 0}
.price{font-size:1.4rem;font-weight:800;color:var(--turf-dark)}
.price small{font-size:.85rem;font-weight:400;color:var(--muted)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;margin:1rem 0 1.5rem}
.stat{background:#fff;border:1px solid var(--border);border-radius:6px;padding:1rem}
.stat b{display:block;font-size:1.7rem}
.stat span{color:var(--muted);font-size:.9rem}
.stat.hot{border-color:var(--ball);background:#fff4ec}
.callout{background:#fff;border:1px solid var(--border);border-left:5px solid var(--ball);padding:.9rem 1rem;border-radius:6px;margin-bottom:1.5rem}

.form-box{max-width:420px;margin:1.5rem auto;background:#fff;border:1px solid var(--border);border-radius:8px;padding:1.5rem}
.form-box.wide{max-width:560px}
label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.9rem}
input,select,textarea{display:block;width:100%;margin-top:.3rem;padding:.6rem .7rem;border:1px solid var(--border);border-radius:6px;font:inherit;background:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.panel{background:#fff;border:1px solid var(--border);border-radius:8px;padding:1.2rem;align-self:start}
.split{display:grid;grid-template-columns:1fr 320px;gap:1.2rem}

.scroll{overflow-x:auto;background:#fff;border:1px solid var(--border);border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{padding:.7rem .8rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}
th{background:#e7ece6;font-weight:700}
tr:last-child td{border-bottom:0}
.acts{display:flex;gap:.4rem}
form.inline select{margin:0;padding:.3rem}

.badge{display:inline-block;padding:.15rem .6rem;border-radius:99px;font-size:.8rem;font-weight:600;background:#e7ece6}
.badge.menunggu{background:#fff0c9;color:#7a5800}
.badge.dikonfirmasi,.badge.aktif{background:#d5f0df;color:#0e5a30}
.badge.selesai{background:#dde6f5;color:#27457a}
.badge.dibatalkan,.badge.nonaktif{background:#f6d9d6;color:var(--red)}

.alert{padding:.7rem 1rem;border-radius:6px;margin-bottom:1rem;background:#d5f0df;color:#0e5a30}
.alert.err{background:#f6d9d6;color:var(--red)}
.chip{display:inline-block;padding:.25rem .8rem;margin:0 .3rem .4rem 0;border:1px solid var(--border);border-radius:99px;background:#fff;text-decoration:none;font-size:.88rem;color:var(--ink)}
.chip.on{background:var(--turf);color:#fff;border-color:var(--turf)}

footer{text-align:center;color:var(--muted);font-size:.85rem;padding:1.5rem}
@media(max-width:760px){.split{grid-template-columns:1fr}.hero{padding:2rem 1.2rem}.two{grid-template-columns:1fr}}

/* Pembayaran */
.badge.belum{background:#e7ece6;color:var(--muted)}
.badge.menunggu_verifikasi{background:#fff0c9;color:#7a5800}
.badge.lunas{background:#d5f0df;color:#0e5a30}
.badge.ditolak{background:#f6d9d6;color:var(--red)}
.summary{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0 0 1rem}
.summary dt{color:var(--muted)} .summary dd{margin:0;font-weight:600}
.total{font-size:1.6rem;font-weight:800;color:var(--turf-dark);margin:.5rem 0 1rem}
.rek{border:1px dashed var(--border);border-radius:6px;padding:.6rem .8rem;margin-bottom:.5rem;background:#fafbf9}
.rek b{font-size:1.05rem;letter-spacing:.03em}
.proof{max-width:100%;max-height:360px;border:1px solid var(--border);border-radius:6px;display:block;margin:.5rem 0}
.rowbtn{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}