/* ============================================================================
   aj-home4.css — draf beranda /home-4 (public/aj-landing/home-4.html).

   Arahnya dari papan merek yang diberikan: latar indigo #3030B0, judul huruf
   kecil Special Gothic Expanded One, teks Figtree Regular, dan kolase foto
   persegi bersudut bulat — disusun sesederhana halaman tiket Partiful: satu
   warna latar, judul besar rata kiri, satu tombol putih, tanpa hiasan.

   Halaman ini tidak memuat CSS tema vendor (main.min.css, theme-eleven,
   uni-core), jadi tidak ada !important yang perlu dilawan. Dari halaman
   lain yang dipinjam hanya: aj-megamenu.css (menu Solusi + lembar ponsel),
   aj-protect.css, dan tombol tampilan dari aj-theme-toggle.js (gayanya
   disalin di bawah karena aslinya ada di aj-custom.css).

   Satuan --u = satu piksel papan merek (artboard 1490 × 910). Semua ukuran
   hero di layar lebar ditulis dalam u, diukur dari papan aslinya:
   judul 89u (baris 89u), foto kuku 460u, potret 302u, golf 286 × 281u, sudut
   7% / 13,1% / 9,4% dari lebar fotonya. Subjudulnya (di papan Figtree 43,5u)
   diganti Special Gothic atas permintaan user: keluarga yang sama dengan
   judul, tapi berat reguler dengan lebar expanded — Expanded One yang tebal
   membuatnya terbaca seperti judul kedua.
   ========================================================================== */

