/* =====================================================================
   Portal pelanggan — terasa seperti aplikasi HP: satu kolom, tab bawah
   dengan pil marun yang bergeser. Di layar lebar tetap satu kolom di
   tengah supaya tidak melebar kosong.
   ===================================================================== */
:root { --lengkung: cubic-bezier(.2, .8, .2, 1); --lebar-portal: 560px; --tinggi-tab: 68px; }
.pt { background: var(--bg); min-height: 100dvh; font-size: 15px; }
.pt a { text-decoration: none; }
.pt-app { min-height: 100dvh; }
.pt-muat, .pt-tengah { min-height: 100dvh; display: grid; place-items: center; padding: 24px; color: var(--aksen); }
.pt-muat .putar { width: 28px; height: 28px; border-width: 3px; }
.pt-noscript { padding: 24px; text-align: center; }
.pt-tombol-besar { min-height: 50px; border-radius: 14px; font-size: 15px; }
.pt .tombol:not(.tombol--hantu) { box-shadow: var(--bayang-aksen); }
.pt-kapital { text-transform: uppercase; }
.pt-kapital::placeholder { text-transform: none; }

/* ---------------------------------------------------------- merek */
.pt-merek { display: inline-flex; align-items: center; gap: 10px; color: var(--teks); font-weight: 800; font-size: 17px; }
.pt-merek__logo {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--aksen-isi); color: #fff; font-weight: 800; box-shadow: var(--bayang-aksen);
}
.pt-merek__logo--besar { width: 60px; height: 60px; border-radius: 18px; font-size: 28px; }

