/*
 * Beranda panda.id. Dimuat sesudah beranda.css (bahasa visual bersama halaman Bagian) dan dibatasi ke .pkn-panda.
 * Motif "Jaringan Titik": titik oranye = desa, biru langit = aliran data. Semua warna dari token dasar.css,
 * sehingga suasana siang/malam cukup mengganti token.
 */

.pkn-panda{color-scheme:inherit;background:var(--n1)}
.pkn-panda [hidden]{display:none!important}
.pkn-panda h2{font-weight:700;letter-spacing:-.03em}
.pkn-panda em{font-style:normal}
.pkn-panda .lead{color:var(--n4)}
.pkn-panda .gelap .lead{color:var(--t-redup)}
.pkn-panda .lead em{color:var(--tinta);font-weight:700}
.pkn-panda .gelap .lead em{color:#fff}
.pkn-panda .pd-mono{font:500 .72rem/1.4 var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--n4)}
.pkn-panda .gelap .pd-mono{color:var(--t-redup)}
.pkn-panda .pd-mono b{color:var(--padi);font-weight:500}
.pkn-panda .pd-redup{opacity:.85;margin-top:8px}
.pkn-panda .btn{font-weight:600}
.pkn-panda .btn-1{box-shadow:0 12px 30px -12px rgba(var(--rgb-langit),.85)}
.pkn-panda .btn-2{border-color:var(--n3);color:var(--tinta)}
.pkn-panda .gelap .btn-2{border-color:rgba(233,241,250,.35);color:var(--t-terang)}
.pkn-panda .pd-t{width:8px;height:8px;border-radius:50%;background:var(--padi);box-shadow:0 0 0 3px rgba(255,255,255,.35);flex:none}
.pkn-panda .tombol-teks{display:inline-flex;align-items:center;gap:8px;font:600 .95rem var(--f-judul);color:var(--primer);text-decoration:none}
.pkn-panda .tombol-teks:hover{gap:12px}
.pkn-panda .gelap .tombol-teks{color:#7CC8F2}
.pkn-panda .pd-ponsel{margin-top:32px;color:var(--n4);font-size:.98rem}
.pkn-panda .pd-ponsel a{color:var(--primer);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(var(--rgb-langit),.35)}
.pkn-panda .pd-ponsel a:hover{border-color:currentColor}
.pkn-panda .gelap{background:radial-gradient(110% 90% at 80% 10%,var(--malam-2) 0%,var(--malam) 45%,var(--malam-0) 100%)}
.pkn-panda .pd-dua{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.pkn-panda .pd-dua>.kepala{margin-bottom:0}
@media (max-width:960px){.pkn-panda .pd-dua{grid-template-columns:1fr}}
@media (min-width:861px){.pkn-panda section.pd-alir{min-height:0}}

/* Muncul saat digulir */
.pkn-panda [data-muncul]{opacity:0;transform:translateY(18px);transition:opacity .7s ease var(--tunda,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--tunda,0s)}
.pkn-panda [data-muncul].tampak{opacity:1;transform:none}

/* ---------- 01 HERO ---------- */
.pkn-panda .pd-hero{position:relative;overflow:hidden;background:var(--n1);color:var(--tinta);min-height:calc(100svh - var(--tinggi-global) - var(--atas-bilah));display:flex;flex-direction:column;border-bottom:1px solid var(--n2)}
.pkn-panda .pd-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pkn-panda .pd-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--n1) 0%,color-mix(in srgb,var(--n1) 72%,transparent) 30%,transparent 56%)}
.pkn-panda .pd-hero-wrap{position:relative;z-index:2;flex:1;display:flex;align-items:center;width:100%;padding-block:clamp(36px,7vh,80px) 24px}
.pkn-panda .pd-hero-isi{display:flex;flex-direction:column;gap:clamp(16px,2.6vh,24px);max-width:600px}
.pkn-panda .pd-hero h1{font-size:clamp(2.6rem,min(5.6vw,9vh),4.9rem);line-height:1.02;font-weight:700;letter-spacing:-.04em}
.pkn-panda .pd-hero h1 span{color:var(--primer)}
.pkn-panda .pd-hero h1 i{font-style:normal;color:var(--padi)}
.pkn-panda .pd-hero .lead{font-size:clamp(1.02rem,2.2vh,1.16rem);max-width:54ch}
.pkn-panda .pd-hero .btn{padding-block:clamp(13px,1.9vh,16px)}
.pkn-panda .pd-peran{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:6px}
.pkn-panda .pd-peran .pd-mono{margin-right:4px}
.pkn-panda .pd-peran a{font:500 .86rem/1 var(--f-judul);padding:9px 14px;border-radius:999px;border:1px solid var(--n2);background:color-mix(in srgb,var(--n0) 80%,transparent);color:var(--tinta);text-decoration:none;transition:border-color .2s,background .2s,transform .2s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pkn-panda .pd-peran a:hover{border-color:var(--padi);transform:translateY(-1px)}
.pkn-panda .pd-legenda{position:relative;z-index:2;display:flex;justify-content:flex-end;gap:18px;padding-bottom:20px}
.pkn-panda .pd-legenda span{display:inline-flex;align-items:center;gap:8px;font:500 .7rem/1 var(--f-data);letter-spacing:.1em;text-transform:uppercase;color:var(--n4)}
.pkn-panda .pd-legenda i{width:9px;height:9px;border-radius:50%}
.pkn-panda .pd-legenda .t{background:var(--padi)}.pkn-panda .pd-legenda .l{background:var(--primer)}.pkn-panda .pd-legenda .m{background:var(--tinta);opacity:.35}
@media (max-width:860px){
  .pkn-panda .pd-hero-wrap{align-items:flex-start;padding-bottom:min(78vw,340px)}
  .pkn-panda .pd-hero::after{background:linear-gradient(180deg,var(--n1) 0%,color-mix(in srgb,var(--n1) 70%,transparent) 55%,transparent 78%)}
  .pkn-panda .pd-legenda{justify-content:flex-start}
}

/* ---------- 02 MANIFESTO ---------- */
.pkn-panda .pd-manifesto{background:var(--n0);color:var(--tinta)}
.pkn-panda .pd-besar{font-size:clamp(2.2rem,5.2vw,4.2rem)!important;line-height:1.06;max-width:16ch;margin:22px 0 clamp(36px,6vh,64px)!important}
.pkn-panda .pd-besar em{color:var(--primer)}
.pkn-panda .pd-tiga{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--n2)}
.pkn-panda .pd-tiga li{padding:26px 26px 26px 0;display:flex;flex-direction:column;gap:8px;position:relative}
.pkn-panda .pd-tiga li+li{padding-left:26px;border-left:1px solid var(--n2)}
.pkn-panda .pd-tiga i{width:12px;height:12px;border-radius:50%;background:var(--padi);box-shadow:0 0 0 6px rgba(var(--rgb-titik),.14);margin-bottom:8px}
.pkn-panda .pd-tiga b{font:600 1.35rem/1.2 var(--f-judul);letter-spacing:-.02em}
.pkn-panda .pd-tiga span{color:var(--n4)}
.pkn-panda .pd-catatan{margin-top:28px;max-width:62ch}
@media (max-width:860px){.pkn-panda .pd-tiga{grid-template-columns:1fr}.pkn-panda .pd-tiga li+li{padding-left:0;border-left:0;border-top:1px solid var(--n2)}}

