@font-face{font-family:"Public Sans";src:url(/font/publicsans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/font/publicsans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/font/publicsans-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--kertas:#f4f2ec;--putih:#fff;--tinta:#1e2421;--abu:#5f6661;--garis:#e0dcd2;--garis-kuat:#b9b5aa;--hijau:#1f4d3f;--hijau-tua:#163a2f;--bahaya:#a8321f;--sudut:6px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kertas);color:var(--tinta);font:400 15px/1.5 "Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums}
h1,h2,h3,p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
img{display:block;object-fit:cover;background:var(--garis)}
.ikon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Frame */
.bilah-atas{display:flex;align-items:center;gap:6px;height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0 6px;background:var(--putih);border-bottom:1px solid var(--garis);position:sticky;top:0;z-index:20}
.bilah-judul{font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tirai{position:fixed;inset:0;background:rgba(20,24,22,.45);z-index:30}
.samping{display:none;position:fixed;inset:0 auto 0 0;width:min(280px,84vw);background:var(--putih);border-right:1px solid var(--garis);flex-direction:column;z-index:31;padding:max(18px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));overflow-y:auto}
.samping.terbuka{display:flex}
.samping-merek{padding:2px 10px 18px;display:grid}
.samping-merek strong{font-size:17px;overflow-wrap:anywhere}
.samping-merek span{color:var(--abu);font-size:13px}
#menu{display:grid;gap:2px}
.menu-item{display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:0 10px;border:0;border-radius:var(--sudut);background:none;text-decoration:none;cursor:pointer;font-weight:500;text-align:left}
.menu-item:hover{background:var(--kertas)}
.menu-item[aria-current]{background:var(--hijau);color:#fff}
.menu-item .jumlah{margin-left:auto;font-size:12px;font-weight:600;background:var(--tinta);color:#fff;border-radius:10px;padding:1px 7px}
.menu-item[aria-current] .jumlah{background:#fff;color:var(--hijau)}
.samping-bawah{margin-top:auto;padding-top:18px;display:grid;gap:2px}
.samping-catatan{font-size:12.5px;color:var(--abu);padding:10px 10px 0}

.isi{padding:20px 16px max(40px,env(safe-area-inset-bottom));min-height:calc(100dvh - 56px)}
.isi-dalam{max-width:1040px;margin:0 auto}
.kepala-hal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.kepala-hal h1{font-size:23px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}

/* Controls */
.tombol{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid var(--garis-kuat);border-radius:var(--sudut);background:var(--putih);font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.tombol:hover{border-color:var(--tinta)}
.tombol:disabled{opacity:.6;cursor:wait}
.tombol.utama{background:var(--hijau);border-color:var(--hijau);color:#fff}
.tombol.utama:hover{background:var(--hijau-tua)}
.tombol.bahaya{background:var(--bahaya);border-color:var(--bahaya);color:#fff}
.tombol.penuh{width:100%}
.tombol-ikon{width:44px;height:44px;display:inline-grid;place-items:center;border:0;background:none;border-radius:var(--sudut);cursor:pointer;color:var(--abu);flex:none}
.tombol-ikon:hover{background:var(--kertas);color:var(--tinta)}
.tombol-ikon:disabled{opacity:.3;cursor:default;background:none}
.isian{display:block;font-weight:500;margin-bottom:16px}
.isian input,.isian textarea,.isian select,.saring input,.saring select{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--garis-kuat);border-radius:var(--sudut);background:var(--putih);font-size:16px;font-weight:400}
.isian textarea{resize:vertical;line-height:1.55}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--hijau);outline-offset:1px}
.isian small{display:block;margin-top:4px;color:var(--bahaya);font-weight:400;font-size:13.5px}
.isian small:empty{display:none}
.centang{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:500;cursor:pointer}
.centang input{width:20px;height:20px;accent-color:var(--hijau)}

.pilih-gambar{display:flex;align-items:center;gap:14px;margin-top:5px}
.pilih-gambar img{width:112px;height:76px;border-radius:var(--sudut);flex:none}
.pilih-gambar.lebar{display:grid;gap:10px;justify-items:start}
.pilih-gambar.lebar img{width:100%;height:auto;aspect-ratio:16/9}

/* Surfaces */
.papan{background:var(--putih);border:1px solid var(--garis);border-radius:var(--sudut)}
.bagian-form{padding:18px 16px}
.bagian-form+.bagian-form{border-top:1px solid var(--garis)}
.bagian-form h2{font-size:15px;font-weight:600;margin-bottom:14px}
.dua{display:grid;gap:0 16px}
.bilah-simpan{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}

.statistik{display:grid;grid-template-columns:1fr 1fr;margin-bottom:18px}
.stat{padding:14px 16px;text-decoration:none;display:block}
.stat:nth-child(odd){border-right:1px solid var(--garis)}
.stat:nth-child(-n+2){border-bottom:1px solid var(--garis)}
.stat:hover{background:#fbfaf7}
.stat b{display:block;font-size:30px;font-weight:600;line-height:1.2}
.stat span{color:var(--abu);font-size:13.5px}
.dasbor-kolom{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.papan-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--garis)}
.papan-kepala h2{font-size:15px;font-weight:600}
.papan-kepala a{font-size:13.5px}

.saring{display:grid;grid-template-columns:1fr;gap:8px;padding:12px;border-bottom:1px solid var(--garis)}
.saring input,.saring select{margin-top:0}
.baris{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--garis)}
.baris:last-child{border-bottom:0}
.baris img{width:64px;height:48px;border-radius:4px;flex:none}
.baris-isi{flex:1;min-width:0}
.baris-judul{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
a.baris-judul:hover{text-decoration:underline}
.baris-sub{color:var(--abu);font-size:13.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baris-aksi{display:flex;flex:none}
.baris-tombol{all:unset;display:flex;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer}
.baris-tombol:focus-visible{outline:2px solid var(--hijau)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--abu);white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--garis-kuat)}
.status.aktif::before{background:var(--hijau)}
.baris-status{display:none}
.titik{width:8px;height:8px;border-radius:50%;background:var(--hijau);flex:none}
.titik.mati{background:transparent}
.halaman{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 16px;border-top:1px solid var(--garis);color:var(--abu);font-size:13.5px}
.halaman div{display:flex;gap:6px}

.galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:12px}
.ubin{display:flex;flex-direction:column}
.ubin img{width:100%;aspect-ratio:4/3;border-radius:var(--sudut) var(--sudut) 0 0}
.ubin-kaki{display:flex;align-items:center;gap:2px;padding:2px 2px 2px 10px;flex:1}
.ubin-kaki span{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.kosong{padding:44px 20px;text-align:center;display:grid;justify-items:center;gap:6px}
.kosong .ikon{width:26px;height:26px;color:var(--abu);margin-bottom:6px}
.kosong h2{font-size:16px;font-weight:600}
.kosong p{color:var(--abu);max-width:34em;margin-bottom:10px}

.rangka{background:linear-gradient(90deg,#ece9e1 25%,#f5f3ed 50%,#ece9e1 75%);background-size:200% 100%;animation:kilau 1.4s linear infinite;border-radius:4px;height:14px}
.rangka.besar{height:48px;width:64px;flex:none}
.rangka.setengah{width:45%;margin-top:8px}
@keyframes kilau{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.rangka{animation:none}}

/* Modal: a bottom sheet on phones, centered from tablet up */
.modal-latar{position:fixed;inset:0;background:rgba(20,24,22,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.modal-kotak{background:var(--putih);width:100%;max-height:92dvh;display:flex;flex-direction:column;border-radius:10px 10px 0 0}
.modal-kepala{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--garis)}
.modal-kepala h2{font-size:16px;font-weight:600;overflow-wrap:anywhere}
.modal-isi{padding:16px;overflow-y:auto;overflow-wrap:anywhere}
.modal-kaki{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--garis)}
.detail-pesan dt{font-size:13px;color:var(--abu);margin-top:12px}
.detail-pesan dt:first-child{margin-top:0}
.detail-pesan dd{margin:0;white-space:pre-wrap}

.toast-wadah{position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:60;display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{background:var(--tinta);color:#fff;padding:10px 16px;border-radius:var(--sudut);max-width:100%}
.toast.gagal{background:var(--bahaya)}

/* Login */
.hal-masuk{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.masuk-kotak{width:100%;max-width:380px}
.masuk-merek{font-weight:600;color:var(--hijau);margin-bottom:6px}
.masuk-kotak h1{font-size:25px;font-weight:600;margin-bottom:24px}
.galat-umum{color:var(--bahaya);margin-top:10px}
.galat-umum:empty{display:none}
.masuk-catatan{color:var(--abu);font-size:13.5px;margin-top:18px}
.masuk-balik{display:inline-block;margin-top:12px;padding:6px 0}

@media (min-width:560px){
  .saring{grid-template-columns:1fr 180px}
  .dua{grid-template-columns:1fr 1fr}
  .modal-latar{align-items:center;padding:24px}
  .modal-kotak{max-width:520px;border-radius:10px}
  .modal-kotak.kecil{max-width:400px}
  .baris-status{display:inline-flex;margin-right:6px}
  .statistik{grid-template-columns:repeat(4,1fr)}
  .stat:nth-child(odd){border-right:0}
  .stat:not(:last-child){border-right:1px solid var(--garis)}
  .stat:nth-child(-n+2){border-bottom:0}
  .toast-wadah{left:auto;justify-items:end}
  .galeri{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media (min-width:900px){
  .bilah-atas{display:none}
  .tirai{display:none!important}
  .samping{display:flex;width:244px}
  .isi{margin-left:244px;padding:30px 32px 56px;min-height:100dvh}
  .dasbor-kolom{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .bagian-form{padding:20px 22px}
}