/* ---------------------------------------------------------- masuk */
.pt-masuk { position: relative; min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 72px 20px 32px; isolation: isolate; overflow: hidden; }
.pt-masuk__latar {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(520px 320px at 100% 0%, color-mix(in srgb, var(--marun-400) 16%, transparent), transparent 70%),
    radial-gradient(460px 300px at 0% 100%, color-mix(in srgb, var(--marun-100) 80%, transparent), transparent 70%);
}
.pt-masuk__kembali { position: absolute; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 6px; color: var(--teks-2); font-weight: 600; font-size: 14px; }
.pt-masuk__kembali:hover { color: var(--aksen); }
.pt-masuk__kartu {
  width: min(420px, 100%); display: grid; gap: 16px; padding: 32px 28px; border-radius: 28px;
  background: var(--permukaan); border: 1px solid var(--garis); box-shadow: 0 40px 80px -48px rgba(80, 30, 25, .45);
  animation: naik .45s var(--lengkung);
}
.pt-masuk__merek { display: flex; justify-content: center; }
.pt-masuk h1 { text-align: center; font-size: 26px; letter-spacing: -.02em; }
.pt-masuk__sub { text-align: center; color: var(--teks-2); margin-top: -6px; }
.pt-masuk__form { display: grid; gap: 16px; }
.pt-masuk .masukan { min-height: 50px; border-radius: 14px; font-size: 16px; }
.pt-wa { display: flex; align-items: stretch; border: 1px solid var(--garis); border-radius: 14px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.pt-wa:focus-within { border-color: var(--aksen); box-shadow: var(--cincin-fokus); }
.pt-wa span { display: grid; place-items: center; padding: 0 14px; background: var(--permukaan-2); color: var(--teks-2); font-weight: 700; border-right: 1px solid var(--garis); }
.pt-wa .masukan { border: 0; border-radius: 0; box-shadow: none !important; }
.pt-otp { text-align: center; font: 700 26px var(--mono) !important; letter-spacing: .5em; padding-left: .5em !important; }
.pt-masuk__baris { display: flex; justify-content: space-between; gap: 12px; }
.pt-tautan { border: 0; background: none; color: var(--aksen); font-weight: 600; cursor: pointer; padding: 4px 0; }
.pt-tautan:disabled { color: var(--teks-3); cursor: default; }
.pt-masuk__kaki { color: var(--teks-2); font-size: 13.5px; text-align: center; max-width: 420px; }
.pt-masuk__kaki a { font-weight: 600; }

/* ------------------------------------------------------- cangkang */
.pt-atas {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  width: min(var(--lebar-portal), 100%); margin-inline: auto; padding: 14px 20px;
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pt-ava {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--aksen-lembut); color: var(--aksen); font-weight: 800; font-size: 14px;
}
.pt-ava--besar { width: 64px; height: 64px; font-size: 22px; background: var(--aksen-isi); color: #fff; box-shadow: var(--bayang-aksen); }
.pt-isi {
  display: grid; gap: 16px; width: min(var(--lebar-portal), 100%); margin-inline: auto;
  padding: 4px 20px calc(var(--tinggi-tab) + 32px + env(safe-area-inset-bottom));
}
.pt-isi--masuk { animation: naik .35s var(--lengkung); }
@keyframes naik { from { opacity: 0; transform: translateY(10px); } }

/* tab bawah: pil marun bergeser seperti pemilih modul aplikasi staf */
.pt-tab {
  --i: 0; --n: 4; --celah: 6px;
  position: fixed; z-index: 30; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); translate: -50% 0;
  display: grid; grid-template-columns: repeat(var(--n), 1fr); isolation: isolate;
  width: min(calc(var(--lebar-portal) - 40px), calc(100% - 24px)); height: var(--tinggi-tab); padding: var(--celah);
  border-radius: 22px; background: color-mix(in srgb, var(--permukaan) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--garis); box-shadow: 0 18px 40px -18px rgba(60, 25, 20, .35);
}
.pt-tab::before {
  content: ''; position: absolute; z-index: -1; top: var(--celah); bottom: var(--celah); left: var(--celah);
  width: calc((100% - 2 * var(--celah)) / var(--n)); border-radius: 16px;
  background: var(--aksen-isi); box-shadow: var(--bayang-aksen);
  transform: translateX(calc(var(--i) * 100%)); transition: transform .4s var(--lengkung);
}
.pt-tab__b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 16px; color: var(--teks-2); font-size: 11.5px; font-weight: 700; transition: color .25s; }
.pt-tab__b[aria-current="page"] { color: #fff; }
.pt-tab__b svg { transition: transform .35s var(--lengkung); }
.pt-tab__b[aria-current="page"] svg { transform: translateY(-1px) scale(1.05); }

/* ------------------------------------------------------- beranda */
.pt-sapa { padding: 8px 0 2px; display: grid; gap: 4px; }
.pt-sapa p { color: var(--teks-2); }
.pt-sapa h1 { font-size: 28px; letter-spacing: -.03em; line-height: 1.15; }
.pt-sapa .lencana { justify-self: start; margin-top: 6px; }
.pt-judul-bagian { font-size: 15px; margin: 6px 0 -4px; }

.pt-kartu { padding: 20px; border-radius: 20px; background: var(--permukaan); border: 1px solid var(--garis); box-shadow: var(--bayang-1); display: grid; gap: 14px; }
.pt-kartu__kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pt-kartu__kepala h2 { font-size: 16px; }

.pt-status { --warna: var(--ok); padding: 20px; border-radius: 24px; color: #fff; display: grid; gap: 18px; background: var(--aksen-isi); box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--marun-600) 70%, transparent); }
.pt-status__atas { display: flex; gap: 14px; align-items: flex-start; }
.pt-status__atas > div { flex: 1; }
.pt-status__atas b { font-size: 18px; display: block; }
.pt-status__atas p { color: rgba(255,255,255,.8); font-size: 13.5px; margin-top: 2px; }
.pt-status__denyut { position: relative; width: 14px; height: 14px; margin-top: 6px; border-radius: 50%; background: var(--warna); box-shadow: 0 0 0 3px rgba(255,255,255,.9); flex: none; }
.pt-status__denyut::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--warna); animation: gelombang 2s ease-out infinite; }
@keyframes gelombang { to { transform: scale(3.2); opacity: 0; } }
.pt-status--waspada { --warna: #F2B544; }
.pt-status--bahaya { --warna: #FF6B5E; }
.pt-status--polos { --warna: #D6C9BB; }
.pt-status--polos .pt-status__denyut::after { animation: none; }
.pt-status__segar { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); color: #fff; }
.pt-status__segar:hover { background: rgba(255,255,255,.24); }
.pt-berputar svg { animation: putar .8s linear infinite; }
.pt-status__kisi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.18); }
.pt-status__kisi > div { padding: 12px; background: rgba(40, 10, 8, .18); display: grid; gap: 2px; min-width: 0; }
.pt-status__kisi small { color: rgba(255,255,255,.7); font-size: 11.5px; }
.pt-status__kisi b { font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pt-status__kisi .teks-2 { color: rgba(255,255,255,.7); font-size: 11.5px; font-weight: 500; }
.pt-titik { width: 8px; height: 8px; border-radius: 50%; background: #9BE07A; flex: none; }
.pt-titik--waspada { background: #F2B544; }
.pt-titik--bahaya { background: #FF6B5E; }
.pt-titik--polos { background: #D6C9BB; }

.pt-pita-tiket { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--waspada-bg); color: var(--waspada); }
.pt-pita-tiket span { flex: 1; display: grid; }
.pt-pita-tiket small { color: var(--teks-2); }

.pt-tagihan { grid-template-columns: 1fr 1fr; align-items: center; }
.pt-tagihan small { display: block; color: var(--teks-2); font-size: 12.5px; }
.pt-tagihan b { font-size: 20px; letter-spacing: -.02em; }
.pt-tagihan__tempo { padding-left: 16px; border-left: 1px solid var(--garis); }
.pt-tagihan__tempo b { font-size: 16px; }
.pt-tagihan__tempo span { display: block; font-size: 12.5px; color: var(--teks-2); }
.pt-tagihan__tempo--dekat span { color: var(--bahaya); font-weight: 700; }

.pt-aksi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pt-aksi__b {
  display: grid; gap: 2px; padding: 16px; border-radius: 20px; color: var(--teks);
  background: var(--permukaan); border: 1px solid var(--garis); box-shadow: var(--bayang-1);
  transition: transform .2s var(--lengkung), box-shadow .2s, border-color .2s;
}
.pt-aksi__b:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--aksen) 35%, var(--garis)); box-shadow: 0 16px 32px -20px rgba(80, 30, 25, .4); }
.pt-aksi__b:active { transform: scale(.98); }
.pt-aksi__ikon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 14px; background: var(--aksen-lembut); color: var(--aksen); }
.pt-aksi__b small { color: var(--teks-2); font-size: 12.5px; }
.pt-tips { grid-template-columns: auto 1fr; align-items: start; background: var(--permukaan-2); box-shadow: none; }
.pt-tips svg { color: var(--aksen); margin-top: 2px; }
.pt-tips p { font-size: 13.5px; color: var(--teks-2); }
.pt-tips b { color: var(--teks); }

/* ---------------------------------------------------------- wifi */
.pt-wifi-kini { display: flex; gap: 16px; align-items: center; padding: 20px; border-radius: 24px; background: var(--aksen-isi); color: #fff; box-shadow: var(--bayang-aksen); }
.pt-wifi-kini__ikon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(255,255,255,.16); flex: none; }
.pt-wifi-kini small { color: rgba(255,255,255,.75); display: block; }
.pt-wifi-kini b { font-size: 20px; display: block; word-break: break-all; margin-bottom: 6px; }
.pt-form { gap: 18px; }
.pt-form .masukan { min-height: 48px; border-radius: 12px; font-size: 16px; }
.pt-sandi { position: relative; }
.pt-sandi .masukan { padding-right: 48px; }
.pt-sandi__lihat { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--teks-2); cursor: pointer; }
.pt-sandi__lihat:hover { background: var(--permukaan-2); }
.pt-catatan { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--teks-2); }
.pt-catatan svg { flex: none; margin-top: 2px; }