/* ---------- 03 KENYATAAN: kertas berserakan merapat ---------- */
.pkn-panda .pd-meja{position:relative;height:min(460px,72vw);min-height:360px}
.pkn-panda .pd-kertas{position:absolute;left:50%;top:50%;width:min(270px,62%);padding:16px 18px;border-radius:16px;background:rgba(233,241,250,.07);border:1px solid rgba(233,241,250,.16);color:var(--t-terang);font:600 1rem/1.35 var(--f-judul);box-shadow:0 20px 40px -24px rgba(0,0,0,.8);transform:translate(calc(-50% + var(--x,0%) * 1.4),calc(-50% + var(--y,0%) * 1.6)) rotate(var(--r,0deg));transition:transform .9s cubic-bezier(.2,.75,.2,1) calc(var(--i) * .07s),opacity .6s calc(var(--i) * .07s),background .6s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pkn-panda .pd-kertas small{display:block;font:500 .66rem/1 var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--t-redup);margin-bottom:8px}
.pkn-panda .pd-kertas.pd-satu{opacity:0;transform:translate(-50%,-50%) scale(.9);background:var(--primer);border-color:transparent;color:#fff;width:min(320px,80%);font-size:1.1rem;z-index:2}
.pkn-panda .pd-kertas.pd-satu small{color:rgba(255,255,255,.8)}
.pkn-panda .pd-kertas.pd-satu small b{color:var(--padi);font-weight:500}
.pkn-panda .pd-meja.rapat .pd-kertas{transform:translate(-50%,calc(-50% + 34px - (5 - var(--i)) * 12px)) rotate(0deg) scale(calc(1 - (5 - var(--i)) * .04));opacity:calc(.25 + var(--i) * .1);color:transparent}
.pkn-panda .pd-meja.rapat .pd-kertas small{color:transparent}
.pkn-panda .pd-meja.rapat .pd-kertas.pd-satu{transform:translate(-50%,calc(-50% + 34px)) scale(1);opacity:1;color:#fff;transition-delay:.45s}
.pkn-panda .pd-meja.rapat .pd-kertas.pd-satu small{color:rgba(255,255,255,.8)}

/* ---------- 04 PERJALANAN SATU CATATAN ---------- */
.pkn-panda .pd-perjalanan{background:var(--n1);color:var(--tinta);--k:0}
@media (min-width:861px){
  .pkn-panda section.pd-perjalanan{display:block;min-height:0;height:240vh;padding:0}
  .pkn-panda .pd-lekat{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-block:clamp(70px,10vh,100px) 40px}
  .pkn-panda .pd-lekat>.wrap{width:100%}
}
.pkn-panda .pd-jalur{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;position:relative;--isi:calc(var(--k) * 100%)}
.pkn-panda .pd-jalur::before,.pkn-panda .pd-jalur::after{content:"";position:absolute;left:6px;right:calc(100% / 6 - 6px);top:6px;height:2px;border-radius:2px;background:var(--n2)}
.pkn-panda .pd-jalur::after{background:linear-gradient(90deg,var(--padi),var(--primer));right:auto;width:calc((100% - 100% / 6) * var(--k))}
.pkn-panda .pd-jalur li{display:flex;flex-direction:column;gap:8px;position:relative;padding-top:30px;opacity:.38;transition:opacity .4s}
.pkn-panda .pd-jalur li.nyala{opacity:1}
.pkn-panda .pd-jalur i{position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--n0);border:2px solid var(--n3);transition:background .3s,border-color .3s,box-shadow .3s}
.pkn-panda .pd-jalur li.nyala i{background:var(--primer);border-color:var(--primer);box-shadow:0 0 0 6px rgba(var(--rgb-langit),.16)}
.pkn-panda .pd-jalur li.awal i{background:var(--padi);border-color:var(--padi);box-shadow:0 0 0 6px rgba(var(--rgb-titik),.18)}
.pkn-panda .pd-jalur small{font:500 .7rem/1 var(--f-data);letter-spacing:.12em;color:var(--padi)}
.pkn-panda .pd-jalur b{font:600 1.06rem/1.25 var(--f-judul);letter-spacing:-.01em}
.pkn-panda .pd-jalur span{color:var(--n4);font-size:.94rem;line-height:1.5}
/* Titik oranye yang berjalan */
.pkn-panda .pd-jalur li.awal::after{content:"";position:absolute;top:-3px;left:-3px;width:20px;height:20px;border-radius:50%;background:var(--padi);box-shadow:0 0 0 8px rgba(var(--rgb-titik),.2),0 0 26px rgba(var(--rgb-titik),.8);transform:translateX(calc((var(--lebar-jalur,0px) - var(--lebar-jalur,0px) / 6) * var(--k)));z-index:2}
@media (max-width:860px){
  .pkn-panda .pd-jalur{grid-template-columns:1fr;gap:0;padding-left:30px}
  .pkn-panda .pd-jalur::before{left:6px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .pkn-panda .pd-jalur::after,.pkn-panda .pd-jalur li.awal::after{display:none}
  .pkn-panda .pd-jalur li{padding:0 0 26px;opacity:1}
  .pkn-panda .pd-jalur li i{left:-30px;top:3px}
  .pkn-panda .pd-jalur li:not(.awal) i{background:var(--primer);border-color:var(--primer)}
}

/* ---------- 05 TEKNOLOGI ---------- */
.pkn-panda .pd-teknologi{background:var(--n0);color:var(--tinta)}
.pkn-panda .pd-modul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pkn-panda .pd-kartu{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:24px;border:1px solid var(--n2);background:var(--n1);color:var(--tinta);text-decoration:none;transition:transform .3s,border-color .3s,box-shadow .3s,background .3s,opacity .3s}
.pkn-panda .pd-kartu b{font:600 1.22rem/1.2 var(--f-judul);letter-spacing:-.02em}
.pkn-panda .pd-kartu>span:not(.pd-ikon){color:var(--n4);font-size:.97rem;line-height:1.55;flex:1}
.pkn-panda .pd-kartu small{margin-top:6px}
.pkn-panda .pd-ikon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--langit-muda);color:var(--primer);margin-bottom:6px;transition:background .3s,color .3s}
.pkn-panda .pd-ikon svg{width:24px;height:24px}
.pkn-panda .pd-kartu:hover,.pkn-panda .pd-kartu:focus-visible,.pkn-panda .pd-kartu.sorot{transform:translateY(-4px);border-color:var(--primer);box-shadow:0 22px 44px -28px rgba(var(--rgb-langit),.9);background:var(--n0)}
.pkn-panda .pd-kartu.sorot .pd-ikon{background:var(--primer);color:#fff}
.pkn-panda .pd-kartu.dipakai{border-color:var(--padi);background:var(--n0)}
.pkn-panda .pd-kartu.dipakai .pd-ikon{background:var(--titik-muda);color:var(--padi)}
.pkn-panda .pd-modul.ada-sorot .pd-kartu:not(.sorot):not(.dipakai){opacity:.45}
@media (max-width:960px){.pkn-panda .pd-modul{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pkn-panda .pd-modul{grid-template-columns:1fr}}

/* ---------- 06 EKOSISTEM: orbit ---------- */
.pkn-panda .pd-ekosistem .pd-dua{grid-template-areas:"kepala orbit" "panel orbit";align-items:start;row-gap:0}
.pkn-panda .pd-ekosistem .kepala{grid-area:kepala}.pkn-panda .pd-orbit{grid-area:orbit;align-self:center}.pkn-panda .pd-ruang-panel{grid-area:panel}
@media (max-width:960px){.pkn-panda .pd-ekosistem .pd-dua{grid-template-areas:"kepala" "orbit" "panel";row-gap:28px}}
.pkn-panda .pd-ruang-panel{margin-top:28px;min-height:200px;padding:24px;border-radius:22px;border:1px solid rgba(233,241,250,.14);background:rgba(233,241,250,.04)}
.pkn-panda .pd-ruang-panel>div{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pkn-panda .pd-ruang-panel h3{font-size:1.5rem}
.pkn-panda .pd-ruang-panel p{color:var(--t-redup)}
.pkn-panda .pd-orbit{position:relative;aspect-ratio:1;width:min(100%,540px);margin-inline:auto;container-type:inline-size}
.pkn-panda .pd-orbit-cincin{position:absolute;inset:9%;border-radius:50%;border:1px dashed rgba(124,200,242,.35)}
.pkn-panda .pd-orbit-cincin::before{content:"";position:absolute;inset:22%;border-radius:50%;border:1px solid rgba(124,200,242,.14)}
.pkn-panda .pd-orbit-inti{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(circle at 50% 35%,#FFFFFF 0%,#EAF4FB 100%);box-shadow:0 0 0 10px rgba(124,200,242,.1),0 0 60px rgba(var(--rgb-langit),.45)}
.pkn-panda .pd-orbit-inti img{width:66%;height:auto}
.pkn-panda .pd-orbit-inti small{font:500 .6rem/1 var(--f-data);letter-spacing:.14em;text-transform:uppercase;color:#53637D}
.pkn-panda .pd-orbit-putar{position:absolute;inset:0;animation:pdPutar 90s linear infinite}
/* Tombol diletakkan di cincin (jari-jari 41% lebar orbit); span berputar balik agar teks tetap tegak. */
.pkn-panda .pd-orbit-putar button{position:absolute;left:50%;top:50%;width:0;height:0;padding:0;transform:rotate(var(--s)) translateY(-41cqi) rotate(calc(var(--s) * -1))}
.pkn-panda .pd-orbit-putar button>span{position:absolute;left:0;top:0;width:0;height:0;animation:pdPutar 90s linear infinite reverse}
.pkn-panda .pd-orbit-putar em{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:10px 14px;border-radius:999px;background:var(--malam-0);border:1px solid rgba(124,200,242,.35);color:var(--t-terang);font:600 .86rem/1 var(--f-judul);transition:background .25s,border-color .25s}
.pkn-panda .pd-orbit:hover .pd-orbit-putar,.pkn-panda .pd-orbit:focus-within .pd-orbit-putar,.pkn-panda .pd-orbit:hover .pd-orbit-putar button>span,.pkn-panda .pd-orbit:focus-within .pd-orbit-putar button>span{animation-play-state:paused}
.pkn-panda .pd-orbit-putar button i{width:9px;height:9px;border-radius:50%;background:var(--padi)}
.pkn-panda .pd-orbit-putar button:hover em{border-color:var(--padi)}
.pkn-panda .pd-orbit-putar button[aria-pressed="true"] em{background:var(--primer);border-color:var(--primer);color:#fff}
.pkn-panda .pd-orbit-putar button[aria-pressed="true"] i{background:#fff}
@keyframes pdPutar{to{transform:rotate(360deg)}}
@media (max-width:600px){.pkn-panda .pd-orbit-putar em{font-size:.74rem;padding:8px 10px}.pkn-panda .pd-orbit-inti{width:30%}}

/* ---------- 07 DASBOR ---------- */
.pkn-panda .pd-dasbor{background:var(--n1);color:var(--tinta)}
.pkn-panda .pd-centang{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:10px}
.pkn-panda .pd-centang li{display:flex;gap:12px;align-items:flex-start;color:var(--n4)}
.pkn-panda .pd-centang li::before{content:"";flex:none;width:10px;height:10px;margin-top:8px;border-radius:50%;background:var(--padi);box-shadow:0 0 0 4px rgba(var(--rgb-titik),.15)}
.pkn-panda .pd-layar{margin:0;border-radius:24px;border:1px solid var(--n2);background:var(--n0);box-shadow:0 40px 80px -48px rgba(var(--rgb-peta),.55);overflow:hidden}
.pkn-panda .pd-layar-kepala{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--n2);font:600 .9rem var(--f-judul)}
.pkn-panda .pd-layar-kepala span{display:flex;gap:6px}
.pkn-panda .pd-layar-kepala span i{width:10px;height:10px;border-radius:50%;background:var(--n2)}
.pkn-panda .pd-layar-kepala em{margin-left:auto;font:500 .66rem/1 var(--f-data);letter-spacing:.1em;text-transform:uppercase;color:var(--padi);background:var(--titik-muda);padding:6px 9px;border-radius:999px}
.pkn-panda .pd-layar-isi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px}
.pkn-panda .pd-angka{padding:14px;border-radius:16px;background:var(--n1);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px}
.pkn-panda .pd-angka small{flex-basis:100%;font-size:.78rem;color:var(--n4);line-height:1.3;margin-bottom:6px}
.pkn-panda .pd-angka b{font:700 1.9rem/1 var(--f-judul);letter-spacing:-.03em}
.pkn-panda .pd-angka span{font:500 .8rem var(--f-data);color:var(--n4)}
.pkn-panda .pd-petak{grid-column:1 / span 2;display:grid;grid-template-columns:repeat(12,1fr);gap:5px;padding:14px;border-radius:16px;background:var(--n1)}
.pkn-panda .pd-petak i{aspect-ratio:1;border-radius:5px;background:var(--n2);transition:background .4s calc(var(--i) * 18ms),transform .4s calc(var(--i) * 18ms);transform:scale(.6)}
.pkn-panda .pd-layar.isi .pd-petak i{transform:none}
.pkn-panda .pd-layar.isi .pd-petak i.k2{background:var(--primer)}
.pkn-panda .pd-layar.isi .pd-petak i.k1{background:color-mix(in srgb,var(--primer) 40%,var(--n0))}
.pkn-panda .pd-layar.isi .pd-petak i.k0{background:var(--padi)}
.pkn-panda .pd-batang{display:flex;align-items:flex-end;gap:7px;padding:14px;border-radius:16px;background:var(--n1);min-height:140px}
.pkn-panda .pd-batang i{flex:1;height:6%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--primer),color-mix(in srgb,var(--primer) 50%,var(--n0)));transition:height .9s cubic-bezier(.2,.75,.2,1) calc(.3s + var(--i) * .08s)}
.pkn-panda .pd-layar.isi .pd-batang i{height:var(--t)}
.pkn-panda .pd-layar-legenda{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:16px;font:500 .7rem/1 var(--f-data);letter-spacing:.06em;color:var(--n4);text-transform:uppercase}
.pkn-panda .pd-layar-legenda span{display:inline-flex;gap:7px;align-items:center}
.pkn-panda .pd-layar-legenda i{width:10px;height:10px;border-radius:3px}
.pkn-panda .pd-layar-legenda .k2{background:var(--primer)}.pkn-panda .pd-layar-legenda .k1{background:color-mix(in srgb,var(--primer) 40%,var(--n0))}.pkn-panda .pd-layar-legenda .k0{background:var(--padi)}
@media (max-width:600px){.pkn-panda .pd-layar-isi{grid-template-columns:1fr 1fr}.pkn-panda .pd-angka:nth-child(3){grid-column:1 / -1}.pkn-panda .pd-petak,.pkn-panda .pd-batang{grid-column:1 / -1}}

/* ---------- 08 LAPISAN ---------- */
.pkn-panda .pd-lapisan{background:var(--n0);color:var(--tinta)}
.pkn-panda .pd-lapis{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px;align-items:stretch}
.pkn-panda .pd-tumpuk{display:flex;flex-direction:column;gap:10px;justify-content:center}
.pkn-panda .pd-tumpuk button{display:grid!important;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;padding:18px 20px!important;border-radius:18px;border:1px solid var(--n2)!important;background:var(--n1)!important;color:var(--tinta)!important;transition:transform .25s,border-color .25s,background .25s}
.pkn-panda .pd-tumpuk button:nth-child(2){margin-left:14px}.pkn-panda .pd-tumpuk button:nth-child(3){margin-left:28px}.pkn-panda .pd-tumpuk button:nth-child(4){margin-left:42px}
.pkn-panda .pd-tumpuk button:hover{transform:translateX(4px)}
.pkn-panda .pd-tumpuk button[aria-pressed="true"]{border-color:var(--primer)!important;background:var(--langit-muda)!important}
.pkn-panda .pd-tumpuk i{width:12px;height:12px;border-radius:50%;background:var(--primer)}
.pkn-panda .pd-tumpuk button[aria-pressed="true"] i{background:var(--padi);box-shadow:0 0 0 5px rgba(var(--rgb-titik),.2)}
.pkn-panda .pd-tumpuk b{font:600 1.1rem/1.2 var(--f-judul)}
.pkn-panda .pd-tumpuk small{font:500 .72rem var(--f-data);color:var(--n4);letter-spacing:.08em}
.pkn-panda .pd-lapis-layar{border-radius:26px;border:1px solid var(--n2);background:var(--n1);padding:clamp(22px,3vw,34px);min-height:300px}
.pkn-panda .pd-lapis-layar>div{display:flex;flex-direction:column;gap:16px;animation:pdMasuk .45s ease}
.pkn-panda .pd-lapis-layar h3{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2}
.pkn-panda .pd-lapis-layar ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.pkn-panda .pd-lapis-layar li{display:flex;gap:12px;color:var(--n4)}
.pkn-panda .pd-lapis-layar li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;border-radius:50%;background:var(--primer)}
@keyframes pdMasuk{from{opacity:0;transform:translateY(8px)}}
@media (max-width:860px){.pkn-panda .pd-lapis{grid-template-columns:1fr}.pkn-panda .pd-tumpuk button:nth-child(n){margin-left:0}}

/* ---------- 09 AKADEMI: peta metro ---------- */
.pkn-panda .pd-metro{display:grid;gap:22px;margin-bottom:40px}
.pkn-panda .pd-metro-jalur{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:center;--tunda:calc(var(--i) * .12s)}
.pkn-panda .pd-metro-jalur>b{font:600 1.02rem/1.2 var(--f-judul);color:#fff;display:flex;align-items:center;gap:10px}
.pkn-panda .pd-metro-jalur>b::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--c)}
.pkn-panda .pd-metro-jalur ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.pkn-panda .pd-metro-jalur ol::before{content:"";position:absolute;left:8px;right:calc(20% - 8px);top:7px;height:4px;border-radius:4px;background:var(--c);opacity:.85}
.pkn-panda .pd-metro-jalur li{position:relative;padding-top:28px;padding-right:10px;font-size:.88rem;color:var(--t-redup);line-height:1.35}
.pkn-panda .pd-metro-jalur li i{position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--malam);border:4px solid var(--c)}
.pkn-panda .pd-metro-jalur li.akhir i{background:var(--padi);border-color:#fff}
.pkn-panda .pd-metro-jalur li.akhir span{color:#fff;font-weight:700}
@media (max-width:860px){
  .pkn-panda .pd-metro-jalur{grid-template-columns:1fr;gap:12px}
  .pkn-panda .pd-metro-jalur ol{grid-template-columns:1fr;padding-left:28px;gap:10px}
  .pkn-panda .pd-metro-jalur ol::before{left:7px;right:auto;top:6px;bottom:6px;width:4px;height:auto}
  .pkn-panda .pd-metro-jalur li{padding:0}
  .pkn-panda .pd-metro-jalur li i{left:-28px}
}

/* ---------- 10 KEPERCAYAAN ---------- */
.pkn-panda .pd-kepercayaan{background:var(--n1);color:var(--tinta)}
.pkn-panda .pd-landasan{margin:0;display:grid;gap:0;border-top:1px solid var(--n3)}
.pkn-panda .pd-landasan div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--n2)}
.pkn-panda .pd-landasan dt{font:600 1.02rem/1.3 var(--f-judul);display:flex;gap:12px;align-items:flex-start}
.pkn-panda .pd-landasan dt::before{content:"";flex:none;width:10px;height:10px;margin-top:6px;border-radius:50%;border:2px solid var(--primer)}
.pkn-panda .pd-landasan dd{margin:0;color:var(--n4);font-size:.96rem}
@media (max-width:600px){.pkn-panda .pd-landasan div{grid-template-columns:1fr;gap:6px}}

/* ---------- 11 WARISAN: garis waktu yang memudar ---------- */
.pkn-panda .pd-waktu{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.pkn-panda .pd-waktu::before{content:"";position:absolute;left:0;right:-8vw;top:9px;height:2px;background:linear-gradient(90deg,var(--padi) 0%,var(--primer) 45%,rgba(124,200,242,0) 100%)}
.pkn-panda .pd-waktu li{position:relative;padding:40px 22px 0 0;display:flex;flex-direction:column;gap:8px}
.pkn-panda .pd-waktu li::before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;background:var(--malam);border:2px solid var(--primer)}
.pkn-panda .pd-waktu li:first-child::before{background:var(--padi);border-color:var(--padi);box-shadow:0 0 0 8px rgba(var(--rgb-titik),.2)}
.pkn-panda .pd-waktu li:nth-child(3){opacity:.75}.pkn-panda .pd-waktu li:nth-child(4){opacity:.55}
.pkn-panda .pd-waktu small{font:500 .72rem/1 var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:#7CC8F2}
.pkn-panda .pd-waktu b{font:600 1.18rem/1.3 var(--f-judul);color:#fff;letter-spacing:-.01em}
@media (max-width:860px){
  .pkn-panda .pd-waktu{grid-template-columns:1fr;padding-left:34px;gap:28px}
  .pkn-panda .pd-waktu::before{left:9px;right:auto;top:0;bottom:-40px;width:2px;height:auto;background:linear-gradient(180deg,var(--padi) 0%,var(--primer) 45%,rgba(124,200,242,0) 100%)}
  .pkn-panda .pd-waktu li{padding:0}
  .pkn-panda .pd-waktu li::before{left:-34px}
}

/* ---------- 12 PUSTAKA ---------- */
.pkn-panda .pd-pustaka{background:var(--n0);color:var(--tinta)}
.pkn-panda .pd-cari{position:relative;display:flex;gap:10px;max-width:820px}
.pkn-panda .pd-cari input[type="search"]{flex:1;min-width:0;height:62px;margin:0;padding:0 20px 0 54px;border-radius:999px;border:1.5px solid var(--n2);background:var(--n1);color:var(--tinta);font:500 1.05rem var(--f-isi);-webkit-appearance:none;appearance:none;box-shadow:none}
.pkn-panda .pd-cari input[type="search"]:focus{outline:none;border-color:var(--primer);box-shadow:0 0 0 4px rgba(var(--rgb-langit),.18)}
.pkn-panda .pd-cari-ikon{position:absolute;left:20px;top:21px;width:20px;height:20px;color:var(--n4)}
.pkn-panda .pd-cari .btn{height:62px}
.pkn-panda .pd-hasil{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;border-radius:20px;border:1px solid var(--n2);background:var(--n0);box-shadow:0 30px 60px -30px rgba(var(--rgb-peta),.6);padding:8px;display:grid}
.pkn-panda .pd-hasil a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;text-decoration:none;color:var(--tinta)}
.pkn-panda .pd-hasil a:hover,.pkn-panda .pd-hasil a:focus-visible{background:var(--langit-muda)}
.pkn-panda .pd-hasil a b{font:600 .98rem/1.35 var(--f-judul)}
.pkn-panda .pd-hasil a small{font:500 .68rem var(--f-data);letter-spacing:.08em;text-transform:uppercase;color:var(--n4)}
.pkn-panda .pd-hasil p{padding:12px 14px;color:var(--n4);margin:0}
.pkn-panda .pd-kanal{list-style:none;margin:22px 0 40px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pkn-panda .pd-kanal a{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1px solid var(--n2);text-decoration:none;color:var(--tinta);font:500 .9rem/1 var(--f-judul);transition:border-color .2s,background .2s}
.pkn-panda .pd-kanal a:hover{border-color:var(--primer);background:var(--langit-muda)}
.pkn-panda .pd-kanal small{font:500 .72rem var(--f-data);color:var(--n4)}
.pkn-panda .pd-artikel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pkn-panda .pd-artikel-kartu{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--tinta)}
.pkn-panda .pd-artikel-kartu img,.pkn-panda .pd-artikel-kosong{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;background:var(--langit-muda);display:block;transition:transform .35s}
.pkn-panda .pd-artikel-kosong{background:radial-gradient(circle at 30% 40%,rgba(var(--rgb-titik),.5) 0 4px,transparent 5px),radial-gradient(circle at 70% 60%,rgba(var(--rgb-langit),.6) 0 4px,transparent 5px),var(--langit-muda)}
.pkn-panda .pd-artikel-kartu b{font:600 1.08rem/1.35 var(--f-judul);letter-spacing:-.01em;transition:color .2s}
.pkn-panda .pd-artikel-kartu:hover b{color:var(--primer)}
.pkn-panda .pd-artikel-kartu:hover img{transform:scale(1.02)}
@media (max-width:860px){.pkn-panda .pd-artikel{grid-template-columns:1fr}.pkn-panda .pd-cari .btn{display:none}}

/* ---------- 13 AJAKAN ---------- */
.pkn-panda .pd-ajakan{position:relative;overflow:hidden;text-align:center}
.pkn-panda .pd-ajakan canvas{position:absolute;inset:0;width:100%;height:100%}
.pkn-panda .pd-ajakan .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px}
.pkn-panda .pd-ajakan h2{font-size:clamp(2.4rem,6vw,4.6rem)!important;line-height:1.02}
.pkn-panda .pd-ajakan .lead{max-width:56ch;margin-inline:auto}
.pkn-panda .pd-ajakan .aksi{justify-content:center}
.pkn-panda .pd-produk a{color:var(--t-terang);text-decoration:none;border-bottom:1px solid rgba(233,241,250,.35)}

@media (prefers-reduced-motion:reduce){
  .pkn-panda [data-muncul]{opacity:1;transform:none;transition:none}
  .pkn-panda .pd-orbit-putar,.pkn-panda .pd-orbit-putar button>span{animation:none}
  .pkn-panda .pd-kertas{transition:none}
}