/* =============================================================================
   apm-artikel.css — sistem baca & daftar artikel APM
   =============================================================================
   Dimuat PALING AKHIR di <head> supaya menang atas tema vendor (tnewlandingpage)
   tanpa perlu !important: specificity sama, yang belakangan menang.

   Kenapa berkas terpisah, bukan menyunting theme.css/inner.css:
   berkas tema itu milik template pihak ketiga dan dipakai SELURUH halaman.
   Menyuntingnya berarti setiap perbaikan artikel berisiko menggeser halaman
   lain. Semua aturan di sini dipagari di bawah .apm-artikel / .apm-baca.

   Ukuran diambil dari pengukuran nyata (29 Agu 2026):
   sebelumnya isi artikel 15px, `margin: 0` antar-paragraf, rata kanan-kiri,
   dan 101 karakter per baris. Ketiganya diperbaiki di sini.
   ========================================================================== */

:root {
    /* Zamrud pekat untuk latar terang, hijau pucuk untuk latar gelap.
       Satu warna tidak bisa melayani keduanya: warna yang cukup gelap agar
       terbaca di atas kertas akan lenyap di atas tinta, dan sebaliknya.
       Hijau neon lama dipakai untuk dua-duanya, dan di bidang lebar itulah
       yang membuatnya terasa murah — warna berjenuh tinggi di area luas. */
    --apm-hijau: #0b5c3b;
    --apm-hijau-tua: #08472d;
    --apm-hijau-terang: #2fbf71;
    --apm-hijau-samar: #e9efeb;
    --apm-kuningan: #b08d57;
    --apm-tinta: #12181a;
    /* Teks isi: abu sangat gelap, BUKAN hitam murni + opacity.
       `color:#000; opacity:.7` mewarisi transparansi ke seluruh anak
       (termasuk <strong> dan tautan) sehingga penegasan ikut pudar. */
    --apm-teks: #3a4145;
    /* #6b7570 mencapai 4,77:1 di putih tetapi hanya 4,32:1 di
       --apm-kertas-lembut, dan token ini justru paling sering dipakai DI ATAS
       latar itu (tab kategori tidak aktif, nomor peringkat, meta kartu).
       #666f6a: 5,19:1 di putih, 4,97:1 di --apm-kertas, 4,70:1 di
       --apm-kertas-lembut. Diukur, bukan dikira. */
    --apm-teks-lemah: #666f6a;

    /* Kuningan sebagai TEKS. --apm-kuningan #b08d57 hanya 2,96:1 di
       --apm-kertas — cukup untuk garis dan latar, tidak untuk huruf.
       Polanya menyalin --pn-kuningan-teks di panel.css. */
    --apm-kuningan-teks: #80612d;
    --apm-garis: #e2e6e2;
    --apm-kertas: #fafaf9;
    --apm-kertas-lembut: #f3f4f2;

    /* Lebar baca. 68ch ≈ 65–75 karakter — rentang yang dipakai
       penerbit teks panjang; di luar itu mata kehilangan awal baris. */
    --apm-lebar-baca: 68ch;
    --apm-radius: 14px;
}

/* -----------------------------------------------------------------------------
   1. KERANGKA HALAMAN ARTIKEL
   -------------------------------------------------------------------------- */

.apm-artikel {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--apm-tinta);
    background: var(--apm-kertas);
}

.apm-wadah {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 20px;
}

/* Bilah kemajuan baca. Artikel di sini rata-rata 8.800 karakter (terpanjang
   63.000) — pembaca berhak tahu masih berapa jauh. */
.apm-progres {
    position: fixed;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    z-index: 9999;
    background: transparent;
    pointer-events: none;
}

.apm-progres__isi {
    height: 100%;
    width: 0;
    background: var(--apm-hijau-terang);
    transition: width .08s linear;
}

/* -----------------------------------------------------------------------------
   2. HERO ARTIKEL
   -------------------------------------------------------------------------- */

.apm-hero {
    position: relative;
    isolation: isolate;
    background: #0d1013;
    color: #fff;
    overflow: hidden;
}

.apm-hero__gambar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .42;
    z-index: -2;
}

.apm-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(13, 16, 19, .55) 0%, rgba(13, 16, 19, .78) 55%, #0d1013 100%);
}

.apm-hero__isi {
    max-width: 780px;
    padding-block: clamp(64px, 12vw, 132px) clamp(36px, 6vw, 64px);
}

.apm-remah {
    font-size: .8125rem;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 20px;
}

.apm-remah a {
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
}

.apm-remah a:hover {
    color: var(--apm-hijau-terang);
}

.apm-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--apm-hijau-terang);
    border: 1px solid rgba(47, 191, 113, .45);
    border-radius: 999px;
    padding: 6px 14px;
    text-decoration: none;
}

a.apm-eyebrow:hover {
    background: rgba(47, 191, 113, .14);
    color: var(--apm-hijau-terang);
}

/* Judul dalam huruf normal, BUKAN uppercase.
   Judul di sini kalimat penuh berbahasa Indonesia (rata-rata 9 kata); huruf
   kapital semua menghapus bentuk kata dan justru memperlambat pembacaan. */
.apm-hero__judul {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    text-transform: none;
    color: #fff;
    margin: 22px 0 0;
    text-wrap: balance;
}

.apm-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin-top: 26px;
    font-size: .875rem;
    color: rgba(255, 255, 255, .72);
}

.apm-meta__butir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.apm-meta__butir i {
    color: var(--apm-hijau-terang);
}

.apm-meta a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
}

.apm-meta a:hover {
    color: var(--apm-hijau-terang);
    border-bottom-color: var(--apm-hijau-terang);
}

/* -----------------------------------------------------------------------------
   3. BADAN ARTIKEL — inti perbaikan keterbacaan
   -------------------------------------------------------------------------- */

.apm-badan {
    padding-block: clamp(40px, 6vw, 72px);
}

.apm-baca {
    max-width: var(--apm-lebar-baca);
    margin-inline: auto;

    font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
    font-size: 1.1875rem;
    /* 19px */
    line-height: 1.72;
    color: var(--apm-teks);
    /* Rata kiri, JANGAN justify: tanpa hyphenation, justify melebarkan spasi
       sampai membentuk "sungai" putih vertikal — persis yang terjadi di
       halaman lama pada baris 101 karakter. */
    text-align: left;
    overflow-wrap: break-word;
}

@media (min-width: 992px) {
    .apm-baca {
        font-size: 1.25rem;
        /* 20px */
    }
}

/* Jarak antar-paragraf HARUS lebih besar daripada jarak antar-baris.
   Versi lama: line-height 27px vs margin 0 → 30 paragraf menempel jadi satu
   blok. Sekarang jeda paragraf ~1,15em di atas tinggi baris. */
.apm-baca p {
    margin: 0 0 1.15em;
    font-size: inherit;
    font-weight: 400;
    color: inherit;
    text-align: inherit;
    opacity: 1;
    text-transform: none;
}

.apm-baca p:last-child {
    margin-bottom: 0;
}

/* Paragraf pembuka dibesarkan: di data APM, paragraf pertama memang ringkasan
   (kolom deskripsi_singkat berisi teks yang sama). */
.apm-baca> :first-child {
    font-size: 1.08em;
    line-height: 1.62;
    color: #23272c;
}

.apm-baca strong,
.apm-baca b {
    font-weight: 700;
    color: var(--apm-tinta);
}

.apm-baca em,
.apm-baca i {
    font-style: italic;
}

.apm-baca a {
    color: var(--apm-hijau-tua);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    display: inline;
}

.apm-baca a:hover {
    color: var(--apm-hijau);
    background: var(--apm-hijau-samar);
}

.apm-baca h1,
.apm-baca h2,
.apm-baca h3,
.apm-baca h4 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    color: var(--apm-tinta);
    letter-spacing: -.015em;
    text-transform: none;
    line-height: 1.25;
    /* Jarak atas jauh lebih besar dari jarak bawah: judul menempel pada
       bagian yang DIPIMPINNYA, bukan mengambang di tengah. */
    margin: 2em 0 .6em;
}

.apm-baca h2 {
    font-size: 1.5rem;
    padding-top: .75em;
    border-top: 2px solid var(--apm-garis);
}

.apm-baca h3 {
    font-size: 1.25rem;
}

.apm-baca h4 {
    font-size: 1.0625rem;
}

.apm-baca ul,
.apm-baca ol {
    margin: 0 0 1.15em;
    padding-left: 1.4em;
    color: inherit;
    list-style-position: outside;
}

.apm-baca ul {
    list-style-type: disc;
}

.apm-baca ol {
    list-style-type: decimal;
}

.apm-baca li {
    margin: 0 0 .5em;
    padding-left: .2em;
    list-style-type: inherit;
}

.apm-baca li::marker {
    color: var(--apm-hijau-tua);
}

.apm-baca blockquote {
    margin: 1.8em 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--apm-hijau);
    font-size: 1.05em;
    font-style: italic;
    color: var(--apm-tinta);
}

.apm-baca img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.8em auto;
    border-radius: var(--apm-radius);
}

.apm-baca figure {
    margin: 1.8em 0;
}

.apm-baca figcaption {
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    color: var(--apm-teks-lemah);
    text-align: center;
    margin-top: .6em;
}

.apm-baca hr {
    border: 0;
    border-top: 1px solid var(--apm-garis);
    margin: 2.4em 0;
}

/* Tabel yang ditempel dari Word/Docs sering lebih lebar dari layar ponsel. */
.apm-baca table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-family: 'Poppins', sans-serif;
    font-size: .9375rem;
    margin: 1.8em 0;
}

.apm-baca th,
.apm-baca td {
    border: 1px solid var(--apm-garis);
    padding: 10px 12px;
    text-align: left;
}

.apm-baca th {
    background: var(--apm-kertas-lembut);
    font-weight: 600;
}

.apm-baca iframe {
    max-width: 100%;
    border-radius: var(--apm-radius);
}

/* Penawar isi tempelan: banyak artikel membawa font-family/size/warna sendiri
   dari Word atau Google Docs (57 artikel mengandung kelas Mso/docs-internal,
   73 memakai text-align:justify). Tanpa ini, satu artikel bisa tampil dengan
   font dan ukuran yang sama sekali berbeda dari artikel lain. */
.apm-baca [style*="font-family"],
.apm-baca [style*="font-size"],
.apm-baca [style*="line-height"],
.apm-baca [style*="text-align"],
.apm-baca [style*="color"],
.apm-baca [style*="background"] {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: inherit !important;
    color: inherit !important;
    background: none !important;
}

.apm-baca [style*="font-family"] strong,
.apm-baca [style*="font-size"] strong {
    color: var(--apm-tinta) !important;
}

/* -----------------------------------------------------------------------------
   4. LAMPIRAN (video / pdf) & BERBAGI
   -------------------------------------------------------------------------- */

.apm-lampiran {
    max-width: var(--apm-lebar-baca);
    margin: 2.4em auto 0;
}

.apm-lampiran__rasio {
    position: relative;
    padding-top: 56.25%;
    border-radius: var(--apm-radius);
    overflow: hidden;
    background: #000;
}

.apm-lampiran__rasio iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.apm-judul-bagian {
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--apm-teks-lemah);
    margin: 0 0 16px;
}

.apm-tombol {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: .9375rem;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid var(--apm-garis);
    background: var(--apm-kertas);
    color: var(--apm-tinta);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
}

