/*
 * Halaman Bagian. Dimuat sesudah beranda.css dan pilar.css: bagian setinggi satu layar, kartu,
 * langkah, tombol, hero berfoto, pengalih, tempat foto, dan penutup diambil dari sana.
 * Berkas ini menambah gaya tiap jenis bagian. Aksen halaman lewat --c (diset di <main>).
 * Elemen interaktif disorot bingkai biru, sama dengan navigasi.
 */

/* Gaya bagian: terang, lembut, gelap */
.pkn-bagian-isi .bagian-terang{background:var(--n0)}
.pkn-bagian-isi .bagian-lembut{background:var(--n1)}
.pkn-bagian-isi section.bagian-gelap:not(.penutup){background:linear-gradient(180deg,var(--malam) 0%,var(--malam-0) 100%)}
.pkn-bagian-isi .bagian-gelap h3{color:#fff}

/* Bagian panjang (harga, faq, pita, daftar panjang) mengalir, tidak dipaksa satu layar */
@media (min-width:861px){
  .pkn-bagian-isi section.bagian-alir{min-height:0;display:block;padding-block:clamp(64px,10vh,112px)}
  .pkn-bagian-isi section.bagian-pita{padding-block:clamp(28px,5vh,48px)}
}

.pkn-bagian-isi .bagian-label-baris{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px}
.pkn-bagian-isi .bagian-contoh{display:inline-block;padding:3px 9px;border-radius:999px;border:1px dashed currentColor;font:500 .66rem/1.3 var(--f-data);letter-spacing:.1em;text-transform:uppercase;color:#B7791F;background:rgba(245,184,61,.12)}
.pkn-bagian-isi .gelap .bagian-contoh{color:var(--padi)}
.pkn-bagian-isi .bagian-teks p{margin:0}
.pkn-bagian-isi .bagian-teks p+p{margin-top:.7em}
.pkn-bagian-isi .bagian-teks a,.pkn-bagian-isi .bagian-prosa a{color:var(--primer);text-decoration:underline;text-underline-offset:3px}
.pkn-bagian-isi .gelap .bagian-teks a,.pkn-bagian-isi .gelap .bagian-prosa a{color:#6FB8FF}
.pkn-bagian-isi .bagian-tombol{margin-top:clamp(20px,4vh,36px)}
.pkn-bagian-isi .bagian-catatan{margin-top:18px;font:400 .78rem/1.5 var(--f-data);color:var(--n4)}
.pkn-bagian-isi .gelap .bagian-catatan{color:var(--t-redup)}

/* HERO: terang bila diminta; tanpa visual = satu kolom */
.pkn-bagian-isi .bagian-hero.bagian-terang,.pkn-bagian-isi .bagian-hero.bagian-lembut{background:radial-gradient(90% 90% at 85% 30%,color-mix(in srgb,var(--c) 14%,var(--n0)) 0%,var(--n0) 60%);color:var(--tinta)}
.pkn-bagian-isi .bagian-hero.bagian-lembut{background:var(--n1)}
.pkn-bagian-isi .bagian-hero.bagian-terang .lead,.pkn-bagian-isi .bagian-hero.bagian-lembut .lead{color:var(--n4)}
.pkn-bagian-isi .bagian-hero:not(.gelap) .pilar-pengalih a{color:var(--n4);border-color:var(--n2)}
.pkn-bagian-isi .bagian-hero:not(.gelap) .pilar-pengalih a:hover,.pkn-bagian-isi .bagian-hero:not(.gelap) .pilar-pengalih a.aktif{color:var(--tinta)}
.pkn-bagian-isi .pilar-hero-wrap.tanpa-visual{grid-template-columns:minmax(0,1fr)}
.pkn-bagian-isi .pilar-hero-wrap.tanpa-visual h1{max-width:18em}
.pkn-bagian-isi .bagian-hero .lead p{margin:0}
.pkn-bagian-isi .bagian-ilustrasi-peta{position:relative;width:100%;aspect-ratio:233/120;max-height:64vh}
.pkn-bagian-isi .bagian-ilustrasi-peta canvas{position:absolute;inset:0;width:100%;height:100%}
.pkn-bagian-isi .bagian-ilustrasi-heliks{max-height:60vh}
.pkn-bagian-isi .infra-iso{width:100%;height:auto;max-height:70vh}

/* TEKS */
.pkn-bagian-isi .bagian-teks-isi.ada-kutipan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.pkn-bagian-isi .bagian-kutipan-besar{font:700 clamp(1.5rem,3vw,2.4rem)/1.25 var(--f-judul);letter-spacing:-.025em;color:var(--c);margin:0}
.pkn-bagian-isi .gelap .bagian-kutipan-besar{color:var(--t-terang)}
.pkn-bagian-isi .bagian-prosa{max-width:68ch;font-size:1.08rem;line-height:1.75;color:#1d2b3d}
.pkn-bagian-isi .gelap .bagian-prosa{color:var(--t-terang)}
.pkn-bagian-isi .bagian-prosa p{margin:0 0 1.1em}
.pkn-bagian-isi .bagian-prosa p:last-child{margin-bottom:0}

/* KARTU: 2/3/4 kolom */
@media (min-width:901px){
  .pkn-bagian-isi .bagian-kartu-grid{grid-template-columns:repeat(var(--kolom,3),minmax(0,1fr))}
}
.pkn-bagian-isi .kartu{--c:inherit}
.pkn-bagian-isi .ikon span{font:500 .78rem var(--f-data);color:var(--c);filter:brightness(.8)}
.pkn-bagian-isi .kartu.bisa-diklik h3 a{text-decoration:none;color:inherit}
.pkn-bagian-isi .kartu.bisa-diklik h3 a::after{content:"";position:absolute;inset:0;border-radius:24px}
.pkn-bagian-isi .kartu.bisa-diklik:hover,.pkn-bagian-isi .kartu.bisa-diklik:focus-within{border-color:rgba(77,168,255,.75);box-shadow:0 0 0 1px rgba(18,141,247,.35),0 0 24px rgba(18,141,247,.35)}
.pkn-bagian-isi .kartu.bisa-diklik h3 a:focus-visible{outline:none}
.pkn-bagian-isi .kartu.bisa-diklik:has(a:focus-visible){outline:3px solid #4DA8FF;outline-offset:3px}
.pkn-bagian-isi .gelap .kartu{background:rgba(17,40,74,.6);border-color:rgba(255,255,255,.1)}
.pkn-bagian-isi .gelap .kartu p,.pkn-bagian-isi .gelap .kartu .pilar{color:var(--t-redup)}
.pkn-bagian-isi .gelap .app{color:var(--t-terang)}

/* LANGKAH: jumlah kolom mengikuti jumlah langkah (maks. 4) */
.pkn-bagian-isi .bagian-langkah{list-style:none;margin:0;padding:0}
.pkn-bagian-isi .bagian-langkah li{position:relative;display:flex;flex-direction:column;gap:10px}
@media (min-width:861px){.pkn-bagian-isi .bagian-langkah{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}}
.pkn-bagian-isi .gelap .langkah .nomor{background:var(--malam)}
.pkn-bagian-isi .gelap .langkah p{color:var(--t-redup)}

/* LINIMASA */
.pkn-bagian-isi .bagian-linimasa-daftar{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:880px}
.pkn-bagian-isi .bagian-linimasa-daftar li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;position:relative;padding-bottom:clamp(16px,3vh,28px)}
.pkn-bagian-isi .bagian-linimasa-daftar li::before{content:"";position:absolute;left:107px;top:10px;bottom:-6px;width:2px;background:linear-gradient(180deg,var(--c),transparent)}
.pkn-bagian-isi .bagian-linimasa-daftar li:last-child::before{display:none}
.pkn-bagian-isi .bagian-linimasa-daftar li>div{position:relative;padding-left:26px}
.pkn-bagian-isi .bagian-linimasa-daftar li>div::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 20%,transparent)}
.pkn-bagian-isi .bagian-tahun{font:500 1.15rem/1.3 var(--f-data);color:var(--c);text-align:right}
.pkn-bagian-isi .bagian-linimasa-daftar h3{font-size:1.15rem}
.pkn-bagian-isi .bagian-linimasa-daftar p{color:var(--n4);margin-top:4px}
.pkn-bagian-isi .gelap .bagian-linimasa-daftar p{color:var(--t-redup)}

/* HARGA */
.pkn-bagian-isi .bagian-harga-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;align-items:stretch}
.pkn-bagian-isi .bagian-paket{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(22px,3vh,30px);border-radius:24px;background:var(--n0);border:1px solid var(--n2)}
.pkn-bagian-isi .bagian-lembut .bagian-paket{background:var(--n0)}
.pkn-bagian-isi .bagian-terang .bagian-paket{background:var(--n1)}
.pkn-bagian-isi .bagian-paket.unggulan{border:2px solid var(--primer);box-shadow:0 30px 60px -30px rgba(18,141,247,.55)}
.pkn-bagian-isi .bagian-paket-tanda{position:absolute;top:-12px;left:22px;padding:4px 10px;border-radius:999px;background:var(--primer);color:#fff;font:600 .7rem/1.3 var(--f-judul)}
.pkn-bagian-isi .bagian-paket h3{font-size:1.2rem}
.pkn-bagian-isi .bagian-paket-harga{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:0}
.pkn-bagian-isi .bagian-paket-harga b{font:800 clamp(1.4rem,2.4vw,1.8rem)/1.1 var(--f-judul);letter-spacing:-.02em}
.pkn-bagian-isi .bagian-paket-harga span{font:500 .8rem var(--f-data);color:var(--n4)}
.pkn-bagian-isi .bagian-paket ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:.92rem;color:#2b3a4f}
.pkn-bagian-isi .bagian-paket li{position:relative;padding-left:20px}
.pkn-bagian-isi .bagian-paket li::before{content:"";position:absolute;left:2px;top:.45em;width:8px;height:5px;border-left:2px solid var(--tumbuh);border-bottom:2px solid var(--tumbuh);transform:rotate(-45deg)}
.pkn-bagian-isi .bagian-paket .aksi{margin-top:auto;padding-top:6px}
.pkn-bagian-isi .bagian-paket .btn{width:100%;justify-content:center;padding:13px 18px;font-size:.88rem}
.pkn-bagian-isi .bagian-paket:not(.unggulan) .btn-1{background:var(--malam);box-shadow:none}

/* TAUTAN */
.pkn-bagian-isi .bagian-tautan-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:0}
.pkn-bagian-isi .bagian-tautan-grid .gerak{--c:inherit;border:1px solid transparent;transition:transform .25s,border-color .2s,box-shadow .2s}
.pkn-bagian-isi .bagian-tautan-grid a.gerak:hover{border-color:rgba(77,168,255,.75);box-shadow:0 0 0 1px rgba(18,141,247,.35),0 0 18px rgba(18,141,247,.4)}
.pkn-bagian-isi .bagian-tautan-grid a.gerak:focus-visible{outline:3px solid #4DA8FF;outline-offset:3px}
.pkn-bagian-isi .gelap .bagian-tautan-grid .gerak{background:rgba(17,40,74,.7);color:var(--t-terang)}
.pkn-bagian-isi .gelap .bagian-tautan-grid .gerak small{color:var(--t-redup)}

/* KUTIPAN */
.pkn-bagian-isi .bagian-kutipan.tanpa-foto{grid-template-columns:minmax(0,1fr);max-width:900px}
.pkn-bagian-isi .bagian-kutipan figure{margin:0}
.pkn-bagian-isi .gelap .pilar-cerita blockquote,.pkn-bagian-isi .gelap .bagian-kutipan blockquote{color:#fff}
.pkn-bagian-isi .bagian-kutipan blockquote{margin:0;padding:0;border:0;font:700 clamp(1.4rem,2.6vw,2.1rem)/1.3 var(--f-judul);letter-spacing:-.02em}
.pkn-bagian-isi .bagian-kutipan .siapa{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:3px solid var(--c);margin-top:18px}
.pkn-bagian-isi .bagian-kutipan .siapa b{font:700 1rem var(--f-judul)}
.pkn-bagian-isi .bagian-kutipan .siapa span{font-size:.88rem;color:var(--n4)}
.pkn-bagian-isi .gelap .bagian-kutipan .siapa span{color:var(--t-redup)}

/* ORANG */
.pkn-bagian-isi .bagian-orang-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:20px}
.pkn-bagian-isi .bagian-orang-butir{display:flex;flex-direction:column;gap:4px}
.pkn-bagian-isi .bagian-orang-foto{aspect-ratio:1;width:100%;border-radius:24px;margin-bottom:10px}
.pkn-bagian-isi .bagian-orang-butir b{font:700 1.05rem var(--f-judul)}
.pkn-bagian-isi .bagian-orang-butir span{color:var(--n4);font-size:.9rem}
.pkn-bagian-isi .gelap .bagian-orang-butir span{color:var(--t-redup)}

/* FAQ: akordeon */
.pkn-bagian-isi .bagian-faq-daftar{display:grid;gap:10px;max-width:900px}
.pkn-bagian-isi .bagian-faq-daftar details{border-radius:18px;background:var(--n1);border:1px solid var(--n2)}
.pkn-bagian-isi .bagian-lembut .bagian-faq-daftar details{background:var(--n0)}
.pkn-bagian-isi .bagian-faq-daftar summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;list-style:none;font:700 1.05rem/1.4 var(--f-judul);border-radius:18px;transition:background .2s,box-shadow .2s}
.pkn-bagian-isi .bagian-faq-daftar summary::-webkit-details-marker{display:none}
.pkn-bagian-isi .bagian-faq-daftar summary:hover{box-shadow:0 0 0 1px rgba(77,168,255,.75),0 0 18px rgba(18,141,247,.3)}
.pkn-bagian-isi .bagian-faq-daftar summary:focus-visible{outline:3px solid #4DA8FF;outline-offset:2px}
.pkn-bagian-isi .bagian-faq-panah{width:18px;height:18px;flex:none;transition:transform .3s;color:var(--primer)}
.pkn-bagian-isi .bagian-faq-daftar details[open] .bagian-faq-panah{transform:rotate(180deg)}
.pkn-bagian-isi .bagian-faq-daftar details p{margin:0;padding:0 22px 20px;color:var(--n4);max-width:72ch}
.pkn-bagian-isi .gelap .bagian-faq-daftar details{background:rgba(17,40,74,.7);border-color:rgba(255,255,255,.1)}
.pkn-bagian-isi .gelap .bagian-faq-daftar details p{color:var(--t-redup)}

/* KONTAK */
.pkn-bagian-isi .bagian-kontak-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px}
.pkn-bagian-isi .bagian-kontak-butir>a,.pkn-bagian-isi .bagian-kontak-butir>div{display:flex;align-items:center;gap:14px;height:100%;padding:18px 20px;border-radius:20px;background:var(--n1);border:1px solid var(--n2);text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s}
.pkn-bagian-isi .bagian-lembut .bagian-kontak-butir>a,.pkn-bagian-isi .bagian-lembut .bagian-kontak-butir>div{background:var(--n0)}
.pkn-bagian-isi .bagian-kontak-butir>a:hover{border-color:rgba(77,168,255,.75);box-shadow:0 0 0 1px rgba(18,141,247,.35),0 0 18px rgba(18,141,247,.35)}
.pkn-bagian-isi .bagian-kontak-butir>a:focus-visible{outline:3px solid #4DA8FF;outline-offset:3px}
.pkn-bagian-isi .bagian-kontak-teks{display:grid;gap:2px;min-width:0}
.pkn-bagian-isi .bagian-kontak-teks small{font:500 .68rem/1.3 var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--n4)}
.pkn-bagian-isi .bagian-kontak-teks b{font:700 1rem/1.4 var(--f-judul);overflow-wrap:anywhere}
.pkn-bagian-isi .gelap .bagian-kontak-butir>a,.pkn-bagian-isi .gelap .bagian-kontak-butir>div{background:rgba(17,40,74,.7);border-color:rgba(255,255,255,.1)}
.pkn-bagian-isi .gelap .bagian-kontak-teks small{color:var(--t-redup)}

/* PETA DAMPAK (memakai .peta-bingkai, .peta-dampak, .hot, .kisah dari beranda.css) */
.pkn-bagian-isi .bagian-peta-wadah{position:relative}
.pkn-bagian-isi .bagian-peta-wadah canvas{position:absolute;inset:0;width:100%;height:100%}
.pkn-bagian-isi .terang .kisah,.pkn-bagian-isi .bagian-lembut .kisah{background:var(--malam);color:var(--t-terang)}
.pkn-bagian-isi section:not(.gelap) .peta-dampak{border-radius:24px;background:radial-gradient(120% 90% at 60% 50%,#0F2747 0%,var(--malam) 60%,var(--malam-0) 100%)}
.pkn-bagian-isi .hot{padding:0;border:0;background:none;cursor:pointer}
.pkn-bagian-isi .hot[hidden]{display:none}
.pkn-bagian-isi .hot:focus-visible{outline:3px solid #4DA8FF;outline-offset:2px}
.pkn-bagian-isi .hot.redup{opacity:.25}
.pkn-bagian-isi .bagian-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.pkn-bagian-isi .bagian-filter button{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1px solid rgba(77,168,255,.35);font:600 .8rem/1.2 var(--f-judul);transition:background .2s,border-color .2s,box-shadow .2s}
.pkn-bagian-isi .bagian-filter button i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.pkn-bagian-isi .bagian-filter button:hover{background:rgba(18,141,247,.18);border-color:rgba(77,168,255,.75);box-shadow:0 0 0 1px rgba(18,141,247,.35),0 0 18px rgba(18,141,247,.45)}
.pkn-bagian-isi .bagian-filter button.aktif{background:rgba(18,141,247,.24);border-color:rgba(77,168,255,.7)}
.pkn-bagian-isi .bagian-filter button:focus-visible{outline:3px solid #4DA8FF;outline-offset:2px}

/* PITA */
.pkn-bagian-isi .bagian-pita-isi{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px}
.pkn-bagian-isi .bagian-pita-judul{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}
.pkn-bagian-isi .bagian-pita-judul b{font:800 1.2rem/1.3 var(--f-judul);letter-spacing:-.01em}
.pkn-bagian-isi .bagian-pita-isi ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.pkn-bagian-isi .bagian-pita-isi li{display:flex;flex-direction:column;padding-left:14px;border-left:3px solid var(--c)}
.pkn-bagian-isi .bagian-pita-isi li b{font:700 .95rem var(--f-judul)}
.pkn-bagian-isi .bagian-pita-isi li span{font-size:.85rem;color:var(--n4)}
.pkn-bagian-isi .gelap .bagian-pita-isi li span{color:var(--t-redup)}
.pkn-bagian-isi .bagian-pita-teks p{margin:0;color:var(--n4)}
.pkn-bagian-isi .gelap .bagian-pita-teks p{color:var(--t-redup)}

/* AJAKAN: penutup beranda; label aksen */
.pkn-bagian-isi .penutup-isi .lead{text-align:center;margin-inline:auto}
.pkn-bagian-isi .penutup.bagian-terang,.pkn-bagian-isi .penutup.bagian-lembut{background:var(--n1);color:var(--tinta)}
.pkn-bagian-isi .penutup.bagian-terang .penutup-isi,.pkn-bagian-isi .penutup.bagian-lembut .penutup-isi{text-shadow:none}

@media (max-width:860px){
  .pkn-bagian-isi .bagian-teks-isi.ada-kutipan{grid-template-columns:1fr}
  .pkn-bagian-isi .bagian-linimasa-daftar li{grid-template-columns:64px minmax(0,1fr);gap:14px}
  .pkn-bagian-isi .bagian-linimasa-daftar li::before{left:75px}
  .pkn-bagian-isi .bagian-ilustrasi-peta{aspect-ratio:233/110}
}