/*
 * Beranda. Diambil dari mockup yang disetujui (mockup/beranda.src.html), dibatasi ke .pkn-beranda.
 * Layout: "Indonesia dari orbit, malam 2045". Cerita satu kolom 1240px; bagian malam (hero, fondasi,
 * panda, dampak, penutup) bergantian dengan bagian terang. Cahaya desa = kuning padi.
 */

.pkn-beranda{--t-hero:clamp(2.9rem,7.4vw,6.4rem);--t-56:clamp(2.3rem,5vw,3.5rem);--t-40:clamp(1.9rem,3.6vw,2.6rem);color-scheme:light}
.pkn-beranda h1,.pkn-beranda h2,.pkn-beranda h3{font-family:var(--f-judul);text-wrap:balance;margin:0;padding:0;letter-spacing:-.025em;color:inherit}
.pkn-beranda h2{font-size:var(--t-40);line-height:1.1;font-weight:800}
.pkn-beranda h3{font-size:1.15rem;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.pkn-beranda p{margin:0;padding:0}
.pkn-beranda a{color:inherit}
.pkn-beranda section{padding-block:clamp(72px,10vw,136px)}
/* Di laptop dan desktop, setiap bagian setinggi satu layar; ruang atas memberi tempat untuk kapsul nav */
@media (min-width:861px){
  .pkn-beranda section{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(80px,11vh,112px) clamp(36px,6vh,80px)}
  .pkn-beranda .kepala{margin-bottom:clamp(24px,5vh,56px)}
  .pkn-beranda h2{font-size:clamp(1.9rem,min(3.6vw,5.6vh),2.6rem)}
}
.pkn-beranda .kepala{display:flex;flex-direction:column;gap:18px;margin-bottom:56px;max-width:820px}

/* HERO */
/* Hero = satu layar penuh dikurangi nav global (46 px). Ukuran huruf ikut lebar DAN tinggi layar, linimasa didorong ke dasar. */
.pkn-beranda .hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 70% 60%,#0F2747 0%,var(--malam) 45%,var(--malam-0) 100%);padding-block:clamp(28px,7vh,80px) clamp(20px,4vh,44px);min-height:calc(100svh - var(--tinggi-global) - var(--atas-bilah));display:flex;flex-direction:column}
.pkn-beranda .hero canvas{position:absolute;inset:0;width:100%;height:100%}
.pkn-beranda .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,15,31,.82) 0%,rgba(6,15,31,.35) 42%,transparent 65%),linear-gradient(0deg,rgba(6,15,31,.75) 0%,transparent 30%);pointer-events:none}
.pkn-beranda .hero>.wrap{position:relative;z-index:2;width:100%;flex:1;display:flex;flex-direction:column}
.pkn-beranda .hero-isi{display:flex;flex-direction:column;gap:clamp(12px,2.6vh,26px);max-width:760px}
.pkn-beranda .hero h1{font-size:clamp(2.5rem,min(7.2vw,10.5vh),6.2rem);line-height:.98;font-weight:800;letter-spacing:-.045em;max-width:11.5em}
.pkn-beranda .hero h1 .desa{color:var(--padi);text-shadow:0 0 40px rgba(245,184,61,.55)}
.pkn-beranda .hero .lead{font-size:clamp(1rem,2.3vh,1.2rem);max-width:46ch}
.pkn-beranda .aksi{display:flex;flex-wrap:wrap;gap:12px}
.pkn-beranda .hero .btn{padding-block:clamp(12px,1.9vh,16px)}
.pkn-beranda .tahun{margin-top:auto;padding-top:clamp(24px,5vh,56px);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"angka cap" "rel rel";gap:clamp(10px,2vh,18px) 36px;align-items:end}
.pkn-beranda .tahun-angka{grid-area:angka}.pkn-beranda .rel{grid-area:rel;margin-top:28px}
.pkn-beranda .tahun-angka small{display:block;font:500 .7rem var(--f-data);letter-spacing:.18em;color:var(--t-redup)}
.pkn-beranda .tahun-angka b{font:500 clamp(2.6rem,5vw,3.6rem)/1 var(--f-data);letter-spacing:-.04em;color:var(--padi);font-variant-numeric:tabular-nums}
.pkn-beranda .rel{position:relative;padding-bottom:6px}
.pkn-beranda .rel-garis{position:relative;height:2px;background:rgba(157,176,203,.25);border-radius:2px}
.pkn-beranda .rel-isi{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--primer),var(--padi));border-radius:2px}
.pkn-beranda .titik{position:absolute;top:-22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:500 .72rem var(--f-data);color:var(--t-redup)}
.pkn-beranda .titik i{width:10px;height:10px;border-radius:50%;background:var(--malam);border:2px solid rgba(157,176,203,.6);margin-top:15px;transition:background .3s,border-color .3s}
.pkn-beranda .titik.lewat i{background:var(--padi);border-color:var(--padi)}
.pkn-beranda .titik.lewat{color:var(--t-terang)}
.pkn-beranda .titik:last-of-type{transform:translateX(-100%);align-items:flex-end}
.pkn-beranda .titik:first-of-type{transform:none;align-items:flex-start}
.pkn-beranda #capTahun{grid-area:cap;font:600 1.05rem/1.5 var(--f-judul);letter-spacing:-.01em;color:var(--t-terang);min-height:4.5em;max-width:72ch;transition:opacity .4s;align-self:end}
.pkn-beranda #capTahun span{display:block;font:400 .95rem/1.55 var(--f-isi);letter-spacing:0;color:var(--t-redup);margin-top:4px}
.pkn-beranda #capTahun.pudar{opacity:0}
@media (max-width:640px){.pkn-beranda .tahun{grid-template-columns:1fr;grid-template-areas:"angka" "cap" "rel"}.pkn-beranda .titik span{font-size:.62rem}.pkn-beranda #capTahun{min-height:6.5em}}
.pkn-beranda .ket-peta{position:absolute;right:max(20px,env(safe-area-inset-right,0px));top:16px;z-index:2;font:400 .7rem var(--f-data);color:rgba(157,176,203,.7);max-width:36ch;text-align:right}
@media (max-width:860px){.pkn-beranda .hero::after{background:linear-gradient(180deg,rgba(6,15,31,.82) 0%,rgba(6,15,31,.4) 38%,rgba(6,15,31,.08) 58%,rgba(6,15,31,.6) 100%)}.pkn-beranda .ket-peta{display:none}}

/* MANIFESTO */
.pkn-beranda .manifesto{background:var(--n0)}
.pkn-beranda .manifesto p.besar{font:700 clamp(1.7rem,3.8vw,3rem)/1.22 var(--f-judul);letter-spacing:-.03em;color:var(--n3);max-width:28ch;margin-top:28px}
.pkn-beranda .manifesto p.besar b{font-weight:700;color:var(--n3);transition:color .7s}
.pkn-beranda .manifesto p.besar b.nyala{color:var(--tinta)}
.pkn-beranda .manifesto p.besar b.biru.nyala{color:var(--primer)}
.pkn-beranda .ttd{margin-top:44px;display:flex;align-items:center;gap:18px}
.pkn-beranda .ttd .coret{font:italic 700 1.7rem/1 var(--f-judul);color:var(--primer)}
.pkn-beranda .ttd small{color:var(--n4);font-size:.85rem;line-height:1.4}

/* SATU HARI 2045 */
.pkn-beranda .hari{background:var(--n1);overflow:hidden}
.pkn-beranda .hari-jalur{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,380px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px;padding-left:max(20px,calc((100vw - 1240px)/2 + 20px));padding-right:20px;scrollbar-width:none}
.pkn-beranda .hari-jalur::-webkit-scrollbar{display:none}
.pkn-beranda .hari-kepala{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px 56px;align-items:end;margin-bottom:clamp(20px,4vh,40px)}
.pkn-beranda .hari-samping{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pkn-beranda .hari-samping .lead{font-size:1rem}
@media (max-width:860px){.pkn-beranda .hari-kepala{grid-template-columns:1fr}}
.pkn-beranda .adegan{scroll-snap-align:start;border-radius:24px;min-height:clamp(260px,42vh,400px);padding:clamp(20px,3vh,28px);display:flex;flex-direction:column;gap:clamp(8px,1.4vh,14px);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.pkn-beranda .adegan::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--langit)}
.pkn-beranda .adegan::after{content:"";position:absolute;inset:auto -10% -30% -10%;height:60%;z-index:-1;background:radial-gradient(60% 60% at 50% 100%,var(--matahari),transparent 70%);opacity:.9}
.pkn-beranda .adegan .jam{font:500 clamp(2.1rem,5vh,3rem)/1 var(--f-data);letter-spacing:-.04em}
.pkn-beranda .adegan .tempat{font:500 .72rem var(--f-data);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.pkn-beranda .adegan h3{font-size:1.35rem;line-height:1.25;margin-top:auto}
.pkn-beranda .adegan p{font-size:.95rem;opacity:.9}
.pkn-beranda .adegan .chip{align-self:flex-start;font:600 .72rem var(--f-judul);padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pkn-beranda .adegan svg.sil{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;z-index:-1;opacity:.35}
.pkn-beranda .geser{display:flex;gap:8px}
.pkn-beranda .geser button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--n3);font-size:1.1rem;color:var(--tinta)}
.pkn-beranda .geser button:hover{border-color:var(--tinta)}

/* RUANG HIDUP */
.pkn-beranda .ruang{background:var(--n0)}
.pkn-beranda .kartu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;scrollbar-width:none}
.pkn-beranda .kartu-grid::-webkit-scrollbar{display:none}
.pkn-beranda .kartu{--c:var(--primer);position:relative;background:var(--n1);border-radius:24px;padding:clamp(20px,3vh,30px);display:flex;flex-direction:column;gap:clamp(8px,1.4vh,14px);border:1px solid var(--n2);transition:transform .35s,box-shadow .35s,background .35s;overflow:hidden}
.pkn-beranda .kartu::before{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;background:radial-gradient(circle,color-mix(in srgb,var(--c) 30%,transparent) 1.2px,transparent 1.6px) 0 0/12px 12px;-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);opacity:.7}
.pkn-beranda .kartu:hover,.pkn-beranda .kartu:focus-within{transform:translateY(-6px);box-shadow:0 30px 50px -28px color-mix(in srgb,var(--c) 70%,transparent);background:var(--n0)}
.pkn-beranda .ikon{width:clamp(42px,6vh,56px);height:clamp(42px,6vh,56px);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);background:color-mix(in srgb,var(--c) 16%,transparent);display:grid;place-items:center}
.pkn-beranda .ikon svg{width:26px;height:26px;stroke:var(--c);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pkn-beranda .kartu .pilar{font:500 .72rem var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--n4)}
.pkn-beranda .kartu h3{font-size:1.3rem}
.pkn-beranda .kartu p{color:var(--n4);font-size:.95rem}
.pkn-beranda .kartu .bawah{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:10px}
.pkn-beranda .app{font:600 .75rem var(--f-judul);padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--tinta)}
.pkn-beranda .gratis{position:absolute;top:26px;right:26px;font:700 .7rem var(--f-judul);background:var(--padi);color:var(--malam);padding:6px 11px;border-radius:999px;max-width:16ch;text-align:center;line-height:1.25}
.pkn-beranda .lihat{font:600 .85rem var(--f-judul);color:var(--primer);text-decoration:none;margin-left:auto}
.pkn-beranda .lihat:hover{text-decoration:underline}
@media (max-width:900px){.pkn-beranda .kartu-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}.pkn-beranda .kartu{scroll-snap-align:start}}