.apm-tombol:hover {
    border-color: var(--apm-hijau);
    color: var(--apm-hijau-tua);
    background: var(--apm-hijau-samar);
}

.apm-tombol--utama {
    background: var(--apm-hijau);
    border-color: var(--apm-hijau);
    color: #fff;
}

.apm-tombol--utama:hover {
    background: var(--apm-hijau-tua);
    border-color: var(--apm-hijau-tua);
    color: #fff;
}

.apm-berbagi {
    max-width: var(--apm-lebar-baca);
    margin: 48px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--apm-garis);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.apm-berbagi__label {
    font-family: 'Poppins', sans-serif;
    font-size: .875rem;
    font-weight: 600;
    color: var(--apm-teks-lemah);
    margin-right: 4px;
}

.apm-tag {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--apm-kertas-lembut);
    border: 1px solid var(--apm-garis);
    color: var(--apm-teks);
    text-decoration: none;
}

.apm-tag:hover {
    border-color: var(--apm-hijau);
    color: var(--apm-hijau-tua);
    background: var(--apm-hijau-samar);
}

/* -----------------------------------------------------------------------------
   5. NAVIGASI ARTIKEL SEBELUM/SESUDAH
   -------------------------------------------------------------------------- */

.apm-tetangga {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    max-width: var(--apm-lebar-baca);
    margin: 48px auto 0;
}

@media (min-width: 768px) {
    .apm-tetangga {
        grid-template-columns: 1fr 1fr;
    }
}

.apm-tetangga__kartu {
    display: block;
    padding: 20px 22px;
    border: 1px solid var(--apm-garis);
    border-radius: var(--apm-radius);
    text-decoration: none;
    background: var(--apm-kertas);
    transition: border-color .18s, transform .18s;
}

.apm-tetangga__kartu:hover {
    border-color: var(--apm-hijau);
    transform: translateY(-2px);
}

.apm-tetangga__arah {
    font-family: 'Poppins', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--apm-hijau-tua);
    display: block;
    margin-bottom: 8px;
}

.apm-tetangga__judul {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--apm-tinta);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.apm-tetangga__kartu--kanan {
    text-align: right;
}

/* -----------------------------------------------------------------------------
   6. DAFTAR ARTIKEL — kartu seragam
   -------------------------------------------------------------------------- */

.apm-daftar {
    background: var(--apm-kertas);
    padding-block: clamp(32px, 5vw, 56px);
}

.apm-cari {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 320px;
    max-width: 460px;
    background: var(--apm-kertas);
    border: 1px solid var(--apm-garis);
    border-radius: 999px;
    padding: 6px 6px 6px 18px;
}

.apm-cari:focus-within {
    border-color: var(--apm-hijau);
    box-shadow: 0 0 0 3px rgba(8, 214, 101, .16);
}

.apm-cari input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: .9375rem;
    color: var(--apm-tinta);
    min-width: 0;
    padding: 8px 0;
}

.apm-cari input::placeholder {
    color: var(--apm-teks-lemah);
}

.apm-cari button {
    border: 0;
    background: var(--apm-hijau);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.apm-cari button:hover {
    background: var(--apm-hijau-tua);
    color: #fff;
}

/* Jumlah kolom DITENTUKAN, bukan diserahkan ke auto-fill.

   Dengan `repeat(auto-fill, minmax(272px, 1fr))`, jumlah kolom bergantung pada
   lebar wadah dan bisa jadi 2, 3, atau 4 — sehingga tidak ada satu pun jumlah
   kartu per halaman yang selalu habis dibagi, dan baris terakhir kadang
   menyisakan satu kartu sendirian.

   Dengan 1 / 2 / 3 kolom yang pasti, jumlah kartu tinggal dipilih kelipatan 6
   (6, 12, 18) dan baris terakhir tidak pernah ganjil di lebar mana pun. */
.apm-kisi {
    display: grid;
    gap: 22px;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .apm-kisi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .apm-kisi {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.apm-kartu {
    display: flex;
    flex-direction: column;
    background: var(--apm-kertas);
    border: 1px solid var(--apm-garis);
    border-radius: var(--apm-radius);
    overflow: hidden;
    transition: border-color .18s, transform .18s, box-shadow .18s;
    height: 100%;
}

.apm-kartu:hover {
    border-color: var(--apm-hijau);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(16, 24, 32, .1);
}

.apm-kartu__gambar {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--apm-kertas-lembut);
    overflow: hidden;
}

.apm-kartu__gambar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.apm-kartu__penanda {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.apm-kartu__label {
    font-family: 'Poppins', sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(13, 16, 19, .82);
    color: var(--apm-hijau-terang);
    padding: 5px 10px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.apm-kartu__isi {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 20px;
    flex: 1;
}

.apm-kartu__judul {
    font-family: 'Poppins', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--apm-tinta);
    text-transform: none;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.apm-kartu a.apm-kartu__tautan {
    text-decoration: none;
    color: inherit;
    display: block;
}

.apm-kartu:hover .apm-kartu__judul {
    color: var(--apm-hijau-tua);
}

.apm-kartu__ringkas {
    font-family: 'Poppins', sans-serif;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--apm-teks-lemah);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.apm-kartu__kaki {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: .75rem;
    color: var(--apm-teks-lemah);
}

/* Varian "sorot" yang melintasi dua kolom DIHAPUS.

   Kartu selebar dua slot membuat jumlah slot tidak sama dengan jumlah kartu —
   18 artikel menempati 19 slot — sehingga baris terakhir selalu ganjil. Kelas
   .apm-kartu--sorot dipertahankan tanpa efek tata letak agar pemanggilan lama
   tidak rusak. */

.apm-kosong {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 20px;
    border: 1px dashed var(--apm-garis);
    border-radius: var(--apm-radius);
}

.apm-kosong h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--apm-tinta);
    text-transform: none;
    margin: 0 0 8px;
}

.apm-kosong p {
    font-family: 'Poppins', sans-serif;
    color: var(--apm-teks-lemah);
    margin: 0 0 20px;
}

/* -----------------------------------------------------------------------------
   7. TERKAIT
   -------------------------------------------------------------------------- */

.apm-terkait {
    background: var(--apm-kertas-lembut);
    padding-block: clamp(40px, 6vw, 64px);
    margin-top: clamp(48px, 7vw, 80px);
}

.apm-terkait__judul {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--apm-tinta);
    text-transform: none;
    margin: 0 0 24px;
}

.apm-terkait .apm-kartu {
    background: var(--apm-kertas);
}

/* -----------------------------------------------------------------------------
   8. AKSESIBILITAS & GERAK
   -------------------------------------------------------------------------- */

.apm-artikel a:focus-visible,
.apm-artikel button:focus-visible,
.apm-artikel input:focus-visible {
    outline: 2px solid var(--apm-hijau);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {

    .apm-artikel *,
    .apm-artikel *::before,
    .apm-artikel *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

    .apm-progres__isi {
        transition: none;
    }
}

.apm-lompat {
    position: absolute;
    left: -9999px;
}

.apm-lompat:focus {
    left: 20px;
    top: 12px;
    z-index: 10000;
    position: fixed;
    background: var(--apm-hijau-terang);
    color: #05270f;
    padding: 10px 18px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   9. PAGINATION
   -------------------------------------------------------------------------- */

.apm-halaman {
    margin-top: 48px;
    text-align: center;
}

/* `flex-wrap` bukan hiasan: dengan 26 halaman, satu baris yang tidak boleh
   membungkus akan terpotong di tepi layar ponsel — nomor di sebelah kanan
   tidak bisa dilihat maupun disentuh. */
.apm-halaman__daftar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.apm-halaman__tautan {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--apm-garis);
    background: var(--apm-kertas);
    color: var(--apm-teks);
    font-family: 'Poppins', sans-serif;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .18s, color .18s, background .18s;
}

a.apm-halaman__tautan:hover {
    border-color: var(--apm-hijau);
    color: var(--apm-hijau-tua);
    background: var(--apm-hijau-samar);
}

.apm-halaman__butir--aktif .apm-halaman__tautan {
    background: var(--apm-hijau);
    border-color: var(--apm-hijau);
    color: #fff;
}

.apm-halaman__butir--mati .apm-halaman__tautan {
    opacity: .38;
    cursor: default;
}

.apm-halaman__butir--jeda .apm-halaman__tautan {
    border-color: transparent;
    background: transparent;
    min-width: 24px;
    padding: 0 4px;
    color: var(--apm-teks-lemah);
}

.apm-halaman__ringkas {
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    color: var(--apm-teks-lemah);
    margin: 0;
    text-align: center;
}

.apm-toko__tautan {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.apm-toko__tautan .apm-tombol {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}

.apm-toko__tautan .apm-tombol:hover {
    background: rgba(255, 255, 255, .12);
    border-color: var(--apm-hijau-terang);
    color: var(--apm-hijau-terang);
}

.apm-toko__tautan .apm-tombol--utama {
    background: var(--apm-hijau);
    border-color: var(--apm-hijau);
    color: #fff;
}

.apm-toko__tautan .apm-tombol--utama:hover {
    background: #fff;
    border-color: #fff;
    color: #05270f;
}

/* Kotak cari di header: tombolnya kini <button>, bukan <a href="#">. */
.search-box form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-box .search-btn {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 6px 8px;
    line-height: 1;
}

.search-box .search-btn:hover {
    color: var(--apm-hijau);
}

/* Di ponsel baris cip jadi satu baris yang bisa digeser: 10 kategori yang
   membungkus memakan tujuh baris dan mendorong artikel keluar layar. */
@media (max-width: 767.98px) {
    .apm-cip {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        margin-bottom: 12px;
    }

    .apm-cip::-webkit-scrollbar {
        display: none;
    }

    .apm-cip a {
        scroll-snap-align: start;
        flex: 0 0 auto;
    }
}

/* Ruang di atas isi hero: header situs melayang di atasnya, dan pada lebar
   ponsel remah roti sempat tertutup logo. */
.apm-hero__isi {
    padding-top: clamp(96px, 12vw, 132px);
}

/* Di ponsel `clamp()` di atas selalu jatuh ke batas bawahnya (12vw = 47px pada
   layar 390px), sehingga isinya mulai di 96px sementara bilah atas setinggi
   76px — hanya 20px, dan remah roti terbaca menempel pada bilahnya alih-alih
   menjadi bagian dari isi halaman. Diukur dari tinggi bilah, bukan ditebak. */
@media (max-width: 575px) {
    .apm-hero__isi {
        padding-top: 112px;
    }
}

/* =============================================================================
   11. PRIMITIF SELURUH SITUS
   =============================================================================
   Dipakai bersama oleh halaman artikel, peringkat, tentang, dan beranda supaya
   satu situs terasa satu situs. Sebelum 30 Agu 2026 setiap halaman menulis
   gaya kepala seksinya sendiri: ada yang rata tengah, ada yang rata kiri, ada
   yang HURUF BESAR SEMUA, ada yang judulnya dipecah dua warna.
   ========================================================================== */

/* Kata bayangan raksasa di belakang judul seksi.
   `strong.filltext` diposisikan absolut di 0,0 dengan huruf 80px, jadi ia
   menumpuk tepat di belakang judul aslinya. Selama Poppins tidak pernah
   benar-benar termuat, judulnya kebetulan menutupi; begitu font yang
   dimaksudkan tema akhirnya dipakai, metrik hurufnya berubah dan kata
   bayangan itu menyembul — inilah "nabrak" yang terlihat di beranda dan
   halaman tentang. Hiasan yang hanya bekerja karena font-nya gagal dimuat
   bukan hiasan yang bisa dipertahankan. */
.heading strong.filltext,
.primery-heading strong.filltext {
    display: none;
}

/* Kepala seksi: satu bentuk untuk semua halaman. */
.apm-kepala {
    max-width: 720px;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.apm-kepala--tengah {
    margin-inline: auto;
    text-align: center;
}

.apm-kepala__eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--apm-hijau-tua);
    margin: 0 0 12px;
}

.apm-kepala__judul {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.35rem);
    line-height: 1.18;
    letter-spacing: -.022em;
    color: var(--apm-tinta);
    text-transform: none;
    margin: 0;
    text-wrap: balance;
}

.apm-kepala__lead {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--apm-teks-lemah);
    margin: 14px 0 0;
}

