/* [CHANGE 2026-11-15] what: gaya PANDU (token warna logo, borang bernombor, pentas berpendakap) · why: identiti ikut docs/DESIGN-IDENTITI.md · verify: semak 360px dan 1280px, fokus papan kekunci kelihatan */
@font-face{font-family:"Barlow";src:url(font/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(font/barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(font/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(font/barlow-condensed-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(font/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --struktur:#0A2A66; --biru:#1553B6; --biru-tekan:#0F3F8E; --amaran:#F5B400;
  --kertas:#FFFFFF; --konkrit:#E9ECF0; --garis:#C9CFD8;
  --dakwat:#101826; --dakwat-2:#4A5568;
  --rendah:#1B7A3D; --sederhana:#B26A00; --tinggi:#C22727; --tidakpasti:#5B6472;
  --font-tajuk:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --font-badan:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kertas);color:var(--dakwat);font:400 16px/1.5 var(--font-badan)}
img{max-width:100%;display:block}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--amaran);outline-offset:2px}

.jalur{display:flex;align-items:center;gap:12px;background:var(--struktur);color:#fff;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;border-bottom:4px solid var(--amaran)}
.jalur__emblem{background:#fff;border-radius:6px;padding:3px;object-fit:contain}
.jalur__nama{display:block;font:700 26px/1 var(--font-tajuk);letter-spacing:.08em}
.jalur__slogan{display:block;font-size:12.5px;line-height:1.3;color:#D6E0F2;margin-top:3px}

.rangka{max-width:1120px;margin:0 auto;padding:4px 16px calc(32px + env(safe-area-inset-bottom))}
.langkah{padding:20px 0;border-bottom:1px solid var(--garis)}
.langkah:last-child{border-bottom:0}
.langkah__tajuk{display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font:700 22px/1.15 var(--font-tajuk);letter-spacing:.03em;text-transform:uppercase;color:var(--struktur)}
.langkah__no{flex:none;display:grid;place-items:center;width:30px;height:30px;background:var(--struktur);color:#fff;font-size:18px}

.pentas{position:relative;background:var(--dakwat);display:grid;place-items:center;min-height:220px}
.pentas--kosong{background:var(--konkrit);min-height:200px;padding:36px 28px}
.pentas--kosong.seret{background:#DCE6F7;outline:3px dashed var(--biru);outline-offset:-3px}
.pentas__arah{margin:0;max-width:30ch;text-align:center;color:var(--dakwat-2);font-weight:500}
.sudut{position:absolute;width:26px;height:26px;border:4px solid var(--struktur)}
.sudut--ka{top:12px;left:12px;border-right:0;border-bottom:0}
.sudut--kn{top:12px;right:12px;border-left:0;border-bottom:0}
.sudut--bk{bottom:12px;left:12px;border-right:0;border-top:0}
.sudut--bn{bottom:12px;right:12px;border-left:0;border-top:0}

.pentas--kamera{background:#000;min-height:0}
.pentas--kamera video{display:block;width:100%;max-height:70vh;object-fit:contain;background:#000}
.pentas--kamera .sudut{border-color:var(--amaran)}
.bingkai{position:relative;display:inline-block;line-height:0;max-width:100%}
.bingkai img{max-height:70vh;width:auto;height:auto}
.kotak{position:absolute;border:3px solid var(--amaran);box-shadow:0 0 0 1px rgba(16,24,38,.65)}
.kotak span{position:absolute;left:-3px;bottom:100%;background:var(--struktur);color:#fff;white-space:nowrap;
  font:600 13px/1 var(--font-tajuk);letter-spacing:.04em;text-transform:uppercase;padding:5px 7px}
.kotak--bawah span{bottom:auto;top:-3px}

.memuat{position:absolute;inset:0;background:rgba(10,42,102,.86);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px}
.memuat strong{font:700 20px/1.2 var(--font-tajuk);letter-spacing:.04em;text-transform:uppercase}
.pusing{width:38px;height:38px;border:4px solid rgba(255,255,255,.3);border-top-color:var(--amaran);border-radius:50%;animation:pusing .9s linear infinite;margin-bottom:6px}
@keyframes pusing{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pusing{animation-duration:2.4s}}

.tindakan{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.btn{appearance:none;border:2px solid transparent;border-radius:4px;min-height:52px;padding:10px 16px;cursor:pointer;
  font:700 18px/1.1 var(--font-tajuk);letter-spacing:.05em;text-transform:uppercase;transition:background-color .12s}
.btn--utama{background:var(--biru);color:#fff}
.btn--utama:hover{background:var(--biru-tekan)}
.btn--utama:active{background:var(--struktur)}
.btn--garis{background:#fff;color:var(--struktur);border-color:var(--struktur)}
.btn--garis:hover{background:#EEF3FB}
.btn--kecil{min-height:44px;min-width:76px;font-size:16px;background:#fff;color:var(--struktur);border-color:var(--garis)}
.btn--kecil:hover{border-color:var(--struktur)}
.btn--penuh{width:100%;margin-top:12px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.nota{margin:10px 0 0;font-size:13.5px;color:var(--dakwat-2)}

.fail{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--garis)}
.fail__info{min-width:0}
.fail__info strong{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fail__info small{color:var(--dakwat-2);font-size:13.5px}

.ralat{margin:14px 0 0;padding:12px 14px;border-left:5px solid var(--tinggi);background:#FCEEEE;color:#7A1414;font-weight:500}

.sunyi{padding:22px 16px;background:var(--konkrit);border-left:5px solid var(--garis)}
.sunyi strong{font:700 19px/1.2 var(--font-tajuk);letter-spacing:.03em;text-transform:uppercase;color:var(--struktur)}
.sunyi p{margin:4px 0 0;color:var(--dakwat-2)}

.rumusan{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--struktur)}
.rumusan__sel{padding:12px 14px}
.rumusan__sel+.rumusan__sel{border-left:2px solid var(--struktur)}
.rumusan__sel span{display:block;font:600 13px/1.2 var(--font-tajuk);letter-spacing:.08em;text-transform:uppercase;color:var(--dakwat-2)}
.rumusan__sel strong{display:block;font:700 34px/1.1 var(--font-tajuk);color:var(--struktur);margin-top:2px}
.rumusan__sel strong.t-low{color:var(--rendah)} .rumusan__sel strong.t-medium{color:var(--sederhana)}
.rumusan__sel strong.t-high{color:var(--tinggi)} .rumusan__sel strong.t-uncertain{color:var(--tidakpasti)}
.ringkasan{margin:14px 0 0;font-weight:500}

.senarai{list-style:none;margin:6px 0 0;padding:0}
.cacat{padding:16px 0;border-top:1px solid var(--garis);margin-top:14px}
.cacat__kepala{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cacat__no{font:600 13px/1.2 var(--font-tajuk);letter-spacing:.08em;text-transform:uppercase;color:var(--dakwat-2)}
.cacat h3{margin:2px 0 0;font:700 22px/1.15 var(--font-tajuk);letter-spacing:.02em;color:var(--dakwat)}
.lencana{flex:none;color:#fff;padding:6px 10px;font:700 14px/1 var(--font-tajuk);letter-spacing:.08em;text-transform:uppercase}
.lencana.t-low{background:var(--rendah)} .lencana.t-medium{background:var(--sederhana)}
.lencana.t-high{background:var(--tinggi)} .lencana.t-uncertain{background:var(--tidakpasti)}
.yakin{display:flex;justify-content:space-between;margin-top:12px;font-size:14px;color:var(--dakwat-2)}
.yakin strong{color:var(--dakwat)}
.bar{height:8px;background:var(--konkrit);margin-top:5px}
.bar i{display:block;height:100%;background:var(--biru)}
.butir{margin-top:12px}
.butir span{display:block;font:600 13px/1.2 var(--font-tajuk);letter-spacing:.08em;text-transform:uppercase;color:var(--dakwat-2)}
.butir p{margin:3px 0 0}
.butir--tindakan{border-left:5px solid var(--amaran);padding-left:12px}
.penafian{margin:14px 0 0;font-size:13.5px;color:var(--dakwat-2)}

.pasang{padding:20px 0 0;border-top:1px solid var(--garis)}
.pasang__tajuk{margin:0 0 12px;font:700 20px/1.15 var(--font-tajuk);letter-spacing:.03em;text-transform:uppercase;color:var(--struktur)}
.pasang__grid{display:grid;gap:18px}
.pasang__cara strong{font:700 17px/1.2 var(--font-tajuk);letter-spacing:.06em;text-transform:uppercase}
.pasang__cara p{margin:4px 0 12px;color:var(--dakwat-2)}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

@media (min-width:900px){
  .jalur{padding-left:32px;padding-right:32px}
  .rangka{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 40px;padding:8px 32px 48px;align-items:start}
  .langkah{border-bottom:0}
  .pentas--kosong{min-height:320px}
  .pasang{grid-column:1/-1;margin-top:28px}
  .pasang__grid{grid-template-columns:1fr 1fr;gap:40px}
}