/* ═══════════════════════════════════════════════════════════════════════════
   HALAMAN DOKUMEN / TEKS PANJANG
   ═══════════════════════════════════════════════════════════════════════════
   Dipakai /kebijakan-privasi/ dan nanti /syarat-ketentuan/.

   Dimuat SESUDAH paket-internet.css: dari situ diambil pembungkus (.pi-wrap),
   pembuka (.pi-hero), tombol (.pi-btn), tabel (.pi-tabel), dan penutup —
   supaya halaman dokumen tetap terasa satu keluarga dengan halaman lain.

   Yang ditambahkan di sini hanya yang memang khas halaman dokumen:
   lebar baca yang nyaman, penomoran bagian, dan kotak kutipan.

   Awalan kelas: kp-
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════ LEBAR BACA ══════════
   Teks hukum itu panjang. Baris yang terlalu lebar membuat mata kehilangan
   posisi saat pindah baris, jadi isinya dibatasi sekitar 72 huruf per baris.
   Tabel dan kotak dibiarkan selebar pembungkusnya. */
.kp-bagian .pi-wrap > p,
.kp-bagian .pi-wrap > ul,
.kp-bagian .pi-wrap > h3 {
  max-width: 72ch;
}

/* ══════════ PEMBUKA ══════════
   Lebih pendek dari pembuka halaman paket — ini dokumen, bukan halaman jualan,
   jadi pengunjung harus cepat sampai ke isinya.

   HATI-HATI: "padding-block" menimpa "padding-top" milik .pi-hero, TERMASUK
   jarak aman dari header yang melayang. Waktu baris ini ditulis tanpa aturan
   di bawahnya, jarak atasnya jadi 26px sedangkan headernya 57px — remah
   navigasi tertimbun lagi, persis cacat yang dulu ditemukan ASM di
   /paket-internet/. Jadi jarak aman itu DIPASANG ULANG di sini.
   Setiap halaman yang menimpa padding hero wajib melakukan hal yang sama. */
.kp-hero { padding-block: 26px 30px; }
@media (min-width: 768px) {
  .kp-hero { padding-block: 40px 44px; }
}
@media (max-width: 1024px) {
  .kp-hero { padding-top: calc(var(--tinggi-header, 68px) + clamp(14px, 3.5vw, 26px)); }
}
.kp-hero .pi-lead { max-width: 64ch; }

/* ══════════ BAGIAN ══════════ */
.kp-bagian { padding-block: 34px; }
@media (min-width: 768px) {
  .kp-bagian { padding-block: 48px; }
}
.kp-bagian:nth-of-type(even) {
  background: #ffffff;
  border-block: 1px solid var(--pkcat-border, #ece5f4);
}

/* penanda "Bagian A" / "Bagian 1-14" */
.kp-penanda {
  display: inline-block;
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 11.5px !important;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--primary, #672e8a) !important;
  background: var(--primary-light, #f5f3ff);
  border-radius: 999px;
  padding: 5px 13px;
  margin: 0 0 10px !important;
}

/* judul bernomor di dalam bagian */
.kp-bagian .pi-wrap h3 {
  font-size: 17.5px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--pkcat-border, #ece5f4);
  scroll-margin-top: calc(var(--tinggi-header, 68px) + 12px);
}
/* judul pertama tidak perlu garis pemisah di atasnya */
.kp-bagian .pi-wrap h3:first-of-type {
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
}

/* ══════════ RINGKASAN ══════════
   Situs resmi tidak punya bagian ini. Ditambahkan karena kebanyakan orang
   tidak akan membaca 14 bagian teks hukum — tapi berhak tahu intinya. */
.kp-ringkas { background: var(--primary-light, #f5f3ff); }
.kp-ringkas-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 76ch;
}
.kp-ringkas-daftar li {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-left: 4px solid var(--primary, #672e8a);
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--pkcat-ink-soft, #4a4060);
}
.kp-ringkas-daftar strong { color: var(--pkcat-text-main, #1b1033); }

/* ══════════ DAFTAR BUTIR ══════════ */
.kp-daftar {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.kp-daftar li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--pkcat-ink-soft, #4a4060);
}
.kp-daftar li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary, #672e8a);
}
.kp-daftar strong { color: var(--pkcat-text-main, #1b1033); }

/* daftar "yang TIDAK kami lakukan" — penandanya silang, bukan bulatan */
.kp-daftar-tidak li::before {
  content: "×";
  background: none;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.6;
  color: #b91c1c;
}

/* ══════════ KUTIPAN PEMBUKA ══════════ */
.kp-kutipan {
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 16px;
  padding: 16px 18px 4px;
  margin-bottom: 8px;
  box-shadow: var(--pkcat-shadow-card, 0 10px 28px -14px rgba(27, 16, 51, 0.12));
}
.kp-kutipan p { max-width: 72ch; }

/* ══════════ CATATAN SUMBER ══════════ */
.kp-sumber {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #d97706;
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: #713f12 !important;
  max-width: 76ch;
}
.kp-sumber a { color: #92400e !important; font-weight: 600; }

/* ══════════ JUDUL TABEL ══════════
   Di situs resmi, tabel biaya berupa GAMBAR tangkapan layar — tidak terbaca
   Google, tidak terbaca pembaca layar, dan tidak bisa dicari dengan Ctrl+F.
   Di sini ketiganya ditulis ulang jadi tabel sungguhan, jadi judulnya perlu
   gaya tersendiri. */
.kp-judul-tabel {
  font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 14.5px !important;
  font-weight: 700;
  color: var(--pkcat-text-main, #1b1033) !important;
  margin: 22px 0 8px !important;
}

/* ══════════ KOTAK KONTAK ══════════ */
.kp-kontak {
  background: #ffffff;
  border: 1px solid var(--pkcat-border, #ece5f4);
  border-radius: 16px;
  padding: 16px 18px;
  max-width: 72ch;
  box-shadow: var(--pkcat-shadow-card, 0 10px 28px -14px rgba(27, 16, 51, 0.12));
}
.kp-kontak > p:first-child { color: var(--pkcat-text-main, #1b1033); }
.kp-kontak .kp-daftar { margin-bottom: 4px; }

/* ══════════ PENUTUP ══════════ */
.kp-penutup { text-align: center; }
.kp-penutup .pi-penutup-aksi { justify-content: center; }