/* Hero gelap dipakai ulang di luar halaman artikel; varian ini tanpa gambar. */
.apm-hero--polos {
    background:
        radial-gradient(120% 100% at 80% 0%, rgba(47, 191, 113, .14) 0%, rgba(13, 16, 19, 0) 55%),
        #0d1013;
}

/* -----------------------------------------------------------------------------
   12. PAPAN PERINGKAT
   -------------------------------------------------------------------------- */

.apm-peringkat {
    padding-block: clamp(36px, 5vw, 60px) clamp(48px, 7vw, 80px);
}

/* Tab kategori sebagai kontrol tersegmen, bukan tab yang menumpuk tepi kartu. */
.apm-segmen {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--apm-kertas-lembut);
    border: 1px solid var(--apm-garis);
    border-radius: 999px;
    margin-bottom: 28px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.apm-segmen::-webkit-scrollbar {
    display: none;
}

.apm-segmen .nav-link,
.apm-segmen button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 10px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: .875rem;
    font-weight: 600;
    color: var(--apm-teks-lemah);
    cursor: pointer;
    transition: background .18s, color .18s;
}

.apm-segmen .nav-link:hover {
    color: var(--apm-tinta);
    background: var(--apm-kertas);
}

.apm-segmen .nav-link.active {
    background: var(--apm-tinta);
    color: #fff;
}

.apm-segmen .nav-link.active i {
    color: var(--apm-hijau-terang);
}

/* Podium tiga teratas. Urutan visual mengikuti urutan baca (1, 2, 3) —
   podium yang menaruh juara di tengah membuat pembaca harus menebak. */
.apm-podium {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 26px;
}

@media (min-width: 768px) {
    .apm-podium {
        grid-template-columns: repeat(3, 1fr);
    }
}

.apm-podium__kartu {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--apm-garis);
    border-radius: var(--apm-radius);
    background: var(--apm-kertas);
    position: relative;
    overflow: hidden;
}

.apm-podium__kartu::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--warna-peringkat, #cbd5d0);
}

/* Nomor peringkat ditulis PUTIH di atas warna ini (lihat
   `.apm-podium__kartu .apm-nomor`), jadi warnanya harus lolos AA sebagai
   LATAR TEKS, bukan sekadar sebagai aksen. Terukur sebelum perbaikan:
   juara 1 #b08d57 = 3,09:1 dan juara 2 #97a09c = 2,68:1 — juara 2 justru
   yang paling tidak terbaca dari ketiganya. Sesudah: 4,89:1 dan 4,69:1.
   Juara 3 #9a6a4a sudah 4,63:1 dan dibiarkan. */
.apm-podium__kartu--1 { --warna-peringkat: #8a6c3d; }
.apm-podium__kartu--2 { --warna-peringkat: #6d7671; }
.apm-podium__kartu--3 { --warna-peringkat: #9a6a4a; }

.apm-nomor {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-family: 'IBM Plex Mono', 'Poppins', monospace;
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--apm-kertas-lembut);
    color: var(--apm-teks-lemah);
}

.apm-podium__kartu .apm-nomor {
    background: var(--warna-peringkat);
    color: #fff;
}

.apm-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.0625rem;
    color: #05270f;
    background: linear-gradient(140deg, var(--apm-hijau), #14764a);
    color: #fff;
}

.apm-peserta {
    min-width: 0;
    flex: 1;
}

.apm-peserta__nama {
    font-family: 'Poppins', sans-serif;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--apm-tinta);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apm-peserta__peran {
    display: inline-block;
    margin-top: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--apm-hijau-tua);
    background: var(--apm-hijau-samar);
    border-radius: 999px;
    padding: 3px 10px;
}

.apm-koin {
    flex-shrink: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--apm-tinta);
    font-variant-numeric: tabular-nums;
}

.apm-koin small {
    font-size: .6875rem;
    font-weight: 500;
    color: var(--apm-teks-lemah);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Sisa peringkat sebagai daftar rapat: tinggi barisnya seragam supaya angka
   koin berbaris lurus dan bisa dibandingkan sekilas. */
.apm-tabel-peringkat {
    border: 1px solid var(--apm-garis);
    border-radius: var(--apm-radius);
    overflow: hidden;
}

.apm-baris-peringkat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: var(--apm-kertas);
    border-top: 1px solid var(--apm-garis);
}

.apm-baris-peringkat:first-child {
    border-top: 0;
}

.apm-baris-peringkat:hover {
    background: var(--apm-kertas-lembut);
}

.apm-baris-peringkat .apm-avatar {
    width: 36px;
    height: 36px;
    font-size: .9375rem;
}

.apm-kosong--peringkat {
    border: 1px dashed var(--apm-garis);
    border-radius: var(--apm-radius);
    padding: 56px 24px;
    text-align: center;
}

/* Daftar fitur di halaman tentang. Enam butirnya dulu dijejalkan ke dalam satu
   paragraf dengan emoji sebagai penanda semu — mata tidak melihatnya sebagai
   daftar, dan pembaca layar membacanya sebagai satu kalimat panjang. */
.apm-daftar-fitur {
    list-style: none;
    margin: 18px 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.apm-daftar-fitur li {
    position: relative;
    padding-left: 26px;
    line-height: 1.65;
}

.apm-daftar-fitur li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--apm-hijau);
}

.apm-daftar-fitur strong {
    color: var(--apm-tinta);
    font-weight: 600;
}

/* Kalimat berjalan tidak dipaksa Berhuruf Besar Tiap Kata.
   Tema menetapkan `text-transform: capitalize` pada paragraf di sembilan
   tempat (39 elemen di beranda saja). Teksnya sendiri ditulis normal —
   "pemetaan digital ditampilkan dalam katalog resmi" — jadi yang dilakukan
   aturan itu hanya membuat setiap kata tampak seperti nama diri, dan mata
   kehilangan penanda awal kalimat. Judul pendek dan label dibiarkan. */
.skill-box p,
.primery-skill .skill-box p,
.service-text p,
.testimonial-text p,
.blog-description p,
.primery-info-content p,
.single-blog-post p {
    text-transform: none;
}

/* Warna teks bawaan situs.
   Tema menetapkan `body { color: #98adc2 }` — biru-abu pucat. Di atas latar
   putih rasionya sekitar 2,4:1, jauh di bawah ambang WCAG AA (4,5:1) untuk
   teks biasa. Pada halaman /tentang, 63 dari 66 blok teks panjang gagal
   ambang itu, dan seluruhnya karena mewarisi warna ini.

   Diukur lebih dulu sebelum diubah: 80 elemen mewarisi warna tersebut dan
   TIDAK ADA satu pun yang berlatar gelap, jadi menggelapkannya tidak membuat
   teks terang di atas latar gelap ikut hilang. */
body {
    color: #3c4449;
}

/* -----------------------------------------------------------------------------
   13. AKSEN DI ATAS LATAR GELAP
   -----------------------------------------------------------------------------
   Zamrud pekat dipilih untuk latar terang; di atas hero dan footer yang nyaris
   hitam, warna itu hanya mencapai rasio 2,4:1 — terbaca sebagai noda gelap,
   bukan sebagai aksen. Area gelap memakai hijau pucuk yang lebih terang.
   Dipisahkan di sini, bukan diubah pada tokennya, supaya bidang terang tetap
   memakai warna pekat yang membuat halaman terasa tenang.
   -------------------------------------------------------------------------- */

.welcome-area-wrap h1 span,
.welcome-area-wrap h2 span,
.welcome-area-wrap h3 span,
.welcome-area-wrap p span,
.welcome-area-wrap small,
.welcome-area-wrap strong,
.inner-wlc h3 a,
.footer-area a:hover,
.footer-area span,
.header-area .navbarmneuclass li.current>a {
    color: var(--apm-hijau-terang);
}

.welcome-area-wrap .cbtn,
.welcome-area-wrap a.cbtn {
    background: var(--apm-hijau);
    border-color: var(--apm-hijau);
    color: #fff;
}

.welcome-area-wrap .cbtn:hover,
.welcome-area-wrap a.cbtn:hover {
    background: var(--apm-hijau-terang);
    border-color: var(--apm-hijau-terang);
    color: #06251a;
}

/* Garis penanda menu aktif ikut hijau pucuk agar terlihat di bilah gelap. */
.header-area .navbarmneuclass li.current>a::after,
.stellarnav li.current>a::after {
    background: var(--apm-hijau-terang);
}

.apm-toko__tautan--kiri {
    justify-content: flex-start;
    margin-top: 24px;
}

/* =============================================================================
   14. KALENDER AGENDA
   =============================================================================
   FullCalendar dirender dengan gaya bawaannya: kisi bergaris tebal, tombol biru
   Bootstrap, sel "hari ini" kuning terang, dan acara sebagai titik kecil. Di
   tengah halaman yang lain sudah ditata, ia terbaca seperti tabel yang
   ketinggalan zaman.

   Ditata lewat variabel resmi FullCalendar v6 supaya tidak melawan gaya
   internalnya (yang berubah tiap versi), lalu beberapa sentuhan tambahan.
   ========================================================================== */

#calendar {
    --fc-border-color: var(--apm-garis);
    --fc-page-bg-color: var(--apm-kertas);
    --fc-neutral-bg-color: var(--apm-kertas-lembut);
    --fc-today-bg-color: rgba(11, 92, 59, .05);
    --fc-event-bg-color: var(--apm-hijau);
    --fc-event-border-color: var(--apm-hijau);
    --fc-event-text-color: #fff;
    --fc-small-font-size: .8125rem;

    font-family: 'Poppins', system-ui, sans-serif;
    background: var(--apm-kertas);
    border: 1px solid var(--apm-garis);
    border-radius: var(--apm-radius);
    padding: clamp(14px, 2vw, 22px);
}

/* Bilah atas: judul bulan sebagai judul sungguhan, tombol mengikuti tombol
   situs — bukan tombol biru bawaan Bootstrap. */
#calendar .fc-toolbar.fc-header-toolbar {
    margin-bottom: 18px;
    gap: 12px;
    flex-wrap: wrap;
}

#calendar .fc-toolbar-title {
    font-size: clamp(1.1rem, .9rem + .8vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--apm-tinta);
    text-transform: capitalize;
}

#calendar .fc-button,
#calendar .fc-button-primary {
    background: var(--apm-kertas);
    border: 1px solid var(--apm-garis);
    color: var(--apm-teks);
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: capitalize;
    border-radius: 999px;
    padding: 8px 16px;
    box-shadow: none;
    transition: border-color .18s, color .18s, background .18s;
}

