/*
 * Halaman pilar. Dimuat sesudah beranda.css: bagian setinggi satu layar, kartu, tombol, dan
 * penutup diambil dari beranda; berkas ini menambah hero berfoto, kartu kenyataan, sorotan,
 * dan cerita. Warna aksen dari kunci pilar lewat --c (diset di <main>).
 */

/* HERO */
.pkn-pilar-isi .pilar-hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:calc(100svh - var(--tinggi-global) - var(--atas-bilah));padding-block:clamp(32px,7vh,80px);background:radial-gradient(90% 90% at 85% 40%,color-mix(in srgb,var(--c) 28%,var(--malam)) 0%,var(--malam) 55%,var(--malam-0) 100%)}
.pkn-pilar-isi .pilar-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,color-mix(in srgb,var(--c) 45%,transparent) 1.2px,transparent 1.7px) 0 0/16px 16px;-webkit-mask:radial-gradient(60% 70% at 80% 40%,#000 0%,transparent 70%);mask:radial-gradient(60% 70% at 80% 40%,#000 0%,transparent 70%);opacity:.5;pointer-events:none}
.pkn-pilar-isi .pilar-hero-wrap{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center}
.pkn-pilar-isi .pilar-hero-isi{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2.6vh,24px)}
.pkn-pilar-isi .pilar-hero .label{color:var(--c)}
.pkn-pilar-isi .pilar-hero h1{font-size:clamp(2.3rem,min(5.6vw,8.6vh),4.8rem);line-height:1.02;font-weight:800;letter-spacing:-.04em;max-width:14em}
.pkn-pilar-isi .pilar-hero .lead{font-size:clamp(1rem,2.3vh,1.2rem);max-width:50ch}