/* FONDASI */
.pkn-beranda .fondasi{background:linear-gradient(180deg,var(--malam) 0%,var(--malam-0) 100%)}
.pkn-beranda .fondasi .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.pkn-beranda .lapis{display:grid;gap:8px;margin-top:clamp(18px,3.5vh,32px)}
.pkn-beranda .lapis div{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:clamp(10px,1.6vh,16px) 18px;background:rgba(17,40,74,.6)}
.pkn-beranda .lapis span{font:500 .8rem var(--f-data);color:var(--padi)}
.pkn-beranda .lapis b{display:block;font:700 1rem var(--f-judul);color:#fff}
.pkn-beranda .lapis small{color:var(--t-redup);font-size:.82rem}
.pkn-beranda .lapis em{font:500 .75rem var(--f-data);font-style:normal;color:var(--t-redup);white-space:nowrap}
.pkn-beranda .iso{width:100%;max-width:100%;height:auto;max-height:70vh}
.pkn-beranda .iso .alir{animation:pkn-alir 1.6s linear infinite}
@keyframes pkn-alir{to{stroke-dashoffset:-20}}
@media (max-width:860px){.pkn-beranda .fondasi .wrap{grid-template-columns:1fr}.pkn-beranda .lapis em{display:none}.pkn-beranda .lapis div{grid-template-columns:36px 1fr}}

/* PANDA */
.pkn-beranda .panda{background:var(--malam-0);position:relative;overflow:hidden}
.pkn-beranda .panda .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.pkn-beranda .heliks{position:relative;width:100%;aspect-ratio:1.15;max-width:100%;max-height:62vh}
.pkn-beranda .heliks canvas{width:100%;height:100%;display:block}
.pkn-beranda .heliks .inti{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:136px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,#1A3D6B,var(--malam));display:grid;place-items:center;font:800 1.08rem var(--f-judul);color:#fff;letter-spacing:-.02em;text-align:center;box-shadow:inset 0 0 0 1px rgba(18,141,247,.5)}
.pkn-beranda .heliks .inti small{display:block;font:500 .6rem var(--f-data);letter-spacing:.14em;color:var(--padi);text-align:center;margin-top:2px}
.pkn-beranda .untai{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-top:28px}
.pkn-beranda .untai div{display:flex;align-items:center;gap:10px;font:500 .9rem var(--f-judul);color:var(--t-terang)}
.pkn-beranda .untai i{width:22px;height:4px;border-radius:2px;background:var(--c)}
@media (max-width:860px){.pkn-beranda .panda .wrap{grid-template-columns:1fr}.pkn-beranda .heliks{order:2}}

/* DAMPAK */
.pkn-beranda .dampak{background:var(--malam)}
.pkn-beranda .dampak-atas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end}
.pkn-beranda .dampak-atas .lead{font-size:1rem}
.pkn-beranda .peta-bingkai{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,300px);gap:28px;align-items:center;margin-top:clamp(20px,4vh,40px)}
.pkn-beranda .peta-dampak{position:relative;width:100%;aspect-ratio:233/88;max-width:100%}
@media (max-width:860px){.pkn-beranda .dampak-atas{grid-template-columns:1fr}.pkn-beranda .peta-bingkai{grid-template-columns:1fr}}
.pkn-beranda .peta-dampak canvas{width:100%;height:100%;display:block}
.pkn-beranda .hot{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.pkn-beranda .hot::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--padi);box-shadow:0 0 0 0 rgba(245,184,61,.6);animation:pkn-denyut 2.4s infinite}
.pkn-beranda .hot.aktif::before{background:#fff;box-shadow:0 0 0 6px rgba(245,184,61,.45)}
@keyframes pkn-denyut{0%{box-shadow:0 0 0 0 rgba(245,184,61,.6)}100%{box-shadow:0 0 0 18px rgba(245,184,61,0)}}
.pkn-beranda .kisah{border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:24px;background:rgba(17,40,74,.7);display:grid;gap:10px;min-height:190px}
.pkn-beranda .kisah small{font:500 .72rem var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--padi)}
.pkn-beranda .kisah b{font:700 1.2rem var(--f-judul);color:#fff}
.pkn-beranda .kisah p{color:var(--t-redup);font-size:.95rem}
.pkn-beranda .kisah .contoh{font:400 .7rem var(--f-data);color:rgba(157,176,203,.7)}

/* CERITA */
.pkn-beranda .cerita-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pkn-beranda .cerita{background:var(--n0);border-radius:24px;overflow:hidden;border:1px solid var(--n2);display:flex;flex-direction:column}
.pkn-beranda .foto{aspect-ratio:16/9;max-width:100%;background:repeating-linear-gradient(135deg,var(--n2) 0 10px,var(--n1) 10px 20px);display:flex;align-items:flex-end;padding:14px;font-size:.78rem;color:var(--n4)}
.pkn-beranda .foto span{background:var(--n0);padding:6px 10px;border-radius:8px;line-height:1.35}
.pkn-beranda .cerita .isi{padding:26px;display:flex;flex-direction:column;gap:14px;flex:1}
.pkn-beranda .cerita blockquote{margin:0;padding:0;border:0;font:600 1.15rem/1.45 var(--f-judul);letter-spacing:-.01em;color:var(--tinta)}
.pkn-beranda .cerita .siapa{margin-top:auto;font-size:.85rem;color:var(--n4)}
.pkn-beranda .kepala.kepala-blog{flex-direction:row;max-width:none;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pkn-beranda .kepala-blog>div{display:flex;flex-direction:column;gap:18px}
.pkn-beranda .tombol-teks{font-weight:600;color:var(--primer);text-decoration:none;white-space:nowrap}
.pkn-beranda .tombol-teks:hover{text-decoration:underline}
.pkn-beranda .blog-kartu{text-decoration:none;color:var(--tinta);transition:transform .25s,box-shadow .25s,border-color .25s}
.pkn-beranda .blog-kartu:hover{transform:translateY(-3px);border-color:var(--primer);box-shadow:0 14px 34px rgba(17,40,74,.12)}
.pkn-beranda .blog-kartu .foto{padding:0;position:relative;overflow:hidden}
.pkn-beranda .blog-kartu .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pkn-beranda .blog-kartu .kat{font:500 .7rem var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--primer)}
.pkn-beranda .blog-kartu h3{margin:0;font:700 1.12rem/1.4 var(--f-judul);letter-spacing:-.01em;color:var(--tinta);transition:color .2s}
.pkn-beranda .blog-kartu:hover h3{color:var(--primer)}
.pkn-beranda .blog-kartu p{margin:0;color:var(--n4);font-size:.9rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:900px){.pkn-beranda .cerita-grid{grid-template-columns:1fr}}

/* CARA */
.pkn-beranda .cara{background:var(--n0)}
.pkn-beranda .langkah{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;position:relative}
.pkn-beranda .langkah::before{content:"";position:absolute;top:23px;left:23px;right:23px;height:2px;background:linear-gradient(90deg,var(--primer),var(--tumbuh))}
.pkn-beranda .langkah div{position:relative;display:flex;flex-direction:column;gap:10px}
.pkn-beranda .langkah .nomor{width:48px;height:48px;border-radius:50%;background:var(--n0);border:2px solid var(--primer);display:grid;place-items:center;font:500 1rem var(--f-data);color:var(--primer)}
.pkn-beranda .langkah p{color:var(--n4);font-size:.92rem}
.pkn-beranda .keahlian{margin-top:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--n2);border-radius:20px;overflow:hidden;border:1px solid var(--n2)}
.pkn-beranda .keahlian div{background:var(--n0);padding:24px}
.pkn-beranda .keahlian small{display:block;font:500 .7rem var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--n4);margin-bottom:8px}
.pkn-beranda .keahlian b{font:600 1.02rem/1.4 var(--f-judul)}
@media (max-width:860px){.pkn-beranda .langkah{grid-template-columns:1fr 1fr}.pkn-beranda .langkah::before{display:none}.pkn-beranda .keahlian{grid-template-columns:1fr}}