@font-face {
    font-family: 'Special Gothic Expanded One';
    font-style: normal;
    font-weight: 400;
    /* Judul hero memakai huruf ini; tukar huruf sesudah tampil membuat
       empat baris itu melompat. Berkasnya kecil dan dipreload. */
    font-display: block;
    src: url('../fonts/special-gothic-expanded-one/special-gothic-expanded-one-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
        U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Special Gothic, variabel: berat 400–700, lebar 75–125%. */
@font-face {
    font-family: 'Special Gothic';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 75% 125%;
    font-display: block;
    src: url('../fonts/special-gothic/special-gothic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
        U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Special Gothic';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 75% 125%;
    font-display: block;
    src: url('../fonts/special-gothic/special-gothic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: 'Special Gothic Expanded One';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/special-gothic-expanded-one/special-gothic-expanded-one-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

:root {
    /* Biru merek — satu-satunya biru di halaman ini, termasuk di mode gelap. */
    --h4-blue: #3030b0;
    --h4-blue-soft: #e7e6fb;
    --h4-ink: #121035;
    --h4-hero-bg: var(--h4-blue);
    --h4-on-hero: #ffffff;

    /* Seksi isi di bawah hero: putih bertulisan hitam di tema terang, hitam
       bertulisan putih di tema gelap. */
    --h4-sec-bg: #ffffff;
    --h4-sec-ink: #0a0a0a;
    --h4-sec-soft: rgba(10, 10, 10, 0.68);
    --h4-sec-edge: rgba(10, 10, 10, 0.1);
    --h4-sec-wait: #f0f0f0;

    --h4-display: 'Special Gothic Expanded One', 'Arial Black', system-ui, sans-serif;
    --h4-sub: 'Special Gothic', 'Figtree', system-ui, sans-serif;
    --h4-text: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Navbar = kapsul melayang: jarak dari atas + tinggi kapsulnya. Hero
       memberi ruang sebesar --h4-nav-h di atas isinya. */
    --h4-bar-top: 12px;
    --h4-bar-h: 60px;
    --h4-nav-h: calc(var(--h4-bar-top) + var(--h4-bar-h));
    --h4-pad: 20px;

    /* Menu Solusi (aj-megamenu.css) memakai warna merek ini untuk aksen. Kartu
       panelnya melayang di bawah kapsul tanpa menggelapkan halaman, seperti
       Linktree. */
    --ajmm-brand: #3030b0;
    --ajmm-tint: rgba(48, 48, 176, 0.08);
    --ajmm-scrim: transparent;
    /* Netral hitam-abu halaman ini, bukan biru-abu bawaan menu landing lama. */
    --ajmm-ink: #0a0a0a;
    --ajmm-ink-soft: #5c5c66;
    --ajmm-line: rgba(10, 10, 10, 0.1);
    --ajmm-soft: #f2f2f4;
    --ajmm-soft-2: #eaeaee;
    --ajmm-photo: #ececef;
}

/* Mode gelap: latar hitam polos (seperti halaman tiket Partiful), biru
   merek pindah ke tombol. Menu Solusi ikut hitam netral dengan aksen putih —
   biru #3030B0 sebagai teks di atas hitam tidak terbaca. */
.uc-dark {
    --h4-hero-bg: #0a0a0a;
    --h4-sec-bg: #0a0a0a;
    --h4-sec-ink: #ffffff;
    --h4-sec-soft: rgba(255, 255, 255, 0.72);
    --h4-sec-edge: rgba(255, 255, 255, 0.1);
    --h4-sec-wait: #1c1c1c;

    --ajmm-bg: #141414;
    --ajmm-ink: #f2f2f2;
    --ajmm-ink-soft: #a3a3a3;
    --ajmm-line: rgba(255, 255, 255, 0.12);
    --ajmm-soft: #1c1c1c;
    --ajmm-soft-2: #232323;
    --ajmm-brand: #ffffff;
    --ajmm-tint: rgba(255, 255, 255, 0.08);
    --ajmm-photo: #1c1c1c;
    --ajmm-shadow: none;
}

@media (min-width: 600px) {
    :root {
        --h4-pad: 40px;
    }
}

@media (min-width: 992px) {
    :root {
        --h4-bar-top: 20px;
        --h4-bar-h: 72px;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Latar <html> = warna seksi paling atas & paling bawah (hero dan penutup:
   biru, hitam di tema gelap) — itulah yang terlihat di area overscroll iOS
   saat halaman ditarik melewati ujungnya. !important: aj-theme-toggle.js
   menanam background-color inline #0f131a di <html> saat beralih ke gelap
   (untuk halaman landing lain), yang di sini justru membuat ujungnya beda
   hitam dengan hero. */
html {
    background-color: var(--h4-hero-bg) !important;
    -webkit-text-size-adjust: 100%;
}

/* <body> sengaja transparan: WebKit mewarnai area overscroll dengan latar
   <html> yang DITIMPA latar <body> (LocalFrameView::documentBackgroundColor),
   jadi body berlatar terang membuat ujung halaman putih walau html biru.
   Tiap seksi melukis latarnya sendiri, tidak ada celah yang memperlihatkan
   body. */
body.h4 {
    margin: 0;
    background: transparent;
    color: var(--h4-ink);
    font-family: var(--h4-text);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.uc-dark body.h4 {
    color: #f3f2ff;
}

/* Celah subpiksel antara dua seksi putih (skala layar pecahan) jangan
   memperlihatkan biru <html> di balik <body> yang transparan sebagai garis
   tipis. Latar <main> tidak ikut menentukan warna area overscroll — WebKit
   cuma membaca <html> & <body>. */
body.h4 > main {
    background: var(--h4-sec-bg);
}

.h4-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ── Navbar: menyatu dengan hero di puncak, kapsul melayang di bawahnya ──── */

/* Selebar halaman tapi tembus klik — yang menangkap klik hanya kapsulnya.
   Di atas selubung menu Solusi (.ajmm-scrim, z 998). Bersembunyi ke atas saat
   halaman digulir ke bawah dan kembali saat digulir ke atas
   (.is-hidden, assets/js/aj-home4.js). */
.h4-header {
    position: fixed;
    top: var(--h4-bar-top);
    left: 0;
    right: 0;
    z-index: 999;
    container-type: inline-size;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Naik melewati tepi atas, termasuk bayangan kapsulnya (blur 30px − 14px
   sebaran + 10px geser = 26px di bawah kapsul). */
.h4-header.is-hidden {
    transform: translateY(calc(-100% - var(--h4-bar-top) - 32px));
}

@media (prefers-reduced-motion: reduce) {
    .h4-header {
        transition: none;
    }
}

.h4-nav-wrap {
    padding: 0 var(--h4-pad);
}

.h4-bar {
    --uc-nav-height: var(--h4-bar-h);
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--h4-bar-h);
    /* Kanan: jarak tombol bulat 40px terakhir (tampilan / menu) ke tepi kapsul
       sama dengan jarak atas-bawahnya. */
    padding: 0 calc((var(--h4-bar-h) - 40px) / 2) 0 calc(var(--h4-bar-h) * 0.36);
    border-radius: 9999px;
    background: #ffffff;
    color: var(--h4-ink);
    box-shadow:
        0 1px 2px rgba(18, 16, 53, 0.06),
        0 10px 30px -14px rgba(18, 16, 53, 0.35);
    pointer-events: auto;
}

/* Mode gelap: tanpa bayangan; permukaan sedikit lebih terang + garis tipis. */
.uc-dark .h4-bar {
    background: #141414;
    color: #f2f2f2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.h4-logo {
    --h4-logo-mark: var(--h4-blue);
    display: inline-flex;
    flex: none;
    margin-right: auto;
    color: inherit;
}

.uc-dark .h4-logo {
    --h4-logo-mark: currentColor;
}

.h4-logo svg {
    display: block;
    width: 122px;
    height: auto;
    fill: currentColor;
}

.h4-links {
    display: none;
}

.h4-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Urutannya urutan DOM: Masuk, Daftar, tombol tampilan (aj-theme-toggle.js
   menyisipkannya sebelum tombol menu), lalu tombol menu ponsel paling kanan.
   Di desktop tombol tampilan jadi yang paling kanan; di ponsel ia di kanan
   Masuk, hamburger tetap paling ujung. */

.h4-login,
.h4-links a,
.h4-links .ajmm-trigger {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font-family: var(--h4-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.h4-login:hover,
.h4-links a:hover,
.h4-links .ajmm-trigger:hover,
.h4-links .ajmm-trigger[aria-expanded='true'] {
    background: rgba(18, 16, 53, 0.06);
    color: inherit;
}

.uc-dark .h4-login:hover,
.uc-dark .h4-links a:hover,
.uc-dark .h4-links .ajmm-trigger:hover,
.uc-dark .h4-links .ajmm-trigger[aria-expanded='true'] {
    background: rgba(255, 255, 255, 0.08);
}

.h4-login:focus-visible,
.h4-links a:focus-visible,
.h4-signup:focus-visible {
    outline: 2px solid var(--h4-blue);
    outline-offset: 2px;
}

.uc-dark .h4-login:focus-visible,
.uc-dark .h4-links a:focus-visible,
.uc-dark .h4-signup:focus-visible {
    outline-color: #ffffff;
}

/* Tombol Daftar: kapsul biru merek, setinggi kapsul navbar dikurangi jarak
   tepinya — sama seperti "Sign up free" Linktree. */
.h4-signup {
    display: none;
    align-items: center;
    height: calc(var(--h4-bar-h) * 0.72);
    padding: 0 22px;
    border-radius: 9999px;
    background: var(--h4-blue);
    color: #ffffff;
    font-family: var(--h4-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        box-shadow 0.15s ease,
        transform 0.12s ease;
}

.h4-signup:hover {
    box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.12);
}

.h4-signup:active {
    transform: scale(0.97);
}

/* Ruang ponsel sempit: logo, Masuk, tampilan, menu. "Daftar gratis" menyusul. */
@media (min-width: 560px) {
    .h4-signup {
        display: inline-flex;
    }
}

@media (min-width: 992px) {
    .h4-logo {
        margin-right: 32px;
    }

    .h4-logo svg {
        width: 150px;
    }

    .h4-links {
        display: flex;
        align-items: center;
        gap: 2px;
        margin: 0 auto 0 0;
        padding: 0;
        list-style: none;
    }

    .h4-links > li {
        display: flex;
    }

    .h4-signup {
        padding: 0 26px;
    }

    /* Sedikit lebih renggang dari kapsul Daftar di kirinya. */
    .h4-actions .aj-theme-toggle {
        margin-left: 4px;
    }
}

/* Enam tautan (sejak "Untuk Bisnis", Okt 2026) baru muat lega ≥1200px; di
   bawahnya jaraknya dirapatkan supaya tombol tampilan tidak terdorong keluar
   layar. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .h4-logo {
        margin-right: 12px;
    }

    .h4-logo svg {
        width: 132px;
    }

    .h4-links a,
    .h4-links .ajmm-trigger,
    .h4-login {
        padding: 0 9px;
    }

    .h4-signup {
        padding: 0 18px;
    }
}

/* Pil akun (aj-home4.js): menggantikan Masuk & Daftar selama sudah masuk —
   foto profil + nama + panah ke dasbor, berbingkai tipis seperti tombol
   tampilan di sebelahnya. Di bawah 768px tinggal fotonya: lingkaran 40px,
   kembar tombol tampilan & menu (seperti landing lama). */
.h4-account {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 210px;
    height: 40px;
    padding: 0 10px 0 4px;
    border-radius: 9999px;
    box-shadow: inset 0 0 0 1px rgba(18, 16, 53, 0.16);
    color: inherit;
    font-family: var(--h4-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.15s ease,
        box-shadow 0.3s ease,
        color 0.3s ease,
        transform 0.12s ease;
}

.h4-account:hover {
    background: rgba(18, 16, 53, 0.06);
    color: inherit;
}

.h4-account:active {
    transform: scale(0.97);
}

.h4-account:focus-visible {
    outline: 2px solid var(--h4-blue);
    outline-offset: 2px;
}

.h4-account-photo {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: rgba(18, 16, 53, 0.08);
    object-fit: cover;
}

.h4-account-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.h4-account-arrow {
    flex: none;
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.uc-dark .h4-account {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.uc-dark .h4-account:hover {
    background: rgba(255, 255, 255, 0.08);
}

.uc-dark .h4-account:focus-visible {
    outline-color: #ffffff;
}

.uc-dark .h4-account-photo {
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 767.98px) {
    .h4-account {
        flex: none;
        justify-content: center;
        width: 40px;
        padding: 0;
    }

    .h4-account-name,
    .h4-account-arrow {
        display: none;
    }
}

@media (min-width: 992px) {
    .h4-account {
        max-width: 240px;
    }
}

/* Panel Solusi: kartu terpisah selebar kapsul, 10px di bawahnya, semua
   sudutnya bulat (aslinya lembar yang menyambung ke navbar). */
.h4-bar .ajmm {
    top: calc(100% + 10px);
}

/* ── Menu Solusi (desktop) & menu ponsel ──────────────────────────────────
   Struktur & perilakunya milik assets/js/aj-megamenu.js (dipakai semua
   halaman landing); di sini cuma tampilannya, dibatasi .h4 (kelas <body>)
   supaya halaman lain tidak berubah. Bahasanya bahasa halaman ini: judul
   Special Gothic, hitam-putih-indigo, kartu bulat bertekstur seperti kartu
   Fitur, kapsul hitam seperti tombol seksi. */

/* Panel desktop: kartu terpisah 10px di bawah kapsul navbar. */
.h4 .ajmm-sheet {
    border-radius: 24px;
    box-shadow:
        0 1px 2px rgba(18, 16, 53, 0.06),
        0 24px 48px -24px rgba(18, 16, 53, 0.45);
}

.uc-dark .h4 .ajmm-sheet {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.h4 .ajmm-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: 28px;
    max-width: none;
    padding: 24px 24px 22px;
}

/* Bidang: tanpa ikon garis; judulnya huruf judul halaman, seperti nama kartu
   Bayaran & Fitur. Panahnya hitam (putih di gelap), bukan biru. */
.h4 .ajmm-cat {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
    padding: 16px 18px 17px;
    border-radius: 16px;
}

.h4 .ajmm-cat-ico {
    display: none;
}

.h4 .ajmm-cat-title {
    gap: 8px;
    font-family: var(--h4-display);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
}

.h4 .ajmm-arrow {
    color: currentColor;
}

.h4 .ajmm-cat:focus-visible,
.h4 .ajmm-spot:focus-visible {
    outline-color: currentColor;
}

/* Sorotan: kartu bertekstur (tekstur pastel kartu "Terima bayaran online")
   dengan fotonya — tetap terang di tema gelap, seperti kartu-kartu halaman
   ini. */
.h4 .ajmm-spot {
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 20px;
    padding: 14px;
    border-radius: 20px;
    background: #e7e7ea url('../images/aj/home4/bayar/tekstur-pastel.webp') center / cover no-repeat;
    color: #0a0a0a;
}

.h4 .ajmm-spot:hover {
    color: #0a0a0a;
}

.h4 .ajmm-spot-media {
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.5);
}

.h4 .ajmm-spot-kicker {
    font-size: 13px;
    line-height: 18px;
    color: #3030b0;
}

.h4 .ajmm-spot-title {
    margin-top: 6px;
    font-family: var(--h4-display);
    font-size: 23px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0;
}

.h4 .ajmm-spot-text {
    margin-top: 8px;
    color: rgba(10, 10, 10, 0.7);
}

.h4 .ajmm-tpl {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.08);
}

.h4 .ajmm-tpl-name {
    color: #0a0a0a;
}

.h4 .ajmm-tpl-label,
.h4 .ajmm-tpl-meta {
    color: rgba(10, 10, 10, 0.62);
}

.h4 .ajmm-spot-cta {
    color: #0a0a0a;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

/* Bilah bawah: "Lihat semua solusi" = kapsul hitam seperti tombol seksi
   (putih di tema gelap). */
.h4 .ajmm-foot-inner {
    max-width: none;
    padding: 14px 24px 18px;
}

.h4 .ajmm-all {
    height: 44px;
    padding: 0 20px;
    border-radius: 9999px;
    background: var(--h4-sec-ink);
    color: var(--h4-sec-bg);
    font-size: 15px;
    transition: background-color 0.15s ease;
}

.h4 .ajmm-all:hover {
    background: #333333;
    color: var(--h4-sec-bg);
}

.uc-dark .h4 .ajmm-all:hover {
    background: #e6e6e6;
}

.h4 .ajmm-note a {
    color: var(--ajmm-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Menu ponsel: layar penuh berwarna hero (biru, hitam di tema gelap) di
   belakang kapsul navbar — tidak ada halaman yang mengintip di atas atau di
   samping kapsul (aslinya lembar putih yang mulai di bawah navbar,
   --ajmm-top). Isinya tautan besar dulu — "Solusi" paling atas, disisipkan
   aj-home4.js — lalu kartu sorotan MUA yang besar, lalu tombol daftar; jeda
   masuknya (--d, inline di aj-megamenu.js) ikut urutan itu. Bidang-bidang
   Solusi tidak dijabarkan di sini (permintaan user): label "Solusi", enam
   bidangnya, dan "Lihat semua solusi" disembunyikan. */
.h4 .ajmm-m {
    top: 0;
    border-top: 0;
    background: var(--h4-hero-bg);
    color: #ffffff;
    /* Turun dari atas seperti tirai (clip-path), buram penuh sejak awal —
       bukan memudar, yang sempat memperlihatkan halaman tembus pandang di
       baliknya. Panel desktop muncul dengan cara yang sama. */
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition:
        clip-path 0.28s cubic-bezier(0.4, 0, 1, 1),
        visibility 0s linear 0.28s;
}

.h4 .ajmm-m.is-open {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.46s var(--ajmm-ease);
}

.h4 .ajmm-m-inner {
    gap: 30px;
    max-width: none;
    padding: calc(var(--h4-nav-h) + 28px) var(--h4-pad) calc(32px + env(safe-area-inset-bottom, 0px));
}

.h4 .ajmm-m-nav {
    order: -1;
    padding: 0;
    border-top: 0;
    --d: 0 !important;
}

.h4 .ajmm-m-inner > div:nth-child(1) {
    --d: 70 !important;
}

.h4 .ajmm-m-cta {
    --d: 130 !important;
}

.h4 .ajmm-m-label,
.h4 .ajmm-m-inner > div:nth-child(2) {
    display: none;
}

.h4 .ajmm-m-nav a {
    padding: 5px 0;
    border-bottom: 0;
    font-family: var(--h4-display);
    font-size: clamp(30px, 9vw, 44px);
    font-weight: 400;
    line-height: 1.1;
    color: #ffffff;
}

.h4 .ajmm-m-nav a .ajmm-arrow {
    display: none;
}

.h4 .ajmm-m-label {
    margin: 0 0 12px;
    padding: 0;
    color: rgba(255, 255, 255, 0.72);
}

.h4 .ajmm-m-feature {
    gap: 16px;
    padding: 12px 16px 12px 12px;
    border-radius: 20px;
    background: #e7e7ea url('../images/aj/home4/bayar/tekstur-pastel.webp') center / cover no-repeat;
    color: #0a0a0a;
}

.h4 .ajmm-m-feature img {
    width: 116px;
    height: 145px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.5);
}

.h4 .ajmm-m-feature-text {
    gap: 4px;
}

.h4 .ajmm-m-feature-kicker {
    font-size: 13px;
    color: #3030b0;
}

.h4 .ajmm-m-feature-title {
    font-family: var(--h4-display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
}

.h4 .ajmm-m-feature-text > span:last-child {
    font-size: 15px;
    line-height: 21px;
    color: rgba(10, 10, 10, 0.7);
}

.h4 .ajmm-m-feature > .ajmm-arrow {
    width: 22px;
    height: 22px;
    color: #0a0a0a;
}

/* Tombol daftar: kapsul putih bertulisan biru, seperti "Daftar gratis" di
   navbar saat menyatu dengan hero (biru di tema gelap). */
.h4 .ajmm-m-cta {
    min-height: 56px;
    background: #ffffff;
    color: var(--h4-blue);
    font-family: var(--h4-text);
    font-size: 17px;
}

.h4 .ajmm-m-cta:hover {
    color: var(--h4-blue);
    filter: none;
    box-shadow: inset 0 0 0 100vmax rgba(48, 48, 176, 0.08);
}

.uc-dark .h4 .ajmm-m-cta {
    background: var(--h4-blue);
    color: #ffffff;
}

.uc-dark .h4 .ajmm-m-cta:hover {
    color: #ffffff;
    box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.12);
}

/* Tombol tampilan (aj-theme-toggle.js) dan tombol menu ponsel
   (aj-megamenu.js): lingkaran 40px berbingkai tipis di dalam kapsul. Bentuk
   dasarnya disalin dari aj-custom.css, yang tidak dimuat di sini. */
.h4-bar .aj-theme-toggle,
.h4-bar .ajmm-burger {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(18, 16, 53, 0.16);
    color: inherit;
    cursor: pointer;
    outline: none;
    transition:
        background-color 0.15s ease,
        transform 0.12s ease;
}

.h4-bar .aj-theme-toggle:hover,
.h4-bar .ajmm-burger:hover {
    background: rgba(18, 16, 53, 0.06);
    color: inherit;
}

.h4-bar .aj-theme-toggle:active,
.h4-bar .ajmm-burger:active {
    transform: scale(0.95);
}

.h4-bar .aj-theme-toggle:focus-visible,
.h4-bar .ajmm-burger:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(18, 16, 53, 0.16), 0 0 0 2px var(--h4-blue);
}

.uc-dark .h4-bar .aj-theme-toggle,
.uc-dark .h4-bar .ajmm-burger {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.uc-dark .h4-bar .aj-theme-toggle:hover,
.uc-dark .h4-bar .ajmm-burger:hover {
    background: rgba(255, 255, 255, 0.08);
}

.uc-dark .h4-bar .aj-theme-toggle:focus-visible,
.uc-dark .h4-bar .ajmm-burger:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 0 2px #ffffff;
}

/* ── Navbar di puncak halaman: menyatu dengan hero ──
   Selama halaman di puncak (.is-top, dipasang di markup dan dijaga
   assets/js/aj-home4.js) navbarnya tanpa kapsul: transparan di atas hero,
   isinya putih, dan tepinya sejajar tepi judul & kolase hero. Begitu digulir
   ke bawah ia menyingkir apa adanya; yang muncul saat menggulir ke atas di
   bawah puncak adalah kapsul putih di atas, yang berubah halus jadi versi ini
   lagi begitu sampai di puncak. Selama menu Solusi / lembar menu ponsel
   terbuka navbarnya tetap kapsul — aj-megamenu.css memberi kapsulnya latar
   panel, dan teks putih di atasnya tidak akan terbaca. */
.h4-bar,
.h4-logo,
.h4-signup,
.h4-bar .aj-theme-toggle,
.h4-bar .ajmm-burger {
    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        padding 0.3s ease,
        color 0.3s ease,
        transform 0.12s ease;
}

/* Berganti wujud tanpa animasi (aj-home4.js), saat navbarnya tak terlihat. */
.h4-header.is-instant,
.h4-header.is-instant * {
    transition: none !important;
}

html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-bar {
    padding-right: 0;
    padding-left: 0;
    background: transparent;
    box-shadow: none;
    color: #ffffff;
}

html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-logo {
    --h4-logo-mark: currentColor;
}

html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-login:hover,
html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-links a:hover,
html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-links .ajmm-trigger:hover {
    background: rgba(255, 255, 255, 0.12);
}

html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-login:focus-visible,
html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-links a:focus-visible,
html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-signup:focus-visible {
    outline-color: #ffffff;
}

/* Daftar di atas biru hero: kapsul putih bertulisan biru (tombol klaim hero
   sudah hitam). Di atas hitam (tema gelap) tetap kapsul biru. */
html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-signup {
    background: #ffffff;
    color: var(--h4-blue);
}

html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-signup:hover {
    box-shadow: inset 0 0 0 100vmax rgba(48, 48, 176, 0.08);
}

html.uc-dark:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-signup {
    background: var(--h4-blue);
    color: #ffffff;
}

html.uc-dark:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-signup:hover {
    box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.12);
}

html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .aj-theme-toggle,
html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .ajmm-burger,
html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-account {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .aj-theme-toggle:hover,
html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .ajmm-burger:hover,
html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-account:hover {
    background: rgba(255, 255, 255, 0.12);
}

html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .h4-account:focus-visible {
    outline-color: #ffffff;
}

html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .aj-theme-toggle:focus-visible,
html:not(.ajmm-open):not(.ajmm-m-open) .h4-header.is-top .ajmm-burger:focus-visible {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.4),
        0 0 0 2px #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .h4-bar,
    .h4-logo,
    .h4-signup,
    .h4-account,
    .h4-bar .aj-theme-toggle,
    .h4-bar .ajmm-burger {
        transition: none;
    }
}

.aj-theme-toggle-slot {
    display: inline-flex;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.aj-theme-toggle-icon {
    display: block;
    transition:
        transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 140ms ease-out;
}

.aj-theme-toggle-icon.is-entering {
    opacity: 0;
    transform: translateY(6px) scale(0.8);
}

.aj-theme-toggle-icon.is-leaving {
    opacity: 0;
    transform: translateY(-6px) scale(0.8);
    transition:
        transform 120ms ease-in,
        opacity 120ms ease-in;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.h4-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: calc(var(--h4-nav-h) + 16px) 0 48px;
    background: var(--h4-hero-bg);
    color: var(--h4-on-hero);
    overflow: clip;
    container-type: inline-size;
}

.h4-hero-in {
    width: 100%;
    padding: 0 var(--h4-pad);
}

.h4-hero-title {
    margin: 0;
    font-family: var(--h4-display);
    font-weight: 400;
    /* "terbentur", baris terpanjang, selebar 5,87em — 6,1 menyisakan
       ruang sisi huruf supaya tidak pernah terpotong di ponsel. */
    font-size: min(calc((100cqw - 2 * var(--h4-pad)) / 6.1), 96px);
    line-height: 1;
    letter-spacing: 0;
    text-wrap: nowrap;
}

/* Subjudul = paragraf kecil di bawah judul raksasa, seperti teks di bawah
   judul Linktree: ukurannya tetap kecil walau judul & kolase membesar. */
.h4-hero-lead {
    max-width: 34em;
    margin: 20px 0 0;
    font-family: var(--h4-sub);
    font-size: clamp(16px, 4.3cqw, 18px);
    font-stretch: 125%;
    font-weight: 400;
    line-height: 1.45;
    text-wrap: balance;
}

/* Ajakan hero & penutup: tombol kapsul hitam (biru di tema gelap) ke
   /get-started-quick, tanpa apa-apa di sampingnya (lencana App Store &
   Google Play di hero dibuang atas permintaan user, 2026-10-09 — tetap di
   footer). Di bawah 700px tombolnya selebar kolom, paling lebar 400px,
   tingginya ikut lebar kotak ini lewat cqw (sisa ukuran lencana 3:1 dulu). */
.h4-cta {
    --h4-cta-gap: 10px;
    --h4-cta-h: calc((100cqw - var(--h4-cta-gap)) / 6);
    display: flex;
    flex-direction: column;
    gap: var(--h4-cta-gap);
    max-width: 400px;
    margin-top: 28px;
    container-type: inline-size;
}

.h4-cta-btn {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: var(--h4-cta-h);
    padding: 0 28px;
    border-radius: 9999px;
    background: #0a0a0a;
    color: #ffffff;
    font-family: var(--h4-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
}

.h4-cta-btn:hover {
    background: #262626;
    color: #ffffff;
}

.h4-cta-btn:active {
    transform: scale(0.97);
}

.h4-cta-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Di atas latar hitam, tombolnya biru merek. */
.uc-dark .h4-cta-btn {
    background: var(--h4-blue);
}

.uc-dark .h4-cta-btn:hover {
    background: var(--h4-blue);
    box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.1);
}

@media (min-width: 700px) {
    /* Sebaris: lebarnya ikut isi, jadi bukan kontainer ukuran lagi. */
    .h4-cta {
        --h4-cta-h: 56px;
        --h4-cta-gap: 12px;
        container-type: normal;
        flex-direction: row;
        align-items: center;
        width: max-content;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .h4-cta-btn {
        transition: none;
    }
}

/* Kolase: tiga bingkai di kotak 604 × 680 — susunan papan merek (aslinya
   604 × 752) dengan foto golf dinaikkan 73u, supaya kolase dan judul bisa
   sebesar proporsi papan tanpa melewati tinggi layar laptop. Foto tengah
   tetap 152u dari atas seperti papan: lebih tinggi lagi, wajah di bingkai
   potret tertutup. Posisi dalam persen kotak itu supaya sama di ukuran berapa
   pun. Urutan tumpuk = papan: potret di belakang, kuku di tengah, golf paling
   depan. Tiap bingkai berisi
   tumpukan foto; aj-home4.js menggulirnya satu per satu (foto baru naik dari
   bawah menutupi yang lama). */
.h4-collage {
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 604 / 680;
    margin-top: 44px;
}

.h4-ph {
    position: absolute;
    overflow: hidden;
    /* WebKit: tanpa ini foto yang sedang bergerak bisa keluar dari sudut
       bulat bingkainya. */
    isolation: isolate;
    background: rgba(255, 255, 255, 0.08);
}

.h4-ph > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pratinjau buram foto pertama (WebP 24 px sebagai data URI di --h4-lqip,
   ditulis scripts/generate_home4_images.py) selama foto aslinya dimuat;
   fotonya muncul pelan menutupinya begitu tiba. Diperbesar sedikit supaya
   tepi kaburnya tidak terlihat di sudut bingkai. */
.h4-ph::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--h4-lqip, none) center / cover no-repeat;
    filter: blur(14px);
    transform: scale(1.15);
}

/* Foto yang menunggu giliran: tetap dimuat, tidak terlihat. */
.h4-ph > img.is-off {
    visibility: hidden;
}

.h4-ph.is-potret {
    left: 48.68%;
    top: 0;
    width: 50%;
    aspect-ratio: 1;
    border-radius: 13.1%;
    z-index: 1;
}

.h4-ph.is-kuku {
    left: 0;
    top: 22.35%;
    width: 76.16%;
    aspect-ratio: 1;
    border-radius: 7%;
    z-index: 2;
}

.h4-ph.is-golf {
    left: 52.65%;
    top: 58.68%;
    width: 47.35%;
    aspect-ratio: 286 / 281;
    border-radius: 9.4%;
    z-index: 3;
}

/* Layar lebar: susunan papan merek. Isi papan (judul 548u + jarak + kolase
   604u) selebar 1277u mengisi wadah selebar layar dikurangi tepi 5%; --u
   hanya mengecil kalau kolase (680u) tidak muat di tinggi layar, dan sisa
   lebarnya jatuh ke jarak tengah. */
@media (min-width: 1024px) and (min-aspect-ratio: 5 / 4) {
    /* Tepi konten 5% lebar layar (seperti Linktree), lebar isinya paling
       banyak 1760px. Token, bukan nilai: cqw dihitung di elemen pemakainya,
       terhadap wadahnya (.h4-header untuk navbar, .h4-hero untuk hero) —
       lebar halaman tanpa scrollbar. */
    :root {
        --h4-pad: max(calc(100cqw * 0.05), calc((100cqw - 1760px) / 2));
        --u: min(
            calc((100cqw - 2 * var(--h4-pad)) / 1277),
            calc((100svh - var(--h4-nav-h) - 24px) / 680)
        );
    }

    /* Kapsul navbar = kotak isi: tepi kirinya sejajar judul, tepi kanannya
       sejajar kolase — seperti Linktree. */
    .h4-nav-wrap {
        padding: 0 var(--h4-pad);
    }

    .h4-hero {
        padding: calc(var(--h4-nav-h) + 12px) 0 12px;
    }

    .h4-hero-in {
        display: grid;
        grid-template-columns: calc(548 * var(--u)) calc(604 * var(--u));
        justify-content: space-between;
        align-items: center;
        padding: 0 var(--h4-pad);
    }

    .h4-hero-title {
        font-size: calc(89 * var(--u));
    }

    .h4-hero-lead {
        max-width: none;
        margin-top: calc(32 * var(--u));
        font-size: clamp(17px, calc(20 * var(--u)), 24px);
    }

    /* Satuan --u semua, supaya tombolnya ikut skala judul di layar desktop
       berapa pun; batas bawah px hanya untuk layar 4:3 kecil. */
    .h4-cta {
        --h4-cta-h: max(44px, calc(50 * var(--u)));
        --h4-cta-gap: max(8px, calc(12 * var(--u)));
        margin-top: calc(44 * var(--u));
    }

    .h4-cta-btn {
        padding: 0 max(18px, calc(26 * var(--u)));
        font-size: max(15px, calc(16 * var(--u)));
    }

    .h4-collage {
        width: calc(604 * var(--u));
        margin-top: 0;
    }
}

/* Foto "jatuh" ke tempatnya satu per satu saat halaman dibuka. */
@media (prefers-reduced-motion: no-preference) {
    .h4-ph {
        animation: h4-drop 0.75s cubic-bezier(0.2, 1.25, 0.35, 1) both;
    }

    .h4-ph.is-potret {
        animation-delay: 0.08s;
    }

    .h4-ph.is-kuku {
        animation-delay: 0.16s;
    }

    .h4-ph.is-golf {
        animation-delay: 0.26s;
    }
}

@keyframes h4-drop {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Tema laman booking ──────────────────────────────────────────────────── */

/* Judul & satu tombol di atas, lalu sebaris halaman booking bertema yang
   bergeser pelan tanpa ujung (seperti deret poster halaman tiket Partiful).
   Seksi ini berakhir dengan gambar, bukan judul, supaya judul seksi berikutnya
   tidak bertemu judul & tombol ini. Layarnya potret halaman booking asli
   tanpa bingkai ponsel (scripts/render_home4_themes.mjs) dan tanpa keterangan
   nama tema. Latar putih bertulisan hitam di tema terang, hitam bertulisan
   putih di tema gelap. */
.h4-tema {
    --h4-tema-w: clamp(180px, 50vw, 232px);
    --h4-tema-gap: 14px;
    --h4-tema-dur: 80s;
    /* Ruang di atas = navbar melayang + jarak, seperti hero: saat seksi ini
       tepat di puncak layar, judulnya tidak tertutup navbar. */
    padding: calc(var(--h4-nav-h) + 16px) 0 64px;
    background: var(--h4-sec-bg);
    color: var(--h4-sec-ink);
    overflow: hidden;
    container-type: inline-size;
}

.h4-tema-rail {
    overflow: hidden;
}

/* Dua salinan daftar berjajar; trek digeser tepat satu salinan (-50%), jadi
   sambungannya tidak terlihat. Jaraknya margin, bukan gap, supaya lebar
   satu salinan = setengah trek persis. */
.h4-tema-track {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: h4-tema-roll var(--h4-tema-dur) linear infinite;
}

.h4-tema-rail:hover .h4-tema-track {
    animation-play-state: paused;
}

@keyframes h4-tema-roll {
    to {
        transform: translateX(-50%);
    }
}

.h4-tema-item {
    flex: none;
    width: var(--h4-tema-w);
    margin-right: var(--h4-tema-gap);
}

/* Cuma layarnya: sudut bulat sebesar sudut layar ponsel, tanpa bingkai.
   Garis 1px tipis supaya tema berlatar putih tidak lebur ke latar seksi. */
.h4-tema-shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 390 / 844;
    border-radius: calc(var(--h4-tema-w) * 0.1);
    background: var(--h4-sec-wait);
    box-shadow: 0 0 0 1px var(--h4-sec-edge);
}

.h4-tema-head {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 36px;
    padding: 0 var(--h4-pad);
}

.h4-tema-title {
    max-width: 11em;
    margin: 0;
    font-family: var(--h4-display);
    font-size: clamp(34px, 9.4cqw, 52px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
}

.h4-tema-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 380px;
}

.h4-tema-lead {
    margin: 0;
    font-family: var(--h4-sub);
    font-size: 17px;
    font-stretch: 125%;
    line-height: 1.45;
    color: var(--h4-sec-soft);
    text-wrap: pretty;
}

/* Tombol pil seksi isi, berwarna kebalikan latar: hitam di putih, putih di
   hitam (seksi Tema & Bayaran). */
.h4-ink-btn {
    display: inline-flex;
    align-items: center;
    height: 52px;
    padding: 0 28px;
    border-radius: 9999px;
    background: var(--h4-sec-ink);
    color: var(--h4-sec-bg);
    font-family: var(--h4-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.15s ease,
        transform 0.12s ease;
}

.h4-ink-btn:hover {
    background: #333333;
}

.uc-dark .h4-ink-btn:hover {
    background: #e6e6e6;
}

.h4-ink-btn:active {
    transform: scale(0.97);
}

.h4-ink-btn:focus-visible {
    outline: 2px solid var(--h4-sec-ink);
    outline-offset: 3px;
}

@media (min-width: 900px) {
    /* Layarnya selebar yang masih membuat seluruh seksi — ruang navbar,
       judul, dan baris layar — muat satu layar laptop: ~400px di luar layar
       tema, tinggi layar = lebar x 844/390. */
    .h4-tema {
        --h4-tema-w: clamp(160px, min(18vw, calc((100svh - 400px) * 390 / 844)), 300px);
        --h4-tema-gap: clamp(14px, 1.4vw, 24px);
        --h4-tema-dur: 90s;
        padding: calc(var(--h4-nav-h) + 24px) 0 72px;
    }

    /* Judul kiri, kalimat & tombol kanan, rata bawah. */
    .h4-tema-head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 48px;
        margin-bottom: 44px;
    }

    .h4-tema-title {
        font-size: clamp(44px, 4.2cqw, 80px);
    }
}

/* Kurangi gerak: barisnya diam dan bisa digulir sendiri; salinan kedua (yang
   cuma ada untuk menyambung gulungan) disembunyikan. */
@media (prefers-reduced-motion: reduce) {
    .h4-tema-rail {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 0 var(--h4-pad);
    }

    .h4-tema-rail::-webkit-scrollbar {
        display: none;
    }

    .h4-tema-track {
        animation: none;
    }

    .h4-tema-item {
        scroll-snap-align: start;
        scroll-margin-left: var(--h4-pad);
    }

    .h4-tema-item[aria-hidden='true'] {
        display: none;
    }
}

/* ── Bayaran ─────────────────────────────────────────────────────────────── */

/* Seperti "Easy AF ticketing" di halaman tiket Partiful: tiga kartu
   bertekstur dengan potongan UI produk di atasnya, nama & satu kalimat di
   bawah tiap kartu. Judulnya di tengah — seksi Tema sebelumnya dan Fitur
   sesudahnya rata kiri — dan seksi ini ditutup tautan teks, bukan tombol. */
.h4-bayar {
    padding: 40px 0 72px;
    background: var(--h4-sec-bg);
    color: var(--h4-sec-ink);
    overflow: hidden;
    container-type: inline-size;
}

.h4-bayar-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
    padding: 0 var(--h4-pad);
    text-align: center;
}

.h4-bayar-title {
    margin: 0;
    font-family: var(--h4-display);
    font-size: clamp(34px, 9.4cqw, 52px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
}

.h4-bayar-lead {
    margin: 0;
    font-family: var(--h4-sub);
    font-size: 17px;
    font-stretch: 125%;
    line-height: 1.45;
    color: var(--h4-sec-soft);
    text-wrap: balance;
}

/* Tautan teks penutup seksi (bergaris bawah, panah bergeser saat disorot) —
   ajakan yang lebih ringan dari tombol pil. */
.h4-more {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 40px auto 0;
    color: var(--h4-sec-ink);
    font-family: var(--h4-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
}

.h4-more svg {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: transform 0.15s ease;
}

.h4-more:hover svg {
    transform: translateX(3px);
}

.h4-more:focus-visible {
    outline: 2px solid var(--h4-sec-ink);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Ponsel: kartu bergeser mendatar (snap), seperti deretan kartu Partiful di
   ponsel; tablet & desktop: tiga kolom. */
.h4-bayar-list {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0 var(--h4-pad);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--h4-pad);
    scrollbar-width: none;
}

.h4-bayar-list::-webkit-scrollbar {
    display: none;
}

.h4-bayar-item {
    flex: 0 0 min(80vw, 360px);
    min-width: 0;
    scroll-snap-align: start;
}

.h4-bayar-name {
    margin: 18px 0 0;
    font-family: var(--h4-display);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
}

.h4-bayar-desc {
    margin: 6px 0 0;
    font-family: var(--h4-sub);
    font-size: 16px;
    font-stretch: 125%;
    line-height: 1.45;
    color: var(--h4-sec-soft);
    text-wrap: pretty;
}

/* Kartu: rasio 530:625 seperti kartu Partiful. Potongan UI di dalamnya diukur
   dalam satuan --k = lebar kartu / 400, jadi susunannya sama di ukuran
   berapa pun. */
.h4-bayar-card {
    position: relative;
    aspect-ratio: 530 / 625;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    container-type: inline-size;
}

/* Latar sementara sewarna teksturnya, selama gambarnya dimuat. */
.h4-bayar-card.is-ponsel {
    background: #e7e7ea;
}

.h4-bayar-card.is-dp {
    background: #2626a6;
}

.h4-bayar-card.is-invoice {
    background: #a647e0;
}

.h4-bayar-card > * {
    --k: calc(100cqw / 400);
}

.h4-bayar-tex {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 900px) {
    .h4-bayar {
        padding: 72px 0 112px;
    }

    .h4-bayar-head {
        gap: 18px;
        margin-bottom: 48px;
    }

    .h4-bayar-lead {
        font-size: clamp(17px, 1.3vw, 20px);
    }

    .h4-more {
        margin-top: 48px;
        font-size: 18px;
    }

    .h4-bayar-title {
        font-size: clamp(44px, 4.2cqw, 80px);
    }

    .h4-bayar-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(16px, 1.6vw, 28px);
        overflow: visible;
    }

    .h4-bayar-name {
        margin-top: 22px;
        font-size: clamp(20px, 1.6vw, 26px);
    }

    .h4-bayar-desc {
        font-size: clamp(16px, 1.15vw, 18px);
    }
}

/* ── Kartu 1 · ponsel ──
   Ponsel polos seperti kartu pertama Partiful: bingkai abu-abu terang, bilah
   status 9:41 dengan pulau hitam, layar = potret halaman /pay asli. Lebar 64%
   kartu dan 6% dari atas: ukuran terbesar yang masih menampilkan kode QR utuh
   sebelum bawah ponselnya terpotong tepi kartu. */
.h4-phone {
    position: absolute;
    left: 50%;
    top: 6%;
    width: 64%;
    padding: calc(8 * var(--k));
    border-radius: calc(46 * var(--k));
    background: linear-gradient(160deg, #f7f7f8 0%, #dcdce1 100%);
    box-shadow:
        inset 0 0 0 max(1px, calc(1 * var(--k))) rgba(0, 0, 0, 0.08),
        0 calc(18 * var(--k)) calc(40 * var(--k)) calc(-18 * var(--k)) rgba(20, 20, 40, 0.35);
    transform: translateX(-50%);
}

/* --s = satu piksel halaman ponsel (lebar 390) di layar ini. */
.h4-phone-screen {
    --s: calc(var(--k) * 240 / 390);
    position: relative;
    overflow: hidden;
    border-radius: calc(38 * var(--k));
    background: #ffffff;
}

.h4-phone-status {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(47 * var(--s));
    padding: 0 calc(24 * var(--s)) 0 calc(34 * var(--s));
    color: #000000;
    font-family: var(--h4-text);
    font-size: calc(16 * var(--s));
    font-weight: 600;
    letter-spacing: -0.01em;
}

.h4-phone-island {
    position: absolute;
    left: 50%;
    top: calc(11 * var(--s));
    width: calc(118 * var(--s));
    height: calc(33 * var(--s));
    border-radius: 999px;
    background: #000000;
    transform: translateX(-50%);
}

.h4-phone-icons {
    display: flex;
    align-items: center;
    gap: calc(5 * var(--s));
}

.h4-phone-icons svg {
    display: block;
    height: calc(12 * var(--s));
    width: auto;
    fill: currentColor;
    overflow: visible;
}

.h4-phone-icons .is-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.h4-phone-icons rect.is-line {
    stroke-width: 1.2;
}

.h4-phone-icons .is-faint {
    opacity: 0.4;
}

.h4-phone-shot {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Kartu 2 · angka besar ──
   Seperti kartu "Sales tracking" Partiful: kartu putih miring dengan satu
   label & satu angka besar, angkanya huruf judul halaman ini. */
.h4-num {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: calc(6 * var(--k));
    margin: 0;
    padding: calc(16 * var(--k)) calc(22 * var(--k)) calc(18 * var(--k));
    border-radius: calc(10 * var(--k));
    background: #ffffff;
    color: #0a0a0a;
    box-shadow: 0 calc(16 * var(--k)) calc(36 * var(--k)) calc(-16 * var(--k)) rgba(5, 8, 60, 0.55);
}

.h4-num small {
    font-family: var(--h4-text);
    font-size: calc(15 * var(--k));
    font-weight: 500;
    line-height: 1.2;
    color: #3d3d4a;
}

.h4-num b {
    font-family: var(--h4-display);
    font-size: calc(21 * var(--k));
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: nowrap;
}

.h4-num.is-a {
    right: 9%;
    top: 10%;
    padding: calc(14 * var(--k)) calc(20 * var(--k)) calc(16 * var(--k));
    transform: rotate(4deg);
}

.h4-num.is-b {
    left: 7%;
    top: 36%;
    padding-right: calc(30 * var(--k));
    transform: rotate(-5deg);
}

.h4-num.is-b b {
    font-size: calc(54 * var(--k));
}

.h4-num.is-c {
    right: 5%;
    bottom: 9%;
    padding: calc(20 * var(--k)) calc(26 * var(--k)) calc(24 * var(--k));
    transform: rotate(2deg);
}

.h4-num.is-c b {
    font-size: calc(40 * var(--k));
}

/* ── Kartu 3 · tumpukan invoice ──
   Satu invoice utuh di tengah, dua berikutnya mengintip di belakangnya;
   assets/js/aj-home4.js mengocoknya — invoice teratas melayang keluar lalu
   menyelip ke belakang tumpukan. Tanpa JS (atau dengan "kurangi gerak")
   tumpukannya diam di invoice pertama. */
.h4-deck {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56%;
    aspect-ratio: 794 / 1123;
    transform: translate(-50%, -50%);
}

.h4-deck-card {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: calc(4 * var(--k));
    background: #ffffff;
    box-shadow: 0 calc(16 * var(--k)) calc(36 * var(--k)) calc(-14 * var(--k)) rgba(60, 10, 40, 0.5);
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease;
}

.h4-deck-card:nth-child(1) {
    z-index: 3;
}

.h4-deck-card:nth-child(2) {
    z-index: 2;
    transform: translate(-8%, 2.5%) rotate(-6deg);
}

.h4-deck-card:nth-child(3) {
    z-index: 1;
    transform: translate(8%, 3.5%) rotate(6deg);
}

.h4-deck-card:nth-child(n + 4) {
    opacity: 0;
    transform: translate(8%, 3.5%) rotate(6deg);
}

/* Tema gelap tanpa bayangan; benda-benda ini tetap kontras di atas teksturnya. */
.uc-dark .h4-num,
.uc-dark .h4-deck-card {
    box-shadow: none;
}

.uc-dark .h4-phone {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ── Fitur ───────────────────────────────────────────────────────────────── */

/* Seperti "We've got you covered" di halaman tiket Partiful: judul & kalimat
   kiri, panah geser kanan, lalu sebaris kartu kecil mendatar yang digeser ke
   samping — tiap kartu bertekstur sendiri dengan satu potongan UI aplikasi,
   nama & satu kalimat di bawahnya. Kartunya lebih kecil dari kartu Bayaran:
   ini rincian, bukan sorotan. */
.h4-fitur {
    padding: 8px 0 72px;
    background: var(--h4-sec-bg);
    color: var(--h4-sec-ink);
    overflow: hidden;
    container-type: inline-size;
}

.h4-fitur-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 32px;
    padding: 0 var(--h4-pad);
}

.h4-fitur-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 780px;
}

.h4-fitur-title {
    margin: 0;
    font-family: var(--h4-display);
    font-size: clamp(34px, 9.4cqw, 52px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
}

.h4-fitur-lead {
    margin: 0;
    font-family: var(--h4-sub);
    font-size: 17px;
    font-stretch: 125%;
    line-height: 1.45;
    color: var(--h4-sec-soft);
    text-wrap: pretty;
}

/* Baris kartu: bergeser mendatar dengan snap di semua ukuran. Kartu pertama
   sejajar tepi konten, barisnya menembus tepi kanan layar — kartu yang
   terpotong di sana tanda masih ada lanjutannya. */
.h4-fitur-list {
    --h4-fitur-gap: 12px;
    --h4-fitur-w: min(78vw, 320px);
    display: flex;
    gap: var(--h4-fitur-gap);
    margin: 0;
    padding: 0 var(--h4-pad);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--h4-pad);
    scrollbar-width: none;
}

.h4-fitur-list::-webkit-scrollbar {
    display: none;
}

.h4-fitur-item {
    flex: 0 0 var(--h4-fitur-w);
    min-width: 0;
    scroll-snap-align: start;
}

/* Kartu 4:3. Potongan UI di dalamnya ditulis dalam --p = satu piksel
   aplikasi; bawaannya --p = --k = lebar kartu / 400, jadi kartu selebar 400
   menampilkan UI-nya seukuran aslinya. */
.h4-fitur-card {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    container-type: inline-size;
    /* Warna rata-rata teksturnya (--h4-wait di markup) selama teksturnya
       dimuat — seperti kartu Bayaran. */
    background: var(--h4-wait, var(--h4-sec-wait));
}

.h4-fitur-card > * {
    --k: calc(100cqw / 400);
}

.h4-fitur-tex {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h4-fitur-name {
    margin: 16px 0 0;
    font-family: var(--h4-display);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
}

.h4-fitur-desc {
    margin: 6px 0 0;
    font-family: var(--h4-sub);
    font-size: 15px;
    font-stretch: 125%;
    line-height: 1.45;
    color: var(--h4-sec-soft);
    text-wrap: pretty;
}

/* Panah geser di kepala seksi: hanya untuk tetikus (di layar sentuh barisnya
   digeser jari), dan hanya kalau barisnya memang lebih lebar dari layar
   (assets/js/aj-home4.js melepas atribut hidden-nya). */
.h4-fitur-nav {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .h4-fitur-nav:not([hidden]) {
        display: flex;
        flex: none;
        gap: 12px;
    }
}

.h4-fitur-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--h4-sec-ink);
    color: var(--h4-sec-ink);
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        opacity 0.15s ease,
        transform 0.12s ease;
}

.h4-fitur-arrow svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.h4-fitur-arrow:hover:not(:disabled) {
    background: var(--h4-sec-wait);
}

.h4-fitur-arrow:active:not(:disabled) {
    transform: scale(0.94);
}

.h4-fitur-arrow:disabled {
    opacity: 0.25;
    cursor: default;
}

.h4-fitur-arrow:focus-visible {
    outline: 2px solid var(--h4-sec-ink);
    outline-offset: 3px;
}

@media (min-width: 900px) {
    .h4-fitur {
        padding: 0 0 112px;
    }

    .h4-fitur-head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 48px;
        margin-bottom: 44px;
    }

    .h4-fitur-title {
        font-size: clamp(44px, 4.2cqw, 80px);
    }

    /* ~3,6 kartu dalam lebar konten: tiga utuh, yang keempat terpotong. */
    .h4-fitur-list {
        --h4-fitur-gap: clamp(16px, 1.6vw, 28px);
        --h4-fitur-w: clamp(300px, calc((100cqw - 2 * var(--h4-pad) - 3 * var(--h4-fitur-gap)) / 3.6), 400px);
    }

    .h4-fitur-name {
        margin-top: 20px;
        font-size: clamp(18px, 1.35vw, 22px);
    }

    .h4-fitur-desc {
        font-size: clamp(15px, 1.05vw, 17px);
    }
}

/* ── Potongan UI aplikasi di kartu Fitur ──
   Salinan komponen aslinya dengan nilai token tema terang aplikasi sejak
   rebrand 8 Okt 2026 (src/assets/main.css :root): ink #0A0A0A, ink-soft
   #54545C, ink-faint #64646C, line #DADAE0, canvas #F4F4F6, surface-muted
   #EAEAEE, tint #E7E6FB, brand #3030B0, success #0F7A55. Tetap terang di
   tema gelap halaman ini, seperti ponsel & invoice di seksi Bayaran. Tiap
   angka = piksel aplikasinya x --p. */
.h4-ui {
    --p: var(--k);
    --h4-ui-lift: 0 calc(14 * var(--k)) calc(30 * var(--k)) calc(-12 * var(--k)) rgba(12, 16, 40, 0.42);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #0a0a0a;
    font-family: var(--h4-text);
    font-size: calc(14 * var(--p));
    font-weight: 400;
    line-height: calc(20 * var(--p));
    letter-spacing: 0;
    text-align: left;
}

.h4-ui .h4-ri,
.h4-fitur-arrow .h4-ri {
    display: block;
    flex: none;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.h4-nw {
    white-space: nowrap;
}

/* Kartu 1 · bilah bawah form booking di langkah Lokasi (CustomerForm.vue). */
.h4-ui-bar {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--p));
    width: calc(352 * var(--p));
    padding: calc(16 * var(--p)) calc(20 * var(--p));
    border-radius: calc(16 * var(--p));
    background: #ffffff;
    box-shadow: var(--h4-ui-lift);
    transform: translate(-50%, -50%) rotate(-2deg);
}

.h4-ui-bar-sum {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.h4-ui-bar-label {
    font-size: calc(12 * var(--p));
    line-height: calc(20 * var(--p));
    color: #54545c;
}

.h4-ui-bar-amt {
    font-size: calc(20 * var(--p));
    font-weight: 700;
    line-height: calc(24 * var(--p));
    letter-spacing: -0.01em;
}

.h4-ui-bar-note {
    font-size: calc(12 * var(--p));
    line-height: calc(16 * var(--p));
    color: #54545c;
    white-space: nowrap;
}

.h4-ui-bar-back,
.h4-ui-bar-next {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: calc(48 * var(--p));
    border-radius: calc(12 * var(--p));
    font-weight: 600;
}

.h4-ui-bar-back {
    padding: 0 calc(16 * var(--p));
    border: max(1px, calc(1 * var(--p))) solid #dadae0;
    font-size: calc(16 * var(--p));
}

/* Jarak ke tombol ← 8 (gap-2), bukan 12 seperti jarak ke ringkasannya. */
.h4-ui-bar-next {
    margin-left: calc(-4 * var(--p));
    padding: 0 calc(24 * var(--p));
    background: #3030b0;
    color: #ffffff;
}

/* Kartu 2 · langkah Add-on (AddonPicker.vue). */
.h4-ui-addons {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--p));
    width: calc(316 * var(--p));
}

.h4-ui-addon {
    display: flex;
    align-items: flex-start;
    gap: calc(12 * var(--p));
    padding: calc(12 * var(--p));
    border: max(1px, calc(1 * var(--p))) solid #dadae0;
    border-radius: calc(12 * var(--p));
    background: #ffffff;
    box-shadow: var(--h4-ui-lift);
}

.h4-ui-addon.is-on {
    border-color: #3030b0;
    background: #e7e6fb;
}

.h4-ui-check {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(20 * var(--p));
    height: calc(20 * var(--p));
    margin-top: calc(2 * var(--p));
    border: max(1px, calc(1 * var(--p))) solid #dadae0;
    border-radius: calc(6 * var(--p));
    background: #f4f4f6;
    color: #ffffff;
    font-size: calc(14 * var(--p));
}

.h4-ui-addon.is-on .h4-ui-check {
    border-color: #3030b0;
    background: #3030b0;
}

.h4-ui-addon-ic {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(32 * var(--p));
    height: calc(32 * var(--p));
    border-radius: 50%;
    background: #eaeaee;
    color: #54545c;
    font-size: calc(16 * var(--p));
}

.h4-ui-addon-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

.h4-ui-addon-price {
    flex: none;
}

/* Kartu 3 · langkah pertanyaan (CustomerForm.vue, .choice-row) di atas
   permukaan putih form-nya. */
.h4-ui-question {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--p));
    width: calc(300 * var(--p));
    padding: calc(20 * var(--p));
    border-radius: calc(16 * var(--p));
    background: #ffffff;
    box-shadow: var(--h4-ui-lift);
    transform: translate(-50%, -50%) rotate(2deg);
}

.h4-ui-q-label {
    font-weight: 600;
}

.h4-ui-q-req {
    font-size: calc(12 * var(--p));
    font-weight: 400;
    color: #54545c;
    white-space: nowrap;
}

.h4-ui-choice {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--p));
    padding: calc(10 * var(--p)) calc(12 * var(--p));
    border: max(1px, calc(1 * var(--p))) solid #dadae0;
    border-radius: calc(8 * var(--p));
    background: #ffffff;
}

.h4-ui-choice.is-on {
    border-color: #3030b0;
    background: #e7e6fb;
}

/* Radio bawaan peramban dengan accent-brand: cincin abu, terpilih = cincin &
   titik biru. */
.h4-ui-radio {
    flex: none;
    width: calc(16 * var(--p));
    height: calc(16 * var(--p));
    border: max(1px, calc(1.5 * var(--p))) solid #767676;
    border-radius: 50%;
    background: #ffffff;
}

.h4-ui-choice.is-on .h4-ui-radio {
    border: calc(2 * var(--p)) solid #3030b0;
    background: radial-gradient(circle, #3030b0 0 calc(3.6 * var(--p)), #ffffff calc(3.6 * var(--p) + 0.5px));
}

/* Kartu 4 · kartu hari di Ketersediaan (AvailabilityForm.vue). */
.h4-ui-days {
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--p));
    width: calc(320 * var(--p));
}

.h4-ui-day {
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--p));
    padding: calc(12 * var(--p));
    border: max(1px, calc(1 * var(--p))) solid #dadae0;
    border-radius: calc(16 * var(--p));
    background: #ffffff;
    box-shadow: var(--h4-ui-lift);
}

.h4-ui-day.is-off {
    border-color: rgba(218, 218, 224, 0.6);
    background: #f4f4f6;
}

.h4-ui-day-head {
    display: flex;
    align-items: center;
}

/* ToggleSwitch.vue: 32 x 20, kenop 12; nyala = hijau success. */
.h4-ui-toggle {
    position: relative;
    flex: none;
    width: calc(32 * var(--p));
    height: calc(20 * var(--p));
    border: max(1px, calc(1 * var(--p))) solid #dadae0;
    border-radius: 9999px;
    background: #f4f4f6;
}

.h4-ui-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(3 * var(--p));
    width: calc(12 * var(--p));
    height: calc(12 * var(--p));
    border-radius: 50%;
    background: #54545c;
    transform: translateY(-50%);
}

