/* KISA — Platform Emas Digital. Mobile-first, aksesibel, tanpa kerangka eksternal. */
:root{
  --ink:#16150F; --ink2:#33302A; --gold:#B8892B; --gold-l:#E0C173; --gold-x:#F2E7CE;
  --cream:#F8F5ED; --line:#DCD5C6; --mute:#6E675A; --white:#fff;
  --ok:#2E6B4F; --warn:#B07D1E; --bad:#9E3B2E;
  --r:10px; --sh:0 1px 2px rgba(22,21,15,.06),0 4px 14px rgba(22,21,15,.05);
  --side-w:264px; --top-h:56px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--cream)}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .6rem;line-height:1.25}
code.mono,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em}
.small{font-size:.85em}.muted{color:var(--mute)}.center{text-align:center}
.r{text-align:right}.c{text-align:center}
.up{color:var(--ok)}.down{color:var(--bad)}.gold{color:var(--gold)}

/* ---------- Topbar ---------- */
.topbar{position:fixed;inset:0 0 auto 0;height:var(--top-h);z-index:40;display:flex;align-items:center;
  gap:.6rem;padding:0 .75rem;background:var(--ink);color:#fff;padding-top:env(safe-area-inset-top)}
.hamburger{display:none;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;padding:.2rem .4rem}
.brand-logo{height:26px;width:auto}
.topbar-info{display:flex;gap:.5rem;align-items:center;margin-left:.5rem;overflow:hidden}
.chip{background:rgba(255,255,255,.09);border:1px solid rgba(224,193,115,.25);border-radius:999px;
  padding:.2rem .7rem;font-size:.8rem;white-space:nowrap}
.chip.user small{display:block;font-size:.7rem;color:var(--gold-l)}
.topbar-actions{margin-left:auto;display:flex;gap:.4rem;align-items:center}
.sel{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(224,193,115,.3);
  border-radius:8px;padding:.3rem .5rem;font-size:.8rem;max-width:150px}
.sel option{color:var(--ink)}

/* ---------- Shell & sidebar ---------- */
.shell{display:flex;padding-top:var(--top-h);min-height:100vh}
.sidebar{position:fixed;top:var(--top-h);bottom:0;left:0;width:var(--side-w);background:#fff;
  border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:35;transition:transform .2s}
.side-top{padding:.6rem .8rem;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:.25rem}
.side-doc{font-size:.82rem;color:var(--ink2)}
.side-dash{display:block;padding:.7rem .9rem;font-weight:700;background:var(--gold-x);
  color:var(--ink);border-bottom:1px solid var(--line);cursor:pointer}
.side-dash:hover{text-decoration:none;background:var(--gold-l)}
.side-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:.35rem 0}
.grp{border-bottom:1px solid #F0ECE1}
.grp-h{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;
  padding:.62rem .9rem;font:600 .85rem/1.3 inherit;color:var(--ink2);cursor:pointer;text-align:left}
.grp-h i{font-style:normal;color:var(--mute);transition:transform .18s}
.grp.open .grp-h i{transform:rotate(180deg)}
.grp-b{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .22s ease}
.grp.open .grp-b{max-height:44rem}
.grp-b a{display:block;padding:.48rem .9rem .48rem 1.5rem;font-size:.87rem;color:var(--ink2);border-left:3px solid transparent}
.grp-b a:hover{background:var(--cream);text-decoration:none}
.grp-b a.on{background:var(--gold-x);border-left-color:var(--gold);font-weight:600;color:var(--ink)}
.side-credit{border-top:1px solid var(--line);padding:.6rem .9rem;font-size:.72rem;color:var(--mute);
  display:flex;flex-direction:column;gap:.1rem}
.side-credit strong{color:var(--ink2);font-size:.75rem}

/* ---------- Content ---------- */
.content{flex:1;margin-left:var(--side-w);padding:1.1rem;max-width:1400px}
.page-title{font-size:1.45rem;margin-bottom:1rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;
  box-shadow:var(--sh);margin-bottom:1rem}
.card.narrow{max-width:32rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.9rem;box-shadow:var(--sh)}
.stat .lbl{display:block;font-size:.78rem;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.stat .val{display:block;font-size:1.5rem;margin:.25rem 0}
.stat .val small{font-size:.9rem;color:var(--mute)}
.stat .sub{font-size:.8rem;color:var(--mute)}
.quick{display:flex;flex-wrap:wrap;gap:.5rem}
.kv{list-style:none;margin:0;padding:0}
.kv li{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-bottom:1px solid #F0ECE1}
.kv li span{color:var(--mute)}

/* ---------- Tabel ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:.87rem}
.tbl th,.tbl td{padding:.5rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{background:var(--ink);color:#fff;font-weight:600;text-align:left;white-space:nowrap}
.tbl tbody tr:hover{background:var(--cream)}
.tbl tr.hl{background:var(--gold-x)}
.matrix td.c input{width:18px;height:18px}
pre.j{margin:0;white-space:pre-wrap;word-break:break-word;max-width:20rem;font-size:.75rem}
pre.doc{white-space:pre-wrap;font:13px/1.6 ui-monospace,Menlo,monospace}

/* ---------- Komponen ---------- */
.btn{display:inline-block;padding:.55rem 1rem;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font:600 .9rem/1 inherit;cursor:pointer;text-align:center}
.btn:hover{background:var(--cream);text-decoration:none}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.primary:hover{background:#A67C25}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.ghost{background:transparent}
.btn.sm{padding:.32rem .6rem;font-size:.8rem}
.btn.block{display:block;width:100%;margin-top:.7rem}
label{display:block;margin:.6rem 0;font-size:.85rem;color:var(--ink2);font-weight:600}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],
input[type=file],select,textarea{width:100%;padding:.55rem .7rem;border:1px solid var(--line);
  border-radius:8px;font:400 .95rem/1.4 inherit;background:#fff;color:var(--ink);margin-top:.25rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold-l);outline-offset:1px}
.inline-form{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end}
.inline-form label{margin:0}
.alert{padding:.65rem .85rem;border-radius:8px;margin:.5rem 0;font-size:.88rem;border:1px solid}
.alert.ok{background:#EDF3EF;border-color:#BFD9CB;color:var(--ok)}
.alert.warn{background:#FDF6E7;border-color:#EBD9AC;color:var(--warn)}
.alert.bad{background:#FBEFEC;border-color:#E8C6BE;color:var(--bad)}
.badge{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.72rem;font-weight:700;color:#fff}
.badge.ok{background:var(--ok)}.badge.warn{background:var(--warn)}.badge.bad{background:var(--bad)}
.tag{display:inline-block;padding:.08rem .45rem;border-radius:5px;background:var(--gold-x);
  color:var(--ink2);font-size:.72rem;font-weight:600}
.tabs{display:flex;gap:.35rem;margin-bottom:.8rem}
.tabs a{padding:.45rem .9rem;border:1px solid var(--line);border-radius:8px 8px 0 0;background:#fff;font-size:.87rem}
.tabs a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.8rem}
.pager a{padding:.32rem .65rem;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:.85rem}
.pager a.on{background:var(--gold);color:#fff;border-color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0}
.chip-btn{padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:.82rem;cursor:pointer}
.chip-btn:hover{background:var(--gold-x)}
.preview{background:var(--gold-x);border-radius:8px;padding:.6rem .8rem;font-size:.85rem;min-height:2.4rem;margin-top:.5rem}
.goal{margin-bottom:.9rem}
.goal-h{display:flex;gap:.5rem;align-items:center;margin-bottom:.3rem}
.bar{height:9px;background:var(--cream);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:var(--gold)}
.goal-f{display:flex;justify-content:space-between;font-size:.78rem;color:var(--mute);margin-top:.25rem}
.msg{border-bottom:1px solid var(--line);padding:.55rem 0}
.msg.unread{background:var(--gold-x);margin:0 -.5rem;padding:.55rem .5rem;border-radius:6px}
.msg-h{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.big{font-size:3.5rem;color:var(--gold);margin:0}
.loglist{font-size:.85rem;color:var(--ink2)}
.sep{display:flex;align-items:center;gap:.6rem;margin:1rem 0;color:var(--mute);font-size:.8rem}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
hr{border:0;border-top:1px solid var(--line);margin:1rem 0}

/* ---------- Halaman auth ---------- */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem;
  background:linear-gradient(160deg,var(--ink) 0%,#2A261C 100%)}
.auth-card{background:#fff;border-radius:14px;padding:2rem;width:100%;max-width:24rem;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.auth-logo{height:42px;margin:0 auto 1rem}

/* ---------- Responsif ---------- */
@media (max-width:1024px){ .grid4{grid-template-columns:repeat(2,1fr)} .row2{grid-template-columns:1fr} }
@media (max-width:820px){
  .hamburger{display:block}
  .sidebar{transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.2)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open::after{content:"";position:fixed;inset:var(--top-h) 0 0 0;background:rgba(22,21,15,.45);z-index:34}
  .content{margin-left:0;padding:.8rem}
  .topbar-info .chip.site{display:none}
  .grid4{grid-template-columns:1fr 1fr;gap:.6rem}
  .stat .val{font-size:1.2rem}
  .page-title{font-size:1.2rem}
}
@media (max-width:480px){
  .topbar-info{display:none}
  .sel{max-width:78px}
  .btn{padding:.6rem .9rem}
}
@media print{ .topbar,.sidebar{display:none} .content{margin:0} }

/* ---------- Multi-logam ---------- */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.4rem;vertical-align:middle}
.metal-switch{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.metal-switch .ms{display:flex;align-items:center;gap:.35rem;padding:.5rem .9rem;border:1px solid var(--line);
  border-radius:999px;background:#fff;font-size:.88rem;font-weight:600;color:var(--ink2)}
.metal-switch .ms:hover{text-decoration:none;background:var(--cream)}
.metal-switch .ms.on{border-color:var(--ac);background:color-mix(in srgb, var(--ac) 12%, #fff);color:var(--ink)}
.metal-switch .ms small{color:var(--mute);font-weight:400}
.nowrap{white-space:nowrap}
.warnx{color:var(--bad);font-weight:600}
.w60{width:60px}.w70{width:70px}.w90{width:90px}.w110{width:110px}
.tbl input[type=text],.tbl input[type=number]{margin-top:0;padding:.35rem .45rem;font-size:.85rem}
@media (max-width:820px){ .metal-switch .ms{padding:.45rem .7rem;font-size:.82rem} }