:root{
  --biru:#2563eb; --biru2:#1e40af; --kuning:#facc15; --ijo:#22c55e;
  --pink:#ec4899; --ungu:#8b5cf6; --dark:#1e293b;
  --maroon:#7a1620; --maroon2:#4a0d14; --maroon-light:#9c2530; --gold:#d4af37; --cream:#faf5ee;
}
*{box-sizing:border-box;}
body.app{background:#eef2ff;font-family:'Segoe UI',system-ui,sans-serif;margin:0;}
/* ===== Sidebar ===== */
.sidebar{width:245px;min-height:100vh;background:linear-gradient(180deg,var(--maroon2),var(--maroon));color:#fff;position:sticky;top:0;}
.sidebar .brand{padding:20px 18px;font-size:20px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.15);line-height:1.3;}
.sidebar .brand small{font-size:11px;font-weight:400;color:#e2c3c7;}
.sidebar nav a{display:block;color:#f1d9db;padding:12px 20px;text-decoration:none;font-size:15px;transition:.15s;}
.sidebar nav a:hover{background:rgba(255,255,255,.12);color:#fff;padding-left:26px;}
.sidebar nav a.active{background:rgba(0,0,0,.25);color:#fff;font-weight:600;border-left:4px solid var(--gold);}
.sidebar nav a.logout{margin-top:12px;border-top:1px solid rgba(255,255,255,.15);color:#ffb4b4;}
/* ===== Topbar ===== */
.topbar{background:#fff;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.rolebadge{background:var(--maroon);color:#fff;padding:2px 10px;border-radius:20px;font-size:11px;text-transform:uppercase;font-weight:700;margin-left:4px;}
.content{padding:26px;}
/* ===== Cards / stat ===== */
.stat-card{background:#fff;border:1px solid #f1e2df;border-left:5px solid var(--maroon);border-radius:14px;color:#6b5a5c;padding:22px;box-shadow:0 6px 18px rgba(122,22,32,.07);}
.stat-card h2{font-size:34px;font-weight:800;margin:6px 0 0;color:#2b1416;font-variant-numeric:tabular-nums;}
.bg-biru{border-left-color:#7a1620;}
.bg-ijo{border-left-color:#9c2530;}
.bg-ungu{border-left-color:#6d2942;}
.bg-pink{border-left-color:#b5677a;}
.bg-kuning{border-left-color:#c9973f;}
.card{border:none;border-radius:16px;box-shadow:0 6px 18px rgba(30,41,59,.07);}
.card-header{background:#fff;border-bottom:2px solid #eef2ff;font-weight:700;border-radius:16px 16px 0 0!important;}
.btn-primary{background:var(--maroon);border:none;} .btn-primary:hover{background:var(--maroon2);}
.table thead{background:#eef2ff;}
h3.page-title{font-weight:800;color:var(--dark);margin-bottom:2px;}
.page-sub{color:#64748b;margin-bottom:20px;}
/* ===== Landing page ===== */
.landing{font-family:'Poppins',sans-serif;color:#2b1416;background:var(--cream);}
.landing h1,.landing h2,.landing h4{font-family:'Playfair Display',serif;}
.navbar-siakad{background:rgba(250,245,238,.92);backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(122,22,32,.08);position:sticky;top:0;z-index:50;}
.navbar-siakad .navbar-brand{color:var(--maroon2);}
.navbar-siakad .nav-link{color:#4a2b2f;font-weight:500;}
.navbar-siakad .nav-link:hover{color:var(--maroon);}
.brand-badge{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--maroon),var(--maroon2));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:800;}
.btn-brand{background:var(--maroon);border:none;color:#fff;transition:.2s;}
.btn-brand:hover{background:var(--maroon2);color:#fff;}
.btn.btn-gold{background:rgba(212,175,55,.16);border:1px solid rgba(212,175,55,.6);color:var(--gold);border-radius:999px!important;transition:.2s;}
.btn.btn-gold:hover{background:rgba(212,175,55,.3);border-color:var(--gold);color:var(--gold);}
.hero .btn.btn-outline-light{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.45);border-radius:999px!important;color:#fff;transition:.2s;}
.hero .btn.btn-outline-light:hover{background:rgba(255,255,255,.18);border-color:#fff;color:#fff;}

.hero{background:radial-gradient(circle at top right,var(--maroon-light) 0%,var(--maroon2) 60%);color:#fff;padding:56px 0 60px;position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:flex-start;}
.hero>.container{width:100%;}
.hero-badge{background:rgba(212,175,55,.18);border:1px solid rgba(212,175,55,.5);color:var(--gold);padding:6px 16px;border-radius:30px;font-size:13px;font-weight:600;letter-spacing:.03em;}
.hero h1{font-size:48px;font-weight:800;line-height:1.15;}
.hero .blob{position:absolute;border-radius:50%;opacity:.12;background:var(--gold);}
.hero-emblem{font-size:160px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35));}

.section{padding:70px 0;}
.fitur-card{background:#fff;border-radius:18px;padding:26px 20px;height:100%;text-align:center;box-shadow:0 10px 30px rgba(122,22,32,.08);transition:.2s;}
.fitur-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(122,22,32,.14);}
.fitur-icon{font-size:34px;width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:linear-gradient(135deg,var(--maroon),var(--maroon-light));display:flex;align-items:center;justify-content:center;}
.fitur-card h6{color:var(--maroon2);font-size:16px;}
.fitur-card p{font-size:13.5px;color:#6b4a4d;margin:0;}
.vm-card{border-radius:20px;padding:28px;height:100%;background:#fff;box-shadow:0 10px 30px rgba(122,22,32,.08);border-top:4px solid var(--maroon);}
.vm-icon{font-size:30px;margin-bottom:6px;}
.vm-card h4{color:var(--maroon2);font-weight:700;}
.galeri-card{transition:.2s;}
.galeri-card:hover{transform:translateY(-4px);}
.galeri img,.galeri .ph{border-radius:16px;height:180px;width:100%;object-fit:cover;}
.galeri .ph{background:linear-gradient(135deg,#e7c9ac,var(--maroon-light));display:flex;align-items:center;justify-content:center;font-size:44px;}
.info-pill{background:#fff;border:1px solid #ecd9c9;color:var(--maroon2);border-radius:14px;padding:18px;text-align:center;font-weight:600;}
footer.landing-foot{background:var(--maroon2);color:#e9d9d3;padding:34px 0;text-align:center;border-top:3px solid var(--gold);}