.h4-ui-toggle.is-on {
    background: #0f7a55;
}

.h4-ui-toggle.is-on::after {
    left: calc(15 * var(--p));
    background: #ffffff;
}

.h4-ui-day-name {
    margin: 0 calc(12 * var(--p)) 0 calc(10 * var(--p));
    font-size: calc(16 * var(--p));
    font-weight: 600;
    line-height: calc(24 * var(--p));
    letter-spacing: -0.01em;
}

.h4-ui-day.is-off .h4-ui-day-name {
    color: #64646c;
}

.h4-ui-day-copy {
    margin: 0 calc(6.5 * var(--p));
    color: #54545c;
    font-size: calc(15 * var(--p));
}

.h4-ui-day.is-off .h4-ui-day-copy {
    opacity: 0.25;
}

.h4-ui-day-more {
    margin: 0 calc(4 * var(--p)) 0 auto;
    color: #54545c;
    font-size: calc(24 * var(--p));
}

.h4-ui-day-times {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--p));
}

.h4-ui-time {
    flex: 1;
    min-width: 0;
    padding: calc(10 * var(--p)) calc(12 * var(--p));
    border: max(1px, calc(1 * var(--p))) solid #dadae0;
    border-radius: calc(12 * var(--p));
    font-weight: 600;
    text-align: center;
}

