/* === Design Tokens === */
:root{
  --bg:#f9f4f4;
  --surface:#ffffff;
  --ink:#1a0e0e;
  --muted:#6a5c5c;

  /* Palet merah (mengganti hijau lama) */
  --g-900:#7f1d1d;   /* paling gelap - topbar */
  --g-800:#991b1b;
  --g-700:#b91c1c;
  --g-600:#c62828;   /* utama tombol */
  --g-500:#d32f2f;
  --g-400:#e2554f;
  --g-300:#ef9a9a;

  --ring:#f19999;    /* fokus ring */
  --border:#efd8d8;
  --shadow: 0 10px 25px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --radius:14px;
}

/* === Reset & Base === */
*{box-sizing:border-box}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:10px}
html,body{height:100%}
body{margin:0;font:500 15px/1.55 ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;color:var(--ink);background:var(--bg)}

.wrap{min-height:100%;display:flex;flex-direction:column}
.container{max-width:1200px;margin-inline:auto;padding-inline:18px}

/* === Topbar === */
.topbar{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg,var(--g-900),var(--g-800));
  color:#fff; box-shadow:var(--shadow);
}
.topbar .inner{display:flex;align-items:center;gap:18px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px}

/* untuk logo berbasis <div> fallback gradient merah */
.brand .logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--g-500),var(--g-300))}

/* untuk logo berupa <img> */
.brand .logo-img{width:28px;height:28px;border-radius:8px;object-fit:contain;background:#fff;border:1px solid rgba(0,0,0,.08)}

.topnav{margin-left:auto;display:flex;gap:10px}
.topnav a{color:#fff;text-decoration:none;padding:8px 12px;border-radius:8px}
.topnav a:hover{background:rgba(255,255,255,.08)}

/* === Content & Footer === */
.content{flex:1;padding:22px 0}
.footer{background:#fbf0f0;color:#3a2b2b;border-top:1px solid var(--border)}
.footer .inner{padding:14px 0}

/* === Cards (menu) === */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg,var(--g-700),var(--g-600));
  color:#fff; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.06)
}
.card header{
  padding:10px 14px; font-weight:800; letter-spacing:.3px;
  background:linear-gradient(180deg,var(--g-800),var(--g-700));
  border-bottom:1px solid rgba(255,255,255,.08)
}
.card a{
  display:flex; align-items:center; gap:10px; padding:11px 14px; color:#fff; text-decoration:none;
  border-top:1px solid rgba(255,255,255,.08); transition:transform .05s ease, background .15s ease;
}
.card a::before{content:"›";opacity:.6}
.card a:hover{background:rgba(255,255,255,.08); transform:translateX(1px)}

/* === Tables === */
.table{
  width:100%; border-collapse:separate; border-spacing:0; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)
}
.table th,.table td{padding:11px 12px;border-bottom:1px solid var(--border)}
.table thead th{background:#f9ebeb;text-align:left;font-weight:700}
.table tbody tr:hover{background:#fdfbfb}

/* === Forms === */
.form{max-width:860px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:220px 1fr;gap:10px;margin-bottom:12px;align-items:center}
.input, select, textarea{
  width:100%; padding:10px 12px; border:1px solid #e7d1d1; border-radius:10px; background:#fff;
}
.input:focus,select:focus,textarea:focus{border-color:var(--ring); box-shadow:0 0 0 4px rgba(241,153,153,.25)}

/* === Buttons === */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:0;border-radius:10px;cursor:pointer;
  background:linear-gradient(180deg,var(--g-600),var(--g-500));color:#fff;box-shadow:var(--shadow);text-decoration:none
}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{background:#736767;color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* === Badges & misc === */
.badge{font:600 12px/1 Segoe UI;padding:6px 10px;border-radius:999px;border:1px solid #f0d6d6;background:#f9ecec;color:#7f1d1d}
.note{font-size:.95em;color:var(--muted)}
.sep{height:1px;background:var(--border);margin:12px 0}

/* === Utilities === */
.right{justify-content:flex-end}
.m0{margin:0} .mb8{margin-bottom:8px} .mb12{margin-bottom:12px} .mb16{margin-bottom:16px}