baru: murni dekoratif jadi tidak perlu
menyentuh dua berkas HTML. Klik di sini terkirim sebagai klik pada
`.nav`, dan app.js sudah menutup menu untuk klik di luar panel. */
.nav::after{content:'';position:fixed;top:0;left:0;right:0;bottom:0;
background:rgba(6,12,30,.6);opacity:0;pointer-events:none;
transition:opacity .32s ease;z-index:1}
body.menu-open .nav::after{opacity:1;pointer-events:auto}
/* --- NAV: panel geser dari KANAN (pola centralcats.id) --- */
/* ⚠️ HARUS `position:fixed`, bukan `absolute`. Elemen absolut yang
digeser ke luar layar IKUT MENAMBAH area gulir halaman — akibatnya
layar HP bisa digeser ke kanan dan muncul ruang kosong. Elemen fixed
tidak pernah menambah area gulir. `body{overflow-x:hidden}` TIDAK
bisa diandalkan menahan ini di Safari/Chrome HP; sudah terbukti
bermasalah pada versi `2188e4ae` (31 Jul 2026). */
.nav-cta{position:fixed;top:0;right:0;z-index:2;
width:min(300px,80vw);height:100vh;height:100dvh;
flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
padding:92px 20px 28px;
background:linear-gradient(200deg,var(--navy-2) 0%,var(--navy-deep) 62%);
border-left:1px solid rgba(255,255,255,.1);
box-shadow:-26px 0 60px -26px rgba(0,0,0,.8);
overflow-y:auto;overscroll-behavior:contain;
/* Tertutup: visibility (bukan cuma transform) supaya link yang berada
di luar layar tidak bisa dijangkau tombol Tab. */
transform:translateX(100%);visibility:hidden;
transition:transform .35s cubic-bezier(.4,0,.2,1),visibility .35s}
.nav-cta.open{transform:none;visibility:visible}
/* Halaman di belakang tidak ikut bergulir selama panel terbuka. */
body.menu-open{overflow:hidden}
/* --- NAV: isi panel masuk bergiliran setelah panel selesai bergeser --- */
.nav-cta>*{opacity:0;transform:translateX(16px);
transition:opacity .28s ease,transform .28s ease,
color .2s,background .2s,border-color .2s}
.nav-cta.open>*{opacity:1;transform:none}
.nav-cta.open>*:nth-child(1){transition-delay:.12s}
.nav-cta.open>*:nth-child(2){transition-delay:.18s}
.nav-cta.open>*:nth-child(3){transition-delay:.24s}
.nav-cta.open>*:nth-child(4){transition-delay:.30s}
/* --- NAV: item menu + efek sentuh --- */
.nav a.link,.nav a.link.back{position:relative;display:flex;align-items:center;
gap:10px;font-size:16px;font-weight:500;color:#dbe4fb;
padding:15px 16px;border-radius:12px;
border-bottom:1px solid rgba(255,255,255,.07)}
/* Link terakhir sebelum tombol CTA tidak perlu garis — jangan pakai
`:last-of-type`, tombolnya juga elemen
jadi dialah yang kena. */
.nav a.link:has(+.btn){border-bottom:none}
/* Garis emas tumbuh dari tepi kiri pada item yang sedang disentuh.
`:active` ikut disertakan karena di layar sentuh tidak ada hover. */
.nav a.link::before{content:'';position:absolute;left:0;top:50%;
width:3px;height:0;border-radius:0 3px 3px 0;background:var(--gold);
transform:translateY(-50%);transition:height .22s ease}
.nav a.link:hover,.nav a.link:focus-visible,.nav a.link:active{
color:#fff;background:rgba(255,255,255,.07)}
.nav a.link:hover::before,.nav a.link:focus-visible::before,
.nav a.link:active::before{height:24px}
.nav-cta .btn{justify-content:center;margin-top:22px;padding:15px 20px}
}
/* ===== ≤860px — komponen halaman /tentang ===== */
@media(max-width:860px){
.vm{grid-template-columns:1fr}
.visi,.misi{padding:28px 24px}
/* Tablet: 2 per baris (2-2-1), kartu terakhir ikut ditengahkan. */
.values{grid-template-columns:repeat(4,1fr)}
.values>*:nth-child(4){grid-column:auto/span 2}
.values>*:nth-child(5){grid-column:2/span 2}
}
/* ===== ≤720px — HP besar / tablet kecil ===== */
@media(max-width:720px){
.steps{grid-template-columns:1fr}
section.pad{padding:clamp(52px,9vw,72px) 0}
}
/* ===== ≤560px — HP ===== */
@media(max-width:560px){
/* Navbar HP memakai nama panjang seperti footer. Ukurannya sedikit
diturunkan supaya muat berdampingan dengan logo + tombol hamburger;
kalau tetap tidak muat, teksnya boleh turun ke baris kedua — tinggi
nav 68px masih cukup untuk dua baris + baris kota. */
.nav .brand b{font-size:15px}
.nav .brand span{font-size:9.5px;letter-spacing:.14em}
.bento{grid-template-columns:1fr}
.wrap{padding:0 20px}
.trust{gap:22px}
.hero h1{font-size:clamp(34px,8.5vw,44px)}
/* Kartu Nilai (/tentang): satu kolom penuh, penggeseran kolom dilepas. */
.values{grid-template-columns:1fr}
.values>*,.values>*:nth-child(4),.values>*:nth-child(5){grid-column:auto}
}
/* ===== Hormati "kurangi animasi" — berlaku di semua lebar HP ===== */
@media(max-width:960px) and (prefers-reduced-motion:reduce){
.nav::after,.nav-cta,.nav-cta>*,.burger .bl,.nav a.link::before{transition:none}
.nav-cta.open>*{transition-delay:0s}
}