:root{--primer: #1F4E5F;--sekunder: #2E6B80;--latar: #F4F6F7;--garis: #D9E2E7;--teks: #333333;--sukses: #2E7D32;--peringatan: #C98A00;--bahaya: #B3261E;--putih: #fff;--samping: 232px}*{box-sizing:border-box}html{font-size:14px}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--teks);background:var(--latar);line-height:1.5}h1{font-size:20px;margin:0}h2{font-size:16px;margin:0 0 8px}a{color:var(--sekunder)}:focus-visible{outline:3px solid var(--sekunder);outline-offset:2px}button{font:inherit;min-height:40px;padding:0 14px;border:0;border-radius:6px;background:var(--primer);color:var(--putih);cursor:pointer}button.sekunder{background:var(--putih);color:var(--primer);border:1px solid var(--primer)}.lompat{position:absolute;left:-999px;top:0;background:var(--putih);padding:8px 12px;z-index:10}.lompat:focus{left:8px;top:8px}.app{display:flex;min-height:100vh}.samping{width:var(--samping);background:var(--primer);color:var(--putih);flex-shrink:0}.merek{padding:16px;font-weight:700;font-size:18px;border-bottom:1px solid rgb(255 255 255 / .18)}.merek span{display:block;font-weight:400;font-size:12px;opacity:.85}.samping ul{list-style:none;margin:0;padding:8px}.samping a{display:block;padding:10px 12px;border-radius:6px;color:var(--putih);text-decoration:none}.samping a:hover{background:#ffffff1f}.samping a[aria-current=page]{background:var(--putih);color:var(--primer);font-weight:600}.utama{flex:1;min-width:0;display:flex;flex-direction:column}.atas{display:flex;align-items:center;gap:12px;padding:10px 20px;background:var(--putih);border-bottom:1px solid var(--garis)}.atas h1{flex:1}.pengguna{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.cabang{background:var(--latar);border:1px solid var(--garis);border-radius:999px;padding:2px 10px;font-size:12px}.tombol-menu,.tabir{display:none}main{padding:20px}.kartu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px}.kartu{background:var(--putih);border:1px solid var(--garis);border-radius:8px;padding:16px}.angka{font-size:28px;margin:4px 0;font-variant-numeric:tabular-nums}.catatan{color:#5b6770;font-size:12px;margin:0}.tengah{max-width:560px;margin:8vh auto;padding:0 16px}.peringatan{background:#fff6dd;border-left:4px solid var(--peringatan);padding:8px 12px}.daftar-peran{list-style:none;padding:0;display:grid;gap:8px}.daftar-peran button{width:100%;text-align:left}.formulir{display:grid;gap:4px;margin-top:16px}.formulir label{font-size:12px;font-weight:600;margin-top:8px}.formulir input{font:inherit;min-height:40px;padding:0 12px;border:1px solid var(--garis);border-radius:6px}.formulir button{margin-top:12px}.galat{background:#fcebea;border-left:4px solid var(--bahaya);color:var(--bahaya);padding:8px 12px;margin:0}.tautan-tombol{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:6px;text-decoration:none}@media(max-width:1199px){.tombol-menu{display:inline-block}.samping{position:fixed;inset:0 auto 0 0;transform:translate(-100%);transition:transform .2s;z-index:5}.samping.terbuka{transform:none}.tabir{display:block;position:fixed;inset:0;background:#00000059;z-index:4}.nama{display:none}}@media(prefers-reduced-motion:reduce){.samping{transition:none}}