/* ------------------------------------------------------- riwayat */
.pt-riwayat { list-style: none; display: grid; gap: 10px; }
.pt-riwayat__b { grid-template-columns: auto 1fr auto; align-items: center; padding: 14px 16px; }
.pt-riwayat__ikon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--permukaan-2); color: var(--teks-2); }
.pt-riwayat__ikon--ok { background: var(--ok-bg); color: var(--ok); }
.pt-riwayat__ikon--waspada { background: var(--waspada-bg); color: var(--waspada); }
.pt-riwayat__ikon--info { background: var(--info-bg); color: var(--info); }
.pt-riwayat__teks { display: grid; min-width: 0; }
.pt-riwayat__teks b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-riwayat__teks small { color: var(--teks-2); font-size: 12.5px; }

/* ---------------------------------------------------------- akun */
.pt-profil { display: flex; gap: 16px; align-items: center; padding: 8px 0; }
.pt-profil h1 { font-size: 22px; letter-spacing: -.02em; }
.pt-rincian { display: grid; }
.pt-rincian > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 12px 0; }
.pt-rincian > div + div { border-top: 1px solid var(--garis); }
.pt-rincian dt { color: var(--teks-2); font-size: 13.5px; }
.pt-rincian dd { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pt-keluar { color: var(--bahaya); }

/* ---------------------------------------------------- calon/jejak */
.pt-jejak { list-style: none; display: grid; }
.pt-jejak li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding-bottom: 18px; }
.pt-jejak li:last-child { padding-bottom: 0; }
.pt-jejak li:not(:last-child)::before { content: ''; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--garis); }
.pt-jejak li.selesai:not(:last-child)::before { background: var(--aksen); }
.pt-jejak__titik { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks-3); font-weight: 700; font-size: 13px; }
.pt-jejak li.selesai .pt-jejak__titik { background: var(--aksen-isi); border-color: transparent; color: #fff; }
.pt-jejak li.kini .pt-jejak__titik { border-color: var(--aksen); color: var(--aksen); box-shadow: 0 0 0 5px var(--aksen-lembut); }
.pt-jejak b { display: block; margin-top: 5px; }
.pt-jejak li:not(.selesai):not(.kini) b { color: var(--teks-3); }
.pt-jejak p { font-size: 13.5px; color: var(--teks-2); }
.pt-baris-form { display: flex; gap: 10px; }
.pt-baris-form .masukan { min-height: 48px; border-radius: 12px; }
.pt-baris-form .tombol { min-height: 48px; border-radius: 12px; }

@media (max-width: 380px) {
  .pt-status__kisi { grid-template-columns: 1fr 1fr; }
  .pt-status__kisi > div:last-child { grid-column: 1 / -1; }
  .pt-rincian > div { grid-template-columns: 1fr; gap: 2px; }
}