.h4-ui-dash {
    color: #54545c;
}

.h4-ui-day-del,
.h4-ui-day-add {
    box-sizing: content-box;
    padding: calc(10 * var(--p));
    color: #54545c;
    font-size: calc(16 * var(--p));
}

.h4-ui-day-add {
    padding: calc(9 * var(--p));
    font-size: calc(18 * var(--p));
}

/* Kartu 5 · tampilan Rangkuman di Kalender (custom.calendar.css). */
.h4-ui-cal {
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--p));
    width: calc(328 * var(--p));
}

.h4-ui-ev {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(5 * var(--p));
    padding: calc(13 * var(--p)) calc(16 * var(--p)) calc(13 * var(--p)) calc(22 * var(--p));
    border: max(1px, calc(1 * var(--p))) solid #dadae0;
    border-radius: calc(12 * var(--p));
    overflow: hidden;
    background: #ffffff;
    box-shadow: var(--h4-ui-lift);
}

.h4-ui-ev.is-google {
    background: #eaeaee;
}

.h4-ui-ev-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(5 * var(--p));
    background: #54545c;
}

.h4-ui-ev-title {
    overflow: hidden;
    font-size: calc(16 * var(--p));
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h4-ui-ev.is-google .h4-ui-ev-title {
    padding-right: calc(24 * var(--p));
}

.h4-ui-ev-meta {
    display: flex;
    align-items: center;
    gap: calc(7 * var(--p));
    color: #54545c;
    font-size: calc(14 * var(--p));
    line-height: 1.45;
    white-space: nowrap;
}

.h4-ui-ev-meta .h4-ri {
    font-size: calc(16 * var(--p));
}

.h4-ui-ev-meta img {
    display: block;
    flex: none;
    width: calc(15 * var(--p));
    height: calc(15 * var(--p));
}

.h4-ui-ev-open {
    position: absolute;
    top: calc(15 * var(--p));
    right: calc(16 * var(--p));
    color: #54545c;
    font-size: calc(16 * var(--p));
}

/* Kartu 6 · kartu jadwal di laman sukses klien (InvoiceScheduleCard.vue). */
.h4-ui-sched {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--p));
    width: calc(326 * var(--p));
    padding: calc(16 * var(--p));
    border: max(1px, calc(1 * var(--p))) solid #dadae0;
    border-radius: calc(16 * var(--p));
    background: #ffffff;
    box-shadow: var(--h4-ui-lift);
    transform: translate(-50%, -50%) rotate(-2deg);
}

