/* ═══════════════════════════════════════════════════════════════════════════
   GAYA HALAMAN DAFTAR HARGA PAKET
   ═══════════════════════════════════════════════════════════════════════════
   DIPAKAI BERSAMA oleh:
     /paket-internet/       (dibangun 90-halaman-paket-internet.cjs)
     /paket-internet-tv/    (dibangun 91-halaman-paket-internet-tv.cjs)

   Sengaja SATU berkas untuk keduanya, bukan disalin dua kali. Kalau disalin,
   cepat atau lambat yang satu diperbaiki dan yang lain ketinggalan — lalu
   dua halaman yang seharusnya kembar jadi terlihat berbeda. Nama berkasnya
   tetap paket-internet.css supaya tidak ada rujukan yang perlu diubah.

   Kalau menambah halaman paket berikutnya (MyGamers), pakai berkas ini juga.

   Ditulis MOBILE-FIRST: aturan dasar untuk layar HP, baru ditambah lewat
   @media (min-width: ...) untuk layar lebih besar. Urutannya begitu karena
   lebih dari 80 % pengunjung situs ini memakai HP.

   Warna, huruf, dan bayangan memakai variabel yang sudah ada di utama.css
   supaya halaman ini terasa satu keluarga dengan halaman lain — bukan
   halaman tempelan.

   Awalan kelas: pi-  (paket internet)
   ═══════════════════════════════════════════════════════════════════════════ */

#main-content {
  background: var(--pkcat-bg, #faf8fc);
}

/* satu pembungkus dipakai semua bagian supaya lebar isi dan jarak tepi
   KONSISTEN di seluruh halaman — tidak ada bagian yang lebih menjorok */
.pi-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 18px;
}

.pi-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── jarak antar bagian: satu angka, dipakai semuanya ── */
.pi-hero,
.pi-alasan,
.pi-harga,
.pi-banding,
.pi-pilih,
.pi-termasuk,
.pi-cara,
.pi-area,
.pi-tanya,
.pi-penutup {
  padding-block: 36px;
}

/* ═══════════════ REMAH NAVIGASI ═══════════════
   Ada DI DALAM hero, di atas latar ungu — bukan di baris putih tersendiri
   di atasnya. Waktu masih berupa baris tersendiri, seluruh barisnya
   (tinggi 37 px) tertimbun di belakang header yang melayang (tinggi 56 px):
   tidak terlihat sama sekali tapi tetap memakan ruang 37 px. */
