/* ==========================================================================
   Portal Pelanggan — gaya mandiri (BUKAN Vuexy).
   Ini permukaan produk yang berbeda: aplikasi mobile untuk pelanggan, bukan
   back-office. Karena itu ia punya token warna & tipografinya sendiri sesuai
   rancangan "Win Artha ISP", dan sengaja tidak memuat CSS admin sama sekali —
   halaman jadi ringan di kuota pelanggan.
   ========================================================================== */

/* Font di-host sendiri (pola sama seperti app-fonts.css) supaya portal tetap
   hidup tanpa akses ke Google Fonts dan tak membocorkan IP pelanggan ke pihak
   ketiga. Satu berkas variabel mencakup bobot 400-800. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../vendor/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../vendor/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --wa-ungu: #6d4df2;
    --wa-ungu-tua: #5636e0;
    --wa-ungu-muda: #9d7bff;
    --wa-ungu-tint: #efeafd;
    --wa-ungu-lembut: #f7f4fe;
    --wa-emas: #ffd66b;
    --wa-emas-tua: #ffb63d;
    --wa-nila: #3d2b8f;

    --wa-latar: #f5f4fa;
    --wa-kartu: #fff;
    --wa-garis: #ebe8f4;
    --wa-garis-tegas: #e4e1ef;
    --wa-isian: #faf9fd;

    --wa-teks: #17151f;
    --wa-teks-2: #4a4658;
    --wa-redup: #8b8799;
    --wa-samar: #c4c0d4;

    --wa-hijau: #17b26a;
    --wa-hijau-bg: #eaf7f0;
    --wa-hijau-garis: #bfe8d2;
    --wa-hijau-teks: #0e7a48;
    --wa-merah: #f04438;
    --wa-merah-bg: #fdeeec;
    --wa-merah-garis: #f7d4d0;
    --wa-biru: #2e90fa;
    --wa-biru-bg: #e5f6ff;
    --wa-jingga: #f4772e;
    --wa-jingga-bg: #ffefe4;
    --wa-kuning: #f79009;
    --wa-kuning-bg: #fff6e5;

    /* ---- Skala. Sebelumnya tiap elemen memilih angkanya sendiri: 10 macam
       radius (7,9,11,12,14,16,18,20,24,28) dan ukuran huruf pecahan
       (10.5, 11.5, 12.5). Sudut yang tak berima dan angka pecahan yang
       dibulatkan berbeda-beda oleh tiap peramban adalah penyebab paling umum
       tampilan terasa "belum jadi" — bukan warnanya. ---- */
    --r-1: 12px;   /* elemen kecil di dalam kartu */
    --r-2: 14px;   /* kontrol: tombol, isian, baris */
    --r-3: 16px;   /* kartu & wadah */
    --r-4: 24px;   /* lencana besar, plat logo */
    --r-pil: 999px;

    /* Bayangan berjenjang. Dulu kartu sama sekali tak berbayang (hanya garis)
       sementara tombol memakai glow warna pekat — kartunya jadi terasa datar
       dan tombolnya berteriak. */
    --bayang-1: 0 1px 2px rgba(23, 21, 31, .04), 0 2px 8px rgba(23, 21, 31, .05);
    --bayang-2: 0 4px 16px rgba(23, 21, 31, .08);
    --bayang-3: 0 10px 26px rgba(23, 21, 31, .14);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: #e9e7f2;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--wa-teks);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

a { color: var(--wa-ungu); text-decoration: none; }
a:hover { color: var(--wa-ungu-tua); }

@keyframes wa-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes wa-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wa-spin { to { transform: rotate(360deg); } }

/* ============================ Kerangka ============================ */

.wa-app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--wa-latar);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 60px rgba(40, 20, 120, .12);
}

.wa-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Ruang bawah = tinggi bilah nav + area aman iPhone, supaya isi terakhir tak
   tertutup navigasi mengambang. */