.h4-ui-sched-head {
    display: flex;
    align-items: center;
}

.h4-ui-sched-ic {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(40 * var(--p));
    height: calc(40 * var(--p));
    margin-right: calc(12 * var(--p));
    border-radius: calc(12 * var(--p));
    background: #eaeaee;
}

.h4-ui-sched-ic img {
    display: block;
    width: calc(24 * var(--p));
    height: calc(24 * var(--p));
}

.h4-ui-sched-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.h4-ui-sched-title {
    font-size: calc(16 * var(--p));
    font-weight: 600;
    line-height: calc(20 * var(--p));
    letter-spacing: -0.01em;
}

.h4-ui-sched-date {
    margin-top: calc(6 * var(--p));
    line-height: calc(16 * var(--p));
}

.h4-ui-sched-time {
    margin-top: calc(4 * var(--p));
    color: #54545c;
    font-size: calc(12 * var(--p));
    line-height: calc(16 * var(--p));
}

.h4-ui-sched-time > span {
    color: #0a0a0a;
}

.h4-ui-sched-row {
    display: flex;
    align-items: flex-start;
    gap: calc(8 * var(--p));
}

.h4-ui-sched-row > .h4-ri {
    margin-top: calc(2 * var(--p));
    color: #54545c;
    font-size: calc(16 * var(--p));
}

