/* ==================================================================
   CATCAST v2 (21 Sep 2026, rombak "lebih simpel"). Kata diganti ikon & bentuk.
   Putih, tinta #000, merah siaran #E5202E, hijau naik #0E8F4F, merah turun #C8231B.
   Schibsted Grotesk + JetBrains Mono. Ikon isi padat (fill) dari sprite di susun.py.
   ================================================================== */
@font-face{font-family:"Schibsted Grotesk";src:url("/air/schibsted.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/air/jetbrains.woff2") format("woff2");font-weight:400 700;font-display:swap}
:root{
  --kertas:#FFFFFF; --abu:#F4F4F5; --garis:#E6E6E8; --tinta:#000;
  --merah:#E5202E; --naik:#0E8F4F; --turun:#C8231B;
  --huruf:"Schibsted Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kertas);color:var(--tinta);font:16px/1.55 var(--huruf);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--tinta);text-underline-offset:3px}
h1,h2{font-weight:900;letter-spacing:-.03em;line-height:1.02;margin:0}
p{margin:0 0 10px;text-align:justify;text-justify:inter-word;text-indent:1.3em;hyphens:manual}
p:last-child{margin-bottom:0}
.wadah{max-width:1080px;margin:0 auto;padding-inline:20px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ik{width:1.15em;height:1.15em;fill:currentColor;flex:none;vertical-align:-.2em}

/* kepala: satu baris, ikon */
.kepala{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--garis)}
.kepala .wadah{display:flex;align-items:center;gap:14px;min-height:62px}
.merek{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--tinta)}
.merek img{width:38px;height:38px;border-radius:10px}
.merek span{font:900 22px/1 var(--huruf);letter-spacing:-.03em}
.live{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--merah)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--merah);animation:kedip 1.4s ease-in-out infinite}
@keyframes kedip{50%{opacity:.25}}
.segar{display:inline-flex;align-items:center;gap:4px;font:500 12px/1 var(--mono)}
.segar .ik{width:14px;height:14px}
.kepala nav{display:flex;gap:4px;margin-left:auto}
.kepala nav a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:700;font-size:14.5px;padding:8px 12px;border-radius:999px}
.kepala nav a[aria-current="page"]{background:var(--abu)}
.tombol-beli{display:inline-flex;align-items:center;gap:7px;background:var(--merah);color:#fff;text-decoration:none;font-weight:800;font-size:14.5px;padding:10px 15px;border-radius:999px}
.tombol-beli:hover{background:#B8141F}

/* pembuka */
.pembuka{padding-top:34px;padding-bottom:6px}
.pembuka h1{font-size:clamp(1.9rem,4.4vw,3rem)}
.pembuka .sub{text-indent:0;text-align:left;font-size:17px;margin-top:8px}
.hilang{text-align:center;padding-block:90px}
.hilang .ik{width:64px;height:64px;color:var(--merah);margin:0 auto 14px;display:block}
.hilang .sub{text-align:center}

/* sorotan + kilas */
.sorot{display:flex;align-items:center;gap:16px;margin-top:22px;padding:16px 18px;border-radius:18px;background:var(--tinta);color:#fff;text-decoration:none}
.sorot-ikon{width:48px;height:48px;border-radius:14px;background:var(--merah);display:grid;place-items:center;flex:none}
.sorot-ikon .ik{width:26px;height:26px}
.sorot-teks{display:flex;flex-direction:column;gap:3px;min-width:0}
.sorot-teks b{font-size:19px;line-height:1.25}
.sorot-teks span{font-size:14.5px}
.sorot-panah{margin-left:auto}
.sorot-panah .ik{width:24px;height:24px}
.kilas{display:flex;gap:8px;overflow-x:auto;padding:12px 0 4px;scrollbar-width:thin}
.kilas-item{flex:none;display:inline-flex;align-items:center;gap:8px;max-width:330px;padding:9px 13px;border:1px solid var(--garis);border-radius:999px;text-decoration:none;font-size:13.5px;font-weight:600}
.kilas-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kilas-item .ik{color:var(--merah)}
.kilas-item:hover{border-color:var(--tinta)}

/* kanal ikon */
.kanal{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 12px}
.kanal button{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--tinta);background:#fff;color:var(--tinta);border-radius:999px;padding:9px 15px;font:800 15px/1 var(--huruf);cursor:pointer}
.kanal button .ik{width:18px;height:18px}
.kanal button[aria-selected="true"]{background:var(--tinta);color:#fff}
.kanal button[aria-selected="true"] .ik{color:var(--merah)}

/* daftar ringkas */
.daftar-kepala,.daftar li{display:grid;grid-template-columns:30px minmax(120px,1.6fr) 1fr .8fr .8fr 1fr 1fr .8fr 34px;gap:10px;align-items:center}
.daftar-kepala{padding:0 14px 8px;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--tinta)}
.daftar-kepala .ik{width:15px;height:15px}
.daftar{list-style:none;margin:0;padding:0}
.daftar li{padding:12px 14px;border-bottom:1px solid var(--garis);font:500 14px/1.2 var(--mono)}
.daftar li:hover{background:var(--abu)}
.no{color:#000;opacity:.55}
.tok{display:flex;align-items:center;gap:6px;min-width:0;font-family:var(--huruf)}
.tok b{font-weight:800;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.risiko{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#FFE9D6;color:#9A3F00;flex:none;cursor:help}
.risiko .ik{width:13px;height:13px}
.sts{display:contents}
.st{display:inline-flex;align-items:center;gap:5px}
.st .ik{width:14px;height:14px;opacity:.55}
.gerak{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.gerak i{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}
.gerak.naik{color:var(--naik)} .gerak.naik i{border-bottom:7px solid var(--naik)}
.gerak.turun{color:var(--turun)} .gerak.turun i{border-top:7px solid var(--turun)}
.gerak.datar{color:var(--tinta)}
.ke{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--abu)}
.ke:hover{background:var(--tinta);color:#fff}
.kosong-baris{display:block!important;padding:34px 14px!important;text-align:center;font-family:var(--huruf)!important}
.legenda{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;padding:14px 0 0;margin:0;font-size:13px}
.legenda li{display:inline-flex;align-items:center;gap:6px}
.legenda .ik{width:15px;height:15px}
.titik{display:inline-block;width:14px;height:14px;border-radius:4px}
.titik.risiko{background:#FFE9D6;border:1px solid #F3C49B}

/* about: ubin, langkah, lipat */
.ubin{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.ubin li{background:var(--abu);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:4px}
.ubin .ik{width:28px;height:28px;margin-bottom:6px}
.ubin b{font-size:16px}
.ubin span{font-size:13.5px}
.ubin li.merah{background:var(--merah);color:#fff}
.judul-kecil{font-size:26px;margin:44px 0 14px}
.langkah-ikon{list-style:none;counter-reset:l;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px;padding:0}
.langkah-ikon li{counter-increment:l;display:inline-flex;align-items:center;gap:8px;padding:10px 14px 10px 10px;border:1.5px solid var(--tinta);border-radius:999px;font-weight:700;font-size:14.5px}
.langkah-ikon li::before{content:counter(l);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tinta);color:#fff;font:700 12px/1 var(--mono)}
.kosong{display:flex;gap:14px;align-items:flex-start;border:2px dashed var(--tinta);border-radius:18px;padding:18px;margin:6px 0 0}
.kosong>.ik{width:30px;height:30px;color:var(--merah)}
.kosong b{font-size:18px}
.kosong p{margin-top:4px}
.beli-bungkus{display:grid;gap:14px}
@media (min-width:760px){.beli-bungkus{grid-template-columns:1fr 1fr}}
.kartu{border:1.5px solid var(--tinta);border-radius:18px;padding:18px}
.token-kepala{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.token-gambar{width:52px;height:52px;border-radius:14px;overflow:hidden;background:var(--abu)}
.token-gambar img{width:100%;height:100%;object-fit:cover}
.token-kepala b{font:900 22px/1 var(--huruf)}
.baris{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--garis);font-size:14.5px}
.baris span{display:inline-flex;align-items:center;gap:6px}
.baris b{font:600 14px/1.3 var(--mono)}
.dagang-tab{display:grid;grid-template-columns:1fr 1fr;background:var(--abu);border-radius:999px;padding:4px;margin-bottom:14px}
.dagang-tab button{border:0;border-radius:999px;padding:10px;font:800 15px/1 var(--huruf);background:transparent;cursor:pointer;color:var(--tinta)}
.dagang-tab button[aria-selected="true"]{background:var(--tinta);color:#fff}
.label{display:block;font-weight:700;font-size:13.5px;margin-bottom:6px}
.dagang input{width:100%;border:1.5px solid var(--tinta);border-radius:12px;padding:12px;font:600 19px/1 var(--mono)}
.dagang-cepat{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.dagang-cepat button{border:1px solid var(--garis);border-radius:999px;background:#fff;padding:6px 11px;font:500 13px/1 var(--mono);cursor:pointer}
.tombol{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--tinta);color:#fff;font:800 15.5px/1 var(--huruf);padding:14px 18px;cursor:pointer}
.tombol.merah{background:var(--merah)}
.tombol.lebar{width:100%;margin:12px 0}
.tombol[disabled]{opacity:.45;cursor:not-allowed}
.status-luncur{font-size:14px;text-indent:0;text-align:left;border-radius:12px;background:var(--abu);padding:10px 12px}
.status-luncur.galat{background:#FDE7E7}
.status-luncur.beres{background:#E3F4EA}
.risiko-daftar{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.risiko-daftar li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#FFF1F1;font-weight:600;font-size:14.5px}
.risiko-daftar .ik{width:20px;height:20px;color:var(--turun)}
.lipat{display:grid;gap:8px}
.lipat details{border:1px solid var(--garis);border-radius:16px;padding:0 18px}
.lipat details[open]{padding-bottom:16px}
.lipat summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:15px 0;font-weight:800;font-size:16px}
.lipat summary::-webkit-details-marker{display:none}
.lipat summary::after{content:"+";margin-left:auto;font:500 20px/1 var(--mono)}
.lipat details[open] summary::after{content:"–"}
.lipat summary .ik{width:20px;height:20px;color:var(--merah)}
.biasa{padding-left:20px;display:grid;gap:8px;margin:0 0 10px}
.biasa li{line-height:1.5}

/* kaki */
.kaki{margin-top:60px;border-top:1px solid var(--garis);padding-block:22px 30px}
.kaki .wadah{display:flex;gap:16px;align-items:flex-start}
.merek.kecil img{width:28px;height:28px;border-radius:8px}
.merek.kecil span{font-size:17px}
.kaki p{font-size:13px;flex:1}
.kaki p .ik{color:var(--merah)}

@media (max-width:820px){
  .segar{display:none}
  .kepala nav a span,.tombol-beli span{display:none}
  .kepala nav a,.tombol-beli{padding:9px}
  .daftar-kepala{display:none}
  .daftar li{grid-template-columns:24px 1fr auto 34px;grid-template-areas:"no tok j24 ke" "no hrg j1 ke" ". st st st";row-gap:6px}
  .daftar li .no{grid-area:no}.daftar li .tok{grid-area:tok}.daftar li .hrg{grid-area:hrg;opacity:.8}
  .daftar li .j1{grid-area:j1;justify-self:end}.daftar li .j24{grid-area:j24;justify-self:end}.daftar li .ke{grid-area:ke}
  .daftar li .sts{grid-area:st;display:flex;gap:16px;font-size:12.5px}
  .kaki .wadah{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){.live i{animation:none}}
.st .ik{display:none}
@media (max-width:820px){
  .st .ik{display:inline}
  .daftar li .j1::before,.daftar li .j24::before{font:600 10px/1 var(--mono);margin-right:5px;color:#000}
  .daftar li .j1::before{content:"1h"}
  .daftar li .j24::before{content:"24h"}
}

/* panggung: foto kucing jadi latar hero (23 Sep 2026) */
.panggung{position:relative;margin-top:26px;border-radius:24px;overflow:hidden;min-height:330px;display:flex;align-items:flex-end;
  background:#170203 url("/air/pfp.jpg") right 6% center/cover no-repeat}
.panggung:before{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(14,2,3,.96) 26%,rgba(14,2,3,.72) 52%,rgba(14,2,3,.15) 78%,rgba(14,2,3,.05) 100%)}
.panggung-teks{position:relative;padding:34px 34px 32px;max-width:640px;color:#fff}
.panggung h1{font-size:clamp(2rem,4.3vw,3.2rem);color:#fff;margin-top:14px}
.panggung .sub{text-indent:0;text-align:left;font-size:17px;margin-top:10px;color:#fff;opacity:.85}
.on-air{display:inline-flex;align-items:center;gap:8px;background:var(--merah);color:#fff;font:700 11.5px/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;padding:8px 12px;border-radius:999px}
.on-air i{width:8px;height:8px;border-radius:50%;background:#fff;animation:kedip 1.4s ease-in-out infinite}
@media (max-width:760px){
  .panggung{min-height:300px;background-position:72% center;align-items:flex-end}
  .panggung:before{background:linear-gradient(180deg,rgba(14,2,3,.18) 0%,rgba(14,2,3,.62) 42%,rgba(14,2,3,.95) 78%)}
  .panggung-teks{padding:22px 20px 24px;max-width:none}
}

/* latar tetap: foto profil diperbesar, gak ikut kegeser waktu discroll (23 Sep 2026, ala gonova) */
body:before{content:"";position:fixed;inset:0;z-index:-2;
  background:url("/air/pfp.jpg") center 14%/cover no-repeat;background-attachment:fixed}
body:after{content:"";position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.62) 22%,rgba(255,255,255,.94) 40%,#fff 52%)}
body{background:transparent}
.kepala{background:rgba(255,255,255,.82)}
/* panggung sekarang cuma kaca bening di atas latar tetap */
.panggung{background:rgba(14,2,3,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);min-height:300px}
.panggung:before{background:linear-gradient(95deg,rgba(14,2,3,.86) 12%,rgba(14,2,3,.55) 52%,rgba(14,2,3,.18) 86%)}
@media (max-width:760px){
  body:before{background-position:center 10%;background-attachment:scroll;background-size:180% auto}
  .panggung{background:rgba(14,2,3,.5)}
}

/* alas putih buat isi di bawah panggung, biar teks tetap kebaca di atas latar tetap */
main{position:relative}
main:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:#fff;z-index:-1}
main.h-index:before{top:430px}
@media (max-width:760px){main.h-index:before{top:360px}}