:root{
  --teal:#0F6B5C; --teal-d:#0A4F44; --teal-t:#DDEFEA;
  --kuning:#F4B942; --kuning-d:#B98312;
  --krem:#FFF8EC; --tinta:#22312D; --muted:#58675F; --garis:#E2D9C4; --putih:#fff; --bahaya:#A8231B;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--krem);color:var(--tinta);
  font:18px/1.5 ui-rounded,"Nunito","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif}
body.has-dock{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
.band{background:var(--teal);color:#fff}
.band-in{max-width:40rem;margin:0 auto;padding:14px 18px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.band-title{font-weight:800;font-size:1.05rem}
.band-sub{font-size:.9rem;opacity:.92;white-space:nowrap}
.testbar{background:var(--kuning);color:var(--tinta);text-align:center;padding:8px 14px;font-weight:700;font-size:.95rem}
.wrap{max-width:40rem;margin:0 auto;padding:22px 18px 8px}
h1,h2,p{margin:0}
.who{background:var(--putih);border:2px solid var(--garis);border-radius:18px;padding:16px 18px;margin-bottom:22px}
.who-l{color:var(--muted);font-size:.95rem}
.who-n{font-size:1.65rem;line-height:1.2;font-weight:800;color:var(--teal-d);margin:2px 0 6px;overflow-wrap:anywhere}
.who-h{color:var(--muted);font-size:.9rem}
.step{font-size:1.3rem;font-weight:800;margin-bottom:4px}
.help{color:var(--muted);margin-bottom:14px}
.search input{width:100%;min-height:54px;padding:12px 16px;font:inherit;border:2px solid var(--garis);border-radius:14px;background:var(--putih);color:var(--tinta);margin-bottom:14px}
.search input:focus{outline:3px solid var(--kuning);outline-offset:1px;border-color:var(--teal)}
.cands{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cands li[hidden]{display:none}
.cand{position:relative;display:flex;gap:14px;align-items:center;min-height:68px;padding:12px 16px;background:var(--putih);
  border:2px solid var(--garis);border-radius:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cand input{position:absolute;opacity:0;width:1px;height:1px}
.mark{flex:none;width:28px;height:28px;border-radius:50%;border:3px solid #9DB0A9;background:#fff;display:grid;place-items:center}
.txt{display:flex;flex-direction:column;min-width:0}
.nm{font-weight:800;font-size:1.1rem;line-height:1.25;overflow-wrap:anywhere}
.ad{color:var(--muted);font-size:.9rem}
.sel .cand{border-color:var(--teal);background:var(--teal-t)}
.sel .mark{border-color:var(--teal);background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2 8.8-9.4' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat}
.cand input:focus-visible + .mark{outline:3px solid var(--kuning-d);outline-offset:3px}
.none{margin:14px 2px;color:var(--muted)}
.dock{position:fixed;left:0;right:0;bottom:0;background:var(--putih);border-top:4px solid var(--kuning);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));z-index:5}
.dock-in{max-width:40rem;margin:0 auto;display:flex;gap:14px;align-items:center}
.pick{flex:1;min-width:0;display:flex;flex-direction:column}
.pl{font-size:.85rem;color:var(--muted)}
.pick strong{font-size:1.15rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.go{flex:none;min-height:56px;padding:0 24px;font:inherit;font-weight:800;border:0;border-radius:14px;background:var(--kuning);color:var(--tinta);cursor:pointer}
.go:disabled{background:#E4E1D8;color:#8A948F;cursor:not-allowed}
.go:focus-visible,.ghost:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.ghost{min-height:56px;padding:0 20px;font:inherit;font-weight:700;border:2px solid var(--garis);border-radius:14px;background:#fff;color:var(--tinta);cursor:pointer}
.sheet[hidden]{display:none}
.sheet{position:fixed;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(34,49,45,.6)}
.sheet-box{position:relative;width:100%;max-width:40rem;background:var(--putih);border-radius:24px 24px 0 0;padding:24px 20px calc(22px + env(safe-area-inset-bottom))}
.sheet-l{color:var(--muted)}
.sheet-n{font-size:1.7rem;font-weight:800;line-height:1.2;color:var(--teal-d);margin:2px 0 10px;overflow-wrap:anywhere}
.sheet-w{margin-bottom:18px}
.sheet-e{background:#FBE4E1;color:var(--bahaya);border-radius:12px;padding:10px 14px;margin-bottom:14px;font-weight:700}
.sheet-b{display:flex;gap:12px}
.sheet-b .go{flex:1}
.msg{text-align:center;padding-top:44px}
.msg h1{font-size:1.6rem;line-height:1.25;color:var(--teal-d);margin-bottom:10px}
.msg p{color:var(--tinta);max-width:30rem;margin:0 auto}
.msg[hidden]{display:none}
.ico{width:84px;height:84px;margin-bottom:12px}
.foot{max-width:40rem;margin:28px auto 0;padding:0 18px 32px;color:var(--muted);font-size:.85rem;text-align:center}
@media (prefers-reduced-motion:no-preference){
  .sheet-box{animation:naik .18s ease-out}
  @keyframes naik{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
}
@media (max-width:380px){
  body{font-size:17px}
  .go{padding:0 16px}
}