#calendar .fc-button:hover {
    background: var(--apm-hijau-samar);
    border-color: var(--apm-hijau);
    color: var(--apm-hijau);
}

#calendar .fc-button-primary:not(:disabled).fc-button-active,
#calendar .fc-button-primary:not(:disabled):active {
    background: var(--apm-tinta);
    border-color: var(--apm-tinta);
    color: #fff;
}

#calendar .fc-button:focus-visible {
    outline: 2px solid var(--apm-hijau);
    outline-offset: 2px;
    box-shadow: none;
}

#calendar .fc-button-primary:disabled {
    background: var(--apm-kertas-lembut);
    border-color: var(--apm-garis);
    color: var(--apm-teks-lemah);
    opacity: 1;
}

/* Kisi: garis rambut, bukan bingkai tebal. Bingkai terluar dihapus karena
   wadahnya sendiri sudah punya garis. */
#calendar .fc-theme-standard td,
#calendar .fc-theme-standard th {
    border-color: var(--apm-garis);
}

#calendar .fc-theme-standard .fc-scrollgrid {
    border: 0;
}

#calendar .fc-col-header-cell {
    background: transparent;
    padding: 10px 0;
}

#calendar .fc-col-header-cell-cushion {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--apm-teks-lemah);
    text-decoration: none;
}

#calendar .fc-daygrid-day-number {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--apm-teks);
    font-variant-numeric: tabular-nums;
    padding: 8px 10px;
    text-decoration: none;
}

/* Hari di luar bulan berjalan diredam, bukan diberi latar abu — latar abu
   memecah kisi jadi tambalan. */
#calendar .fc-day-other .fc-daygrid-day-number {
    color: var(--apm-teks-lemah);
    opacity: .45;
}

#calendar .fc-day-other {
    background: transparent;
}

/* Hari ini ditandai angka berlingkar, bukan seluruh selnya diwarnai. */
#calendar .fc-day-today .fc-daygrid-day-number {
    background: var(--apm-hijau);
    color: #fff;
    border-radius: 999px;
    padding: 4px 9px;
    margin: 5px 6px;
    font-weight: 700;
}

/* Acara sebagai pil, bukan titik. Judul acara di sini kalimat panjang, jadi
   dipotong satu baris supaya tinggi sel tidak melompat-lompat. */
#calendar .fc-daygrid-event {
    border-radius: 6px;
    padding: 3px 8px;
    margin: 1px 4px 3px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.35;
    border: 0;
    background: var(--apm-hijau);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .18s, transform .18s;
}

#calendar .fc-daygrid-event:hover {
    background: var(--apm-hijau-tua);
    transform: translateY(-1px);
}

#calendar .fc-daygrid-event .fc-event-time,
#calendar .fc-daygrid-event .fc-event-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

#calendar .fc-daygrid-event-dot {
    display: none;
}

#calendar .fc-daygrid-more-link {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--apm-hijau);
    margin-left: 4px;
}

#calendar .fc-popover {
    border: 1px solid var(--apm-garis);
    border-radius: var(--apm-radius);
    box-shadow: 0 12px 28px rgba(16, 24, 32, .12);
}

#calendar .fc-popover-header {
    background: var(--apm-kertas-lembut);
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--apm-tinta);
}

/* Di ponsel kisi bulan terlalu sempit untuk pil acara; sel dibuat lebih
   rendah dan judul acara disembunyikan, menyisakan penanda warna. */
@media (max-width: 575.98px) {
    #calendar .fc-daygrid-day-frame {
        min-height: 62px;
    }

    #calendar .fc-toolbar.fc-header-toolbar {
        justify-content: center;
    }

    #calendar .fc-toolbar-chunk {
        display: flex;
        gap: 6px;
    }
}

/* Lampiran yang tampil SEBELUM badan artikel diberi jarak bawah lebih besar,
   supaya batas antara "media" dan "bacaan" terbaca sebagai pergantian bagian. */
.apm-lampiran--utama {
    margin: 0 auto 36px;
}

.apm-lampiran--utama+.apm-lampiran--utama {
    margin-top: -12px;
}

/* -----------------------------------------------------------------------------
   15. PINTU MASUK (kartu layanan beranda)
   -----------------------------------------------------------------------------
   Kartu yang menjelaskan sesuatu tanpa menautkannya adalah jalan buntu. Setiap
   kartu di sini SELALU sebuah <a>, dan kalimat aksinya menyebut tujuannya.
   -------------------------------------------------------------------------- */

.apm-pintu {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.apm-pintu__kartu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px 22px;
    border: 1px solid var(--apm-garis);
    border-radius: var(--apm-radius);
    background: var(--apm-kertas);
    text-decoration: none;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}

.apm-pintu__kartu:hover {
    border-color: var(--apm-hijau);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(16, 24, 32, .08);
}

.apm-pintu__ikon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--apm-hijau-samar);
    color: var(--apm-hijau);
    font-size: 1.125rem;
    margin-bottom: 4px;
}

.apm-pintu__kartu h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--apm-tinta);
    text-transform: none;
    margin: 0;
}

.apm-pintu__kartu p {
    font-family: 'Poppins', sans-serif;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--apm-teks-lemah);
    text-transform: none;
    margin: 0;
    flex: 1;
}

.apm-pintu__aksi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--apm-hijau);
}

.apm-pintu__kartu:hover .apm-pintu__aksi i {
    transform: translateX(3px);
}

.apm-pintu__aksi i {
    transition: transform .2s;
}

/* -----------------------------------------------------------------------------
   16. KUTIPAN TESTIMONI
   -----------------------------------------------------------------------------
   Kisi dengan tinggi seragam. Di dalam carousel, kutipan sepanjang 90-190
   karakter menghasilkan kartu setinggi 395px sampai 659px berdampingan, dan
   alasnya tidak pernah sejajar — itulah "tidak sejajar" yang terlihat.
   -------------------------------------------------------------------------- */

.apm-kutipan {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    align-items: stretch;
}

.apm-kutipan__kartu {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 26px 26px 22px;
    background: var(--apm-kertas);
    border: 1px solid var(--apm-garis);
    border-radius: var(--apm-radius);
    position: relative;
}

/* Tanda kutip sebagai bentuk, bukan gambar PNG yang harus diunduh. */
.apm-kutipan__kartu::before {
    content: '\201C';
    position: absolute;
    top: 6px;
    right: 20px;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--apm-hijau);
    opacity: .14;
}

.apm-kutipan__kartu blockquote {
    margin: 0;
    flex: 1;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--apm-tinta);
    border: 0;
    padding: 0;
    quotes: none;
}

.apm-kutipan__kartu figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--apm-garis);
}

.apm-kutipan__kartu figcaption img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--apm-kertas-lembut);
}

.apm-kutipan__kartu figcaption span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.apm-kutipan__kartu figcaption strong {
    font-family: 'Poppins', sans-serif;
    font-size: .875rem;
    font-weight: 600;
    color: var(--apm-tinta);
    line-height: 1.35;
}

.apm-kutipan__kartu figcaption small {
    font-family: 'Poppins', sans-serif;
    font-size: .75rem;
    color: var(--apm-teks-lemah);
    line-height: 1.4;
}

/* -----------------------------------------------------------------------------
   17. KARTU KEUNTUNGAN
   -------------------------------------------------------------------------- */

.apm-untung {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
    margin-top: 8px;
}

.apm-untung__kartu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 26px 24px;
    background: var(--apm-kertas);
    border: 1px solid var(--apm-garis);
    border-radius: var(--apm-radius);
}

.apm-untung__ikon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--apm-hijau-samar);
    color: var(--apm-hijau);
    font-size: 1.125rem;
}

.apm-untung__kartu h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--apm-tinta);
    text-transform: none;
    margin: 0;
}

.apm-untung__kartu p {
    font-family: 'Poppins', sans-serif;
    font-size: .875rem;
    line-height: 1.65;
    color: var(--apm-teks-lemah);
    text-transform: none;
    margin: 0;
}

.apm-untung__daftar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    margin-top: auto;
}

.apm-untung__daftar a {
    font-family: 'Poppins', sans-serif;
    font-size: .875rem;
    font-weight: 500;
    color: var(--apm-hijau);
    text-decoration: none;
    display: inline-flex;
    gap: 8px;
}

.apm-untung__daftar a::before {
    content: '\2192';
    color: var(--apm-hijau);
}

.apm-untung__daftar a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.apm-untung__aksi {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--apm-hijau);
    text-decoration: none;
}

.apm-untung__aksi:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   18. NAVIGASI ATAS
   -------------------------------------------------------------------------- */

.apm-nav__masuk {
    font-family: 'Poppins', sans-serif;
    font-size: .875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    margin-right: 18px;
    white-space: nowrap;
}

.apm-nav__masuk:hover {
    color: var(--apm-hijau-terang);
}

.apm-nav__daftar {
    padding: 10px 20px;
    font-size: .875rem;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */

.apm-kaki {
    background: var(--apm-tinta);
    color: rgba(255, 255, 255, .72);
    padding-block: clamp(44px, 6vw, 72px) 28px;
    font-family: 'Poppins', system-ui, sans-serif;
}

.apm-kaki__utama {
    display: grid;
    gap: 36px;
    grid-template-columns: 1fr;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

@media (min-width: 768px) {
    .apm-kaki__utama {
        grid-template-columns: 1.6fr 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .apm-kaki__utama {
        grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
        gap: 40px;
    }
}

/* Lambang di kaki halaman dibingkai sama dengan yang di bilah atas: berkas
   yang sama, sudut yang sama. Nama lengkap ditulis di sebelahnya — di bilah
   atas ia tidak muat, dan di sinilah tempatnya. */
.apm-kaki__logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.apm-kaki__logo img {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
    flex: none;
}

.apm-kaki__logo span {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    max-width: 14ch;
}

.apm-kaki__ringkas {
    margin: 16px 0 22px;
    font-size: .875rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .62);
    max-width: 42ch;
}

.apm-kaki__kolom h2 {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin: 0 0 16px;
}

.apm-kaki__kolom ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 11px;
}

.apm-kaki__kolom a {
    font-size: .875rem;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    line-height: 1.5;
}

.apm-kaki__kolom a:hover {
    color: var(--apm-hijau-terang);
}

.apm-kaki__kolom a i {
    color: var(--apm-hijau-terang);
    width: 16px;
    text-align: center;
}

.apm-kaki__sosial {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.apm-kaki__sosial a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .8);
    font-size: .9375rem;
    transition: border-color .18s, color .18s, background .18s;
}

.apm-kaki__sosial a:hover {
    border-color: var(--apm-hijau-terang);
    color: var(--apm-hijau-terang);
    background: rgba(47, 191, 113, .1);
}

.apm-kaki__bawah {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    align-items: center;
    padding-top: 22px;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .5);
}

.apm-kaki__bawah p {
    margin: 0;
}

.apm-kaki__bawah a {
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
}

.apm-kaki__bawah a:hover {
    color: var(--apm-hijau-terang);
}

.apm-kaki .apm-toko__tautan {
    justify-content: flex-start;
}