.h4-ui-sched-link {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.h4-ui-sched-url {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h4-ui-sched-btn {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--p));
    margin: calc(4 * var(--p)) 0 0 calc(-6 * var(--p));
    padding: calc(4 * var(--p)) calc(6 * var(--p));
    color: #3030b0;
    font-weight: 600;
}

.h4-ui-sched-btn .h4-ri {
    font-size: calc(16 * var(--p));
}

/* Kartu 7 · notifikasi di layar kunci iPhone: dua notifikasi bertumpuk dari
   aplikasi yang sama, yang terbaru di depan. */
.h4-ui-notifs {
    width: calc(340 * var(--p));
}

.h4-ui-notif {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(10 * var(--p));
    padding: calc(12 * var(--p)) calc(14 * var(--p));
    border-radius: calc(22 * var(--p));
    background: rgba(250, 250, 252, 0.96);
    box-shadow: var(--h4-ui-lift);
    color: #000000;
}

.h4-ui-notif.is-back {
    position: absolute;
    left: calc(16 * var(--p));
    right: calc(16 * var(--p));
    bottom: calc(-10 * var(--p));
    height: calc(48 * var(--p));
    background: rgba(250, 250, 252, 0.62);
    box-shadow: none;
}

.h4-ui-notif-ic {
    display: block;
    flex: none;
    width: calc(38 * var(--p));
    height: calc(38 * var(--p));
    border-radius: calc(9 * var(--p));
}

.h4-ui-notif-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.h4-ui-notif-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(8 * var(--p));
    font-size: calc(15 * var(--p));
    line-height: calc(20 * var(--p));
}

.h4-ui-notif-top b {
    font-weight: 600;
}

.h4-ui-notif-top > span {
    flex: none;
    color: rgba(60, 60, 67, 0.6);
    font-size: calc(13 * var(--p));
}

.h4-ui-notif-text {
    font-size: calc(15 * var(--p));
    line-height: calc(20 * var(--p));
}

/* Kartu 8 · pilihan "Hanya catat jadwal" (SelectBookingTypeCard.vue, warn). */
.h4-ui-type {
    --p: calc(var(--k) * 1.08);
    display: flex;
    align-items: center;
    gap: calc(12 * var(--p));
    width: calc(328 * var(--p));
    padding: calc(12 * var(--p));
    border: max(1px, calc(1 * var(--p))) solid #e9daab;
    border-radius: calc(12 * var(--p));
    background: #fff4d3;
    box-shadow: var(--h4-ui-lift);
    transform: translate(-50%, -50%) rotate(2deg);
}

.h4-ui-type-ic {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(44 * var(--p));
    height: calc(44 * var(--p));
    border-radius: 50%;
    background: rgba(138, 83, 0, 0.1);
    color: #8a5300;
    font-size: calc(20 * var(--p));
}

.h4-ui-type-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: calc(4 * var(--p));
    min-width: 0;
}

.h4-ui-type-title {
    font-size: calc(16 * var(--p));
    font-weight: 600;
    line-height: calc(20 * var(--p));
}

.h4-ui-type-desc {
    display: flex;
    align-items: flex-start;
    gap: calc(6 * var(--p));
    color: #54545c;
    line-height: calc(16 * var(--p));
}

.h4-ui-type-desc .h4-ri {
    margin-top: calc(1 * var(--p));
    color: #c2352b;
    font-size: calc(14 * var(--p));
}

.h4-ui-type-go {
    color: #54545c;
    font-size: calc(18 * var(--p));
}

/* Kartu 9 · kartu Kode QR (gambar dari renderQrCard), bawahnya terpotong
   tepi kartu seperti ponsel di seksi Bayaran — kodenya sendiri tetap utuh. */
.h4-ui-qr {
    position: absolute;
    left: 50%;
    top: 8%;
    display: block;
    width: 60%;
    height: auto;
    filter: drop-shadow(0 calc(10 * var(--k)) calc(14 * var(--k)) rgba(40, 6, 40, 0.35));
    transform: translateX(-50%) rotate(-4deg);
}

/* Kartu 10 · kartu saldo Dompet (OverviewWallet.vue, .wallet-card, tema
   terang): bidang indigo rata, label & status kecil di atas, saldo dalam
   huruf judul (DisplayAmount: selebar kolomnya, maks. 48 px), kapsul putih. */
.h4-ui-wallet {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: calc(320 * var(--p));
    padding: calc(20 * var(--p));
    border-radius: calc(16 * var(--p));
    background: #3030b0;
    box-shadow: 0 calc(18 * var(--k)) calc(40 * var(--k)) calc(-20 * var(--k)) rgba(10, 10, 40, 0.5);
    color: #ffffff;
    transform: translate(-50%, -50%) rotate(-3deg);
}

.h4-ui-wallet-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(12 * var(--p));
    width: 100%;
}

.h4-ui-wallet-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: calc(14 * var(--p));
    font-weight: 600;
    line-height: calc(20 * var(--p));
}

.h4-ui-wallet-badge {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--p));
    color: rgba(255, 255, 255, 0.8);
    font-size: calc(12 * var(--p));
    font-weight: 600;
    line-height: calc(20 * var(--p));
}

.h4-ui-wallet-badge .h4-ri {
    font-size: calc(14 * var(--p));
}

/* 280 px kolom ÷ 7,94 em ("Rp7.725.000" di huruf ini) ≈ 35 px. */
.h4-ui-wallet-amt {
    margin-top: calc(12 * var(--p));
    font-family: var(--h4-display);
    font-size: calc(35 * var(--p));
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    white-space: nowrap;
}

.h4-ui-wallet-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--p));
    width: 100%;
    margin-top: calc(24 * var(--p));
    padding: calc(14 * var(--p)) calc(16 * var(--p));
    border-radius: 9999px;
    background: #ffffff;
    color: #3030b0;
    font-weight: 700;
}

.h4-ui-wallet-btn .h4-ri {
    font-size: calc(18 * var(--p));
}

/* Kartu 11 · menu Ekspor kalender (CalendarExportMenu.vue, lebar 264). */
.h4-ui-menu {
    --p: calc(var(--k) * 0.96);
    display: flex;
    flex-direction: column;
    width: calc(264 * var(--p));
    padding: calc(6 * var(--p)) 0;
    border: max(1px, calc(1 * var(--p))) solid #dadae0;
    border-radius: calc(8 * var(--p));
    background: #ffffff;
    box-shadow: var(--h4-ui-lift);
    transform: translate(-50%, -50%) rotate(3deg);
}

.h4-ui-menu-head {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--p));
    padding: calc(4 * var(--p)) calc(14 * var(--p)) calc(8 * var(--p));
}

.h4-ui-menu-title {
    font-weight: 600;
}

.h4-ui-menu-scope {
    color: #54545c;
    font-size: calc(12 * var(--p));
    line-height: calc(16 * var(--p));
}

.h4-ui-menu-sep {
    height: max(1px, calc(1 * var(--p)));
    margin: calc(4 * var(--p)) 0;
    background: #dadae0;
}

.h4-ui-menu-item {
    display: flex;
    align-items: flex-start;
    gap: calc(10 * var(--p));
    padding: calc(10 * var(--p)) calc(14 * var(--p));
}

.h4-ui-menu-item > .h4-ri {
    margin-top: calc(1 * var(--p));
    color: #54545c;
    font-size: calc(18.67 * var(--p));
}

.h4-ui-menu-item small {
    display: block;
    color: #54545c;
    font-size: calc(12 * var(--p));
    line-height: calc(16 * var(--p));
}

/* Tema gelap tanpa bayangan; potongan UI tanpa garis tepi diberi garis tipis
   supaya tetap terpisah dari tekstur yang terang. */
