/* Papan Kualitas Udara — tampilan TV 16:9 (tema gelap tunggal, sengaja untuk layar TV) */
html,body{margin:0}
[hidden]{display:none!important}
/* Layout: layar TV 16:9 satu halaman — kiri 6 kartu kota (3x2), kanan perbandingan antarkota + saran + berita karhutla. Tampilan gelap tunggal (disengaja, untuk TV). */
:root{
  --u:min(1vw,1.7778vh); /* satuan ukuran: menjaga proporsi 16:9 di layar yang lebih lebar/pendek */
  --bg:#0e1517; --surface:#162125; --surface-2:#1c2a2f; --line:#2a3a40;
  --fg:#eaf0f1; --muted:#97a8ae; --accent:#f0a33a; --ink:#0d1214;
  --baik:#3fae5a; --sedang:#3b82d6; --tidak:#f2c230; --sangat:#e0412f; --bahaya:#050505;
  --up:#f08a4b; --down:#5fc77a; --alert:#c62a1c; --on-alert:#ffffff; --info-bg:#e9a23b;
  --f-display:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:calc(1.05*var(--u));overflow:hidden;
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);gap:calc(1*var(--u));
  padding-block:calc(1.2*var(--u));padding-left:max(16px,calc(1.6*var(--u)),env(safe-area-inset-left,0px));padding-right:max(16px,calc(1.6*var(--u)),env(safe-area-inset-right,0px));}
