/* Halaman turunan (speedtest/, status/, tingkatkan-layanan/): memakai token & komponen dari site.css,
   tanpa GSAP/Lenis. Dimuat SETELAH site.css. */

/* ---------- pembuka gelap ---------- */
.hal-hero{position:relative;isolation:isolate;overflow:clip;background:linear-gradient(180deg,var(--malam) 0%,var(--navy) 100%);color:#fff;
  padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + clamp(2.5rem,7vw,5rem));padding-bottom:calc(clamp(4rem,9vw,7rem) + clamp(24px,4vw,48px))}
html{scroll-padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + 16px)}
.hal-hero__in{display:grid;gap:1.25rem}
.hal-hero__in > *{max-width:52rem}
.hal-hero__h1{font-size:clamp(2.25rem,1.1rem + 3.8vw,4.25rem);font-weight:200;line-height:.98;letter-spacing:-.035em;max-width:17ch}
.hal-hero__h1 b{font-weight:800}
.hal-hero__lead{color:#D2DEEA}
.hal-hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}
.hal-hero .footer-arc{position:absolute;right:-4%;bottom:clamp(24px,4vw,48px);width:min(760px,70vw);height:auto;opacity:.5;z-index:-1}
.hal-hero .fa-dot{fill:var(--sky)}
.hal-hero .fa-dot:nth-child(odd){fill:var(--merah)}