.uc-dark .h4-ui {
    --h4-ui-lift: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.uc-dark .h4-ui-wallet {
    box-shadow: none;
}

.uc-dark .h4-ui-qr {
    filter: none;
}

/* ── Slot struk ──────────────────────────────────────────────────────────── */

/* Lubang slot timbul tempat struk "Tagihan bulananmu" keluar, dipakai seksi
   Harga di bawah (.h4-gratis-stage) dan hero halaman Harga (.h4h-print,
   aj-h4-harga.css). Tertanam langsung di latar seksinya seperti di dinding
   photobooth — tanpa panel dinding (permintaan user: "cukup lubangnya itu
   aja"): bingkai timbul (.h4-slot) mengelilingi celah yang dalam
   (.h4-slot-hole); bibir atas bingkai menangkap cahaya dan bayangannya jatuh
   ke latar; di dalam celah bayangan di tepi atas dan pantulan tipis di bibir
   bawah. Kertasnya keluar dari tengah celah: area keluarnya (.h4-slot-out)
   dimulai tepat di garis tengah celah dan menumpuk di atas bingkai, jadi
   kertasnya menutupi separuh bawah celah & bingkainya. Markup:

     .h4-printer[data-h4-struk]
       > .h4-slot > .h4-slot-hole
       > .h4-slot-out > .h4-print-sheet > .h4-print-paper

   Pemakainya mengatur --paper (lebar kertas; persen = lebar panggung), ukuran
   bingkai (--slot-h; --slot-wing = julurannya di kiri-kanan kertas; --hole-h,
   --hole-inset) dan warnanya (--slot-face/-rim, --hole-face/-rim: putih di
   sini, hitam di tema gelap, biru di hero halaman Harga). --slot-y = jarak
   garis tengah celah dari tepi atas panggung. Padding atas kertasnya memuat
   --tuck, ujung kertas yang masih di dalam celah, dan kertasnya menyimpan
   sendiri token warnanya: salinan sobekannya (.h4-tear) hidup di luar
   panggung. */
.h4-printer {
    --slot-h: 36px;
    --slot-wing: 22px;
    --hole-h: 10px;
    --hole-inset: 10px;
    --slot-y: calc(var(--slot-h) / 2 + 2px);
    --tuck: 30px;
    --stub: 10px;
    --feed-from: -100%;
    --slot-face: linear-gradient(180deg, #fdfdfd 0%, #e9e9ed 100%);
    --slot-rim:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(10, 10, 10, 0.1),
        0 0 0 1px rgba(10, 10, 10, 0.05),
        0 1px 2px rgba(10, 10, 10, 0.12),
        0 10px 18px -8px rgba(10, 10, 10, 0.3);
    --hole-face: linear-gradient(180deg, #050505 0%, #2a2a30 100%);
    --hole-rim:
        inset 0 3px 4px rgba(0, 0, 0, 0.7),
        0 1px 0 rgba(255, 255, 255, 0.9);
    position: relative;
    padding-top: var(--slot-y);
    isolation: isolate;
}

/* Tema gelap: tetap timbul lewat terang-gelap tepinya, tanpa bayangan lebar
   yang melayang. */
.uc-dark .h4-printer {
    --slot-face: linear-gradient(180deg, #262628 0%, #18181a 100%);
    --slot-rim:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 2px 3px rgba(0, 0, 0, 0.6);
    --hole-face: linear-gradient(180deg, #000000 0%, #0e0e10 100%);
    --hole-rim:
        inset 0 3px 4px rgba(0, 0, 0, 0.9),
        0 1px 0 rgba(255, 255, 255, 0.1);
}

.h4-slot {
    position: absolute;
    z-index: 1;
    top: calc(var(--slot-y) - var(--slot-h) / 2);
    left: 50%;
    width: calc(var(--paper) + 2 * var(--slot-wing));
    height: var(--slot-h);
    border-radius: 9999px;
    background: var(--slot-face);
    box-shadow: var(--slot-rim);
    translate: -50% 0;
}

.h4-slot-hole {
    position: absolute;
    top: 50%;
    left: var(--hole-inset);
    right: var(--hole-inset);
    height: var(--hole-h);
    margin-top: calc(var(--hole-h) / -2);
    border-radius: 9999px;
    background: var(--hole-face);
    box-shadow: var(--hole-rim);
}

/* Hanya tepi atasnya yang memangkas — garis tengah celah: kertas di atasnya
   masih di dalam mesin. Ke samping & ke bawah clip-path-nya dilebarkan, jadi
   bayangan kertasnya tidak terpotong garis lurus. flow-root wajib: tanpa
   overflow: hidden, margin atas negatif lembarnya (--tuck) runtuh menembus
   kotak ini dan menarik tepi pangkasnya 30px ke atas celah. */
.h4-slot-out {
    display: flow-root;
    position: relative;
    z-index: 2;
    clip-path: inset(0 -100vmax -100vmax);
}

/* Kertas yang baru keluar masih dalam bayang celah. Selama celahnya kosong
   (belum dicetak, atau baru disobek) bayang itu jatuh ke latar jadi pita
   abu-abu, jadi disembunyikan sampai kertasnya keluar. */
.h4-slot-out::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: var(--paper);
    height: 12px;
    background: linear-gradient(rgba(10, 10, 10, 0.2), rgba(10, 10, 10, 0));
    translate: -50% 0;
    pointer-events: none;
    transition: opacity 0.4s ease 0.5s;
}

.h4-printer.is-armed:not(.is-in) .h4-slot-out::before,
.h4-printer.is-torn .h4-slot-out::before {
    opacity: 0;
    transition: none;
}

/* Lembar yang bergerak. Bayangannya (drop-shadow) dipasang pemakainya di
   sini, bukan di kertas: kertasnya di-mask jadi bergerigi, dan mask ikut
   memangkas bayangan. Margin atas negatif = --tuck. */
.h4-print-sheet {
    position: relative;
    width: var(--paper);
    margin: calc(var(--tuck) * -1) auto 0;
}

/* Dicetak: aj-home4.js memasang .is-armed (kertasnya masuk ke dalam celah)
   lalu .is-in begitu panggungnya cukup terlihat. Kertasnya keluar
   tersendat-sendat seperti printer struk (permintaan user: "agak ngadat
   ngadat … tapi ga usah kelamaan"): maju sepotong, berhenti sebentar, maju
   lagi — potongan & jedanya tidak sama, totalnya 1,5 detik. Selama di dalam
   celah kertasnya tanpa bayangan: bayangan bagian yang tersembunyi bocor ke
   bawah garis celah jadi pita bertepi lurus. Bayangannya muncul pelan saat
   kertasnya keluar. */
.h4-printer.is-armed:not(.is-in) .h4-print-sheet {
    translate: 0 var(--feed-from);
    filter: none;
}

.h4-printer.is-armed.is-in .h4-print-sheet {
    animation: h4-print-feed 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
    transition: filter 1.2s ease 0.5s;
}

/* Easing animasinya berlaku per selang antar-keyframe: tiap dorongan cepat
   lalu berhenti; selang yang nilainya sama = jeda. Nilainya bagian dari
   --feed-from yang masih tersisa. */
@keyframes h4-print-feed {
    0% {
        translate: 0 var(--feed-from);
    }

    7.33%,
    15.33% {
        translate: 0 calc(var(--feed-from) * 0.88);
    }

    22%,
    26.67% {
        translate: 0 calc(var(--feed-from) * 0.73);
    }

    32%,
    41.33% {
        translate: 0 calc(var(--feed-from) * 0.64);
    }

    49.33%,
    54.67% {
        translate: 0 calc(var(--feed-from) * 0.45);
    }

    60.67%,
    66% {
        translate: 0 calc(var(--feed-from) * 0.34);
    }

    74%,
    80% {
        translate: 0 calc(var(--feed-from) * 0.16);
    }

    86.67%,
    92% {
        translate: 0 calc(var(--feed-from) * 0.07);
    }

    100% {
        translate: 0 0;
    }
}

/* Disobek: ketuk kertasnya (selain tautan & tombol) dan aj-home4.js menyalin
   kertasnya ke .h4-tear, yang jatuh keluar layar, sementara lembar aslinya
   langsung ditarik balik ke dalam celah — tinggal ujung bawahnya yang
   bergerigi menyembul --stub dari garis tengah celah, sisa sobekan di pisau
   gergaji mesin struk — lalu .is-torn dilepas dan lembar yang sama dicetak
   lagi, kali ini mulai dari sisa sobekan itu (.is-reprint). */
.h4-printer.is-reprint {
    --feed-from: calc(-100% + var(--tuck) + var(--stub));
}

.h4-printer.is-armed.is-in.is-torn .h4-print-sheet {
    translate: 0 var(--feed-from);
    filter: none;
    animation: none;
    transition: none;
}

.h4-printer.is-tearable .h4-print-paper {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Lembar yang tersobek: lapisan fixed di atas halaman (di luar seksinya, yang
   memangkas isinya dan — lewat container-type — menjadi blok penampung
   elemen fixed), seukuran & sepersis kertas aslinya; bayangannya disalin JS
   dari lembar aslinya. .h4-tear-cut memotong bagian di atas garis sobek
   dengan gerigi menghadap ke atas, berselang-seling dengan gerigi sisa di
   celah (--cut = jarak puncak gerigi dari tepi atas kertas, --zz = lebar gigi
   kertasnya; digeser setengah gigi). Gerakan jatuhnya dari JS (WAAPI). */
.h4-tear {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    transform-origin: 50% 60%;
    will-change: transform;
}

.h4-tear-cut {
    -webkit-mask-image: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg);
    mask-image: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg);
    -webkit-mask-size: var(--zz) calc(100% - var(--cut));
    mask-size: var(--zz) calc(100% - var(--cut));
    -webkit-mask-position: calc(var(--zz) / -2) var(--cut);
    mask-position: calc(var(--zz) / -2) var(--cut);
    -webkit-mask-repeat: round no-repeat;
    mask-repeat: round no-repeat;
}

@media (prefers-reduced-motion: reduce) {
    .h4-printer.is-armed:not(.is-in) .h4-print-sheet,
    .h4-printer.is-armed.is-in .h4-print-sheet {
        translate: none;
        animation: none;
        transition: none;
    }
}

/* ── Harga ───────────────────────────────────────────────────────────────── */

/* Menegaskan bahwa Aturjadwal gratis. Judul & satu kalimat di tengah (Fitur
   sebelumnya rata kiri), lalu struk "Tagihan bulananmu" yang keluar dari
   lubang slot (Slot struk di atas): salinan struk di hero halaman Harga
   (aj-h4-harga.css, .h4h-receipt) tanpa tombol daftarnya, dicetak saat
   slotnya terlihat dan bisa disobek (aj-home4.js). Kertasnya gading di kedua
   tema, seperti invoice & kartu angka di seksi Bayaran. Kelasnya h4-gratis,
   bukan h4-harga: itu kelas <body> halaman Harga, yang juga memuat berkas
   ini. Padding bawahnya juga ruang bayangan struk. */
.h4-gratis {
    padding: 8px 0 104px;
    background: var(--h4-sec-bg);
    color: var(--h4-sec-ink);
    overflow: hidden;
    container-type: inline-size;
}

.h4-gratis-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 44px;
    padding: 0 var(--h4-pad);
    text-align: center;
}

.h4-gratis-title {
    margin: 0;
    font-family: var(--h4-display);
    font-size: clamp(34px, 9.4cqw, 52px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
}

.h4-gratis-lead {
    max-width: 34em;
    margin: 0;
    font-family: var(--h4-sub);
    font-size: 17px;
    font-stretch: 125%;
    line-height: 1.45;
    color: var(--h4-sec-soft);
    text-wrap: balance;
}

/* Panggung slot selebar konten; kertasnya lebih sempit dari panggung supaya
   bingkai slotnya muat di dalam tepi konten. */
.h4-gratis-stage {
    --paper: min(100% - 72px, 400px);
    margin: 0 var(--h4-pad);
}

/* Lembarnya; tema gelap tanpa bayangan. */
.h4-struk {
    filter: drop-shadow(0 2px 3px rgba(10, 10, 10, 0.12)) drop-shadow(0 14px 18px rgba(10, 10, 10, 0.18));
}

.uc-dark .h4-struk {
    filter: none;
}

/* Gerigi bawah seperti struk halaman Harga: tiap ubin selebar --zz hanya
   menyisakan baji 90° yang menghadap ke atas, jadi tepi bawahnya gigi gergaji
   setinggi --zz/2. Teksturnya kertas-struk.svg yang sama. Padding atasnya =
   --tuck (30px di dalam celah) + jarak tampak ke kepala struk. */
.h4-struk-paper {
    --zz: 16px;
    --h4-struk-ink: #0a0a0a;
    --h4-struk-soft: #5c5c66;
    --h4-struk-line: #d4d4dc;
    padding: 58px 24px calc(26px + var(--zz) / 2);
    background: #f8f7f3 url('../images/aj/home4/kertas-struk.svg') 0 0 / 360px 360px;
    color: var(--h4-struk-ink);
    font-family: var(--h4-text);
    -webkit-mask-image: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg);
    mask-image: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg);
    -webkit-mask-size: var(--zz) 100%;
    mask-size: var(--zz) 100%;
    -webkit-mask-repeat: round;
    mask-repeat: round;
}

.h4-struk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 2px dashed var(--h4-struk-line);
}

.h4-struk-logo {
    --h4-logo-mark: var(--h4-blue);
    display: block;
    flex: none;
    width: 124px;
    height: auto;
    fill: var(--h4-struk-ink);
}

.h4-struk-kicker {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: var(--h4-struk-soft);
}

.h4-struk-lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 18px 0;
    list-style: none;
}

/* Titik-titik penuntun di antara nama dan harga, menempel ke baris terakhir
   kalau namanya patah dua baris. */
.h4-struk-line {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    font-size: 15px;
    line-height: 21px;
}

.h4-struk-fill {
    flex: 1 1 16px;
    min-width: 16px;
    margin-bottom: 5px;
    border-bottom: 2px dotted var(--h4-struk-line);
}

.h4-struk-amt {
    font-weight: 600;
    white-space: nowrap;
}

.h4-struk-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    border-top: 2px dashed var(--h4-struk-line);
}

.h4-struk-total-label {
    font-size: 17px;
    font-weight: 600;
}

.h4-struk-total-amt {
    font-family: var(--h4-display);
    font-size: 48px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: var(--h4-blue);
}

/* Huruf kecil di bawah total, seperti di struk sungguhan. */
.h4-struk-fine {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 19px;
    color: var(--h4-struk-soft);
}

