@font-face{font-family:SG;src:url(font/SchibstedGrotesk-400.ttf);font-weight:400}
@font-face{font-family:SG;src:url(font/SchibstedGrotesk-500.ttf);font-weight:500}
@font-face{font-family:SG;src:url(font/SchibstedGrotesk-700.ttf);font-weight:700}
@font-face{font-family:SG;src:url(font/SchibstedGrotesk-800.ttf);font-weight:800}
:root{
  --krem:#FAF7F1; --tinta:#382A2C; --coral:#F26B43; --coral-tua:#B8421F; --putty:#F1ECE3; --stone:#6F6358; --garis:#E2DBCF;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:#E9E3D8;font-family:SG,system-ui,sans-serif;color:var(--tinta);-webkit-font-smoothing:antialiased}
::selection{background:rgba(242,107,67,.25)}

/* ponsel */
.hp{width:390px;height:780px;background:var(--krem);border-radius:34px;border:1px solid #d6cdbf;box-shadow:0 18px 40px -18px rgba(56,42,44,.35);overflow:hidden;position:relative;display:flex;flex-direction:column}
.kepala{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 10px}
.merek{font-weight:800;font-size:19px;letter-spacing:-.03em}
.merek i{font-style:normal;color:var(--coral)}
.merek small{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-left:6px;color:var(--stone)}
.hitung{font-size:13px;font-weight:500;color:var(--stone);font-variant-numeric:tabular-nums}
.rel{height:3px;background:var(--garis);margin:0 24px;border-radius:2px;overflow:hidden}
.rel b{display:block;height:100%;background:var(--coral);border-radius:2px}
.arus{flex:1;overflow:hidden;padding:26px 24px 12px;display:flex;flex-direction:column;justify-content:flex-end;gap:18px}
.lalu{font-size:15px;line-height:1.4;color:var(--stone)}
.lalu b{display:block;font-weight:500;color:var(--stone);margin-bottom:2px}
.lalu span{color:var(--tinta);font-weight:500}
.tanya{font-size:25px;line-height:1.2;font-weight:800;letter-spacing:-.025em;max-width:16ch;text-wrap:balance}
.tanya.soal{font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-.01em;max-width:none;text-wrap:pretty}
.bantu{font-size:15px;line-height:1.45;color:var(--stone);max-width:30ch}
.dok{padding:14px 20px 24px;background:var(--krem);border-top:1px solid var(--garis);display:flex;flex-direction:column;gap:9px}
.opsi{display:flex;align-items:flex-start;gap:12px;text-align:left;min-height:48px;padding:11px 14px;border-radius:12px;border:1.5px solid var(--garis);background:#fff;font:500 15px/1.35 SG,sans-serif;color:var(--tinta);width:100%}
.opsi i{flex:none;width:26px;height:26px;border-radius:8px;background:var(--putty);font-style:normal;font-weight:700;font-size:13px;display:grid;place-items:center;color:var(--tinta)}
.opsi.pilih{border-color:var(--tinta);background:var(--putty)}
.opsi.pilih i{background:var(--tinta);color:var(--krem)}
.pil{display:flex;gap:9px}
.pil .opsi{justify-content:center;align-items:center;text-align:center;font-weight:700}
.pil .opsi.pilih{background:var(--tinta);color:var(--krem);border-color:var(--tinta)}
.kel{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.kel .opsi{justify-content:center;padding:11px 0;min-height:48px;font-weight:700}
.isian{border:1.5px solid var(--tinta);background:#fff;border-radius:12px;min-height:52px;padding:14px;font:500 17px/1.2 SG,sans-serif;color:var(--tinta);display:flex;align-items:center}
.isian::after{content:"";width:2px;height:22px;background:var(--coral);margin-left:2px;animation:kedip 1s steps(1) infinite}
@keyframes kedip{50%{opacity:0}}
.tombol{min-height:52px;border-radius:12px;background:var(--tinta);color:var(--krem);font:700 16px SG,sans-serif;display:grid;place-items:center;border:0;width:100%}
.tombol.mati{background:var(--garis);color:var(--stone)}
/* grafik skor */
.hasil{flex:1;padding:22px 24px 16px;display:flex;flex-direction:column;gap:20px}
.hasil h2{margin:0;font-size:27px;line-height:1.14;font-weight:800;letter-spacing:-.03em;max-width:15ch;text-wrap:balance}
.grafik{display:flex;flex-direction:column;gap:6px}
.judulbaris{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:700;color:var(--stone)}
.judulbaris b{font-weight:700;color:var(--tinta)}
.judulbaris span{font-variant-numeric:tabular-nums;font-weight:500}
.skrg .judulbaris span{color:var(--tinta)}
.ubin{display:grid;grid-template-columns:repeat(5,1fr) 12px repeat(2,1fr) 12px repeat(3,1fr);gap:6px}
.ubin .j{display:block}
.u{aspect-ratio:1/1.75;border-radius:9px;border:1.8px solid var(--tinta);background:transparent;position:relative}
.u.b{background:var(--tinta)}
.u.baru{background:var(--coral);border-color:var(--coral)}
.u.turun{border-style:dashed;border-color:var(--stone)}
.u.baru::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:7px;border-left:2.5px solid var(--krem);border-bottom:2.5px solid var(--krem);transform:translate(-50%,-62%) rotate(-45deg)}
.skrg .u{animation:isi .8s var(--ease) both;animation-delay:calc(var(--n)*80ms + .3s)}
@keyframes isi{from{transform:translateY(14px) scaleY(.5);opacity:0}to{transform:none;opacity:1}}
.tali{display:grid;grid-template-columns:repeat(5,1fr) 12px repeat(2,1fr) 12px repeat(3,1fr);gap:6px;height:34px}
.tali span{display:block;width:2.5px;height:100%;background:var(--coral);margin:0 auto;opacity:0;border-radius:2px}
.tali span.on{opacity:.85}
.bagian{display:grid;grid-template-columns:repeat(5,1fr) 12px repeat(2,1fr) 12px repeat(3,1fr);gap:6px;margin-top:2px}
.bagian span{font-size:12px;font-weight:700;color:var(--tinta);border-top:2.5px solid var(--tinta);padding-top:6px;line-height:1.2}
.bagian span.k{color:var(--stone);font-weight:500;border-top-color:var(--garis)}
.legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--stone);align-items:center}
.legenda em{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.legenda s{display:inline-block;width:12px;height:16px;border-radius:4px;border:1.6px solid var(--tinta);text-decoration:none}
.legenda s.b{background:var(--tinta)} .legenda s.n{background:var(--coral);border-color:var(--coral)}
.kalimat{font-size:16px;line-height:1.45;max-width:34ch;color:var(--tinta)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-delay:0ms!important}}

html,body{height:100%}body{background:var(--krem)}
.hp{width:100%;max-width:480px;height:100dvh;margin:0 auto;border-radius:0;border:0;box-shadow:none}
.opsi,.tombol{cursor:pointer;font-family:SG,sans-serif}.tombol[disabled]{background:var(--garis);color:var(--stone);cursor:default}
textarea.isian{width:100%;min-height:120px;resize:vertical;align-items:flex-start;display:block}
textarea.isian::after,input.isian::after{content:none}
input.isian{width:100%}
:focus-visible{outline:2px solid var(--coral-tua);outline-offset:3px}
.galat{color:var(--coral-tua);font-size:14px;min-height:18px}
.kecil{font-size:13px;color:var(--stone)}
.tautan{background:none;border:0;color:var(--stone);font:500 14px SG,sans-serif;text-decoration:underline;cursor:pointer;padding:8px 0}
.dok{padding-bottom:max(24px,env(safe-area-inset-bottom))}

.arus.rolling{overflow:auto;justify-content:flex-start;padding-top:24px;-webkit-overflow-scrolling:touch}
.daftarya{display:flex;flex-direction:column;gap:14px}
.tanyaya p{margin:0 0 7px;font-size:16px;line-height:1.35;font-weight:500}
.tanyaya .pil .opsi{min-height:46px}
.arus.rolling textarea.isian{min-height:96px}

.batang{display:flex;gap:4px;margin:2px 0 4px}.batang i{flex:1;height:14px;border-radius:5px;border:1.6px solid var(--tinta)}.batang i.y{background:var(--tinta)}
.hsl ul{margin:6px 0 10px 18px;padding:0}.hsl li{margin:6px 0;font-size:16px;line-height:1.4}
.kartu{background:#fff;border:1.5px solid var(--tinta);border-radius:14px;padding:16px 16px 6px;display:flex;flex-direction:column;gap:14px}
.kartu .lalu{margin:0}