.remah{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font:700 .75rem/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--abu-dark)}
.remah a{text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.remah a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.remah [aria-current]{color:var(--sky-glow)}

/* ---------- lembar isi ---------- */
.hal-isi{padding-block:clamp(3.5rem,7vw,6rem) var(--sec)}
.hal-isi .wrap{display:grid;gap:clamp(2.5rem,5vw,4rem)}
.hal-isi h2{font-size:clamp(1.75rem,1.1rem + 2.4vw,3rem)}
.hal-sub{display:grid;gap:1rem;max-width:62rem}
.hal-sub .lead{color:var(--abu)}

/* ---------- bingkai iframe ---------- */
.bingkai{position:relative;background:#fff;border-radius:clamp(18px,2.2vw,26px);overflow:hidden;
  box-shadow:0 34px 70px -46px rgba(6,16,31,.55),inset 0 0 0 1px rgba(14,27,44,.07)}
.bingkai__bar{display:flex;align-items:center;gap:.75rem;min-height:48px;padding:.5rem .75rem .5rem 1.1rem;background:var(--tinta);color:#D2DEEA;
  font:700 .75rem/1.3 var(--f-mono);letter-spacing:.06em}
.bingkai__bar > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bingkai__led{flex:none;width:8px;height:8px;border-radius:50%;background:var(--abu-dark)}
.bingkai.is-siap .bingkai__led{background:var(--hijau);box-shadow:0 0 0 4px rgba(47,208,138,.18)}
.bingkai.is-gagal .bingkai__led{background:#F5B83D}
.bingkai__tab{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:0 .85rem;border-radius:999px;color:#fff;text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);letter-spacing:.04em}
.bingkai__tab:hover{background:rgba(255,255,255,.08)}
.bingkai__bar :focus-visible{outline-color:#fff;outline-offset:2px}
.bingkai__tab svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bingkai__layar{position:relative;background:#fff}
.bingkai iframe{display:block;width:100%;height:var(--tinggi,680px);border:0;background:#fff}
.bingkai__muat{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1rem;background:#fff;color:var(--abu);
  font:600 .9375rem/1.4 var(--f-body);text-align:center;padding:1.5rem;transition:opacity .4s var(--ease),visibility .4s}
.bingkai.is-siap .bingkai__muat{opacity:0;visibility:hidden}
.denyut{position:relative;width:14px;height:14px;border-radius:50%;background:var(--sky)}
.denyut::before,.denyut::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(27,163,221,.5);animation:denyut 1.8s cubic-bezier(.66,0,0,1) infinite}
.denyut::after{animation-delay:.9s}
@keyframes denyut{to{box-shadow:0 0 0 22px rgba(27,163,221,0)}}
.bingkai__muat small{display:block;font:400 .8125rem var(--f-mono);color:var(--abu)}

/* kartu "belum tersedia" (status, atau iframe yang tidak termuat) */
.siaga{display:grid;gap:1.25rem;justify-items:start;padding:clamp(1.75rem,4vw,3rem);min-height:min(var(--tinggi,420px),440px);align-content:center;
  background:linear-gradient(135deg,#fff 0%,var(--awan) 100%)}
.siaga[hidden]{display:none}
.siaga h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.25rem);max-width:22ch}
.siaga p{color:var(--abu);max-width:58ch}
.siaga__aksi{display:flex;flex-wrap:wrap;gap:.75rem}
.btn--garis{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--garis)}
.btn--garis:hover{box-shadow:inset 0 0 0 1.5px var(--tinta)}

/* ---------- kartu info ---------- */
.kartu3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.kartu2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.kartu{display:grid;gap:.9rem;align-content:start;padding:clamp(1.5rem,2.5vw,2rem);border-radius:22px;background:#fff;
  box-shadow:0 18px 40px -30px rgba(10,26,51,.4),inset 0 0 0 1px rgba(14,27,44,.06)}
.kartu h3,.kartu .h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;line-height:1.15;max-width:none}
.kartu__n{font:700 .8125rem var(--f-mono);letter-spacing:.08em;color:var(--sky-ink)}
.kartu p{color:var(--abu)}
.kartu code{font:400 .875em var(--f-mono);padding:.1em .35em;border-radius:6px;background:var(--awan)}
.kartu a{color:var(--sky-ink);font-weight:600;text-underline-offset:3px}
.langkah{display:grid;gap:.6rem;counter-reset:l}
.langkah li{position:relative;padding-left:2.4rem;color:var(--abu);counter-increment:l}
.langkah li::before{content:counter(l,decimal-leading-zero);position:absolute;left:0;top:.1em;font:700 .75rem/1.6 var(--f-mono);color:var(--tinta);
  padding:0 .4rem;border-radius:6px;background:var(--awan);box-shadow:inset 0 0 0 1px var(--garis)}
.daftar{display:grid;gap:.55rem}
.daftar li{position:relative;padding-left:1.4rem;color:var(--abu)}
.daftar li::before{content:"";position:absolute;left:0;top:.72em;width:.7rem;height:2px;border-radius:2px;background:var(--grad)}
@media (max-width:860px){.kartu3,.kartu2{grid-template-columns:1fr}}

/* ---------- pita gelap: hubungi helpdesk ---------- */
.hal-gelap{position:relative;isolation:isolate;overflow:clip;background:var(--malam);color:#fff;padding-block:var(--sec)}
.hal-gelap__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.hal-gelap h2{font-size:clamp(2rem,1.2rem + 3vw,3.5rem);max-width:15ch;margin-top:1rem}
.hal-gelap .lead{color:#D2DEEA;margin-top:1.25rem}
.hal-gelap .daftar{margin-top:1.75rem}
.hal-gelap .daftar li{color:#D2DEEA}
.hal-gelap__kontak{display:grid;gap:.25rem;align-content:start}
.hal-gelap__kontak .btn{margin-top:1.25rem;justify-self:start}
@media (max-width:991px){.hal-gelap__grid{grid-template-columns:1fr}}

/* ---------- alat jaringan: tab statis ---------- */
.alat{display:grid;gap:1.25rem}
.tabs--statis{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs--statis::-webkit-scrollbar{display:none}
.tabs--statis .tab{flex:none}
.tabs--statis .tab:hover{background:#fff}
.tabs--statis .tab[aria-selected="true"]{background:var(--tinta);color:#fff}
.alat__panel[hidden]{display:none}
.alat__catatan{font:400 .8125rem/1.5 var(--f-mono);color:var(--abu)}
.lencana{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .6rem;border-radius:999px;background:#FFF4DC;color:#7A4B00;
  font:700 .6875rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
html:not(.js) .tabs--statis{display:none}
@media (max-width:560px){.tabs--statis{flex-wrap:wrap;width:100%;border-radius:22px}.alat__panel .bingkai iframe{height:calc(var(--tinggi,600px) + 140px)}}

/* ---------- footer (sama dengan beranda; diambil dari template.html oleh build.py) ---------- */
.hal .ftr__cols a[aria-current]{color:#fff}

@media (prefers-reduced-motion:reduce){.denyut::before,.denyut::after{animation:none}}
@media print{
  .bingkai__layar,.tabs--statis,.skip{display:none}
  .hal-hero,.hal-gelap{background:none;color:var(--tinta)}
  .hal-hero__lead,.hal-gelap .lead,.hal-gelap .daftar li,.remah{color:var(--abu)}
  .btn--red,.btn--ghost{background:none!important;color:var(--tinta)!important;box-shadow:inset 0 0 0 1.5px var(--tinta)!important}
}