.h4-struk-fine a {
    color: var(--h4-blue);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.h4-struk-fine a:hover {
    text-decoration-thickness: 2px;
}

/* Kertasnya gading di tema gelap juga: garis fokus hitam, bukan warna seksi.
   (Salinan sobekannya inert, tak pernah difokus.) */
.h4-struk a:focus-visible {
    outline: 2px solid var(--h4-struk-ink);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Ponsel: kertasnya selebar mungkin supaya baris-barisnya tidak patah dua —
   bingkai slotnya lebih tipis, kertasnya sedikit lebih rapat. */
@media (max-width: 599px) {
    .h4-gratis-stage {
        --paper: min(100% - 44px, 400px);
        --slot-wing: 14px;
        --hole-inset: 8px;
    }

    .h4-struk-paper {
        padding-inline: 20px;
    }
}

@media (min-width: 600px) {
    .h4-struk-paper {
        padding: 62px 28px calc(30px + var(--zz) / 2);
    }
}

@media (min-width: 900px) {
    .h4-gratis {
        padding: 0 0 144px;
    }

    .h4-gratis-head {
        gap: 18px;
        margin-bottom: 64px;
    }

    .h4-gratis-title {
        font-size: clamp(44px, 4.2cqw, 80px);
    }

    .h4-gratis-lead {
        font-size: clamp(17px, 1.3vw, 20px);
    }

    .h4-gratis-stage {
        --paper: 420px;
        --slot-h: 44px;
        --slot-wing: 28px;
        --hole-h: 12px;
        --hole-inset: 14px;
    }
}

/* ── Penutup ─────────────────────────────────────────────────────────────── */

/* Biru lagi seperti hero (hitam di tema gelap), dengan tombol ajakan yang
   sama: halaman dibuka dan ditutup satu ajakan. Rata tengah, beda dari hero
   yang rata kiri; tanpa lencana toko aplikasi — footer di bawahnya sudah
   memuatnya. */
.h4-end {
    padding: 88px var(--h4-pad) 80px;
    background: var(--h4-hero-bg);
    color: var(--h4-on-hero);
    text-align: center;
}

/* "Semua berawal / dari Aturjadwal": dua baris di layar lebar. */
.h4-end-title {
    max-width: 10.5em;
    margin: 0 auto;
    font-family: var(--h4-display);
    font-size: clamp(44px, 12vw, 64px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance;
}

.h4-end .h4-cta {
    align-items: center;
    margin: 36px auto 0;
}

@media (min-width: 900px) {
    .h4-end {
        padding: 152px var(--h4-pad) 128px;
    }

    .h4-end-title {
        font-size: clamp(64px, 7vw, 124px);
    }

    .h4-end .h4-cta {
        margin-top: 52px;
    }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

/* Menyambung latar penutup. Teks kecil putih 68% di atas #3030B0 = 5:1. */
.h4-foot {
    padding: 0 var(--h4-pad) 40px;
    background: var(--h4-hero-bg);
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--h4-text);
    font-size: 15px;
    line-height: 1.5;
}

.h4-foot a {
    color: #ffffff;
    text-decoration: none;
}

.h4-foot a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.h4-foot a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
    border-radius: 4px;
}

.h4-foot-in {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
    padding: 44px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.h4-foot-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    grid-column: 1 / -1;
}

.h4-foot-logo {
    --h4-logo-mark: currentColor;
    display: block;
}

.h4-foot-logo svg {
    display: block;
    width: 150px;
    height: auto;
    fill: currentColor;
}

.h4-foot-apps {
    display: flex;
    gap: 10px;
}

.h4-foot-apps img {
    display: block;
    width: auto;
    height: 40px;
}

.h4-foot-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
}

.h4-foot-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.h4-foot-bottom p {
    margin: 0;
}

.h4-foot-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h4-foot-note {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    line-height: 1.6;
}

.h4-foot-note p {
    max-width: 980px;
    margin: 0 0 8px;
}

.uc-dark .h4-foot-in,
.uc-dark .h4-foot-bottom {
    border-color: rgba(255, 255, 255, 0.12);
}

@media (min-width: 900px) {
    .h4-foot-in {
        grid-template-columns: 1fr auto auto;
        gap: 48px 96px;
        padding: 64px 0 56px;
    }

    .h4-foot-brand {
        grid-column: auto;
    }

    .h4-foot-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ── Kerangka halaman lain berdesain baru ────────────────────────────────────
   Halaman landing selain beranda (Fitur, Harga, Solusi, Bantuan, Privasi, …)
   memakai potongan bersama di bawah ini; bagian khas tiap halaman tetap di
   berkasnya sendiri. Urutan halamannya sama dengan beranda: hero biru (hitam
   di gelap — navbar menyatu di puncaknya) → seksi isi putih → penutup biru
   (.h4-end) atau langsung footer (.h4-foot-solo). */

:root {
    /* Permukaan kartu di atas seksi putih/hitam. */
    --h4-card: #f4f4f6;
    --h4-card-edge: rgba(10, 10, 10, 0.06);
}

.uc-dark {
    --h4-card: #161616;
    --h4-card-edge: rgba(255, 255, 255, 0.08);
}

/* Hero ringkas: judul besar rata kiri sejajar logo navbar, satu kalimat,
   lalu isi tambahan (kolom cari, tombol, remah roti) bila ada. */
.h4-page-hero {
    padding: calc(var(--h4-nav-h) + 40px) var(--h4-pad) 56px;
    background: var(--h4-hero-bg);
    color: var(--h4-on-hero);
    container-type: inline-size;
}

.h4-page-title {
    max-width: 14em;
    margin: 0;
    font-family: var(--h4-display);
    font-size: clamp(34px, 9.4cqw, 56px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: 0;
    text-wrap: balance;
}

.h4-page-lead {
    max-width: 36em;
    margin: 20px 0 0;
    font-family: var(--h4-sub);
    font-size: clamp(16px, 4.3cqw, 18px);
    font-stretch: 125%;
    font-weight: 400;
    line-height: 1.45;
    text-wrap: pretty;
}

/* Keterangan kecil di bawah judul (mis. tanggal pembaruan dokumen). */
.h4-page-meta {
    margin: 18px 0 0;
    font-family: var(--h4-text);
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

/* Remah roti di atas judul: "Pusat Bantuan ›". */
.h4-page-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0 0 18px;
    font-family: var(--h4-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
}

.h4-page-crumb a {
    color: #ffffff;
    text-decoration: none;
}

.h4-page-crumb a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.h4-page-crumb a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
    border-radius: 4px;
}

.h4-page-crumb svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Seksi isi: putih bertulisan hitam (hitam bertulisan putih di gelap). Dua
   seksi isi berurutan tidak menumpuk jarak atas-bawahnya. */
.h4-sec {
    padding: 72px var(--h4-pad);
    background: var(--h4-sec-bg);
    color: var(--h4-sec-ink);
    container-type: inline-size;
}

.h4-sec + .h4-sec {
    padding-top: 8px;
}

.h4-sec-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 780px;
    margin: 0 0 36px;
}

.h4-sec-head.is-center {
    align-items: center;
    margin-inline: auto;
    text-align: center;
}

.h4-sec-title {
    margin: 0;
    font-family: var(--h4-display);
    font-size: clamp(34px, 9.4cqw, 52px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
}

.h4-sec-lead {
    max-width: 40em;
    margin: 0;
    font-family: var(--h4-sub);
    font-size: 17px;
    font-stretch: 125%;
    line-height: 1.45;
    color: var(--h4-sec-soft);
    text-wrap: pretty;
}

@media (min-width: 900px) {
    .h4-page-hero {
        padding: calc(var(--h4-nav-h) + 64px) var(--h4-pad) 80px;
    }

    .h4-page-title {
        font-size: clamp(52px, 5.6cqw, 96px);
    }

    .h4-page-lead {
        margin-top: 28px;
        font-size: clamp(18px, 1.45vw, 22px);
    }

    .h4-sec {
        padding: 120px var(--h4-pad);
    }

    .h4-sec + .h4-sec {
        padding-top: 24px;
    }

    .h4-sec-head {
        margin-bottom: 48px;
    }

    .h4-sec-title {
        font-size: clamp(44px, 4.2cqw, 80px);
    }

    .h4-sec-lead {
        font-size: clamp(17px, 1.3vw, 20px);
    }
}

/* Tombol kapsul. -dark: hitam (biru di tema gelap) di atas seksi isi;
   -light: putih bertulisan biru di atas hero/penutup (biru di tema gelap);
   -line: bergaris, ajakan kedua. */
.h4-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 9999px;
    font-family: var(--h4-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
}

.h4-btn svg {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.h4-btn:active {
    transform: scale(0.97);
}

.h4-btn-dark {
    background: #0a0a0a;
    color: #ffffff;
}

.h4-btn-dark:hover {
    background: #262626;
    color: #ffffff;
}

.h4-btn-dark:focus-visible {
    outline: 2px solid var(--h4-sec-ink);
    outline-offset: 3px;
}

.uc-dark .h4-btn-dark,
.uc-dark .h4-btn-dark:hover {
    background: var(--h4-blue);
}

.uc-dark .h4-btn-dark:hover {
    box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.1);
}

.h4-btn-light {
    background: #ffffff;
    color: var(--h4-blue);
}

.h4-btn-light:hover {
    color: var(--h4-blue);
    box-shadow: inset 0 0 0 100vmax rgba(48, 48, 176, 0.08);
}

.h4-btn-light:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.uc-dark .h4-btn-light,
.uc-dark .h4-btn-light:hover {
    background: var(--h4-blue);
    color: #ffffff;
}

.uc-dark .h4-btn-light:hover {
    box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.1);
}

.h4-btn-line {
    background: transparent;
    color: var(--h4-sec-ink);
    box-shadow: inset 0 0 0 1.5px var(--h4-sec-edge);
}

.h4-btn-line:hover {
    background: var(--h4-card);
    color: var(--h4-sec-ink);
}

.h4-btn-line:focus-visible {
    outline: 2px solid var(--h4-sec-ink);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .h4-btn {
        transition: none;
    }
}

/* Akordeon tanya-jawab (<details>): garis rambut di antara butir, tanda +
   yang jadi − saat terbuka. scripts/build_landing_pages.mjs membaca
   .h4-faq-q + .h4-faq-a untuk JSON-LD FAQPage (kalau semua judulnya tanya).
   Membuka & menutup beranimasi di peramban yang mengenal ::details-content. */
.h4-faq {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--h4-sec-edge);
}

.h4-faq-item {
    border-bottom: 1px solid var(--h4-sec-edge);
    interpolate-size: allow-keywords;
}

.h4-faq-q {
    position: relative;
    display: block;
    padding: 22px 44px 22px 0;
    font-family: var(--h4-sub);
    font-size: 18px;
    font-stretch: 112%;
    font-weight: 600;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}

.h4-faq-q::-webkit-details-marker {
    display: none;
}

.h4-faq-q::before,
.h4-faq-q::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 6px;
    width: 16px;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.h4-faq-q::after {
    transform: rotate(90deg);
}

.h4-faq-item[open] > .h4-faq-q::after {
    transform: rotate(0deg);
}

.h4-faq-q:focus-visible {
    outline: 2px solid var(--h4-sec-ink);
    outline-offset: 4px;
    border-radius: 6px;
}

.h4-faq-q:hover {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.h4-faq-a {
    padding: 0 0 26px;
}

@supports selector(::details-content) {
    .h4-faq-item::details-content {
        block-size: 0;
        overflow: hidden;
        transition:
            block-size 0.3s cubic-bezier(0.22, 1, 0.36, 1),
            content-visibility 0.3s allow-discrete;
    }

    .h4-faq-item[open]::details-content {
        block-size: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .h4-faq-q::before,
    .h4-faq-q::after,
    .h4-faq-item::details-content {
        transition: none;
    }
}

@media (min-width: 900px) {
    .h4-faq-q {
        padding: 26px 52px 26px 0;
        font-size: 20px;
    }
}

/* Teks panjang (dokumen, artikel bantuan, jawaban FAQ). */
.h4-prose {
    font-family: var(--h4-text);
    font-size: 17px;
    line-height: 1.7;
    color: var(--h4-sec-ink);
}

.h4-prose > * {
    margin: 0;
}

.h4-prose > * + * {
    margin-top: 1em;
}

.h4-prose h2,
.h4-prose h3 {
    font-weight: 400;
    letter-spacing: 0;
    text-wrap: balance;
    scroll-margin-top: calc(var(--h4-nav-h) + 24px);
}

.h4-prose h2 {
    margin-top: 2.2em;
    font-family: var(--h4-display);
    font-size: 22px;
    line-height: 1.2;
}

.h4-prose h3 {
    margin-top: 1.8em;
    font-family: var(--h4-sub);
    font-size: 19px;
    font-stretch: 112%;
    font-weight: 600;
    line-height: 1.3;
}

.h4-prose h2 + *,
.h4-prose h3 + * {
    margin-top: 0.6em;
}

.h4-prose ul,
.h4-prose ol {
    padding-left: 1.3em;
}

.h4-prose li + li {
    margin-top: 0.45em;
}

.h4-prose li::marker {
    color: var(--h4-sec-soft);
}

.h4-prose a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.h4-prose a:hover {
    text-decoration-thickness: 2px;
}

.h4-prose a:focus-visible {
    outline: 2px solid var(--h4-sec-ink);
    outline-offset: 2px;
    border-radius: 3px;
}

.h4-prose strong {
    font-weight: 600;
}

.h4-prose code {
    padding: 0.1em 0.4em;
    border-radius: 6px;
    background: var(--h4-card);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    overflow-wrap: anywhere;
}

/* Catatan kecil di antara paragraf. */
.h4-prose .h4-prose-note {
    font-size: 15px;
    line-height: 1.6;
    color: var(--h4-sec-soft);
}

/* Penutup berisi tombol (bukan klaim link): judul lebih kecil, satu kalimat,
   lalu tombol kapsul. */
.h4-end-title.is-sm {
    max-width: 14em;
    font-size: clamp(36px, 10vw, 52px);
    line-height: 1.04;
}

.h4-end-lead {
    max-width: 30em;
    margin: 20px auto 0;
    font-family: var(--h4-sub);
    font-size: 17px;
    font-stretch: 125%;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.8);
    text-wrap: pretty;
}

.h4-end-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
}

@media (min-width: 900px) {
    .h4-end-title.is-sm {
        font-size: clamp(48px, 5vw, 84px);
    }

    .h4-end-lead {
        margin-top: 28px;
        font-size: 20px;
    }

    .h4-end-actions {
        margin-top: 44px;
    }
}

/* Footer tanpa penutup biru di atasnya: langsung sesudah seksi isi, jadi
   garis pembuka & jarak atasnya tidak perlu. */
.h4-foot-solo {
    padding-top: 8px;
}

.h4-foot-solo .h4-foot-in {
    border-top: 0;
}

/* ── Gambar dimuat malas ─────────────────────────────────────────────────── */

/* Gambar loading="lazy" (deret Tema, kartu Bayaran & Fitur, footer) dan foto
   pertama hero (data-h4-fade) muncul pelan begitu tiba, di atas warna atau
   pratinjau tunggunya — bukan muncul patah-patah. aj-home4.js memasang .h4-js
   di <html> lalu .is-loaded di tiap gambar yang selesai (atau gagal) dimuat;
   tanpa JS gambarnya tampil biasa. Kartu invoice dikecualikan: opasitasnya
   diatur tumpukan kocoknya sendiri. */
.h4-js img[loading='lazy']:not(.h4-deck-card),
.h4-js img[data-h4-fade] {
    opacity: 0;
    transition: opacity 0.45s ease;
}

.h4-js img[loading='lazy']:not(.h4-deck-card).is-loaded,
.h4-js img[data-h4-fade].is-loaded {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .h4-js img[loading='lazy'],
    .h4-js img[data-h4-fade] {
        transition: none;
    }
}