.num{font-family:var(--f-display);font-variant-numeric:tabular-nums}
header{display:flex;align-items:center;justify-content:space-between;gap:calc(2*var(--u));border-bottom:1px solid var(--line);padding-bottom:calc(.8*var(--u))}
header h1{font-family:var(--f-display);font-weight:700;font-size:calc(2.3*var(--u));margin:0;line-height:1;text-wrap:balance}
header h1 span{color:var(--accent)}
header .sub{color:var(--muted);font-size:calc(1*var(--u));margin-top:calc(.3*var(--u))}
.clock{text-align:right;flex:none}
.wx{flex:1;min-width:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(.5*var(--u));max-width:calc(60*var(--u))}
.w{background:var(--surface);border-radius:calc(.5*var(--u));padding:calc(.4*var(--u)) calc(.6*var(--u));min-width:0}
.w .n{font-size:calc(.85*var(--u));color:var(--muted);font-weight:600}
.w .r{display:flex;align-items:center;gap:calc(.4*var(--u))}
.w svg{width:calc(2*var(--u));height:calc(2*var(--u));flex:none}
.w .tp{font-family:var(--f-display);font-size:calc(1.75*var(--u));font-weight:700;line-height:1}
.w .ds{font-size:calc(.78*var(--u));color:var(--muted)}
.ic-sun{color:var(--accent)} .ic-cloud{color:var(--muted)} .ic-rain{color:var(--sedang)}
.bar.none .b{background:none;border:1px dashed var(--line);border-bottom:0;height:12%!important}
.bar.none .v{color:var(--muted)}
.tag{display:inline-block;font-size:calc(.8*var(--u));font-weight:700;padding:calc(.05*var(--u)) calc(.45*var(--u));border-radius:calc(.25*var(--u));margin-right:calc(.45*var(--u));vertical-align:calc(.15*var(--u));letter-spacing:.02em}
.tag.k{background:var(--accent);color:var(--ink)} .tag.j{background:var(--sedang);color:var(--fg)}
.clock .t{font-family:var(--f-display);font-size:calc(2.6*var(--u));font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.clock .t small{font-size:calc(1.3*var(--u));color:var(--muted);margin-left:calc(.2*var(--u))}
.clock .d{color:var(--muted);font-size:calc(1*var(--u))}
main{display:grid;grid-template-columns:minmax(0,1.95fr) minmax(0,1.12fr);gap:calc(1.2*var(--u));min-height:0}
.cities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:calc(1*var(--u));min-height:0}
.card{background:var(--surface);border-radius:calc(.6*var(--u));padding:calc(1*var(--u)) calc(1.1*var(--u)) calc(1*var(--u)) calc(1.4*var(--u));display:flex;flex-direction:column;gap:calc(.55*var(--u));min-height:0;min-width:0;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(.35*var(--u));background:var(--cat,var(--line))}
.card-top>div{min-width:0}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(.6*var(--u))}
.city{font-family:var(--f-display);font-size:calc(1.9*var(--u));font-weight:700;line-height:1}
.region{color:var(--muted);font-size:calc(.9*var(--u));margin-top:calc(.15*var(--u))}
.pill{font-weight:700;font-size:calc(.95*var(--u));padding:calc(.25*var(--u)) calc(.7*var(--u));border-radius:calc(2*var(--u));white-space:nowrap;background:var(--cat);color:var(--ink)}
.pill.light{color:var(--fg)}
.pill.bahaya{border:2px solid var(--sangat)}
.now{display:flex;align-items:baseline;gap:calc(1*var(--u))}
.now .ispu{font-size:calc(4.4*var(--u));font-weight:700;line-height:.9}
.now .lbl .mq{display:block}
.now .lbl{color:var(--muted);font-size:calc(.85*var(--u));line-height:1.3;min-width:0;flex:1}
.now .lbl b{color:var(--fg);font-size:calc(1.15*var(--u));font-family:var(--f-display)}
.bars{flex:1;min-height:calc(7*var(--u));display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:calc(.35*var(--u));align-items:end;min-height:0}
.bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:calc(.15*var(--u));min-height:0}
.bar .v{font-size:calc(.8*var(--u));font-family:var(--f-display)}
.bar .b{width:100%;border-radius:calc(.2*var(--u)) calc(.2*var(--u)) 0 0;background:var(--c);min-height:2px}
.bar.fc .b{background:repeating-linear-gradient(135deg,var(--c) 0 calc(.3*var(--u)),transparent calc(.3*var(--u)) calc(.55*var(--u)));border:1px solid var(--c);border-bottom:0}
.bar.fc .v,.bar.fc .dl{color:var(--muted)}
.bar .dl{font-size:calc(.75*var(--u));color:var(--muted);white-space:nowrap;text-align:center;line-height:1.15}
.bar.today .dl{color:var(--fg);font-weight:700}
.week{display:flex;justify-content:space-between;align-items:baseline;gap:calc(.6*var(--u));border-top:1px solid var(--line);padding-top:calc(.5*var(--u));font-size:calc(.85*var(--u));color:var(--muted)}
.week .mq{min-width:0}
.week .trend{min-width:0;max-width:50%;font-size:calc(.95*var(--u))}
.bz{box-shadow:inset 0 0 0 2px var(--sangat)}
.week b{color:var(--fg);font-family:var(--f-display);font-size:calc(1.15*var(--u))}
.trend{font-family:var(--f-display);font-weight:600;font-size:calc(1*var(--u))}
.trend.up{color:var(--up)}.trend.down{color:var(--down)}
aside{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:calc(.7*var(--u));min-height:0}
.panel{background:var(--surface);border-radius:calc(.6*var(--u));padding:calc(1*var(--u)) calc(1.1*var(--u));min-height:0}
.panel h2{font-family:var(--f-display);font-size:calc(1.35*var(--u));margin:0 0 calc(.6*var(--u));font-weight:700;color:var(--muted)}
.panel h2 em{font-style:normal;color:var(--accent)}
.hbar{display:grid;grid-template-columns:calc(6.2*var(--u)) minmax(0,1fr) calc(3.4*var(--u));align-items:center;gap:calc(.5*var(--u));margin:calc(.12*var(--u)) 0;font-size:calc(.9*var(--u))}
.hbar .track{position:relative;height:calc(.8*var(--u));background:var(--surface-2);border-radius:calc(.2*var(--u))}
.hbar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:calc(.2*var(--u));background:var(--c)}
.hbar .val{text-align:right;font-family:var(--f-display);font-size:calc(1.05*var(--u));font-weight:600}
.marker{position:absolute;top:calc(-.2*var(--u));bottom:calc(-.2*var(--u));border-left:2px dashed var(--muted);opacity:.7}
.refs{margin-top:calc(.3*var(--u));font-size:calc(.75*var(--u));color:var(--muted);line-height:1.3}
.panel.cmp{padding-block:calc(.7*var(--u))}
.panel.cmp h2{font-size:calc(1.15*var(--u));margin-bottom:calc(.35*var(--u))}
.advice{background:var(--surface-2);border-radius:calc(.6*var(--u));padding:calc(.6*var(--u)) calc(1.1*var(--u));display:flex;gap:calc(1*var(--u));align-items:flex-start}
.advice .dot{flex:none;width:calc(1.1*var(--u));height:calc(1.1*var(--u));border-radius:50%;margin-top:calc(.35*var(--u));background:var(--cat,var(--line));outline:1px solid var(--sangat)}
.advice .vs{max-height:calc(5.4*var(--u));flex:1}
.advice p{margin:0;font-size:calc(.98*var(--u));line-height:1.35}
.advice strong{font-family:var(--f-display);font-size:calc(1.2*var(--u))}
.news{display:flex;flex-direction:column;overflow:hidden}
.newsbox{flex:1;min-height:0;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.news ul{margin:0;padding-bottom:calc(4*var(--u));padding-left:calc(1.5*var(--u));display:flex;flex-direction:column;gap:calc(1.1*var(--u));font-size:calc(1.42*var(--u));line-height:1.34;transition:transform .9s ease}
.news li{padding-bottom:calc(.2*var(--u))}
.news li.cur::marker{color:var(--fg)}
.newsfoot{display:flex;justify-content:space-between;align-items:center;gap:calc(1*var(--u));margin-top:auto;padding-top:calc(.5*var(--u))}
.newsfoot .stamp{margin:0;padding:0}
.dots{display:flex;gap:calc(.4*var(--u));flex:none}
.dots i{width:calc(.6*var(--u));height:calc(.6*var(--u));border-radius:50%;background:var(--line)}
.dots i.on{background:var(--accent)}
.prog{height:calc(.25*var(--u));background:var(--surface-2);border-radius:calc(.2*var(--u));overflow:hidden;margin-top:calc(.5*var(--u))}
.prog span{display:block;height:100%;width:0;background:var(--accent)}
.news li::marker{color:var(--accent)}
.news li small{display:block;color:var(--muted);font-size:calc(.95*var(--u));margin-top:calc(.15*var(--u))}
.stamp{color:var(--muted);font-size:calc(.78*var(--u));margin-top:auto;padding-top:calc(.5*var(--u))}
footer{display:flex;justify-content:space-between;align-items:center;gap:calc(2*var(--u));font-size:calc(.85*var(--u));color:var(--muted)}
.legend{display:flex;gap:calc(1.1*var(--u));align-items:center;flex:none}
.legend span{white-space:nowrap}
.legend i{display:inline-block;width:calc(.9*var(--u));height:calc(.9*var(--u));border-radius:calc(.15*var(--u));margin-right:calc(.35*var(--u));vertical-align:calc(-.1*var(--u))}
.status{min-width:0;flex:1;display:flex;justify-content:flex-end}
.status .err{color:var(--sangat)}
.empty{color:var(--muted);display:flex;align-items:center;justify-content:center;text-align:center;font-size:calc(1.2*var(--u));grid-column:1/-1;grid-row:1/-1;padding:calc(2*var(--u));line-height:1.5}
@media (max-width:900px),(orientation:portrait){
  body{font-size:15px;overflow:auto;height:auto;gap:14px}
  header{flex-wrap:wrap}
  .wx{order:3;flex-basis:100%;max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.w{padding:6px 8px}.w .n,.w .ds{font-size:12px}.w .tp{font-size:20px}.w svg{width:22px;height:22px}.tag{font-size:11px;padding:1px 6px}
  header h1{font-size:28px} header .sub,.clock .d{font-size:13px} .clock .t{font-size:26px}
  main,.cities{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  aside{grid-template-rows:none}
  .card{min-height:250px;padding:14px 14px 14px 18px;gap:8px}
  .city{font-size:24px}.region,.now .lbl{font-size:13px}.pill{font-size:13px;padding:3px 10px}
  .now .ispu{font-size:56px}.now .lbl b{font-size:16px}
  .bar .v,.bar .dl{font-size:11px}.week{font-size:13px}.week b,.trend{font-size:15px}
  .panel{padding:14px}.panel h2{font-size:18px}
  .hbar{grid-template-columns:80px minmax(0,1fr) 48px;font-size:13px}.hbar .track{height:14px}.hbar .val{font-size:15px}
  .refs,.stamp,.news li small{font-size:12px}.advice p{font-size:14px}.news ul{font-size:17px;gap:14px;padding-left:18px}.newsbox{max-height:340px}.dots i{width:8px;height:8px}.prog{height:3px}.clock .t small{font-size:14px}
  .advice strong{font-size:16px}
  .advice .dot{width:14px;height:14px}
  footer{flex-direction:column;align-items:flex-start;font-size:12px}.legend{flex-wrap:wrap;gap:8px 14px}.legend i{width:11px;height:11px}
  .status{justify-content:flex-start}
  .ribbon{font-size:14px;padding-block:6px}.advice .vs{max-height:none}
}
@media (prefers-reduced-motion:no-preference){.bar .b,.hbar .fill{transition:height .8s ease,width .8s ease}}
/* Teks berjalan: dipakai otomatis hanya bila isi terpotong */
.mq{overflow:hidden;white-space:nowrap;max-width:100%}
.mq>span{display:inline-block}
.mq.run>span{animation:mq var(--d,8s) ease-in-out infinite alternate}
@keyframes mq{0%,15%{transform:none}85%,100%{transform:translateX(var(--dist))}}
.vs{overflow:hidden;min-height:0}
.vs.run>*{animation:vs var(--d,10s) ease-in-out infinite alternate}
@keyframes vs{0%,15%{transform:none}85%,100%{transform:translateY(var(--dist))}}
/* Pita peringatan merah */
.ribbon{background:var(--alert);color:var(--on-alert);overflow:hidden;white-space:nowrap;border-radius:calc(.4*var(--u));font-weight:700;font-size:calc(1.15*var(--u));padding-block:calc(.45*var(--u))}
.ribbon.info{background:var(--info-bg);color:var(--ink)}
.ribbon.info b{background:var(--ink);color:var(--info-bg)}
.ribbon .tk{display:inline-block;padding-left:100%;animation:tk var(--dur,40s) linear infinite}
@keyframes tk{to{transform:translateX(-100%)}}
.ribbon b{background:var(--on-alert);color:var(--alert);padding:0 calc(.5*var(--u));border-radius:calc(.2*var(--u));margin-right:calc(.6*var(--u))}
@media (prefers-reduced-motion:reduce){.news ul{transition:none}.mq.run>span,.vs.run>*{animation-duration:calc(var(--d,8s)*2)}.ribbon .tk{animation-duration:calc(var(--dur,40s)*2)}}
/* Ringkasan berita dari media (di bawah judul) */
.news li .sum{display:block;font-size:.82em;line-height:1.38;color:var(--muted);margin-top:calc(.3*var(--u))}
.news li.cur .sum{color:var(--fg)}
@media (max-width:900px),(orientation:portrait){.news li .sum{font-size:15px}}