.wa-scroll.has-nav { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

.wa-halaman {
    padding: 14px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: wa-fade .25s ease;
}

.wa-judul { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.wa-subjudul { font-size: 13px; color: var(--wa-redup); margin-top: -10px; }

.wa-bagian { display: flex; flex-direction: column; gap: 12px; }
.wa-bagian-kepala { display: flex; align-items: baseline; gap: 8px; }
.wa-bagian-kepala > :first-child { flex: 1; font-size: 15px; font-weight: 700; }
.wa-bagian-kepala a { font-size: 12px; font-weight: 600; }

.wa-kembali {
    width: 36px; height: 36px; border-radius: 50%;
    background: #fff; border: 1px solid var(--wa-garis);
    display: flex; align-items: center; justify-content: center;
    flex: none; cursor: pointer; color: var(--wa-teks);
}

.wa-kepala-halaman { display: flex; align-items: center; gap: 10px; }

/* ============================ Kartu & pil ============================ */

.wa-kartu {
    background: var(--wa-kartu);
    /* Garis TIPIS + bayangan halus, bukan salah satunya saja. Garis sendirian
       membuat kartu terlihat seperti tabel; bayangan sendirian membuatnya
       mengambang. Keduanya bersama yang membuatnya terasa sebagai kartu. */
    border: 1px solid var(--wa-garis);
    border-radius: var(--r-3);
    box-shadow: var(--bayang-1);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wa-pil {
    border-radius: var(--r-pil); padding: 4px 11px;
    font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap;
}
.wa-pil-hijau { background: var(--wa-hijau-bg); color: var(--wa-hijau); }
.wa-pil-merah { background: var(--wa-merah-bg); color: var(--wa-merah); }
.wa-pil-kuning { background: var(--wa-kuning-bg); color: var(--wa-kuning); }
.wa-pil-ungu { background: var(--wa-ungu-tint); color: var(--wa-ungu); }
.wa-pil-kaca { background: rgba(255, 255, 255, .18); color: #fff; }
.wa-titik { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============================ Tombol ============================ */

.wa-tombol {
    display: block; width: 100%;
    border: none; font-family: inherit;
    background: linear-gradient(135deg, var(--wa-ungu), var(--wa-ungu-muda));
    color: #fff; border-radius: var(--r-2); padding: 15px;
    text-align: center; font-size: 15px; font-weight: 700;
    cursor: pointer; box-shadow: 0 4px 14px rgba(109, 77, 242, .24);
    transition: opacity .15s, transform .15s;
}
.wa-tombol:hover { opacity: .92; }
.wa-tombol:active { transform: scale(.99); }
.wa-tombol:disabled, .wa-tombol[aria-disabled="true"] {
    background: var(--wa-samar); box-shadow: none; cursor: default; opacity: 1;
}
.wa-tombol-gelap { background: var(--wa-teks); box-shadow: none; }
.wa-tombol-garis {
    background: #fff; color: var(--wa-teks);
    border: 1px solid var(--wa-garis-tegas); box-shadow: none;
}
.wa-tombol-bahaya {
    background: #fff; color: var(--wa-merah);
    border: 1px solid var(--wa-merah-garis); box-shadow: none;
    font-size: 14px; padding: 14px;
}
.wa-tombol-kecil {
    display: inline-block; width: auto;
    padding: 8px 16px; font-size: 13px; border-radius: var(--r-pil);
    background: #fff; color: var(--wa-ungu); box-shadow: none;
}

/* ============================ Isian ============================ */

.wa-label { font-size: 12px; font-weight: 600; color: var(--wa-redup); }

.wa-isian {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--wa-garis-tegas); border-radius: var(--r-1);
    padding: 12px 14px; background: var(--wa-isian);
}
.wa-isian:focus-within { border-color: var(--wa-ungu); background: #fff; }
.wa-isian .wa-awalan {
    font-size: 14px; font-weight: 700; color: var(--wa-teks);
    border-right: 1px solid var(--wa-garis-tegas); padding-right: 10px;
}
.wa-isian input {
    border: none; background: transparent; outline: none;
    font-size: 15px; font-family: inherit; color: var(--wa-teks); flex: 1;
    min-width: 0;
}

.wa-teksarea {
    border: 1px solid var(--wa-garis-tegas); border-radius: var(--r-1);
    padding: 12px 14px; font-size: 13px; font-family: inherit;
    min-height: 92px; resize: none; outline: none; background: var(--wa-isian);
    color: var(--wa-teks); width: 100%;
}
.wa-teksarea:focus { border-color: var(--wa-ungu); background: #fff; }

.wa-otp { display: flex; gap: 8px; justify-content: center; padding: 6px 0; }
.wa-otp input {
    width: 48px; height: 60px; border-radius: var(--r-2);
    border: 1.5px solid var(--wa-garis-tegas); background: var(--wa-isian);
    text-align: center; font-size: 24px; font-weight: 800;
    font-family: inherit; color: var(--wa-teks); outline: none;
    -moz-appearance: textfield;
}
.wa-otp input::-webkit-outer-spin-button,
.wa-otp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wa-otp input:focus { border-color: var(--wa-ungu); background: var(--wa-ungu-lembut); }
.wa-otp input.terisi { border-color: var(--wa-ungu); background: var(--wa-ungu-lembut); }

/* Pilihan berbentuk kartu (paket, cara bayar, langganan) */
.wa-pilih {
    background: #fff; border: 1.5px solid var(--wa-garis);
    border-radius: var(--r-2); padding: 14px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: border-color .15s, background .15s;
    width: 100%; text-align: left; font-family: inherit; color: inherit;
}
.wa-pilih.aktif { border-color: var(--wa-ungu); background: var(--wa-ungu-lembut); }
.wa-radio {
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    border: 2px solid #d9d5e8;
    display: flex; align-items: center; justify-content: center;
}
.wa-pilih.aktif .wa-radio { border-color: var(--wa-ungu); }
.wa-radio i { width: 10px; height: 10px; border-radius: 50%; background: var(--wa-ungu); opacity: 0; transition: opacity .15s; }
.wa-pilih.aktif .wa-radio i { opacity: 1; }

.wa-cip {
    border: 1.5px solid var(--wa-garis-tegas); background: #fff;
    color: var(--wa-teks-2); border-radius: var(--r-pil); padding: 7px 14px;
    font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.wa-cip.aktif { border-color: var(--wa-ungu); background: var(--wa-ungu-tint); color: var(--wa-ungu); }

/* ============================ Pesan ============================ */

.wa-nota {
    border-radius: var(--r-1); padding: 12px 14px;
    font-size: 13px; font-weight: 600; line-height: 1.5;
    animation: wa-pop .25s ease;
}
.wa-nota-sukses { background: var(--wa-hijau-bg); border: 1px solid var(--wa-hijau-garis); color: var(--wa-hijau-teks); }
.wa-nota-gagal { background: var(--wa-merah-bg); border: 1px solid var(--wa-merah-garis); color: #a4241a; }
.wa-nota-info { background: var(--wa-ungu-tint); border: 1px solid #ded3fb; color: var(--wa-teks-2); font-weight: 500; }

.wa-kosong {
    text-align: center; color: var(--wa-redup);
    font-size: 13px; padding: 26px 10px; line-height: 1.6;
}

/* ============================ Bilah bawah ============================ */

.wa-nav {
    position: sticky; bottom: 0;
    background: #fff; border-top: 1px solid var(--wa-garis);
    display: flex; align-items: flex-end;
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
}
.wa-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--wa-redup); font-size: 11px; font-weight: 700; padding: 4px 0;
}
.wa-nav a.aktif { color: var(--wa-ungu); }

/* Tombol bayar mengambang di tengah nav */
.wa-nav-tengah { flex: 1; position: relative; height: 46px; }
.wa-nav-bayar {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--wa-ungu), var(--wa-ungu-muda));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(109, 77, 242, .26);
    border: 4px solid var(--wa-latar);
    transition: transform .15s;
}
.wa-nav-bayar:hover { transform: translateX(-50%) scale(1.05); }
.wa-nav-tengah span {
    /* bottom disamakan dengan padding-bawah `.wa-nav a` (4px) supaya label
       "Bayar" duduk SEBARIS dengan Beranda/Paket/Riwayat/Akun. Sebelumnya
       -2px, jadi menggantung ~6px lebih rendah dari tetangganya — cukup untuk
       terbaca miring walau tak langsung ketahuan penyebabnya. */
    position: absolute; bottom: 4px; left: 0; right: 0; text-align: center;
    font-size: 11px; font-weight: 700; color: var(--wa-redup);
}

/* ============================ Ikon bulat ============================ */

.wa-ikon {
    width: 38px; height: 38px; border-radius: var(--r-1); flex: none;
    display: flex; align-items: center; justify-content: center;
}
.wa-ikon-ungu { background: var(--wa-ungu-tint); color: var(--wa-ungu); }
.wa-ikon-hijau { background: var(--wa-hijau-bg); color: var(--wa-hijau); }
.wa-ikon-biru { background: var(--wa-biru-bg); color: var(--wa-biru); }
.wa-ikon-jingga { background: var(--wa-jingga-bg); color: var(--wa-jingga); }
.wa-ikon-kuning { background: var(--wa-kuning-bg); color: var(--wa-kuning); }
.wa-ikon-merah { background: var(--wa-merah-bg); color: var(--wa-merah); }

.wa-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--wa-ungu), #c9b7ff);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
}

/* ============================ Beranda ============================ */

.wa-atas { display: flex; align-items: center; gap: 10px; }
.wa-atas .wa-nama { font-size: 15px; font-weight: 700; line-height: 1.2; }
.wa-atas .wa-kode { font-size: 12px; color: var(--wa-redup); }
.wa-atas-tombol {
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; border: 1px solid var(--wa-garis);
    display: flex; align-items: center; justify-content: center;
    color: var(--wa-teks); position: relative; flex: none;
}

.wa-kartu-langganan {
    background: linear-gradient(135deg, var(--wa-ungu), var(--wa-ungu-muda));
    border-radius: var(--r-3); padding: 16px 18px;
    display: flex; flex-direction: column; gap: 12px;
    color: #fff; box-shadow: 0 4px 14px rgba(109, 77, 242, .22);
}
.wa-kartu-langganan.isolir { background: linear-gradient(135deg, #b4231a, #f04438); box-shadow: 0 4px 14px rgba(240, 68, 56, .22); }
.wa-kartu-langganan .wa-angka { font-size: 30px; font-weight: 800; letter-spacing: -1px; }
.wa-bar { height: 6px; border-radius: var(--r-pil); background: rgba(255, 255, 255, .22); overflow: hidden; }
.wa-bar > i { display: block; height: 100%; border-radius: var(--r-pil); background: #fff; }
.wa-kartu-kaki {
    display: flex; align-items: center; gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 12px;
}

.wa-aksi {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.wa-aksi a {
    background: #fff; border: 1px solid var(--wa-garis); border-radius: var(--r-2);
    padding: 12px 4px; display: flex; flex-direction: column;
    align-items: center; gap: 8px; transition: transform .15s;
    color: var(--wa-teks);
}
.wa-aksi a:hover { transform: translateY(-2px); color: var(--wa-teks); }
.wa-aksi .wa-ikon { width: 36px; height: 36px; }
.wa-aksi span { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.25; }

.wa-layanan {
    background: #fff; border: 1px solid var(--wa-garis); border-radius: var(--r-3);
    padding: 14px 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px;
}
.wa-layanan a { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--wa-teks-2); }
.wa-layanan a:hover { opacity: .75; color: var(--wa-teks-2); }
.wa-layanan .wa-glif {
    width: 40px; height: 40px; border-radius: var(--r-1);
    border: 1px solid var(--wa-garis); background: var(--wa-isian);
    display: flex; align-items: center; justify-content: center; color: var(--wa-ungu);
}
.wa-layanan span { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.25; }

/* Deretan kartu yang bisa digeser.
   Margin negatif + padding = deretannya boleh menyentuh tepi layar saat digeser
   (kartu berikutnya "mengintip"), tapi kartu pertama tetap sejajar dengan judul
   di atasnya.

   `scroll-padding-inline` WAJIB ada dan itu bukan hiasan: dengan
   `scroll-snap-type` menyala, peramban langsung mengunci ke titik jepret kartu
   pertama saat halaman dimuat — yaitu 18px dari kiri — sehingga ia menggulir
   sendiri sejauh 18px dan MEMAKAN habis padding kiri tadi. Akibatnya kartu
   menempel ke tepi dan terlihat tak rapi. scroll-padding memberi tahu peramban
   bahwa 18px itu bagian dari kerangkanya, bukan ruang yang boleh digulung. */
.wa-geser {
    display: flex; gap: 12px; overflow-x: auto;
    margin: 0 -18px; padding: 2px 18px 6px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
}
.wa-geser::-webkit-scrollbar { height: 0; }
.wa-tawaran {
    flex: none; width: 238px; border-radius: var(--r-3); scroll-snap-align: start;
    background: linear-gradient(135deg, var(--wa-nila), var(--wa-ungu));
    color: #fff; padding: 16px; display: flex; flex-direction: column; gap: 8px;
    box-shadow: 0 4px 14px rgba(61, 43, 143, .22);
}
.wa-tawaran.varian { background: linear-gradient(135deg, #8a63f5, #c9b7ff); box-shadow: none; }
.wa-tawaran .wa-kecepatan { font-size: 24px; font-weight: 800; }

/* ==================== Pelacak progres laporan ==================== */
/* Bentuknya seperti pelacak pesanan antar — itu memang bentuk yang sudah
   dikenali orang, dan pertanyaan pelanggan setelah melapor juga sama persis:
   "sampai mana?". Empat tahap saja; rincian kerja teknisi jadi keterangan di
   bawah tahapnya, bukan tahap tersendiri, supaya tak memanjang di layar HP. */
.wa-lacak { display: flex; flex-direction: column; }
.wa-lacak-baris {
    display: flex; align-items: flex-start; gap: 10px;
    padding-bottom: 9px; position: relative;
}
.wa-lacak-baris:last-child { padding-bottom: 0; }
/* Garis penyambung antar-titik, digambar dari titiknya ke bawah. */
.wa-lacak-baris:not(:last-child)::before {
    content: ''; position: absolute; left: 8px; top: 18px; bottom: 0;
    width: 2px; background: var(--wa-garis);
}
.wa-lacak-baris.lewat:not(:last-child)::before { background: var(--wa-hijau); }
.wa-lacak-titik {
    width: 18px; height: 18px; border-radius: 50%; flex: none; z-index: 1;
    background: #fff; border: 2px solid var(--wa-garis);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #fff; line-height: 1;
}
.wa-lacak-baris.lewat .wa-lacak-titik { background: var(--wa-hijau); border-color: var(--wa-hijau); }
.wa-lacak-baris.aktif .wa-lacak-titik {
    background: var(--wa-ungu); border-color: var(--wa-ungu);
    box-shadow: 0 0 0 4px rgba(109, 77, 242, .18);
}
.wa-lacak-judul { font-size: 13px; font-weight: 600; color: var(--wa-redup); }
.wa-lacak-ket { font-size: 11px; color: var(--wa-samar); }
.wa-lacak-baris.lewat .wa-lacak-judul { color: var(--wa-teks-2); }
.wa-lacak-baris.aktif .wa-lacak-judul { color: var(--wa-teks); font-weight: 700; }
.wa-lacak-baris.aktif .wa-lacak-ket { color: var(--wa-ungu); font-weight: 600; }

/* Kartu laporan yang bisa dilipat. Laporan selesai tampil terlipat; yang masih
   berjalan terbuka. Pakai <details> bawaan peramban — tanpa JS. */
.wa-lipat > summary {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer; list-style: none;
}
.wa-lipat > summary::-webkit-details-marker { display: none; }
.wa-lipat[open] > summary { margin-bottom: 10px; }
.wa-lipat-tanda {
    flex: none; color: var(--wa-samar); display: flex; align-items: center;
    transition: transform .18s ease;
}
.wa-lipat[open] .wa-lipat-tanda { transform: rotate(180deg); }

/* Jam di kanan tiap peristiwa. Angka bertabular supaya kolomnya lurus. */
.wa-lacak-jam {
    font-size: 11px; color: var(--wa-samar);
    font-variant-numeric: tabular-nums; flex: none;
}
.wa-lacak-baris.aktif .wa-lacak-jam { color: var(--wa-ungu); font-weight: 600; }

.wa-kabar {
    background: var(--wa-ungu-lembut); border-radius: var(--r-1); padding: 10px 12px;
    font-size: 12px; color: var(--wa-teks-2); line-height: 1.5;
}

/* ============================ Riwayat ============================ */

.wa-tab {
    display: flex; background: var(--wa-garis); border-radius: var(--r-1); padding: 4px; gap: 4px;
}
.wa-tab a {
    flex: 1; text-align: center; padding: 9px; border-radius: var(--r-1);
    font-size: 13px; font-weight: 700; color: var(--wa-redup);
}
.wa-tab a.aktif { background: #fff; color: var(--wa-teks); box-shadow: var(--bayang-1); }

.wa-grafik { display: flex; align-items: flex-end; gap: 10px; height: 140px; }
.wa-grafik > div {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
    height: 100%; justify-content: flex-end;
}
.wa-grafik .wa-nilai { font-size: 11px; font-weight: 700; color: var(--wa-ungu); }
.wa-grafik .wa-batang {
    width: 100%; max-width: 26px; border-radius: 7px 7px 3px 3px;
    background: #e4defa; min-height: 4px;
}
.wa-grafik .wa-batang.kini { background: linear-gradient(180deg, var(--wa-ungu), var(--wa-ungu-muda)); }
.wa-grafik .wa-bulan { font-size: 11px; color: var(--wa-redup); font-weight: 600; }

.wa-baris {
    background: #fff; border: 1px solid var(--wa-garis); border-radius: var(--r-2);
    padding: 12px 14px; display: flex; align-items: center; gap: 12px;
    color: var(--wa-teks);
}
.wa-baris .wa-isi { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Dipakai di dalam .wa-baris DAN di kartu pelacak laporan — jangan dikunci ke
   .wa-baris saja, kalau tidak judul & nomor tiket tampil sama besar. */
.wa-utama { font-size: 13px; font-weight: 700; }
.wa-kedua { font-size: 11px; color: var(--wa-redup); }
.wa-baris .wa-kanan { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }

/* ============================ Uji kecepatan ============================ */

.wa-meter {
    width: 200px; height: 200px; border-radius: 50%;
    background: conic-gradient(var(--wa-ungu) 0deg, var(--wa-ungu-tint) 0deg);
    display: flex; align-items: center; justify-content: center;
    transition: background .12s linear;
}
.wa-meter-dalam {
    width: 168px; height: 168px; border-radius: 50%; background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.wa-meter-angka { font-size: 40px; font-weight: 800; letter-spacing: -2px; line-height: 1; }
.wa-meter-satuan { font-size: 12px; color: var(--wa-redup); font-weight: 600; }

.wa-kotak-2 { display: flex; gap: 12px; }
.wa-kotak-2 > div {
    flex: 1; background: #fff; border: 1px solid var(--wa-garis); border-radius: var(--r-2);
    padding: 14px; display: flex; flex-direction: column; gap: 3px; align-items: center;
}
.wa-kotak-2 .wa-kt { font-size: 11px; color: var(--wa-redup); font-weight: 600; }
.wa-kotak-2 .wa-kv { font-size: 17px; font-weight: 800; }

/* ============================ FAQ ============================ */

.wa-faq { background: #fff; border: 1px solid var(--wa-garis); border-radius: var(--r-2); overflow: hidden; }
.wa-faq > summary {
    padding: 14px 16px; display: flex; align-items: center; gap: 10px;
    cursor: pointer; font-size: 13px; font-weight: 700; list-style: none;
}
.wa-faq > summary::-webkit-details-marker { display: none; }
.wa-faq > summary > span { flex: 1; }
.wa-faq > summary svg { transition: transform .2s; color: var(--wa-redup); flex: none; }
.wa-faq[open] > summary svg { transform: rotate(180deg); }
.wa-faq .wa-jawab { padding: 0 16px 14px; font-size: 13px; color: var(--wa-redup); line-height: 1.65; }

/* ============================ Masuk / OTP ============================ */

.wa-masuk {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
    background: linear-gradient(160deg, var(--wa-ungu-tua) 0%, var(--wa-ungu) 45%, var(--wa-ungu-muda) 100%);
    position: relative; overflow: hidden;
}
.wa-masuk .wa-bulat-1 {
    position: absolute; top: -70px; right: -70px; width: 220px; height: 220px;
    border-radius: 50%; background: rgba(255, 214, 107, .22);
}
.wa-masuk .wa-bulat-2 {
    position: absolute; top: 120px; left: -50px; width: 140px; height: 140px;
    border-radius: 50%; background: rgba(255, 255, 255, .08);
}
.wa-masuk-atas {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; padding: 40px 24px 20px; position: relative;
    text-align: center;
}
.wa-lencana {
    width: 76px; height: 76px; border-radius: var(--r-4);
    background: linear-gradient(135deg, var(--wa-emas), var(--wa-emas-tua));
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--bayang-3); overflow: hidden;
}
.wa-lencana img { width: 100%; height: 100%; object-fit: contain; }

/* Plat putih untuk logo perusahaan.
   Logo Win Artha memanjang (rasio ±3:1) dan baris "INTERNET SERVICE PROVIDER"
   berwarna gelap — kalau ditaruh langsung di atas gradien ungu, teksnya
   hilang dan kalau dijejalkan ke kotak 76px ia terpotong. Jadi logo diberi
   alas putihnya sendiri, ditampilkan utuh. */
.wa-plat-logo {
    background: #fff;
    border-radius: var(--r-4);
    padding: 16px 22px;
    box-shadow: var(--bayang-3);
    width: min(268px, 74vw);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wa-plat-logo img { width: 100%; height: auto; display: block; }

/* Lambang saja (tanpa wordmark). Warnanya terang, jadi ia berdiri sendiri di
   atas gradien ungu — tak butuh alas putih dan terasa lebih lapang. */
.wa-lambang {
    width: min(150px, 42vw);
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .22));
}
.wa-merek { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.5px; }
.wa-slogan {
    background: rgba(255, 214, 107, .18); border: 1px solid rgba(255, 214, 107, .45);
    color: #ffe6a3; border-radius: var(--r-pil); padding: 5px 14px;
    font-size: 12px; font-weight: 700;
}
.wa-lembar {
    background: #fff; border-radius: 28px 28px 0 0;
    padding: 26px 24px calc(34px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 -8px 30px rgba(40, 20, 120, .25); position: relative;
}
.wa-pemisah { display: flex; align-items: center; gap: 12px; padding: 2px 0; }
.wa-pemisah > i { flex: 1; height: 1px; background: var(--wa-garis); }
.wa-pemisah > span { font-size: 11px; color: var(--wa-samar); font-weight: 600; }

.wa-verifikasi {
    min-height: 100vh; min-height: 100dvh; background: #fff;
    padding: 46px 24px calc(34px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 16px;
    animation: wa-fade .25s ease;
}
.wa-lencana-kecil {
    width: 58px; height: 58px; border-radius: var(--r-3);
    background: linear-gradient(135deg, var(--wa-emas), var(--wa-emas-tua));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(255, 182, 61, .26);
}

/* ============================ Berhasil ============================ */

.wa-berhasil {
    min-height: 100vh; min-height: 100dvh; background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 15px; padding: 32px; text-align: center; animation: wa-pop .3s ease;
}
.wa-centang {
    width: 88px; height: 88px; border-radius: 50%;
    background: linear-gradient(135deg, var(--wa-hijau), #3ccf8e);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(23, 178, 106, .26);
}
.wa-kode-ref {
    background: var(--wa-isian); border: 1px dashed var(--wa-garis-tegas);
    border-radius: var(--r-1); padding: 12px 20px; font-size: 12px; color: var(--wa-redup);
}
.wa-kode-ref b { color: var(--wa-teks); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ============================ Kecil-kecil ============================ */

.wa-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wa-redup { color: var(--wa-redup); }
.wa-kecil { font-size: 12px; }
.wa-tengah { text-align: center; }
.wa-tebal { font-weight: 800; }
.wa-potong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-rinci { display: flex; font-size: 13px; gap: 10px; }
.wa-rinci > :first-child { flex: 1; color: var(--wa-redup); }
.wa-rinci > :last-child { font-weight: 600; text-align: right; }
.wa-putus { border-top: 1px dashed var(--wa-garis-tegas); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }

.wa-memuat {
    width: 16px; height: 16px; border-radius: 50%; display: inline-block;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
    animation: wa-spin .7s linear infinite; vertical-align: -3px;
}