/*
 * Tampilan bersama halaman publik PST: latar judul halaman (hero) dan kartu.
 * Latar judul: kelas .hero-pst pada <section> judul; js/latar-judul.js menambahkan
 * kanvas titik-titik data yang menjauhi kursor dan gelombang interaktif di tepi bawah.
 */

.hero-pst {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background:
        radial-gradient(60rem 30rem at 85% -10%, rgba(56, 132, 214, 0.45), transparent 60%),
        radial-gradient(40rem 24rem at 0% 110%, rgba(247, 148, 29, 0.18), transparent 60%),
        linear-gradient(135deg, #003366 0%, #0b2d63 55%, #081f47 100%);
    /* Ruang untuk gelombang di tepi bawah */
    padding-bottom: 5rem !important;
}

.hero-pst > :not(.hero-latar) {
    position: relative;
    z-index: 1;
}

.hero-latar {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-latar canvas:not(.hero-ombak) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Gelombang di tepi bawah judul (digambar kanvas oleh js/latar-judul.js) */
.hero-ombak {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 5.5rem;
}

/* Pemisah antarbagian bergelombang; warna latar dan gelombangnya diisi js/latar-judul.js */
.pemisah-ombak {
    position: relative;
    height: 4.5rem;
    overflow: hidden;
    line-height: 0;
}

.pemisah-ombak canvas {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 100%;
}

/* Judul beranda muncul bertahap saat halaman dibuka */
@keyframes hero-muncul {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

#hero-section .container > * {
    animation: hero-muncul 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
#hero-section .container > :nth-child(2) { animation-delay: 0.08s; }
#hero-section .container > :nth-child(3) { animation-delay: 0.16s; }
#hero-section .container > :nth-child(4) { animation-delay: 0.24s; }
#hero-section .container > :nth-child(5) { animation-delay: 0.32s; }
#hero-section .container > :nth-child(6) { animation-delay: 0.4s; }
#hero-section .container > :nth-child(7) { animation-delay: 0.48s; }

/* ------------------------------------------------------------------ Kepala halaman */

header.kepala-pst {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    box-shadow: 0 1px 0 rgba(0, 51, 102, 0.06);
    transition: box-shadow 0.25s ease;
}

header.kepala-pst.menggulung {
    box-shadow: 0 8px 24px -10px rgba(0, 51, 102, 0.3);
}

.kepala-progres {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #f7941d, #fbbf24);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

.logo-pst img { transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.logo-pst:hover img { transform: rotate(-8deg) scale(1.12); }

/* Tautan menu: garis oranye tumbuh dari tengah saat disorot dan tetap pada menu yang aktif */
.nav-pst {
    position: relative;
    padding: 0.5rem 0.1rem;
}
.nav-pst::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.1rem;
    height: 2px;
    border-radius: 2px;
    background: #f7941d;
    transform: scaleX(0);
    transition: transform 0.25s ease;
}
.nav-pst:hover::after,
.nav-pst:focus-visible::after,
.group:hover > .nav-pst::after,
.group:focus-within > .nav-pst::after,
.nav-pst.aktif::after { transform: scaleX(1); }

.nav-pst .fa-chevron-down { transition: transform 0.25s ease; }
.group:hover > .nav-pst .fa-chevron-down,
.group:focus-within > .nav-pst .fa-chevron-down { transform: rotate(180deg); }

/* Menu turun: muncul sambil meluncur dari atas */
.menu-turun { transform: translateY(-8px); }
.group:hover > .menu-turun,
.group:focus-within > .menu-turun { transform: none; }
.menu-turun > div { border: 1px solid #e5e7eb; border-radius: 0.9rem; box-shadow: 0 18px 40px -14px rgba(0, 51, 102, 0.35); }

/* ------------------------------------------------------------------ Kaki halaman */

.kaki-pst {
    position: relative;
    color: #cbd9ee;
    background:
        radial-gradient(40rem 20rem at 100% 100%, rgba(56, 132, 214, 0.22), transparent 60%),
        radial-gradient(30rem 18rem at 0% 100%, rgba(247, 148, 29, 0.1), transparent 60%),
        #071d44;
}

.kaki-pst .pemisah-ombak { height: 4.5rem; }

.kaki-isi {
    display: grid;
    gap: 2.5rem;
    padding: 1.5rem 1rem 2.5rem;
    max-width: 72rem;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .kaki-isi { grid-template-columns: 19rem 1fr; gap: 3.5rem; }
}

.kaki-merek-nama { color: #fff; font-weight: 700; line-height: 1.25; }
.kaki-kontak { margin-top: 1.1rem; display: grid; gap: 0.6rem; font-size: 0.875rem; }
.kaki-kontak a, .kaki-kontak p { display: flex; gap: 0.7rem; align-items: flex-start; color: #cbd9ee; transition: color 0.2s; }
.kaki-kontak a:hover { color: #fff; }
.kaki-kontak i { width: 1.1rem; margin-top: 0.2rem; text-align: center; color: #f7941d; }

/* Kelompok menu mengalir seperti dinding bata, jadi tidak ada ruang kosong di antara kelompok */
.kaki-menu { column-count: 2; column-gap: 2rem; }
@media (min-width: 768px) { .kaki-menu { column-count: 3; } }

.kaki-kelompok { break-inside: avoid; margin-bottom: 2rem; }
.kaki-kelompok h2 {
    margin-bottom: 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}
.kaki-kelompok a, .kaki-kelompok button {
    display: block;
    padding: 0.28rem 0;
    font-size: 0.9rem;
    text-align: left;
    color: #cbd9ee;
    transition: color 0.2s, transform 0.2s;
}
.kaki-kelompok a:hover, .kaki-kelompok button:hover { color: #fff; transform: translateX(4px); }
.kaki-kelompok a:hover::before { content: "A a0"; color: #f7941d; }

.kaki-bawah {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1.25rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: #93a9cb;
}

/* Label kecil di atas judul halaman */
.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #dbeafe;
}

.hero-label::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: #f7941d;
}

/*
 * Tema indikator strategis: kelas tema-{warna} pada pembungkus halaman (atau bagian) menetapkan warna tema
 * untuk kepala halaman (.hero-tema), tab (.tab-tema), judul bagian, kotak sorotan, dan grafik (--tema).
 */
.tema-blue   { --tema: #1d4ed8; --tema-gelap: #172554; --tema-lembut: #eff6ff; --tema-garis: #bfdbfe; }
.tema-green  { --tema: #047857; --tema-gelap: #022c22; --tema-lembut: #ecfdf5; --tema-garis: #a7f3d0; }
.tema-indigo { --tema: #4f46e5; --tema-gelap: #1e1b4b; --tema-lembut: #eef2ff; --tema-garis: #c7d2fe; }
.tema-orange { --tema: #c2410c; --tema-gelap: #431407; --tema-lembut: #fff7ed; --tema-garis: #fed7aa; }
.tema-teal   { --tema: #0f766e; --tema-gelap: #042f2e; --tema-lembut: #f0fdfa; --tema-garis: #99f6e4; }
.tema-rose   { --tema: #be123c; --tema-gelap: #4c0519; --tema-lembut: #fff1f2; --tema-garis: #fecdd3; }

.hero-pst.hero-tema {
    background:
        radial-gradient(60rem 30rem at 85% -10%, rgba(255, 255, 255, 0.2), transparent 60%),
        linear-gradient(135deg, var(--tema, #003366) 0%, var(--tema-gelap, #081f47) 100%);
}
.hero-tema .hero-label { color: #fff; }

.warna-tema { color: var(--tema, #003366); }
.garis-tema { border-color: var(--tema, #f7941d); }
.kotak-tema { background: var(--tema-lembut, #eff6ff); border: 1px solid var(--tema-garis, #bfdbfe); }
.pita-tema { border-top: 4px solid var(--tema, #003366); }

.tab-tema {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    background: #fff;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}
.tab-tema:hover { border-color: var(--tema, #003366); color: var(--tema, #003366); }
.tab-tema.aktif { background: var(--tema, #003366); border-color: var(--tema, #003366); color: #fff; }

/*
 * Cetak halaman indikator (kelas halaman-indikator dipasang skrip indikator pada <html>).
 * Seluruh halaman: menu, tombol, dan asisten disembunyikan; kartu satu kolom dan tidak terpotong di tengah.
 * Satu indikator (body.cetak-satu): hanya #area-cetak yang tercetak.
 */
.hanya-cetak,
#area-cetak { display: none; }

@media print {
    @page { size: A4 portrait; margin: 14mm; }

    html.halaman-indikator { font-size: 11px; }
    html.halaman-indikator body { background: #fff !important; }
    html.halaman-indikator * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    html.halaman-indikator header,
    html.halaman-indikator footer,
    html.halaman-indikator nav,
    html.halaman-indikator button,
    html.halaman-indikator select,
    html.halaman-indikator summary,
    html.halaman-indikator .tidak-dicetak,
    html.halaman-indikator .hero-latar,
    html.halaman-indikator .hero-pst a,
    html.halaman-indikator #asisten-panel,
    html.halaman-indikator #aks-panel,
    html.halaman-indikator .aks-lompat { display: none !important; }

    html.halaman-indikator .hanya-cetak { display: block; }

    /* Kepala halaman menjadi judul biasa bergaris warna tema */
    html.halaman-indikator .hero-pst {
        background: none !important;
        padding: 0 0 8pt !important;
        margin-bottom: 12pt;
        border-bottom: 2pt solid var(--tema, #003366);
        overflow: visible;
    }
    html.halaman-indikator .hero-pst * { color: #111827 !important; }
    html.halaman-indikator .hero-label { border: 0; background: none; padding: 0; }
    html.halaman-indikator section { padding-top: 0 !important; background: #fff !important; }
    html.halaman-indikator .container { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }

    /* Kartu satu kolom; kartu, grafik, baris tabel dan baris perbandingan tidak terpotong antarhalaman */
    html.halaman-indikator .kisi-kartu { display: block !important; }
    html.halaman-indikator .kisi-kartu > article { margin-bottom: 8pt; padding: 10pt 12pt !important; }
    /* Cetak seluruh halaman memuat versi ringkas; definisi dan metadata ada pada cetakan per indikator */
    html.halaman-indikator body:not(.cetak-satu) .kisi-kartu .rincian-definisi { display: none !important; }
    html.halaman-indikator article.kartu-pst .banding { margin-top: 6pt; padding-top: 6pt; }
    html.halaman-indikator h2.border-b-2 { margin-top: 12pt !important; margin-bottom: 8pt !important; }
    html.halaman-indikator .kartu-pst {
        box-shadow: none !important;
        transform: none !important;
        border: 1px solid #d1d5db !important;
        break-inside: avoid;
    }
    html.halaman-indikator .grafik-indikator,
    html.halaman-indikator tr,
    html.halaman-indikator li,
    html.halaman-indikator .banding-isi > div,
    html.halaman-indikator .kotak-tema { break-inside: avoid; }
    html.halaman-indikator h1,
    html.halaman-indikator h2,
    html.halaman-indikator h3 { break-after: avoid; }
    /* Grafik di kiri dan tabelnya di kanan, supaya satu kartu ringkas dan dua kartu muat per lembar */
    html.halaman-indikator article.kartu-pst { display: block !important; }
    html.halaman-indikator article.kartu-pst > .grafik-indikator { float: left; width: 56%; margin-top: 8pt; }
    html.halaman-indikator article.kartu-pst > .grafik-indikator + details { margin: 8pt 0 0 60%; }
    html.halaman-indikator article.kartu-pst > .grafik-indikator + details ~ * { clear: both; }
    html.halaman-indikator article.kartu-pst td,
    html.halaman-indikator article.kartu-pst th { padding-top: 1.5pt; padding-bottom: 1.5pt; }
    html.halaman-indikator .banding-isi { max-height: none !important; overflow: visible !important; padding-right: 0; }
    /* Peta di kiri, batang perbandingan di kanan */
    html.halaman-indikator .banding-peta:not(:empty) { float: left; width: 46%; margin-top: 4pt; break-inside: avoid; }
    html.halaman-indikator .banding-peta:not(:empty) ~ .banding-isi { margin-left: 50%; }
    html.halaman-indikator .banding-peta p:last-child { display: none; }
    html.halaman-indikator .banding-kalimat { clear: both; padding-top: 4pt; }
    html.halaman-indikator a { color: inherit !important; text-decoration: none !important; }
    html.halaman-indikator .kaki-cetak { margin-top: 12pt; padding-top: 6pt; border-top: 1px solid #d1d5db; font-size: 9pt; color: #4b5563; }

    /* Satu indikator */
    html.halaman-indikator body.cetak-satu > *:not(#area-cetak) { display: none !important; }
    html.halaman-indikator body.cetak-satu #area-cetak { display: block; }
    #area-cetak .kepala-cetak { border-bottom: 2pt solid var(--tema, #003366); padding-bottom: 6pt; margin-bottom: 10pt; }
    #area-cetak .kepala-cetak p { font-size: 9pt; color: #4b5563; letter-spacing: 0.04em; text-transform: uppercase; }
    #area-cetak .kepala-cetak h1 { font-size: 16pt; font-weight: 700; color: #111827; margin-top: 6pt; }
    #area-cetak .kepala-cetak .angka-cetak { font-size: 26pt; font-weight: 800; color: #111827; text-transform: none; letter-spacing: 0; }
    #area-cetak article.kartu-pst { border: 0 !important; padding: 0 !important; break-inside: auto; }
}

/* Kartu: bersih, bayangan tipis, naik sedikit saat disorot */
.kartu-pst,
.pst-kartu {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.kartu-pst:hover,
.pst-kartu:hover,
.kartu-pst:focus-within {
    transform: translateY(-3px);
    border-color: #bfdbfe;
    box-shadow: 0 12px 28px -12px rgba(0, 51, 102, 0.28), 0 2px 6px rgba(15, 23, 42, 0.05);
}

/* Kartu berisi grafik/formulir: bayangan saja, tanpa bergeser */
.kartu-pst.diam:hover,
.kartu-pst.diam:focus-within {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .kartu-pst, .pst-kartu { transition: none; }
    .kartu-pst:hover, .pst-kartu:hover, .kartu-pst:focus-within { transform: none; }
}

/* ------------------------------------------------------------------ Aksesibilitas (js/aksesibilitas.js) */

/* Tautan "lompat ke isi": hanya terlihat saat mendapat fokus papan ketik */
.aks-lompat {
    position: absolute;
    left: 0.75rem;
    top: -4rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    background: #003366;
    color: #fff;
    font-weight: 600;
    transition: top 0.15s ease;
}

.aks-lompat:focus {
    top: 0.75rem;
}

/* Ukuran teks: ukuran dasar diperbesar, semua satuan rem ikut membesar */
html.aks-teks-1 { font-size: 112.5%; }
html.aks-teks-2 { font-size: 125%; }

/* Kontras tinggi: teks abu-abu menjadi gelap, bingkai dipertegas, latar judul tanpa hiasan */
html.aks-kontras body { background: #fff; }
html.aks-kontras .text-gray-400,
html.aks-kontras .text-gray-500,
html.aks-kontras .text-gray-600,
html.aks-kontras .text-gray-700 { color: #111827 !important; }
html.aks-kontras .text-blue-100,
html.aks-kontras .text-blue-200 { color: #fff !important; }
html.aks-kontras .kartu-pst,
html.aks-kontras .pst-kartu,
html.aks-kontras input,
html.aks-kontras select,
html.aks-kontras textarea { border-color: #111827 !important; }
html.aks-kontras .hero-pst,
html.aks-kontras .hero-pst.hero-tema { background: #001a33; }
html.aks-kontras .tab-tema { border-color: #111827; color: #111827; }
html.aks-kontras .tab-tema.aktif { background: #111827; color: #fff; }
html.aks-kontras .hero-latar canvas:not(.hero-ombak) { display: none; }
html.aks-kontras a:not([class*="bg-"]):not(.kartu-pst) { text-decoration: underline; }
html.aks-kontras :focus-visible { outline: 3px solid #f7941d !important; outline-offset: 2px; }

html.aks-tautan a:not(.kartu-pst):not([class*="rounded-full"]) { text-decoration: underline !important; }

/* Hentikan animasi dan transisi */
html.aks-diam *,
html.aks-diam *::before,
html.aks-diam *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}
html.aks-diam .kartu-pst:hover,
html.aks-diam .pst-kartu:hover { transform: none; }


/* ------------------------------------------------------------------ Alat bantu (komponen aksesibilitas) */
.alat-bantu {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}
.alat-fab {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: #003366;
    color: #fff;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.alat-fab:hover { filter: brightness(1.25); }
.alat-fab:focus-visible, .bilah-aksi:focus-visible { outline: 3px solid #f7941d; outline-offset: 2px; }
.alat-fab[aria-expanded="true"] { background: #f7941d; }
.alat-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.alat-menu.hidden { display: none; }
.bilah-aksi {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 0.6rem;
    padding: 0.25rem 0.9rem 0.25rem 0.25rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    color: #003366;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
.bilah-aksi:hover { background: #eff6ff; }
.bilah-aksi.hidden { display: none; }
.bilah-aksi[aria-pressed="true"], .bilah-aksi[aria-expanded="true"] { background: #003366; color: #fff; }
.bilah-ikon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 9999px;
    background: #eff6ff;
    color: #003366;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.bilah-aksi[aria-pressed="true"] .bilah-ikon, .bilah-aksi[aria-expanded="true"] .bilah-ikon { background: #f7941d; color: #fff; }

/* Panel aksesibilitas */
.aw-panel {
    position: fixed;
    left: 1rem;
    bottom: calc(var(--pst-tabbar-h, 0px) + 5.5rem);
    z-index: 65;
    width: 23rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - var(--pst-tabbar-h, 0px) - 7rem);
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    color: #1f2937;
}
.aw-panel.hidden { display: none; }
.aw-kepala { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: #003366; color: #fff; border-radius: 1rem 1rem 0 0; }
.aw-judul { font-weight: 700; }
.aw-tutup { width: 2rem; height: 2rem; border-radius: 0.5rem; color: #fff; }
.aw-tutup:hover { background: rgba(255, 255, 255, 0.15); }
.aw-isi { overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.aw-kartu { background: #fff; border-radius: 0.75rem; padding: 0.75rem; }
.aw-kartu-judul { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; margin-bottom: 0.5rem; }
.aw-profil {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    margin-bottom: 0.4rem;
    border: 1px solid #d1d5db;
    border-radius: 0.6rem;
    text-align: left;
}
.aw-profil:hover { background: #f9fafb; }
.aw-profil-ikon { width: 1.5rem; text-align: center; color: #003366; }
.aw-profil-teks { flex: 1; display: flex; flex-direction: column; font-size: 0.82rem; line-height: 1.25; }
.aw-profil-teks small { color: #6b7280; font-size: 0.72rem; margin-top: 0.1rem; }
.aw-saklar { width: 2.1rem; height: 1.2rem; border-radius: 9999px; background: #d1d5db; position: relative; flex-shrink: 0; transition: background 0.15s; }
.aw-saklar::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 0.9rem; height: 0.9rem; border-radius: 9999px; background: #fff; transition: left 0.15s; }
.aw-profil[aria-pressed="true"] { border-color: #003366; background: #eff6ff; }
.aw-profil[aria-pressed="true"] .aw-saklar { background: #003366; }
.aw-profil[aria-pressed="true"] .aw-saklar::after { left: 1.05rem; }
.aw-ukuran { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; margin-bottom: 0.6rem; }
.aw-ukuran-kendali { display: flex; align-items: center; gap: 0.4rem; }
.aw-ukuran-kendali button { width: 2rem; height: 2rem; border-radius: 0.5rem; border: 1px solid #d1d5db; color: #003366; }
.aw-ukuran-kendali button:hover { background: #eff6ff; }
.aw-ukuran-kendali output { min-width: 3rem; text-align: center; font-weight: 600; }
.aw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; }
.aw-tombol {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 4.2rem;
    padding: 0.5rem 0.3rem;
    border: 1px solid #d1d5db;
    border-radius: 0.6rem;
    font-size: 0.76rem;
    line-height: 1.2;
    text-align: center;
    color: #1f2937;
}
.aw-tombol i { font-size: 1.15rem; color: #003366; }
.aw-tombol:hover { background: #f9fafb; }
.aw-tombol[aria-pressed="true"] { background: #003366; border-color: #003366; color: #fff; }
.aw-tombol[aria-pressed="true"] i { color: #f7941d; }
.aw-reset { padding: 0.65rem; border-radius: 0.6rem; background: #fff; border: 1px solid #d1d5db; color: #b91c1c; font-weight: 600; font-size: 0.85rem; }
.aw-reset:hover { background: #fef2f2; }
.aw-panel button:focus-visible { outline: 3px solid #f7941d; outline-offset: 1px; }

.aks-dibaca { outline: 3px solid #f7941d !important; outline-offset: 2px; }
.aks-dialog-latar {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.45);
}
.aks-dialog-latar.hidden { display: none; }
.aks-dialog-isi {
    width: 100%;
    max-width: 30rem;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.25rem;
    border-radius: 1rem;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.aks-struktur { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.5rem; }
.aks-struktur button { text-align: left; padding: 0.4rem 0.5rem; border-radius: 0.4rem; font-size: 0.85rem; color: #003366; }
.aks-struktur button:hover { background: #eff6ff; }
@media print { .alat-bantu, .aw-panel, .aks-dialog-latar, .aks-garis-baca, .pst-tabbar { display: none !important; } }

/* Pilihan aksesibilitas (kelas pada <html>, dipasang js/aksesibilitas.js) */
html.aks-berat body *:not([class*="fa-"]):not(.fas):not(.far):not(.fab) { font-weight: 700 !important; }
html.aks-baris body * { line-height: 1.9 !important; }
html.aks-huruf body * { letter-spacing: 0.08em !important; word-spacing: 0.12em !important; }
html.aks-disleksia body *:not([class*="fa-"]):not(.fas):not(.far):not(.fab) { font-family: "Atkinson Hyperlegible", "Comic Sans MS", Verdana, sans-serif !important; }
html.aks-judul h1, html.aks-judul h2, html.aks-judul h3, html.aks-judul h4, html.aks-judul h5, html.aks-judul h6 {
    background: #fde68a;
    color: #111827 !important;
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
html.aks-fokus :focus, html.aks-fokus :focus-visible { outline: 4px solid #f7941d !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(247, 148, 29, 0.35) !important; }
html.aks-fokus a:hover, html.aks-fokus button:hover { outline: 3px dashed #f7941d; outline-offset: 2px; }
html.aks-tanpa-gambar img, html.aks-tanpa-gambar video, html.aks-tanpa-gambar picture { visibility: hidden !important; }
html.aks-kursor, html.aks-kursor * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'><path d='M4 2l16 9-7 2 4 8-3 1.5-4-8-6 5z' fill='black' stroke='white' stroke-width='1.5' stroke-linejoin='round'/></svg>") 4 2, auto !important;
}
.aks-garis-baca {
    position: fixed;
    left: 0;
    right: 0;
    height: 2.75rem;
    z-index: 55;
    pointer-events: none;
    background: rgba(253, 224, 71, 0.22);
    border-top: 3px solid #f7941d;
    border-bottom: 3px solid #f7941d;
}
/* Filter warna dipasang di <html> supaya elemen "fixed" tetap menempel pada layar */
html.aks-w-monokrom { filter: grayscale(1); }
html.aks-w-saturasi-rendah { filter: saturate(0.45); }
html.aks-w-saturasi-tinggi { filter: saturate(2); }
html.aks-w-kontras-terang { filter: contrast(0.85) brightness(1.08); }
html.aks-w-kontras-gelap { filter: invert(1) hue-rotate(180deg); }
html.aks-w-kontras-gelap img, html.aks-w-kontras-gelap video, html.aks-w-kontras-gelap canvas { filter: invert(1) hue-rotate(180deg); }
html.aks-kontras { filter: contrast(1.25); }

/* ------------------------------------------------------------------ Tablet dan HP: tab bar bawah, FAB, panel jadi lembar bawah */
.pst-tabbar { display: none; }

@keyframes pstLembarNaik {
    from { transform: translateY(28px); opacity: 0.5; }
    to { transform: translateY(0); opacity: 1; }
}

/* Menu atas berubah jadi hamburger di bawah 1280px; tab bar bawah menggantikannya (seperti aplikasi native) */
@media (max-width: 1279px) {
    html:has(.pst-tabbar) { --pst-tabbar-h: calc(3.75rem + env(safe-area-inset-bottom, 0px)); }
    body:has(.pst-tabbar) { padding-bottom: calc(var(--pst-tabbar-h) + 0.5rem); }
    #mobile-menu-btn { display: none !important; }

    .pst-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    .pst-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        min-height: 3.75rem;
        padding: 0.4rem 0.15rem;
        color: #6b7280;
        background: none;
        font-size: 0.75rem;
        font-weight: 700;
        -webkit-tap-highlight-color: transparent;
    }
    .pst-tab i { font-size: 1.2rem; transition: transform 0.15s ease; }
    .pst-tab:active i { transform: scale(0.85); }
    .pst-tab.aktif { color: #003366; }
    .pst-tab.aktif i { color: #f7941d; }
    .pst-tab:focus-visible { outline: 3px solid #f7941d; outline-offset: -3px; }

    /* Tombol mengambang naik di atas tab bar: alat bantu di kiri, Calista di kanan */
    .alat-bantu { bottom: calc(var(--pst-tabbar-h, 0px) + 0.75rem); left: calc(0.75rem + env(safe-area-inset-left, 0px)); }
    #asisten-tombol { bottom: calc(var(--pst-tabbar-h, 0px) + 0.75rem) !important; right: calc(0.75rem + env(safe-area-inset-right, 0px)) !important; }
    #asisten-panel { bottom: calc(var(--pst-tabbar-h, 0px) + 0.75rem) !important; right: calc(0.75rem + env(safe-area-inset-right, 0px)) !important; }

    /* Menu penuh layar terbuka: kunci gulir, singkirkan tombol mengambang */
    html.menu-terbuka body { overflow: hidden; }
    html.menu-terbuka .alat-bantu, html.menu-terbuka .pst-tabbar, html.menu-terbuka #asisten-tombol, html.menu-terbuka #asisten-panel { display: none !important; }
}

/* Layar sentuh: sasaran sentuh minimal ±48px */
@media (pointer: coarse) {
    .alat-fab { width: 3.75rem; height: 3.75rem; }
    .bilah-ikon { width: 3rem; height: 3rem; }
    .alat-fab, .bilah-aksi, .aw-tombol, .aw-profil, .pst-tab { -webkit-tap-highlight-color: transparent; }
    .aw-ukuran-kendali button { width: 2.9rem; height: 2.9rem; }
    .aw-tombol { min-height: 4.6rem; }
    .aw-tutup { width: 2.75rem; height: 2.75rem; }
}

/* HP: Calista jadi tombol bulat seperti FAB native; panel dan dialog jadi lembar dari bawah */
@media (max-width: 639px) {
    #asisten-tombol { width: 3.75rem; height: 3.75rem; padding: 0 !important; justify-content: center; }
    #asisten-tombol span { display: none; }
    /* Lembar Calista menutupi bawah layar: tombol alat bantu menyingkir selama terbuka */
    body:has(#asisten-panel:not(.hidden)) .alat-bantu { display: none; }
    #asisten-tombol i { margin: 0 !important; font-size: 1.5rem; }

    .aw-panel {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        max-height: 88vh;
        border-radius: 1.25rem 1.25rem 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: pstLembarNaik 0.26s cubic-bezier(0.2, 0.9, 0.25, 1);
    }
    .aks-dialog-latar { align-items: flex-end; padding: 0; }
    .aks-dialog-isi {
        max-width: none;
        max-height: 88vh;
        border-radius: 1.25rem 1.25rem 0 0;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        animation: pstLembarNaik 0.26s cubic-bezier(0.2, 0.9, 0.25, 1);
    }
    #asisten-panel {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: min(82vh, 34rem) !important;
        border-radius: 1.25rem 1.25rem 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: pstLembarNaik 0.26s cubic-bezier(0.2, 0.9, 0.25, 1);
    }
}

html.aks-diam .pst-tab i, html.aks-diam .aw-panel, html.aks-diam .aks-dialog-isi, html.aks-diam #asisten-panel { animation: none !important; transition: none !important; }

/* ------------------------------------------------------------------ Kartu berisi gambar/ikon sampul (halaman publik) */
/* Gambar sampul tampil utuh (logo, poster, infografis tidak terpotong) di bingkai 16:9 berlatar lembut */
img.w-full.object-cover.h-48,
img.w-full.object-cover.h-64 {
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #f1f5f9;
}
.kartu-pst.overflow-hidden > div.h-48.bg-gradient-to-br {
    height: auto;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
}

/* Kartu rata tinggi: judul dan isi mengalir, tombol/tautan terakhir selalu menempel di dasar kartu */
.kartu-pst.overflow-hidden { display: flex; flex-direction: column; }
.kartu-pst.overflow-hidden > img { flex-shrink: 0; }
.kartu-pst.overflow-hidden > .p-6 { flex: 1 1 auto; display: flex; flex-direction: column; }
.kartu-pst.overflow-hidden > .p-6 > :last-child { margin-top: auto; }
.kartu-pst.overflow-hidden > .p-6 > p:nth-last-child(2) { margin-bottom: 1rem; }
.swiper-slide > .kartu-pst { height: 100%; }
.kartu-pst.overflow-hidden h3 { overflow-wrap: anywhere; }

/* Kartu pilihan (landing page pembinaan): sampul di atas, keterangan di bawah, tanpa teks menimpa gambar */
.kartu-pilihan { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.kartu-pilihan-sampul {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
}
.kartu-pilihan-sampul img { width: 100%; height: 100%; object-fit: contain; background: #f1f5f9; }
.kartu-pilihan-sampul i { font-size: 3.5rem; }
.kartu-pilihan-isi { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.35rem; padding: 1.25rem 1.5rem 1.5rem; text-align: left; }
.kartu-pilihan-isi h3 { font-size: 1.25rem; font-weight: 700; color: #003366; }
.kartu-pilihan-isi p { color: #4b5563; font-size: 0.95rem; }
.kartu-pilihan-isi .kartu-pilihan-aksi { margin-top: auto; padding-top: 0.75rem; font-weight: 600; color: #003366; display: inline-flex; align-items: center; gap: 0.5rem; }
.kartu-pst:hover .kartu-pilihan-aksi { color: #f7941d; }

/* ------------------------------------------------------------------ Skala tipografi dan komponen bersama (seragam di semua menu)
 * Judul halaman 30/36px, judul bagian 24/30px, subjudul hero 18px, isi 16px, keterangan 14px (tidak ada teks di bawah 12px).
 * Dimuat sebelum tailwind.css, jadi kelas utilitas pada elemen yang sama tetap menang.
 */
.hero-pst { padding-top: 3rem; }
.judul-hero {
    margin-top: 1rem;
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}
.hero-label + .judul-hero { margin-top: 1rem; }
.sub-hero {
    margin: 0.75rem auto 0;
    max-width: 44rem;
    font-size: 1.125rem;
    line-height: 1.55;
    color: #dbeafe;
}
.hero-pst .judul-hero + .sub-hero + * { margin-top: 1.5rem; }
@media (min-width: 768px) {
    .judul-hero { font-size: 2.25rem; }
}

/* Judul bagian di badan halaman */
.judul-bagian { font-size: 1.5rem; line-height: 1.25; font-weight: 700; color: #003366; }
@media (min-width: 768px) { .judul-bagian { font-size: 1.875rem; } }

/* Tombol utama dan sekunder */
.tombol-pst {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem; border-radius: 0.5rem;
    background: #003366; color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.25;
    transition: filter 0.15s ease;
}
.tombol-pst:hover { filter: brightness(1.25); }
.tombol-pst.oranye { background: #f7941d; }