/* -----------------------------------------------------------------------------
   20. BLOK FAKTA & SEMBOYAN (pengganti ilustrasi)
   -----------------------------------------------------------------------------
   Menggantikan dua ilustrasi 3D yang tidak membawa informasi apa pun. Untuk
   lembaga pendidikan, angka yang bisa diperiksa lebih meyakinkan daripada
   karakter 3D — dan tidak ada berkas gambar yang perlu diunduh.
   -------------------------------------------------------------------------- */

.apm-fakta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--apm-garis);
    border: 1px solid var(--apm-garis);
    border-radius: var(--apm-radius);
    overflow: hidden;
}

.apm-fakta__butir {
    background: var(--apm-kertas);
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.apm-fakta__angka {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--apm-hijau);
    font-variant-numeric: tabular-nums;
}

.apm-fakta__label {
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--apm-teks-lemah);
}

.apm-semboyan {
    margin: 0;
    padding: 34px 32px;
    border: 1px solid var(--apm-garis);
    border-left: 3px solid var(--apm-hijau);
    border-radius: var(--apm-radius);
    background: var(--apm-kertas);
}

.apm-semboyan p {
    margin: 0;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
    line-height: 1.35;
    color: var(--apm-tinta);
    font-style: italic;
}

.apm-semboyan cite {
    display: block;
    margin-top: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--apm-teks-lemah);
}

/* -----------------------------------------------------------------------------
   21. PENANDA TENGGAT
   -----------------------------------------------------------------------------
   Warna semantik, terpisah dari warna merek: hijau merek dipakai untuk aksen,
   sedangkan "sudah ditutup" harus terbaca sebagai peringatan walau pembacanya
   tidak membedakan warna. Karena itu selalu disertai ikon DAN teks penuh.
   -------------------------------------------------------------------------- */

.apm-tenggat {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 20px 0 0;
    padding: 9px 16px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.45;
}

.apm-tenggat--lewat {
    background: rgba(211, 94, 84, .16);
    border: 1px solid rgba(211, 94, 84, .4);
    color: #ffb4ab;
}

.apm-tenggat--aktif {
    background: rgba(47, 191, 113, .14);
    border: 1px solid rgba(47, 191, 113, .38);
    color: var(--apm-hijau-terang);
}

.apm-meta__peran {
    color: rgba(255, 255, 255, .5);
    margin-left: 4px;
}

/* -----------------------------------------------------------------------------
   22. DAFTAR ISI ARTIKEL
   -------------------------------------------------------------------------- */

.apm-daftar-isi {
    max-width: var(--apm-lebar-baca);
    margin: 0 auto 34px;
    padding: 22px 26px;
    border: 1px solid var(--apm-garis);
    border-left: 3px solid var(--apm-hijau);
    border-radius: var(--apm-radius);
    background: var(--apm-kertas-lembut);
}

.apm-daftar-isi .apm-judul-bagian {
    margin-bottom: 12px;
}

.apm-daftar-isi ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: bagian;
    display: grid;
    gap: 9px;
}

.apm-daftar-isi li {
    counter-increment: bagian;
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.apm-daftar-isi li::before {
    content: counter(bagian, decimal-leading-zero);
    font-family: 'Poppins', sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--apm-hijau);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.apm-daftar-isi a {
    font-family: 'Poppins', sans-serif;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--apm-teks);
    text-decoration: none;
}

.apm-daftar-isi a:hover {
    color: var(--apm-hijau);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Judul yang dituju tidak boleh tersembunyi di balik bilah atas yang melayang. */
.apm-baca h2[id] {
    scroll-margin-top: 90px;
}

/* Sub-butir daftar isi (dari <h3>): tidak diberi nomor supaya penomoran
   bagian utama tetap terbaca sebagai urutan. */
.apm-daftar-isi__anak {
    padding-left: 22px;
}

.apm-daftar-isi__anak::before {
    content: '\2013';
    color: var(--apm-teks-lemah);
}

.apm-daftar-isi__anak a {
    font-size: .875rem;
    color: var(--apm-teks-lemah);
}

.apm-baca h3[id] {
    scroll-margin-top: 90px;
}

/* -----------------------------------------------------------------------------
   23. PENGHARGAAN & MITRA (halaman tentang)
   -----------------------------------------------------------------------------
   Keterangan SELALU terlihat, tidak lagi hanya saat disorot. Di ponsel tidak
   ada "menyorot" — pada carousel sebelumnya, judul penghargaan tidak pernah
   terbaca sama sekali di sebagian besar kunjungan.
   -------------------------------------------------------------------------- */

.apm-piala-kisi {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.apm-piala {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--apm-garis);
    border-radius: var(--apm-radius);
    background: var(--apm-kertas);
    text-decoration: none;
    transition: border-color .18s, transform .18s;
}

a.apm-piala:hover {
    border-color: var(--apm-hijau);
    transform: translateY(-2px);
}

.apm-piala img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--apm-kertas-lembut);
}

.apm-piala__isi {
    min-width: 0;
}

.apm-piala__tahun {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    /* 11px bold masih dihitung "teks normal" (ambang 4,5:1), dan
       --apm-kuningan hanya 2,96:1 di --apm-kertas. */
    color: var(--apm-kuningan-teks);
    margin-bottom: 5px;
    font-variant-numeric: tabular-nums;
}

.apm-piala__isi p {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--apm-tinta);
    text-transform: none;
}

.apm-mitra {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.apm-mitra__butir {
    margin: 0;
    padding: 22px 18px 16px;
    border: 1px solid var(--apm-garis);
    border-radius: var(--apm-radius);
    background: var(--apm-kertas);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.apm-mitra__butir img {
    height: 64px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* Logo mitra datang dengan warna dan gaya masing-masing; diredam sedikit
       supaya dinding logo terbaca sebagai satu kesatuan, dan kembali penuh
       saat disorot. */
    filter: grayscale(1);
    opacity: .72;
    transition: filter .2s, opacity .2s;
}

.apm-mitra__butir:hover img {
    filter: none;
    opacity: 1;
}

.apm-mitra__butir figcaption {
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--apm-teks-lemah);
    margin-top: auto;
}

/* Pagination — penyempurnaan putaran kedua. */
.apm-halaman__tautan--arah {
    gap: 8px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
}

/* Ringkasan dan kotak lompat DITUMPUK, tidak disejajarkan mendatar.

   Keduanya punya tinggi yang berbeda jauh — satu teks kecil, satu kendali
   dengan kotak isian dan tombol. Menyandingkannya dalam satu baris membuat
   teksnya tampak melayang di kiri dan kendalinya menjuntai di kanan, dan
   tidak ada satu pun yang segaris dengan deretan nomor di atasnya. */
.apm-halaman__kaki {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.apm-halaman__lompat {
    display: inline-flex;
    align-items: stretch;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    color: var(--apm-teks-lemah);
}

.apm-halaman__lompat label {
    display: flex;
    align-items: center;
    margin: 0;
}

.apm-halaman__lompat input {
    width: 72px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--apm-garis);
    border-radius: 8px;
    font-family: inherit;
    font-size: .8125rem;
    color: var(--apm-tinta);
    background: var(--apm-kertas);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.apm-halaman__lompat input:focus {
    outline: 2px solid var(--apm-hijau);
    outline-offset: 1px;
    border-color: var(--apm-hijau);
}

.apm-halaman__lompat button {
    border: 1px solid var(--apm-garis);
    background: var(--apm-kertas);
    border-radius: 8px;
    height: 38px;
    padding: 0 16px;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--apm-tinta);
    cursor: pointer;
}

.apm-halaman__lompat button:hover {
    border-color: var(--apm-hijau);
    color: var(--apm-hijau);
}

/* Di ponsel: label arah disembunyikan SECARA VISUAL saja (tetap terbaca
   pembaca layar), dan nomor yang jauh dari halaman aktif tidak ditampilkan —
   sebelas nomor berdampingan memaksa pagination membungkus jadi tiga baris. */
@media (max-width: 575.98px) {
    .apm-halaman__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .apm-halaman__tautan--arah {
        padding: 0 12px;
    }

    .apm-halaman__butir--jauh {
        display: none;
    }
}

/* Pemuat kecil di dalam tombol yang sedang menyimpan. */
.apm-pemuat {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: apm-putar .7s linear infinite;
}

@keyframes apm-putar {
    to { transform: rotate(360deg); }
}

button[aria-busy="true"],
input[aria-busy="true"] {
    cursor: progress;
    opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
    .apm-pemuat { animation-duration: 2s; }
}

/* Tombol utama pada formulir Livewire (halaman masuk/daftar). Ditulis di sini
   supaya warnanya mengikuti palet yang sama dengan seluruh situs, bukan warna
   bawaan Breeze (abu tua) maupun oranye yang sempat ditempel inline. */
.apm-tombol-utama {
    background: var(--apm-hijau);
    color: #fff;
    border: 1px solid var(--apm-hijau);
    font-family: 'Poppins', sans-serif;
}

.apm-tombol-utama:hover:not(:disabled) {
    background: var(--apm-hijau-tua);
    border-color: var(--apm-hijau-tua);
    color: #fff;
}

.apm-tombol-utama:focus-visible {
    outline: 2px solid var(--apm-hijau);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   24. DETAIL KEGIATAN
   -------------------------------------------------------------------------- */

.apm-kegiatan {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 992px) {
    .apm-kegiatan {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 48px;
    }
}

.apm-baca--sempit {
    max-width: none;
    font-size: 1.0625rem;
}

/* Panel keterangan menempel saat digulir: harga, sisa kuota, dan tombol
   pendaftaran adalah hal yang paling sering dicari ulang pembaca. */
.apm-kegiatan__panel {
    border: 1px solid var(--apm-garis);
    border-radius: var(--apm-radius);
    padding: 26px 24px;
    background: var(--apm-kertas);
    position: sticky;
    top: 96px;
}

.apm-kegiatan__harga {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--apm-garis);
    margin-bottom: 18px;
}

.apm-kegiatan__nominal {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--apm-tinta);
    font-variant-numeric: tabular-nums;
}

.apm-kegiatan__satuan {
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    color: var(--apm-teks-lemah);
}

.apm-kegiatan__rinci {
    margin: 0 0 22px;
    display: grid;
    gap: 14px;
}

.apm-kegiatan__rinci>div {
    display: grid;
    gap: 3px;
}

.apm-kegiatan__rinci dt {
    font-family: 'Poppins', sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--apm-teks-lemah);
}

.apm-kegiatan__rinci dd {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--apm-tinta);
}

.apm-kegiatan__rinci dd a {
    display: inline-block;
    margin-left: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--apm-hijau);
}

.apm-kegiatan__ajakan {
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--apm-teks-lemah);
    margin: 0 0 14px;
}

/* -----------------------------------------------------------------------------
   25. PERBAIKAN RESPONSIF
   -----------------------------------------------------------------------------
   Gambar hiasan "memphis" diposisikan absolut dengan lebar tetap (sampai 528px)
   dan menyembul keluar bingkai di layar ponsel: dokumen menjadi 395px pada
   viewport 375px. Tema menutupinya dengan `body { overflow-x: hidden }`, tetapi
   itu menyembunyikan gejala, bukan sebabnya — dan di iOS Safari halaman tetap
   bisa digeser ke samping.

   Hiasan ini murni dekorasi, jadi di ponsel disembunyikan sekalian: tujuh
   berkas gambar yang tidak perlu diunduh.
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    .memphis,
    .cta-shape,
    .inner-shape1,
    .inner-shape2,
    .inner-shape3 {
        display: none !important;
    }
}

/* Jaring pengaman: apa pun yang diposisikan absolut sebagai hiasan tidak boleh
   melebihi lebar layar. */