/* GERAKAN */
.pkn-beranda .dua{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px}
.pkn-beranda .gerak-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.pkn-beranda .gerak{--c:var(--primer);border-radius:18px;padding:22px;background:color-mix(in srgb,var(--c) 11%,var(--n0));text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:transform .25s;color:var(--tinta)}
.pkn-beranda .gerak:hover{transform:translateY(-3px)}
.pkn-beranda .gerak b{font:700 1rem var(--f-judul)}
.pkn-beranda .gerak small{color:var(--n4);font-size:.85rem;line-height:1.45}
.pkn-beranda .artikel{display:flex;flex-direction:column;margin-top:28px}
.pkn-beranda .artikel a{text-decoration:none;padding-block:20px;border-bottom:1px solid var(--n2);display:flex;flex-direction:column;gap:6px;color:var(--tinta)}
.pkn-beranda .artikel a:first-child{border-top:1px solid var(--n2)}
.pkn-beranda .artikel a:hover b{color:var(--primer)}
.pkn-beranda .artikel small{font:500 .7rem var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--primer)}
.pkn-beranda .artikel b{font:600 1.08rem/1.4 var(--f-judul);transition:color .2s}
@media (max-width:860px){.pkn-beranda .dua{grid-template-columns:1fr}}

/* PENUTUP */
.pkn-beranda .penutup{position:relative;overflow:hidden;background:radial-gradient(100% 80% at 50% 100%,#13305A 0%,var(--malam) 50%,var(--malam-0) 100%)}
.pkn-beranda .penutup canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.pkn-beranda .penutup .wrap{position:relative;width:100%}
.pkn-beranda .penutup-isi{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(18px,3.5vh,32px);text-shadow:0 2px 30px rgba(6,15,31,.9)}
.pkn-beranda .penutup h2{font-size:clamp(2.4rem,min(6vw,9vh),5.2rem);line-height:1.02;letter-spacing:-.045em;max-width:14em}
.pkn-beranda .penutup h2 span{color:var(--padi)}
.pkn-beranda .penutup-isi .aksi{justify-content:center}

/* Penyesuaian agar setiap bagian muat satu layar laptop (diuji di 1366x768 dan 1536x864) */
@media (min-width:861px){
  .pkn-beranda section{padding-block:clamp(72px,10.5vh,108px) clamp(24px,4.5vh,72px)}
  .pkn-beranda .kepala{max-width:none}
  .pkn-beranda .kartu-grid{gap:14px}
  .pkn-beranda .kartu{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr auto;column-gap:12px;row-gap:6px;align-items:center;padding:clamp(16px,2.6vh,26px)}
  .pkn-beranda .kartu>h3,.pkn-beranda .kartu>p,.pkn-beranda .kartu>.bawah{grid-column:1/-1}
  .pkn-beranda .kartu>p{align-self:start}
  .pkn-beranda .kartu .ikon{width:40px;height:40px}
  .pkn-beranda .kartu .ikon svg{width:22px;height:22px}
  .pkn-beranda .kartu h3{font-size:1.15rem;margin-top:4px}
  .pkn-beranda .kartu p{font-size:.9rem;line-height:1.55}
  .pkn-beranda .kartu .bawah{margin-top:0;padding-top:4px}
  .pkn-beranda .lapis div{padding-block:clamp(8px,1.3vh,13px)}
  .pkn-beranda .lapis div>span:nth-child(2){display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .pkn-beranda .lapis b{display:inline}
  .pkn-beranda .foto{aspect-ratio:auto;height:clamp(110px,20vh,190px)}
  .pkn-beranda .cerita .isi{padding:20px 22px;gap:10px}
  .pkn-beranda .cerita blockquote{font-size:1.05rem}
  .pkn-beranda .langkah{gap:20px}
  .pkn-beranda .keahlian{margin-top:clamp(24px,4.5vh,64px)}
  .pkn-beranda .keahlian div{padding:clamp(14px,2.2vh,24px) 22px}
}
/* Tablet dan HP */
@media (max-width:860px){
  .pkn-beranda .heliks{aspect-ratio:1.6;max-height:50vh}
}
@media (min-width:600px) and (max-width:860px){
  .pkn-beranda .kartu-grid{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;padding-bottom:0}
  .pkn-beranda .cerita-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pkn-beranda .cerita .isi{padding:18px}
  .pkn-beranda .cerita blockquote{font-size:1rem}
}
@media (max-width:640px){
  .pkn-beranda .titik span{visibility:hidden}
  .pkn-beranda .titik:first-of-type span,.pkn-beranda .titik:last-of-type span{visibility:visible}
}
@media (max-width:480px){
  .pkn-beranda .gerak-grid{grid-template-columns:1fr}
}