.pi-remah ol {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}
.pi-remah li + li::before {
  content: "›";
  margin-right: 6px;
  color: rgba(255, 255, 255, 0.45);
}
.pi-remah a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 600;
}
.pi-remah a:hover { color: #ffffff; text-decoration: underline; }

/* ═══════════════ JUDUL UMUM ═══════════════ */
.pi-hero h1,
.pi-wrap h2 {
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  color: var(--pkcat-text-main, #1b1033);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 12px;
}
.pi-hero h1 { font-size: clamp(25px, 6.6vw, 40px); font-weight: 800; }
.pi-wrap h2 { font-size: clamp(21px, 5.2vw, 30px); font-weight: 700; }
.pi-wrap h3 {
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--pkcat-text-main, #1b1033);
  margin: 0 0 6px;
  line-height: 1.35;
}

.pi-wrap p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--pkcat-ink-soft, #4a4060);
  margin: 0 0 12px;
}
.pi-wrap a { color: var(--primary, #672e8a); }

.pi-sub {
  max-width: 62ch;
  margin-bottom: 20px !important;
}
.pi-catatan {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--pkcat-text-muted, #766d8c) !important;
  margin-top: 16px !important;
}
.pi-catatan-tegas {
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-left: 4px solid var(--primary, #672e8a);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--pkcat-text-main, #1b1033) !important;
  font-weight: 600;
}
.pi-catatan-kecil {
  font-size: 13px !important;
  color: var(--pkcat-text-muted, #766d8c) !important;
  margin-top: 18px !important;
}

/* ═══════════════ PEMBUKA ═══════════════
   Latar ungunya BUKAN satu gradasi lurus. Ada tiga lapis yang ditumpuk:
     1. cahaya magenta di kanan atas   -> bagian paling terang, dekat logo
     2. cahaya ungu-biru di kiri bawah -> memberi kedalaman
     3. gradasi dasar ungu gelap       -> warna pokoknya
   Tumpukan inilah yang membuat warnanya terlihat berdimensi, bukan rata
   seperti blok cat. Warnanya diambil dari keluarga warna yang sudah dipakai
   banner beranda (ungu neon dengan aksen magenta), jadi tetap satu keluarga. */
.pi-hero {
  background:
    radial-gradient(125% 95% at 88% -8%, rgba(232, 121, 249, 0.34) 0%, rgba(232, 121, 249, 0) 58%),
    radial-gradient(105% 85% at 4% 104%, rgba(139, 92, 246, 0.40) 0%, rgba(139, 92, 246, 0) 62%),
    linear-gradient(163deg, #190a2e 0%, #331454 38%, #52217d 72%, #6b2f95 100%);
  color: #ffffff;
  padding-block: 30px 40px;
  position: relative;
  overflow: hidden;
}
/* garis tipis berkilau di batas bawah — pemisah halus ke bagian putih
   di bawahnya, supaya perpindahannya tidak terasa terpotong tiba-tiba */
.pi-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(232, 121, 249, 0) 0%,
    rgba(232, 121, 249, 0.55) 35%,
    rgba(167, 139, 250, 0.55) 65%,
    rgba(167, 139, 250, 0) 100%);
  pointer-events: none;
}

/* Di bawah 1024px header halaman ini MELAYANG (fixed) menutupi bagian atas
   layar setinggi 56px. Tanpa jarak tambahan, remah navigasi dan lencana
   tertimbun di belakangnya. Diukur langsung: remah 0-37px, header 0-56px
   -> tertutup seluruhnya. Pola jarak ini sama dengan yang dipakai
   /cek-area/, supaya seluruh halaman berperilaku sama. */
@media (max-width: 1024px) {
  .pi-hero {
    padding-top: calc(var(--tinggi-header, 68px) + clamp(14px, 3.5vw, 26px));
  }
}
.pi-hero h1 { color: #ffffff; }
.pi-hero p { color: rgba(255, 255, 255, 0.86); }
.pi-hero strong { color: #ffffff; }
/* .pi-catatan-kecil memakai !important untuk warna abu-abu — di atas latar
   ungu warna itu nyaris tidak terbaca, jadi di dalam hero ditimpa balik.
   Ditulis dengan !important juga karena aturan yang dilawan memakainya. */
.pi-hero .pi-catatan-kecil { color: rgba(255, 255, 255, 0.65) !important; }
.pi-hero .pi-catatan-kecil strong { color: rgba(255, 255, 255, 0.92); }

/* TAUTAN BIASA di atas latar ungu juga tidak boleh ikut ungu.
   Diukur di halaman berjalan: warna tautan bawaan (#672e8a) di atas latar
   hero memberi rasio kontras 1,71:1 — jauh di bawah syarat minimum 4,5:1.
   Akibatnya tautannya praktis tidak terlihat: pengunjung tidak tahu ada
   yang bisa diklik di situ. Dibalik jadi merah muda terang, warna yang
   sama dengan lencana pembuka dan daftar tautan di penutup.
   Tombol (.pi-btn) punya aturannya sendiri di bawah, jadi dikecualikan. */
.pi-hero a:not(.pi-btn),
.pi-penutup a:not(.pi-btn) {
  color: #f5b8ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pi-hero a:not(.pi-btn):hover,
.pi-penutup a:not(.pi-btn):hover { color: #ffffff; }
/* remah navigasi punya warnanya sendiri dan tidak digarisbawahi */
.pi-hero .pi-remah a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.pi-hero .pi-remah a:hover { color: #ffffff; text-decoration: underline; }

/* Tombol utama di atas latar ungu TIDAK BOLEH ikut ungu — kalau ungu di atas
   ungu, bentuknya hilang dan tidak terbaca sebagai tombol. Di sini dibalik
   jadi putih pekat dengan tulisan ungu: itu benda paling terang di layar,
   jadi mata langsung menemukannya. Di bagian lain (latar putih) tombol
   utama tetap ungu seperti biasa. */
.pi-hero .pi-btn-utama,
.pi-penutup .pi-btn-utama {
  background: #ffffff;
  color: #4d2267 !important;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.55);
}
.pi-hero .pi-btn-utama:hover,
.pi-penutup .pi-btn-utama:hover {
  background: #f7f2fb;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
}

.pi-eyebrow {
  display: inline-block;
  font-size: 11.5px !important;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #f0abfc !important;
  border: 1px solid rgba(240, 171, 252, 0.45);
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 14px !important;
}
.pi-lead {
  font-size: 16px !important;
  max-width: 58ch;
}

/* empat angka pendek — di HP dua kolom, di layar lebar empat kolom */
.pi-poin {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pi-poin li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 11px 12px;
}
.pi-poin-angka {
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 20px;
  font-weight: 800;
  color: #f7d774;
  line-height: 1;
  flex: 0 0 auto;
  min-width: 34px;
  text-align: center;
}
.pi-poin-teks {
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

.pi-hero-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* ═══════════════ TOMBOL ═══════════════ */
.pi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 12px;
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}
.pi-btn:active { transform: scale(0.97); }

.pi-btn-utama {
  background: var(--pkcat-accent-grad, linear-gradient(135deg, #511d66, #7a2b99));
  color: #ffffff !important;
  box-shadow: 0 6px 18px -6px var(--pkcat-accent-shadow, rgba(81, 29, 102, 0.35));
}
.pi-btn-utama:hover {
  box-shadow: 0 10px 26px -6px var(--pkcat-accent-shadow, rgba(81, 29, 102, 0.45));
}
.pi-btn-garis {
  background: #ffffff;
  color: var(--primary, #672e8a) !important;
  border-color: #e2d5ee;
}
.pi-btn-garis:hover {
  border-color: var(--primary, #672e8a);
  background: var(--primary-light, #f5f3ff);
}
.pi-btn-wa {
  background: #0b7a3d;
  color: #ffffff !important;
  box-shadow: 0 6px 18px -6px rgba(37, 211, 102, 0.5);
}
.pi-btn-wa:hover { background: #076b33; }

/* di layar sempit tombol memenuhi lebar supaya gampang ditekan jempol */
@media (max-width: 420px) {
  .pi-hero-aksi .pi-btn,
  .pi-penutup-aksi .pi-btn { flex: 1 1 100%; }
}

/* ═══════════════ KARTU KECIL (dipakai 2 bagian) ═══════════════ */
.pi-kartu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.pi-kartu-kecil {
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: var(--pkcat-shadow-card, 0 10px 28px -14px rgba(27, 16, 51, 0.12));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pi-kartu-kecil:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -14px rgba(27, 16, 51, 0.22);
}
.pi-kartu-kecil p { margin-bottom: 0; font-size: 14.5px; }

/* ═══════════════ KARTU PAKET ═══════════════ */
.pi-daftar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.pi-paket {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 18px;
  padding: 18px 16px 16px;
  box-shadow: var(--pkcat-shadow-card, 0 10px 28px -14px rgba(27, 16, 51, 0.12));
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.pi-paket:hover {
  transform: translateY(-3px);
  border-color: #dcc9ec;
  box-shadow: var(--pkcat-shadow-hover, 0 15px 40px -5px rgba(81, 29, 102, 0.25));
}
.pi-paket-sorot {
  border-color: var(--primary, #672e8a);
  border-width: 2px;
  padding-top: 26px;
}
.pi-paket-label {
  position: absolute;
  top: -1px;
  left: 16px;
  transform: translateY(-50%);
  background: var(--pkcat-accent-grad, linear-gradient(135deg, #511d66, #7a2b99));
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  margin: 0 !important;
  line-height: 1.6 !important;
}

.pi-paket-atas {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.pi-paket-nama {
  font-size: 19px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pi-paket-kecepatan {
  margin: 0 !important;
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 14px !important;
  font-weight: 600;
  color: var(--primary, #672e8a) !important;
  white-space: nowrap;
}
.pi-paket-kecepatan span { font-size: 26px; font-weight: 800; line-height: 1; }

.pi-paket-harga {
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 27px !important;
  font-weight: 800;
  color: var(--pkcat-text-main, #1b1033) !important;
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
}
.pi-paket-harga span {
  font-size: 13px;
  font-weight: 600;
  color: var(--pkcat-text-muted, #766d8c);
  letter-spacing: 0;
}
.pi-paket-untuk {
  font-size: 13.5px !important;
  color: var(--pkcat-text-muted, #766d8c) !important;
  margin-bottom: 12px !important;
  line-height: 1.6 !important;
}

.pi-paket-fitur {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 7px;
}
.pi-paket-fitur li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pkcat-ink-soft, #4a4060);
}
.pi-paket-fitur li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--primary-light, #f5f3ff);
  box-shadow: inset 0 0 0 1.5px var(--primary, #672e8a);
}
.pi-paket-fitur li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 7.5px;
  width: 4px;
  height: 7px;
  border-right: 2px solid var(--primary, #672e8a);
  border-bottom: 2px solid var(--primary, #672e8a);
  transform: rotate(42deg);
}

.pi-paket-aksi {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pi-paket-aksi .pi-btn {
  min-height: 44px;
  padding-inline: 10px;
  font-size: 13.5px;
}

/* ═══════════════ TABEL PERBANDINGAN ═══════════════ */
.pi-tabel-bungkus {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 16px;
  box-shadow: var(--pkcat-shadow-card, 0 10px 28px -14px rgba(27, 16, 51, 0.12));
}
.pi-tabel-bungkus:focus-visible {
  outline: 3px solid var(--primary, #672e8a);
  outline-offset: 2px;
}
.pi-tabel {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}
.pi-tabel th,
.pi-tabel td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--pkcat-border, #ece5f4);
  white-space: nowrap;
}
.pi-tabel thead th {
  background: var(--primary-light, #f5f3ff);
  color: var(--pkcat-text-main, #1b1033);
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.pi-tabel tbody th {
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-weight: 700;
  color: var(--pkcat-text-main, #1b1033);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.pi-tabel tbody td { color: var(--pkcat-ink-soft, #4a4060); }
.pi-tabel tbody tr:last-child th,
.pi-tabel tbody tr:last-child td { border-bottom: 0; }
.pi-tabel tbody tr:nth-child(even) th,
.pi-tabel tbody tr:nth-child(even) td { background: #fbf9fd; }

/* ═══════════════ DUA KOLOM: termasuk / belum ═══════════════ */
.pi-dua-kolom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.pi-kolom {
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--pkcat-shadow-card, 0 10px 28px -14px rgba(27, 16, 51, 0.12));
}
.pi-kolom ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pi-kolom li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--pkcat-ink-soft, #4a4060);
}
.pi-kolom li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  font-size: 15px;
}
.pi-kolom-ya li::before { content: "✓"; color: #16a34a; }
.pi-kolom-tidak li::before { content: "–"; color: #b45309; }
.pi-kolom-ya h3 { color: #15803d; }
.pi-kolom-tidak h3 { color: #b45309; }

/* ═══════════════ LANGKAH BERNOMOR ═══════════════ */
.pi-langkah {
  list-style: none;
  counter-reset: pi-langkah;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.pi-langkah > li {
  counter-increment: pi-langkah;
  position: relative;
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 16px;
  padding: 16px 16px 14px 56px;
  box-shadow: var(--pkcat-shadow-card, 0 10px 28px -14px rgba(27, 16, 51, 0.12));
}
.pi-langkah > li::before {
  content: counter(pi-langkah);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pkcat-accent-grad, linear-gradient(135deg, #511d66, #7a2b99));
  color: #ffffff;
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pi-langkah p:last-child { margin-bottom: 0; }

/* ═══════════════ TANYA JAWAB ═══════════════ */
.pi-faq {
  display: grid;
  gap: 9px;
}
.pi-faq-item {
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 14px;
  box-shadow: var(--pkcat-shadow-card, 0 10px 28px -14px rgba(27, 16, 51, 0.12));
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.pi-faq-item[open] {
  border-color: #dcc9ec;
  box-shadow: 0 14px 34px -14px rgba(27, 16, 51, 0.22);
}
.pi-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 46px 15px 16px;
  position: relative;
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--pkcat-text-main, #1b1033);
  min-height: 46px;
  display: flex;
  align-items: center;
}
.pi-faq-item summary::-webkit-details-marker { display: none; }
.pi-faq-item summary:focus-visible {
  outline: 3px solid var(--primary, #672e8a);
  outline-offset: -3px;
}
/* tanda + yang berubah jadi − saat dibuka */
.pi-faq-item summary::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  background:
    linear-gradient(var(--primary, #672e8a), var(--primary, #672e8a)) center/13px 2px no-repeat,
    linear-gradient(var(--primary, #672e8a), var(--primary, #672e8a)) center/2px 13px no-repeat;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.pi-faq-item[open] summary::after {
  background:
    linear-gradient(var(--primary, #672e8a), var(--primary, #672e8a)) center/13px 2px no-repeat;
  transform: rotate(180deg);
}
.pi-faq-isi {
  padding: 0 16px 15px;
  animation: pi-buka 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.pi-faq-isi p:last-child { margin-bottom: 0; }
@keyframes pi-buka {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════ PENUTUP ═══════════════ */
/* Warna sama keluarganya dengan pembuka, tapi cahayanya DIBALIK arahnya
   (magenta di kiri atas, ungu di kanan bawah) supaya halaman tidak terasa
   mengulang gambar yang sama persis dua kali. */
.pi-penutup {
  background:
    radial-gradient(120% 90% at 12% -6%, rgba(232, 121, 249, 0.30) 0%, rgba(232, 121, 249, 0) 58%),
    radial-gradient(100% 85% at 96% 104%, rgba(139, 92, 246, 0.38) 0%, rgba(139, 92, 246, 0) 62%),
    linear-gradient(197deg, #190a2e 0%, #331454 38%, #52217d 72%, #6b2f95 100%);
  color: #ffffff;
  text-align: center;
}
.pi-penutup h2 { color: #ffffff; }
.pi-penutup p { color: rgba(255, 255, 255, 0.86); }
.pi-penutup-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}
.pi-tautan-lain {
  margin-top: 24px !important;
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.7) !important;
}
.pi-tautan-lain a {
  color: #f0abfc !important;
  text-decoration: none;
  font-weight: 600;
}
.pi-tautan-lain a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYAR LEBIH LEBAR
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 560px) {
  .pi-poin { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pi-poin li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pi-kartu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-dua-kolom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .pi-wrap { padding-inline: 24px; }
  .pi-hero,
  .pi-alasan,
  .pi-harga,
  .pi-banding,
  .pi-pilih,
  .pi-termasuk,
  .pi-cara,
  .pi-area,
  .pi-tanya,
  .pi-penutup { padding-block: 52px; }
  .pi-hero { padding-block: 44px 58px; }
  .pi-langkah { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pi-tabel { min-width: 0; }
  .pi-tabel th,
  .pi-tabel td { white-space: normal; }
}

@media (min-width: 1024px) {
  .pi-kartu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pi-daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pi-wrap p { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENGHORMATI SETELAN PENGGUNA
   Kalau pengguna mematikan animasi di setelan HP/komputernya, halaman ini
   ikut diam — bukan cuma lebih cepat, tapi juga kebutuhan aksesibilitas
   untuk orang yang pusing melihat gerakan.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pi-btn,
  .pi-kartu-kecil,
  .pi-paket,
  .pi-faq-item,
  .pi-faq-item summary::after {
    transition-duration: 0.001ms !important;
  }
  .pi-faq-isi { animation: none !important; }
  .pi-kartu-kecil:hover,
  .pi-paket:hover { transform: none; }
}