img.memphis,
img.cta-shape {
    max-width: 40vw;
    height: auto;
}

.apm-kartu__biaya {
    margin-left: auto;
    font-weight: 700;
    color: var(--apm-hijau);
    font-variant-numeric: tabular-nums;
}

.apm-kartu__status {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--apm-garis);
    font-family: 'Poppins', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    color: var(--apm-hijau);
    text-transform: none;
}

.apm-kartu__status--lewat {
    color: var(--apm-teks-lemah);
    font-weight: 500;
}

/* -----------------------------------------------------------------------------
   27. PENYARING RINGKAS (satu baris kendali)
   -----------------------------------------------------------------------------
   Versi pertama menampilkan seluruh pilihan setiap penyaring sekaligus — empat
   baris penuh, memakan hampir setinggi layar ponsel sebelum satu kegiatan pun
   terlihat, padahal sebagian besar pengunjung tidak menyaring sama sekali.

   Sekarang pilihan disembunyikan di balik <details>: bekerja tanpa JavaScript,
   tetap bisa dibuka pembaca layar, dan tetap terbuka sendiri bila penyaringnya
   memang sedang aktif.
   -------------------------------------------------------------------------- */

.apm-saring2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.apm-saring2__cari {
    flex: 1 1 260px;
    max-width: 420px;
    margin: 0;
}

.apm-saring2__terapkan {
    padding: 11px 22px;
    font-size: .875rem;
}

.apm-turun {
    position: relative;
}

.apm-turun>summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--apm-garis);
    border-radius: 999px;
    background: var(--apm-kertas);
    font-family: 'Poppins', sans-serif;
    font-size: .875rem;
    font-weight: 500;
    color: var(--apm-teks);
    white-space: nowrap;
    user-select: none;
}

.apm-turun>summary::-webkit-details-marker {
    display: none;
}

.apm-turun>summary::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: .55;
}

.apm-turun[open]>summary::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.apm-turun>summary:hover {
    border-color: var(--apm-hijau);
    color: var(--apm-hijau);
}

/* Penanda jumlah pilihan yang sedang aktif di dalam penyaring ini. */
.apm-turun__tanda {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--apm-hijau);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.apm-turun__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 0;
    min-width: 232px;
    max-width: min(320px, calc(100vw - 24px));
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--apm-garis);
    border-radius: 12px;
    background: var(--apm-kertas);
    box-shadow: 0 16px 36px rgba(16, 24, 32, .14);
    display: grid;
    gap: 2px;
}

.apm-turun__pilihan {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: .875rem;
    color: var(--apm-teks);
    cursor: pointer;
    margin: 0;
}

.apm-turun__pilihan:hover {
    background: var(--apm-kertas-lembut);
}

.apm-turun__pilihan input {
    accent-color: var(--apm-hijau);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0;
}

.apm-turun__pilihan span {
    flex: 1;
    min-width: 0;
}

.apm-turun__pilihan em {
    font-style: normal;
    font-size: .75rem;
    color: var(--apm-teks-lemah);
    font-variant-numeric: tabular-nums;
}

/* Cip penyaring aktif: satu-satunya bagian yang SELALU terlihat, karena inilah
   yang perlu diketahui pengunjung — apa yang sedang membatasi hasilnya. */
.apm-cip-aktif {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.apm-cip-aktif__label {
    font-family: 'Poppins', sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--apm-teks-lemah);
    margin-right: 2px;
}

.apm-cip-aktif__cip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--apm-hijau-samar);
    border: 1px solid var(--apm-hijau);
    color: var(--apm-hijau-tua);
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
}

.apm-cip-aktif__cip:hover {
    background: var(--apm-hijau);
    color: #fff;
}

.apm-cip-aktif__bersih {
    font-family: 'Poppins', sans-serif;
    font-size: .8125rem;
    color: var(--apm-teks-lemah);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 4px;
}

.apm-cip-aktif__bersih:hover {
    color: var(--apm-hijau);
}

@media (max-width: 575.98px) {
    .apm-saring2__cari {
        flex: 1 1 100%;
        max-width: none;
    }

}

/* Penanda "Terbaru" duduk di atas gambar bersama label kategori, jadi ia
   memakai bidang isi (hijau pekat) supaya berbeda dari label kategori yang
   berbidang gelap — dua penanda, dua peran, langsung terbedakan. */
.apm-kartu__terbaru {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--apm-hijau);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbarmneuclass>li>a {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 13px;
    }
}

/* -----------------------------------------------------------------------------
   28. HALAMAN BUMBER — PENYELARASAN KE SISTEM SITUS
   -----------------------------------------------------------------------------
   Halaman ini dibangun dengan Tailwind dan palet teal-nya sendiri, sehingga
   terasa seperti situs yang berbeda meski sudah memakai header dan footer yang
   sama. Warna literalnya sudah dipetakan ke zamrud APM di markup; sisanya —
   kelas netral Tailwind (gray-800/900, yang sebenarnya biru-abu) dan huruf
   judul — diselaraskan di sini, dipagari `.apm-bumber` supaya tidak bocor ke
   halaman lain.
   -------------------------------------------------------------------------- */

.apm-bumber h1,
.apm-bumber h2,
.apm-bumber h3,
.apm-bumber h4,
.apm-bumber h5 {
    font-family: 'Poppins', system-ui, sans-serif;
    letter-spacing: -.02em;
    text-transform: none;
}

/* Netral Tailwind bernuansa BIRU; sistem APM bernuansa hijau-dingin.
   Perbedaan itu kecil per elemen, tetapi pada bidang selebar layar ia yang
   membuat halaman terasa berasal dari produk lain. */
