/* Halaman myip/ (Cek koneksi). Dimuat SETELAH site.css dan halaman.css; hanya menambah komponen khusus halaman ini. */

/* ---------- papan IP di pembuka ---------- */
.ippapan{display:grid;gap:.5rem;margin-top:.5rem;padding:clamp(1.25rem,3vw,2rem);border-radius:22px;max-width:46rem;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line-dark)}
.ippapan__k{font:700 .75rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--abu-dark)}
.ippapan__ip{font:700 clamp(1.6rem,.9rem + 4.4vw,3.5rem)/1.08 var(--f-mono);letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;max-width:none}
.ippapan__ip.is-panjang{font-size:clamp(1.05rem,.7rem + 1.9vw,1.75rem);letter-spacing:0}
.ippapan__isp{color:#D2DEEA;min-height:1.6em;max-width:none}
.ippapan .hal-hero__cta{margin-top:.75rem}
.btn[disabled]{opacity:.55;cursor:default}
/* tombol di dalam kartu: jangan ikut warna tautan .kartu a dari halaman.css */
.kartu a.btn{font-weight:600;text-decoration:none}
.kartu a.btn--red{color:#fff}
.kartu a.btn--garis{color:var(--tinta)}

/* ---------- lencana status ---------- */
.cip{display:inline-flex;align-items:center;padding:.22rem .55rem;border-radius:999px;font:700 .6875rem/1.2 var(--f-mono);letter-spacing:.06em;
  text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.cip--ok{background:#DDF6E9;color:#0A6B42}
.cip--awas{background:#FFF1D2;color:#7A4B00}
.cip--gagal{background:#FDE4E5;color:#A3151B}
.cip--netral{background:var(--awan);color:var(--abu);box-shadow:inset 0 0 0 1px var(--garis)}
.ippapan .cip--ok{background:rgba(47,208,138,.2);color:#9AF2CB}
.ippapan .cip--netral{background:rgba(255,255,255,.1);color:#D2DEEA;box-shadow:none}

/* ---------- daftar rincian ---------- */
.info{display:grid;margin:0}
.info > div{display:grid;gap:.15rem;padding:.65rem 0;border-top:1px solid var(--garis)}
.info > div:first-child{border-top:0;padding-top:0}
.info dt{font:700 .6875rem/1.5 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--abu)}
.info dd{margin:0;font:400 .9375rem/1.5 var(--f-mono);color:var(--tinta);overflow-wrap:anywhere}
.info dd.is-muat{color:var(--abu)}
.info dd small{display:block;margin-top:.15rem;font:400 .8125rem/1.45 var(--f-body);color:var(--abu)}
.info dd .cip{margin-left:.4rem}
@media (max-width:860px){
  .info > div{grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);gap:.75rem;align-items:baseline}
}
@media (max-width:420px){.info > div{grid-template-columns:1fr;gap:.15rem}}

/* ---------- pilihan sambungan ---------- */
.pilih{border:0;padding:0;margin:.25rem 0 0;min-width:0;display:grid;gap:.6rem}
.pilih legend{padding:0;margin-bottom:.6rem;font:700 .6875rem/1.5 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--abu)}
.pilih__opsi{display:flex;flex-wrap:wrap;gap:.4rem}
.pilih label{position:relative;display:inline-flex;cursor:pointer}
.pilih input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pilih span{display:inline-flex;align-items:center;min-height:42px;padding:0 1rem;border-radius:999px;background:var(--awan);color:var(--tinta);
  box-shadow:inset 0 0 0 1px var(--garis);font:600 .9375rem var(--f-body);transition:background-color .2s,color .2s}
.pilih input:checked + span{background:var(--tinta);color:#fff;box-shadow:none}
.pilih input:focus-visible + span{outline:3px solid var(--tinta);outline-offset:3px}

/* ---------- isian & uji akses ---------- */
.isian{display:grid;gap:.4rem;max-width:none}
.isian label{font:700 .6875rem/1.5 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--abu)}
.isian2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.isian input,.isian textarea,.uji__form input{width:100%;min-height:48px;padding:.7rem .9rem;border:0;border-radius:12px;background:#fff;color:var(--tinta);
  box-shadow:inset 0 0 0 1.5px var(--garis);font:400 1rem/1.4 var(--f-body)}
.isian input::placeholder,.uji__form input::placeholder{color:#7C8CA0}
.isian textarea{min-height:17rem;resize:vertical;background:var(--awan);font:400 .8125rem/1.6 var(--f-mono);white-space:pre-wrap}
.uji__form{display:flex;flex-wrap:wrap;gap:.6rem}
.uji__form input{flex:1 1 14rem;font-family:var(--f-mono);font-size:.9375rem}
.uji__hasil{display:grid;gap:.4rem;list-style:none;padding:0;margin:0}
.uji__hasil:empty{display:none}
.uji__hasil li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .75rem;padding:.65rem .9rem;border-radius:12px;background:var(--awan);
  font:400 .875rem/1.4 var(--f-mono);color:var(--tinta)}
.uji__hasil li.is-utama{box-shadow:inset 0 0 0 1.5px var(--tinta);background:#fff}
.uji__hasil li b{font-weight:700;overflow-wrap:anywhere;min-width:0}
.uji__hasil small{flex-basis:100%;font:400 .8125rem/1.45 var(--f-body);color:var(--abu)}
@media (max-width:560px){.isian2{grid-template-columns:1fr}}

@media print{
  .ippapan{background:none;box-shadow:inset 0 0 0 1px var(--garis)}
  .ippapan__ip,.ippapan__isp,.ippapan__k{color:var(--tinta)}
  .uji__form,.siaga__aksi,.pilih,.ippapan .hal-hero__cta{display:none}
}