/* Pengalih enam pilar: elemen navigasi, sorotannya bingkai biru menyala seperti menu atas dan kapsul */
.pkn-pilar-isi .pilar-pengalih{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:clamp(4px,1.5vh,14px)}
.pkn-pilar-isi .pilar-pengalih a{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font:500 .72rem/1.2 var(--f-data);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:#C2D4EC;transition:color .2s,background .2s,border-color .2s,box-shadow .2s}
.pkn-pilar-isi .pilar-pengalih a i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.pkn-pilar-isi .pilar-pengalih a:hover{color:#fff;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,.55)}
.pkn-pilar-isi .pilar-pengalih a.aktif{color:#fff;background:rgba(18,141,247,.24);border-color:rgba(77,168,255,.6)}
.pkn-pilar-isi .pilar-pengalih a:focus-visible{outline:3px solid #4DA8FF;outline-offset:2px}

/* Foto lapangan atau tempat foto */
.pkn-pilar-isi .pilar-foto{margin:0;border-radius:28px;overflow:hidden;position:relative;background:var(--malam-2)}
.pkn-pilar-isi .pilar-foto img{display:block;width:100%;height:100%;object-fit:cover}
.pkn-pilar-isi .pilar-foto-hero{aspect-ratio:4/5;max-height:72vh;width:100%;justify-self:end;box-shadow:0 40px 80px -30px rgba(3,9,20,.8),inset 0 0 0 1px rgba(255,255,255,.08)}
.pkn-pilar-isi .tempat-foto{display:flex;align-items:flex-end;padding:18px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 10px,rgba(255,255,255,.02) 10px 20px),linear-gradient(160deg,color-mix(in srgb,var(--c) 30%,var(--malam-2)),var(--malam))}
.pkn-pilar-isi .tempat-foto span{background:rgba(6,15,31,.78);color:var(--t-terang);padding:8px 12px;border-radius:10px;font-size:.82rem;line-height:1.4;max-width:34ch}
.pkn-pilar-isi .terang .tempat-foto{background:repeating-linear-gradient(135deg,var(--n2) 0 10px,var(--n1) 10px 20px)}
.pkn-pilar-isi .terang .tempat-foto span{background:var(--n0);color:var(--n4)}

/* KENYATAAN HARI INI */
.pkn-pilar-isi .pilar-kenyataan{background:var(--n0)}
.pkn-pilar-isi .pilar-masalah-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pkn-pilar-isi .pilar-masalah{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(22px,3.4vh,34px);border-radius:24px;background:var(--n1);border:1px solid var(--n2);border-top:4px solid var(--c)}
.pkn-pilar-isi .pilar-masalah .nomor{font:500 .8rem var(--f-data);color:var(--c);filter:brightness(.85)}
.pkn-pilar-isi .pilar-masalah h3{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.4;font-weight:700}
.pkn-pilar-isi .pilar-masalah p{color:var(--n4);font-size:.95rem}

/* MASA DEPAN */
.pkn-pilar-isi .pilar-masa{background:linear-gradient(180deg,var(--malam) 0%,var(--malam-0) 100%)}
.pkn-pilar-isi .pilar-masa-teks p{font:700 clamp(1.5rem,3.2vw,2.5rem)/1.3 var(--f-judul);letter-spacing:-.025em;color:var(--t-terang);max-width:32ch}
.pkn-pilar-isi .pilar-masa-teks p+p{margin-top:.8em;font-size:clamp(1.1rem,2vw,1.5rem);color:var(--t-redup)}

/* RUANG: kartu beranda, ikon berisi nomor */
.pkn-pilar-isi .kartu{--c:inherit}
.pkn-pilar-isi .ikon span{font:500 .78rem var(--f-data);color:var(--c);filter:brightness(.8)}

/* SOROTAN */
.pkn-pilar-isi .pilar-sorotan{background:var(--malam-0)}
.pkn-pilar-isi .pilar-sorotan .lead p{margin:0}
.pkn-pilar-isi .pilar-sorotan .lead p+p{margin-top:.6em}
.pkn-pilar-isi .pilar-jalan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.pkn-pilar-isi .pilar-jalan{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,3.4vh,34px);border-radius:24px;background:rgba(17,40,74,.7);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 3px 0 var(--c)}
.pkn-pilar-isi .pilar-jalan h3{font-size:1.35rem;color:#fff}
.pkn-pilar-isi .pilar-jalan p{color:var(--t-redup)}
.pkn-pilar-isi .pilar-jalan .aksi{margin-top:auto;padding-top:8px}
.pkn-pilar-isi .pilar-jalan .btn{padding:13px 20px;font-size:.88rem}
.pkn-pilar-isi .pilar-catatan{margin-top:20px;padding:20px 24px;border-radius:20px;border:1px dashed rgba(245,184,61,.45);background:rgba(245,184,61,.07)}
.pkn-pilar-isi .pilar-catatan h3{font:500 .75rem/1.3 var(--f-data);letter-spacing:.14em;text-transform:uppercase;color:var(--padi);margin-bottom:8px}
.pkn-pilar-isi .pilar-catatan p{color:var(--t-terang);font-size:1.02rem;max-width:72ch}

/* CERITA NYATA */
.pkn-pilar-isi .pilar-cerita{background:var(--n1)}
.pkn-pilar-isi .pilar-cerita-isi{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
.pkn-pilar-isi .pilar-foto-cerita{aspect-ratio:4/3;max-height:56vh;width:100%;border:1px solid var(--n2)}
.pkn-pilar-isi .pilar-cerita-teks{display:flex;flex-direction:column;gap:18px}
.pkn-pilar-isi .pilar-cerita blockquote{margin:0;padding:0;border:0;font:700 clamp(1.4rem,2.6vw,2.1rem)/1.3 var(--f-judul);letter-spacing:-.02em;color:var(--tinta)}
.pkn-pilar-isi .pilar-cerita .siapa{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:3px solid var(--c)}
.pkn-pilar-isi .pilar-cerita .siapa b{font:700 1rem var(--f-judul)}
.pkn-pilar-isi .pilar-cerita .siapa span{font-size:.88rem;color:var(--n4)}
.pkn-pilar-isi .pilar-perubahan p{color:var(--n4);max-width:60ch}
.pkn-pilar-isi .pilar-perubahan p+p{margin-top:.7em}

/* TERHUBUNG */
.pkn-pilar-isi .pilar-terhubung{background:var(--n0)}
.pkn-pilar-isi .pilar-terhubung-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:0}
.pkn-pilar-isi .pilar-terhubung .gerak{padding:clamp(20px,3vh,28px)}
.pkn-pilar-isi .pilar-terhubung .gerak b{font-size:1.15rem}
.pkn-pilar-isi .pilar-terhubung .gerak b span{display:inline-block;transition:transform .25s}
.pkn-pilar-isi .pilar-terhubung .gerak:hover b span{transform:translateX(4px)}
.pkn-pilar-isi .pilar-terhubung-visi{font:500 .68rem/1.3 var(--f-data)!important;letter-spacing:.12em;text-transform:uppercase}

/* AJAKAN: penutup beranda tanpa peta */
.pkn-pilar-isi .pilar-ajakan{background:radial-gradient(100% 80% at 50% 100%,color-mix(in srgb,var(--c) 30%,var(--malam)) 0%,var(--malam) 55%,var(--malam-0) 100%)}
.pkn-pilar-isi .pilar-ajakan .label{color:var(--c)}
.pkn-pilar-isi .pilar-ajakan h2{font-size:clamp(2rem,min(4.6vw,7vh),3.8rem)}

@media (max-width:860px){
  .pkn-pilar-isi .pilar-hero-wrap{grid-template-columns:1fr}
  .pkn-pilar-isi .pilar-foto-hero{aspect-ratio:4/3;max-height:none;justify-self:stretch}
  .pkn-pilar-isi .pilar-masalah-grid{grid-template-columns:1fr}
  .pkn-pilar-isi .pilar-cerita-isi{grid-template-columns:1fr}
}
@media (min-width:600px) and (max-width:860px){
  .pkn-pilar-isi .pilar-masalah-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}