.apm-bumber .bg-gray-900 { background-color: #12181a !important; }
.apm-bumber .bg-gray-800 { background-color: #1a2124 !important; }
.apm-bumber .bg-gray-700 { background-color: #222b2e !important; }
.apm-bumber .border-gray-800 { border-color: rgba(255, 255, 255, .08) !important; }
.apm-bumber .border-gray-700 { border-color: rgba(255, 255, 255, .12) !important; }
.apm-bumber .border-teal-500 { border-color: var(--apm-hijau-terang) !important; }
.apm-bumber .text-gray-400 { color: rgba(255, 255, 255, .62) !important; }
.apm-bumber .text-gray-300 { color: rgba(255, 255, 255, .76) !important; }
.apm-bumber .text-gray-500 { color: rgba(255, 255, 255, .5) !important; }

/* Sudut membulat disamakan dengan kartu di halaman lain. */
.apm-bumber .rounded-lg { border-radius: 12px; }
.apm-bumber .rounded-xl { border-radius: var(--apm-radius); }
.apm-bumber .rounded-2xl { border-radius: 18px; }

/* Wadah luar mengikuti lebar baca situs supaya lebar isinya sejajar dengan
   halaman artikel dan agenda, bukan melebar sendiri. */
.apm-bumber .container {
    max-width: 1180px;
}

/* =============================================================================
   29. BILAH ATAS YANG MENYESUAIKAN LATAR HALAMAN
   =============================================================================
   Bilah bawaan tema ini TEMBUS PANDANG dan berteks abu terang (#c8c6c6),
   karena aslinya melayang di atas foto hero yang gelap. Situs APM tidak punya
   hero gelap: beranda, artikel, agenda, peringkat, dan tentang semuanya
   berlatar putih. Akibatnya, terukur di halaman /artikel:

       menu (#c8c6c6 di atas putih) ...... 1,70 : 1
       menu aktif (#2fbf71 di atas putih)  2,38 : 1
       "Masuk" (putih di atas putih) ..... 1,00 : 1   -> tidak terlihat sama sekali

   Ambang WCAG AA untuk teks berukuran ini adalah 4,5:1. Jadi ini bukan soal
   selera: navigasinya memang tidak terbaca.

   Perbaikannya: bilah diberi permukaannya sendiri, dan permukaan itu GELAP di
   semua halaman. Bukan karena gelap lebih bagus, melainkan karena empat dari
   enam halaman sudah membuka dengan pita tinta (artikel, agenda, peringkat,
   BUMBER) dan kaki halaman juga tinta — bilah terang akan menjadi satu-satunya
   pita putih yang terjepit di antaranya. Bilah gelap juga tetap terbaca ketika
   ia melayang di atas isi terang saat halaman digulir; kebalikannya tidak.

   Bilah juga dijadikan `position: sticky` lewat CSS, bukan lewat kelas
   `.sticky` dari main.js: penangan itu memasang `window.onscroll` yang
   ditimpa skrip lain di halaman, sehingga tidak pernah benar-benar menyala.
   ========================================================================== */

/* ⛔ JANGAN menambahkan `backdrop-filter` di sini.
   Sebuah backdrop-filter membuat CONTAINING BLOCK untuk keturunan
   `position: fixed`. Laci menu mobile (stellarnav) memakai `position: fixed;
   top: 0` untuk mengisi layar — dengan blur di bilah, ia justru diukur
   terhadap kotak bilah: tinggi 75px untuk enam butir, mulai di x=110, dan
   menindih logo. Bilah sudah padat, jadi blur-nya pun tidak terlihat. */
.header-area {
    --kepala-latar: #12181a;
    --kepala-teks: rgba(255, 255, 255, .74);
    --kepala-teks-kuat: #fff;
    --kepala-aktif: var(--apm-hijau-terang);
    --kepala-garis: rgba(255, 255, 255, .1);

    /* `fixed`, BUKAN `sticky`. Sticky di struktur tema ini tidak pernah
       mengunci — terukur: setelah digulir 1.500px, `top` bilah tetap -1.500px,
       seolah ia absolut. Tema sendiri memakai `fixed` pada kelas `.sticky`-nya
       dan itu bekerja; melawan struktur demi kata kunci yang lebih modern
       tidak menghasilkan apa pun selain bilah yang hilang saat digulir. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--kepala-latar);
    border-bottom: 1px solid var(--kepala-garis);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Tema memberi `.sticky` latar hitam pekat — itu akan menabrak kedua ragam. */
.header-area.sticky {
    position: fixed;
    background: var(--kepala-latar);
    box-shadow: 0 1px 16px rgba(18, 24, 26, .08);
}

.header-area .navbarmneuclass li>a,
.header-area .stellarnav li>a {
    color: var(--kepala-teks);
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 500;
    transition: color .18s ease;
}

.header-area .navbarmneuclass li>a:hover,
.header-area .stellarnav li>a:hover,
.header-area .navbarmneuclass li.current>a,
.header-area .stellarnav li.current>a {
    color: var(--kepala-aktif);
}

/* Penanda halaman aktif tidak boleh hanya warna: sekitar 8% laki-laki sulit
   membedakan hijau dari abu. Garis di bawahnya terbaca tanpa warna. */
.header-area .navbarmneuclass li.current>a::after,
.header-area .stellarnav li.current>a::after {
    background: var(--kepala-aktif);
}

.apm-nav__masuk {
    color: var(--kepala-teks-kuat);
}

.apm-nav__masuk:hover {
    color: var(--kepala-aktif);
}

/* BUMBER adalah layanan berbayar terpisah, bukan satu lagi halaman isi.
   Dipisah garis tipis supaya kelompoknya terbaca, tanpa berteriak. */
.apm-nav__pisah {
    position: relative;
    padding-left: 19px !important;
    margin-left: 5px;
}

/* Garis pendek di tengah, bukan `border-left` setinggi bilah — yang terakhir
   membuat BUMBER dan Tentang terlihat terkurung dalam kotak tersendiri. */
.apm-nav__pisah::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: var(--kepala-garis);
}

@media (max-width: 1199px) {
    .apm-nav__pisah {
        padding-left: 0 !important;
        margin-left: 0;
    }

    .apm-nav__pisah::before {
        display: none;
    }
}

/* -----------------------------------------------------------------------------
   29b. LAMBANG + NAMA DI BILAH ATAS
   -------------------------------------------------------------------------- */

.apm-lambang {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}

.apm-lambang img {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    /* 11/40 mendekati rasio squircle iOS — bentuknya dikenali sebagai ikon
       aplikasi, dan memang itulah berkasnya. */
    box-shadow: 0 0 0 1px var(--kepala-garis), 0 1px 3px rgba(18, 24, 26, .12);
    flex: none;
}

.apm-lambang__teks {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    color: var(--kepala-teks-kuat);
}

@media (max-width: 575px) {
    .apm-lambang {
        gap: 9px;
    }

    .apm-lambang__teks {
        font-size: .9375rem;
    }
}

/* -----------------------------------------------------------------------------
   29c. TOMBOL SEKUNDER HALAMAN BUMBER
   -------------------------------------------------------------------------- */

/* `bg-gray-800` di atas latar tinta menghasilkan bidang abu di atas abu:
   dari jauh ia tidak terbaca sebagai tombol sama sekali, hanya kotak yang
   mengambang di sebelah tombol hijau. Garis tepi mengembalikan bentuknya
   tanpa menambah warna kedua yang bersaing dengan aksi utama. */
.apm-bumber .pd-tombol-garis {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .28);
}

.apm-bumber .pd-tombol-garis:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

/* -----------------------------------------------------------------------------
   29d. BARIS BILAH ATAS: LEBAR MENGIKUTI ISI, BUKAN PECAHAN KISI
   -------------------------------------------------------------------------- */

/* Kisi Bootstrap membagi bilah jadi pecahan tetap (3/6/3). Enam butir menu
   butuh sekitar 610px, sedangkan kolom 6/12 hanya 570px pada layar 1200px —
   menu pun melimpah ke kiri dan menindih logo (terukur: tumpang tindih 107px).
   Menambah lebar kolom logo hanya memindahkan masalahnya ke sisi lain.

   Di layar lebar, ketiga bagian dibiarkan selebar isinya dan jarak dibagi di
   antaranya. Di bawah 992px susunan kisi asli tetap dipakai, karena di sanalah
   menu gulung (stellarnav) mengambil alih. */
@media (min-width: 992px) {
    .header-area>.container>.row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .header-area>.container>.row>[class*="col-"] {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    /* TANPA `min-width: 0`. Dengan itu kolom menu boleh menyusut di bawah
       lebar isinya, dan karena daftarnya rata tengah, kelebihannya melimpah
       ke KIRI dan KANAN sekaligus — menindih logo dan tombol sekaligus. */
    .header-area>.container>.row>.col-lg-6 {
        flex: 0 1 auto;
    }
}

/* Ruang antarbutir dirapatkan di SEMUA lebar desktop, bukan hanya di bawah
   1400px. Wadah Bootstrap berhenti di 1140px, sedangkan isi bilah — lambang
   238px + enam tujuan + dua tombol — menuntut sekitar 1235px pada jarak
   bawaan. Selisihnya keluar dari layar: tombol "Daftar gratis" terpotong 22px
   dan dokumen bisa digeser mendatar 37px. */
@media (min-width: 992px) {

    .header-area .navbarmneuclass>li>a,
    .header-area .stellarnav li>a {
        padding-left: 12px;
        padding-right: 12px;
    }

    .apm-nav__masuk {
        margin-right: 14px;
    }
}

/* -----------------------------------------------------------------------------
   30. PREFLIGHT SEPERLUNYA UNTUK HALAMAN BUMBER
   -------------------------------------------------------------------------- */

/* `bumber.css` sengaja dikompilasi TANPA `@tailwind base` — preflight-nya
   akan mereset header dan kaki situs yang kini ikut dirender di halaman ini.
   Tetapi preflight jugalah yang biasanya menetralkan `<button>`, dan tanpa
   itu kedelapan tombol halaman ini memakai bawaan peramban:

       latar buttonface #EFEFEF, border `outset`, huruf Inter 16px

   Akibatnya paling parah di FAQ: pertanyaannya berteks putih (dari kelas
   Tailwind) di atas bidang nyaris putih — kontras sekitar 1,1:1, praktis
   tidak terlihat sama sekali.

   Jadi yang dipasang bukan seluruh preflight, hanya bagian yang benar-benar
   diandalkan halaman ini, dan discoping supaya tidak menyentuh yang lain. */

.apm-bumber button {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.apm-bumber button:disabled {
    cursor: default;
}

/* Tombol FAQ dan panah karosel tetap butuh area sentuh yang layak setelah
   `padding: 0` di atas; kelas utilitasnya yang mengembalikan ukuran, tetapi
   fokus papan ketik harus tetap terlihat. */
.apm-bumber button:focus-visible {
    outline: 2px solid var(--apm-hijau-terang);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   31. LACI MENU DI PONSEL
   -------------------------------------------------------------------------- */

/* Laci bawaan stellarnav berlatar `#2E3D44` — abu-biru yang tidak ada di
   palet APM, sehingga membuka menu terasa seperti pindah ke situs lain.
   Ditata ulang memakai tinta yang sama dengan bilah dan kaki halaman.

   Batasnya 1199px, menyamai `breakpoint: 1200` di main.js. Kalau salah satunya
   diubah, ubah keduanya — kalau tidak, laci akan aktif dengan gaya bawaan tema
   di rentang yang tidak tertutup. */
@media (max-width: 1199px) {

    .stellarnav.light.mobile>ul,
    .stellarnav.light.mobile.active>ul,
    .stellarnav.mobile.active.light ul {
        background: var(--apm-tinta);
        border-left: 1px solid rgba(255, 255, 255, .08);
        box-shadow: -12px 0 40px rgba(0, 0, 0, .45);
        padding-top: 6px;
    }

    .stellarnav.light.mobile li a,
    .stellarnav.light.mobile li li a {
        font-family: 'Poppins', system-ui, sans-serif;
        font-size: .9375rem;
        font-weight: 500;
        letter-spacing: .01em;
        text-transform: none;
        padding: 15px 22px;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .stellarnav.light.mobile li.current>a {
        color: var(--apm-hijau-terang);
        background: rgba(47, 191, 113, .09);
        box-shadow: inset 3px 0 0 var(--apm-hijau-terang);
    }

    .stellarnav .close-menu {
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        font-family: 'Poppins', system-ui, sans-serif;
        letter-spacing: .06em;
    }

    /* Masuk & Daftar hanya ada di kolom kanan yang `d-none` di ponsel, jadi
       tanpa ini pengunjung ponsel tidak punya jalan menuju pendaftaran sama
       sekali. */
    .apm-laci__aksi {
        margin-top: 10px;
        padding: 0 16px;
    }

    .apm-laci__aksi>a {
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 10px;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, .22) !important;
    }

    .apm-laci__aksi--utama {
        margin-top: 8px;
        margin-bottom: 18px;
    }

    .apm-laci__aksi--utama>a {
        background: var(--apm-hijau);
        border-color: var(--apm-hijau);
        border-bottom-color: var(--apm-hijau) !important;
        color: #fff !important;
        font-weight: 600;
    }
}

/* Butir laci ini tidak boleh ikut muncul di bilah desktop. */
@media (min-width: 992px) {
    .apm-laci__aksi {
        display: none !important;
    }
}

/* -----------------------------------------------------------------------------
   32. REMAH ROTI DI PONSEL: SATU JALAN KEMBALI, BUKAN JEJAK LENGKAP
   -------------------------------------------------------------------------- */

/* Di layar lebar, jejak lengkap berguna: ia menunjukkan posisi halaman dalam
   struktur situs. Di ponsel ia tidak: jejaknya terpotong atau membungkus ke
   baris kedua, hurufnya 13px dengan opasitas 62%, dan tautannya jauh di bawah
   ukuran sasaran sentuh 44px yang bisa ditekan dengan jempol.
   
   Yang benar-benar dibutuhkan pengguna ponsel di sini cuma satu: jalan
   kembali. Jadi di bawah 576px jejaknya dipadatkan menjadi satu tombol
   "kembali ke induk" — halaman detail menuju katalognya, halaman katalog
   menuju beranda — dengan area sentuh yang layak. Judul halaman ada tepat di
   bawahnya, jadi tidak ada informasi yang hilang. */
@media (max-width: 575px) {
    .apm-remah {
        display: flex;
        align-items: center;
        margin-bottom: 22px;
    }

    /* Pemisah "/" dan label halaman saat ini tidak diperlukan lagi. */
    .apm-remah>span {
        display: none;
    }

    /* Pada halaman detail ada dua tautan (Beranda + induk); yang ditampilkan
       induknya. Pada halaman katalog hanya ada satu (Beranda), dan aturan ini
       tidak menyembunyikan apa pun. */
    .apm-remah>a:not(:last-of-type) {
        display: none;
    }

    /* 44px, bukan 40: itu ukuran sasaran sentuh minimum yang bisa ditekan
       dengan jempol tanpa meleset. Latar samar dipasang tetap (bukan hanya
       saat ditekan) supaya bentuknya terbaca sebagai tombol, bukan teks
       bergaris. */
    .apm-remah>a:last-of-type {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 18px 0 14px;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 999px;
        font-size: .9375rem;
        font-weight: 500;
        color: #fff;
    }

    .apm-remah>a:last-of-type::before {
        content: "\2190";
        /* panah kiri */
        font-size: 1rem;
        line-height: 1;
    }

    .apm-remah>a:last-of-type:active {
        background: rgba(255, 255, 255, .16);
    }
}

/* -----------------------------------------------------------------------------
   33. HIASAN YANG MELUBER TIDAK BOLEH MENGGESER HALAMAN
   -------------------------------------------------------------------------- */

/* Ilustrasi hero (`banner-assets.png`) sengaja menjorok keluar kolomnya, dan
   itu memang bagian dari rancangannya. Yang tidak disengaja: pembungkusnya
   `overflow: visible`, sehingga di lebar 992-1024px ia menambah 39-54px pada
   `scrollWidth` — halaman bisa digeser mendatar, dan pada peranti sentuh itu
   terasa seperti tata letak yang rusak.

   `clip` dipakai, bukan `hidden`: `hidden` membuat wadah gulir baru yang bisa
   mengacaukan `position: sticky` di dalamnya, sedangkan `clip` hanya memotong. */
.welcome-area-wrap,
.single-welcome-area {
    overflow-x: hidden;
    overflow-x: clip;
}

/* =============================================================================
   34. BILAH ATAS YANG BENAR-BENAR MENEMPEL, DAN TOMBOL MENGAMBANG YANG TIDAK
       SALING MENINDIH
   =============================================================================

   `position: sticky` pada bilah atas TIDAK PERNAH BEKERJA. Sebabnya satu baris
   di `typography.css`: `body { overflow-x: hidden }`. Menyetel overflow pada
   satu sumbu memaksa sumbu lainnya menjadi `auto`, sehingga <body> berubah
   menjadi wadah gulir tersendiri — dan bilah yang "menempel" lalu menempel
   pada scrollport BODY, bukan pada viewport. Karena halaman sebenarnya
   digulir pada documentElement, bilahnya ikut tergulir hilang. Terukur:
   setelah digulir 1.461px, `header.getBoundingClientRect().top` = -1.461px di
   beranda, artikel, dan BUMBER.

   AKAR SEBENARNYA ada di `typography.css`: `body, html { height: 100% }`.
   Dipasang bersama `overflow-x: hidden`, <body> berubah menjadi kotak gulir
   setinggi layar (844px) yang menggulir ISINYA sendiri, sementara
   `documentElement` tidak pernah bergerak. Akibatnya di halaman BUMBER:
   `document.documentElement.scrollHeight` = 844 padahal isinya 11.426px,
   `window.scrollY` selalu 0, dan `window.scrollTo` tidak melakukan apa pun.
   Tombol "ke atas" yang bergantung pada posisi gulir karena itu tidak pernah
   muncul di sana — dan tautan jangkar (#harga, #faq) juga tidak bekerja.

   `height: 100%` diganti `min-height: 100%`: <body> tetap setinggi layar saat
   isinya pendek, tetapi tumbuh mengikuti isi ketika panjang, sehingga yang
   menggulir kembali viewport seperti biasa.

      `overflow-x: hidden` itu TETAP DIPERTAHANKAN. Melepasnya sempat dicoba dan
   justru merusak gulir halaman: `typography.css` juga menyetel
   `body, html { height: 100% }`, sehingga tema memang mengandalkan <body>
   sebagai wadah gulirnya. Tanpa `overflow-x: hidden`, tinggi <body> terkunci
   844px sementara isinya 9.438px, dan `window.scrollTo` berhenti dapat
   diandalkan.

   Karena itu bilahnya memakai `position: fixed`, bukan `sticky`. `fixed`
   tidak peduli siapa wadah gulirnya. Itu pula mekanisme yang dipakai tema
   sendiri pada kelas `.sticky`-nya — melawan struktur demi kata kunci yang
   lebih modern hanya menghasilkan bilah yang hilang saat digulir.
   ========================================================================== */

body,
html {
    height: auto;
    min-height: 100%;
}

/* -----------------------------------------------------------------------------
   34a. Bilah menyingkir saat menggulir turun, kembali saat menggulir naik
   -------------------------------------------------------------------------- */

/* Hanya di layar sempit. Bilah 76px pada layar 844px memakan 9% ruang baca,
   dan di ponsel ruang itu mahal. Di desktop bilah tetap terlihat terus:
   ruangnya cukup, dan menyembunyikannya justru membuat navigasi terasa
   tidak dapat diandalkan. */
@media (max-width: 1199px) {
    .header-area {
        transition: transform .28s ease;
        /* TANPA `will-change: transform`.
           `will-change` membuat CONTAINING BLOCK untuk keturunan
           `position: fixed` — sama seperti `transform` dan `backdrop-filter`.
           Laci menu stellarnav adalah `position: fixed; top: 0; bottom: 0`,
           jadi ia berhenti diukur terhadap viewport dan mulai diukur terhadap
           bilah setinggi 76px: menunya menyusut jadi 75px sementara isinya
           496px, dan sembilan butir menu terpotong jadi sesobek garis.
           Ini kedua kalinya jebakan yang sama memakan menu ini — sebelumnya
           lewat `backdrop-filter`. Animasi geser 76px tidak butuh petunjuk
           optimasi; ongkos kebenarannya jauh lebih mahal daripada manfaatnya. */
    }

    .header-area.apm-bilah--sembunyi {
        transform: translateY(-100%);
    }
}

/* Pengguna yang meminta gerak dikurangi tidak mendapat animasi geser. */
@media (prefers-reduced-motion: reduce) {
    .header-area {
        transition: none;
    }
}

/* -----------------------------------------------------------------------------
   34b. Tumpukan tombol mengambang
   -------------------------------------------------------------------------- */

/* Tombol WhatsApp dan tombol "ke atas" sama-sama melayang di pojok kanan
   bawah, tetapi jaraknya dari tepi ditulis dalam satuan yang berbeda: WA
   memakai px, tombol naik memakai `right: 10%`. Di 1440px, 10% = 144px
   sehingga keduanya berjauhan; di 390px, 10% = 39px dan keduanya bertindih
   sekitar 49x46px. Persentase untuk elemen mengambang selalu berakhir begini.

   Keduanya kini satu kolom dengan jarak tetap: WhatsApp di bawah (paling
   dekat jempol, dan itu aksi utamanya), tombol naik di atasnya. */
a.up-btn {
    position: fixed;
    right: 20px;
    bottom: 100px;
    /* 24px tepi (sama dengan tombol WA) + 64px tinggi WA + 12px jarak */
    left: auto;
    height: 56px;
    width: 56px;
    line-height: 54px;
    font-size: 24px;
    border-radius: 999px;
    background: var(--apm-tinta);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

/* Kemunculannya TIDAK lagi bergantung pada kelas `.sticky` dari main.js.
   Penangan itu memasang `window.onscroll`, yang ditimpa skrip lain: di
   halaman BUMBER ia tidak pernah menyala, sehingga tombol "ke atas" di sana
   selamanya `opacity: 0` — ada di DOM, tidak pernah terlihat. */
a.up-btn.apm-naik--tampak {
    visibility: visible;
    opacity: 1;
    transform: none;
}

a.up-btn:hover,
a.up-btn:focus-visible {
    background: var(--apm-hijau);
    border-color: var(--apm-hijau);
    color: #fff;
}

.whatsapp-button {
    z-index: 999;
}

/* ==========================================================================
   36. FOKUS PAPAN KETIK — DI SELURUH SITUS, bukan hanya di dalam .apm-artikel
   ==========================================================================
   Tema vendor mematikan cincin fokus secara global: `a:focus { outline: 0 }`
   plus `outline: 0` pada seluruh button/input/textarea/select
   (`typography.css`). Bagian 24 memulihkannya, tetapi HANYA di dalam
   `.apm-artikel` — sehingga bilah atas, menu navigasi, tombol "Masuk",
   seluruh tautan kaki halaman, tombol laci ponsel, dan halaman /kontak tetap
   tidak menandai posisi fokus sama sekali. Pengguna papan ketik menekan Tab
   dan tidak ada apa pun yang bergerak. WCAG 2.4.7 gagal.

   `:focus-visible`, bukan `:focus`: pengguna tetikus tidak melihat cincin
   sesudah mengklik, jadi tidak ada alasan mematikannya lagi lain kali. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body summary:focus-visible,
body [tabindex]:focus-visible {
    outline: 2px solid var(--apm-hijau-terang, #2fbf71);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --- Modal kalender beranda -----------------------------------------------
   Kelas ini menggantikan `style="..."` sebaris yang dulu dirakit di dalam
   template literal JavaScript. Warnanya lewat token, bukan hardcode: situs
   ini sempat memuat empat hijau berbeda (#0b5c3b, #2FBF71, #054337, #127a4b)
   karena nilai disunting satu per satu di Blade. */
.apm-kalender__gambar {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

.apm-kalender__baris { padding-top: 1rem; }

.apm-kalender__judul {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--apm-hijau);
}

.apm-kalender__tanggal {
    color: var(--apm-teks-lemah);
    margin-bottom: .75rem;
}

.apm-kalender__pemateri {
    font-size: 1rem;
    font-weight: 600;
    color: var(--apm-hijau);
    margin-bottom: 1rem;
}

/* `color: gray !important` yang dulu dipakai tabel ini hanya 3,95:1 di atas
   putih — di bawah AA. Token ini 5,19:1. */
.apm-kalender__tabel { color: var(--apm-teks-lemah); }

.apm-kalender__subjudul {
    font-size: 1rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Akun saya — tujuan mendarat bagi peran non-panel

   Sampai 7 Sep 2026 setiap login diarahkan ke `/dashboard`, dan 1.581 dari
   1.705 akun berperan `masyarakat` sehingga mendarat di 403. Halaman ini
   memberi mereka tempat yang memang miliknya. Sengaja memakai kosakata
   komponen situs publik (`.apm-tombol`, `.apm-kartu`, `.apm-kosong`) — ia
   halaman publik yang kebetulan butuh login, bukan panel yang dipermudah.
--------------------------------------------------------------------------- */

.apm-akun__angka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--apm-garis);
    border: 1px solid var(--apm-garis);
    border-radius: 10px;
    overflow: hidden;
    margin: 32px 0 8px;
}

.apm-akun__angka-butir {
    background: #fff;
    padding: 20px 22px;
}

.apm-akun__angka-nilai {
    display: block;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--apm-tinta);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.apm-akun__angka-label {
    display: block;
    margin-top: 4px;
    font-size: .8125rem;
    color: var(--apm-teks-lemah);
}

.apm-akun__catatan {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 20px 0;
    padding: 14px 16px;
    border-left: 3px solid var(--apm-hijau);
    background: var(--apm-hijau-samar);
    border-radius: 0 8px 8px 0;
    font-size: .9375rem;
    color: var(--apm-teks);
}

.apm-akun__catatan i {
    margin-top: 3px;
    color: var(--apm-hijau);
}

.apm-akun__baris {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid var(--apm-garis);
}

.apm-akun__baris-isi { flex: 1 1 260px; min-width: 0; }

.apm-akun__baris-judul {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--apm-tinta);
    margin: 0 0 6px;
}

.apm-akun__baris-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    font-size: .875rem;
    color: var(--apm-teks-lemah);
}

.apm-akun__baris-ket {
    margin: 6px 0 0;
    font-size: .875rem;
    color: var(--apm-teks-lemah);
    font-style: italic;
}

.apm-akun__baris-aksi {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Status pembayaran. Warnanya datang dari `statusPembayaran()` di model —
   satu sumber untuk panel, API, dan halaman ini. */
.apm-akun__status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Kontras DIUKUR di atas latarnya masing-masing dengan rumus luminansi
   relatif, bukan dikira — huruf kecil-tebal di atas latar pastel adalah tempat
   dugaan paling sering meleset. */
.apm-akun__status--hijau  { background: #e7f4ec; color: #0b5c3b; }  /* 7,11:1 */
.apm-akun__status--amber  { background: #fdf3e0; color: #7a4e00; }  /* 6,54:1 */
.apm-akun__status--merah  { background: #fdeceb; color: #a3211a; }  /* 6,59:1 */
.apm-akun__status--netral { background: var(--apm-kertas-lembut); color: var(--apm-teks-lemah); }  /* 4,70:1 */

.apm-akun__koin {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--apm-garis);
}

.apm-akun__koin-sebab {
    display: block;
    font-size: .9375rem;
    color: var(--apm-tinta);
}

.apm-akun__koin-waktu {
    display: block;
    margin-top: 2px;
    font-size: .8125rem;
    color: var(--apm-teks-lemah);
}

.apm-akun__koin-jumlah {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--apm-hijau);
    white-space: nowrap;
}

.apm-akun__koin-jumlah--kurang { color: #a3211a; }

@media (max-width: 560px) {
    .apm-akun__baris { flex-direction: column; }
    .apm-akun__baris-aksi { width: 100%; justify-content: space-between; }
}