/* ============================================================================
   aj-h4-harga.css — halaman Harga (pricing.html), dalam desain baru beranda.

   Yang dipakai bersama — token, navbar dua wujud, menu Solusi & menu ponsel,
   tombol (.h4-btn), seksi isi (.h4-sec), akordeon FAQ (.h4-faq), penutup,
   footer — ada di aj-home4.css; berkas ini cuma seksi-seksi halaman ini:
     #harga     hero biru + struk "Tagihan bulananmu"
     #biaya     kalkulator "siapa bayar apa" + rincian biaya
     #termasuk  fitur yang ikut, di empat kartu bertekstur pastel
     #faq       judul kiri, akordeon kanan

   aj-harga.css (gaya halaman ini sebelumnya) tidak dimuat di sini: berkas itu
   masih dipakai pita #pricing di home-4.html dan halaman Solusi. Kalkulatornya
   tetap assets/js/aj-harga.js, yang hanya membaca atribut data-ajh-* — kelas
   di sini bebas. Kelas h4h- = khusus halaman ini.

   Tiruan rincian tagihan di kalkulator disalin dari langkah pembayaran halaman
   booking klien (src/views/OrderServiceView/BookSchedule/Components/
   CustomerForm.vue): kartu #price_accumulation (rounded-2xl, border-line,
   bg-canvas, p-4, baris 14px) dan bilah bawahnya ("Total pembayaran" 12px +
   angka 20px bold, tombol Bayar rounded-xl bg-brand), dengan nilai token tema
   terang aplikasi (src/assets/main.css) — tetap terang di tema gelap, seperti
   potongan UI di kartu Fitur beranda.
   ========================================================================== */

.h4-harga {
    /* Batang pembagi (bagian-dari-keseluruhan, bentuk "emphasis"): bagian
       pemilik jasa biru merek, biaya platform & biaya metode dua netral.
       Diuji validator palet dataviz (scripts/validate_palette.js skill
       dataviz) di permukaan kartunya (--h4-card): terang #F4F4F6 — pasangan
       bersebelahan ΔE 32,7 (deutan), semua ruas ≥ 3:1; gelap #161616 — ΔE
       18,2 (protan), normal 18,8, semua ruas ≥ 3:1. Pita terang & krom-nya
       memang gagal: dua ruas netral sengaja abu-abu. */
    --h4h-seg-net: #3030b0;
    --h4h-seg-platform: #0a0a0a;
    --h4h-seg-channel: #8a8a96;
    --h4h-danger: #c2352b;
}

.uc-dark .h4-harga {
    --h4h-seg-net: #8f8ff5;
    --h4h-seg-platform: #c4c4cc;
    --h4h-seg-channel: #6e6e78;
    --h4h-danger: #ff8a80;
}

.h4h-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Hero: judul & satu kalimat, struk di sampingnya ─────────────────────── */

.h4h-hero {
    padding: calc(var(--h4-nav-h) + 40px) var(--h4-pad) 64px;
    background: var(--h4-hero-bg);
    color: var(--h4-on-hero);
    overflow: clip;
    container-type: inline-size;
}

.h4h-hero-in {
    display: grid;
    gap: 44px;
}

.h4h-title {
    max-width: 13em;
    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;
}

.h4h-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: pretty;
}

/* Struk: keluar dari lubang slot seperti di seksi Harga beranda — mesinnya
   (slot, cetak tersendat, sobek & cetak ulang) ada di aj-home4.css › Slot
   struk dan aj-home4.js. Kertasnya selebar kolom (≤ 400px, seperti
   sebelumnya); bingkai slotnya menjulur sedikit ke tepi konten di
   kiri-kanannya. Tidak miring lagi: kertasnya menjuntai dari slot yang datar.
   Di hero biru bingkainya biru juga, timbul dari dinding yang sama; di tema
   gelap heronya hitam, jadi bingkainya ikut warna gelap bawaan. */
.h4h-print {
    --paper: 100%;
    --slot-wing: 14px;
    --hole-inset: 8px;
    width: 100%;
    max-width: 400px;
}

html:not(.uc-dark) .h4h-print {
    --slot-face: linear-gradient(180deg, #3c3cc0 0%, #2a2aa2 100%);
    --slot-rim:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(6, 6, 40, 0.3),
        0 0 0 1px rgba(6, 6, 40, 0.14),
        0 1px 2px rgba(6, 6, 40, 0.3),
        0 10px 18px -8px rgba(6, 6, 40, 0.55);
    --hole-face: linear-gradient(180deg, #04041c 0%, #1c1c68 100%);
    --hole-rim:
        inset 0 3px 4px rgba(0, 0, 0, 0.7),
        0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Kertas putih di kedua tema (benda, seperti invoice di kartu Bayaran
   beranda), jadi warnanya tetap, bukan token seksi. Bayangannya dipasang di
   lembar sebagai drop-shadow: kertasnya sendiri di-mask jadi bergerigi, dan
   mask ikut memangkas box-shadow. Tema gelap tanpa bayangan — kertas putih di
   atas hitam sudah terangkat. */
.h4h-receipt {
    filter: drop-shadow(0 2px 3px rgba(8, 8, 48, 0.14)) drop-shadow(0 12px 18px rgba(8, 8, 48, 0.22));
}

.uc-dark .h4h-receipt {
    filter: none;
}

/* Gerigi bawah: tiap ubin selebar --zz hanya menyisakan baji 90° yang
   menghadap ke atas dari titik tengah dasarnya, jadi tepi bawahnya jadi gigi
   gergaji setinggi --zz/2. `round` menyesuaikan lebar ubin supaya jumlah
   giginya bulat dan tidak ada gigi terpotong di ujung. Teksturnya
   (kertas-struk.svg: bercak tipis, butiran, serat pendek) ubin mulus 360px
   di atas putih gading. Token warnanya di kertas, bukan di lembar, supaya
   salinan sobekannya ikut membawanya; padding atasnya = --tuck (30px di
   dalam celah) + jarak tampak ke kepala struk. */
.h4h-receipt-paper {
    --zz: 16px;
    --h4h-paper-ink: #0a0a0a;
    --h4h-paper-soft: #5c5c66;
    --h4h-paper-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(--h4h-paper-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;
}

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

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

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

.h4h-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. */
.h4h-line {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    font-size: 15px;
    line-height: 21px;
}

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

.h4h-line-amt {
    font-weight: 600;
    white-space: nowrap;
}

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

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

.h4h-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. */
.h4h-receipt-fine {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 19px;
    color: var(--h4h-paper-soft);
}

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

.h4h-receipt-fine a:hover {
    text-decoration-thickness: 2px;
}

.h4h-receipt-cta {
    width: 100%;
    margin-top: 22px;
}

.h4h-receipt-note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    color: var(--h4h-paper-soft);
    text-wrap: balance;
}

/* Kertasnya putih di tema gelap juga: garis fokus hitam, bukan warna seksi. */
.h4h-receipt a:focus-visible,
.h4h-receipt .h4-btn:focus-visible {
    outline: 2px solid var(--h4h-paper-ink);
    outline-offset: 3px;
    border-radius: 4px;
}

.h4h-receipt .h4-btn:focus-visible {
    border-radius: 9999px;
}

@media (min-width: 600px) {
    .h4h-print {
        --slot-wing: 22px;
        --hole-inset: 10px;
    }

    .h4h-receipt-paper {
        padding: 62px 28px calc(30px + var(--zz) / 2);
    }
}

/* Tablet: struknya di bawah teks, di tengah. */
@media (min-width: 600px) and (max-width: 1023px) {
    .h4h-print {
        justify-self: center;
    }
}

/* Layar lebar: struk di kanan judul; slotnya sedikit lebih besar, seperti
   di beranda. Ukuran judul mengikuti lebar kolomnya (cqi), supaya "Kerjamu
   berkembang," tetap sebaris. */
@media (min-width: 1024px) {
    .h4h-hero {
        padding: calc(var(--h4-nav-h) + 48px) var(--h4-pad) 96px;
    }

    .h4h-hero-in {
        grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
        align-items: center;
        column-gap: clamp(48px, 6vw, 128px);
    }

    .h4h-hero-copy {
        container-type: inline-size;
    }

    .h4h-title {
        max-width: none;
        font-size: clamp(44px, 7.4cqi, 104px);
    }

    .h4h-lead {
        max-width: 30em;
        margin-top: 28px;
        font-size: clamp(18px, 1.45vw, 22px);
    }

    .h4h-print {
        --slot-h: 44px;
        --slot-wing: 28px;
        --hole-h: 12px;
        --hole-inset: 14px;
    }

    .h4h-receipt {
        filter: drop-shadow(0 2px 3px rgba(8, 8, 48, 0.14)) drop-shadow(0 22px 30px rgba(8, 8, 48, 0.3));
    }

    .uc-dark .h4h-receipt {
        filter: none;
    }
}

/* ── Kalkulator: kiri pemilik jasa, kanan yang dilihat klien ─────────────── */

/* Tujuan tautan #biaya (struk di hero, beranda, Metode Pembayaran), #termasuk,
   dan #faq: judulnya tidak boleh tertutup kapsul navbar yang tampil saat
   halaman dibuka langsung di jangkar itu. Dua seksi terakhir jarak atasnya
   cuma sisa (.h4-sec + .h4-sec), jadi jarak navbar ditambahkan utuh. */
.h4h-biaya {
    scroll-margin-top: 16px;
}

.h4h-termasuk,
.h4h-faq {
    scroll-margin-top: calc(var(--h4-nav-h) + 8px);
}

.h4h-calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-radius: 24px;
    background: var(--h4-card);
    box-shadow: inset 0 0 0 1px var(--h4-card-edge);
}

.h4h-calc-you,
.h4h-calc-client {
    min-width: 0;
    padding: 24px 20px;
}

.h4h-calc-you {
    display: flex;
    flex-direction: column;
}

.h4h-calc-client {
    padding-top: 4px;
}

.h4h-label {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    font-family: var(--h4-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--h4-sec-ink);
}

/* Kolom harga: seluruh kotaknya kolom ketik; "Rp" cuma gambar di kirinya. */
.h4h-money {
    position: relative;
    height: 72px;
    border-radius: 16px;
    background: var(--h4-sec-bg);
    box-shadow: inset 0 0 0 1.5px var(--h4-sec-edge);
    transition: box-shadow 0.15s ease;
}

.h4h-money:focus-within {
    box-shadow: inset 0 0 0 2px var(--h4-sec-ink);
}

.h4h-calc.is-invalid .h4h-money {
    box-shadow: inset 0 0 0 2px var(--h4h-danger);
}

.h4h-money-rp {
    position: absolute;
    top: 50%;
    left: 20px;
    font-family: var(--h4-display);
    font-size: 24px;
    line-height: 1;
    color: var(--h4-sec-soft);
    transform: translateY(-50%);
    pointer-events: none;
}

.h4h-money-input {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 20px 0 66px;
    border: 0;
    border-radius: inherit;
    outline: 0;
    background: transparent;
    color: var(--h4-sec-ink);
    font-family: var(--h4-display);
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
}

.h4h-hint {
    margin: 10px 0 0;
    font-family: var(--h4-text);
    font-size: 14px;
    line-height: 1.45;
    color: var(--h4-sec-soft);
}

.h4h-hint.is-warn {
    font-weight: 600;
    color: var(--h4h-danger);
}

.h4h-method {
    min-width: 0;
    margin: 26px 0 0;
    padding: 0;
    border: 0;
}

/* Pilihan metode: kapsul seperti tombol halaman ini; radio aslinya tak
   terlihat di atas kapsulnya, jadi panah & Tab tetap jalan seperti radio. */
.h4h-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.h4h-chip {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

.h4h-chip input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.h4h-chip span {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 18px;
    border-radius: 9999px;
    background: var(--h4-sec-bg);
    box-shadow: inset 0 0 0 1.5px var(--h4-sec-edge);
    color: var(--h4-sec-ink);
    font-family: var(--h4-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        color 0.15s ease;
}

.h4h-chip:hover span {
    box-shadow: inset 0 0 0 1.5px var(--h4-sec-ink);
}

.h4h-chip input:checked + span {
    background: #0a0a0a;
    color: #ffffff;
    box-shadow: none;
}

.uc-dark .h4h-chip input:checked + span {
    background: var(--h4-blue);
}

.h4h-chip input:focus-visible + span {
    outline: 2px solid var(--h4-sec-ink);
    outline-offset: 3px;
}

/* Nominalnya selebar kolom (cqi): "Rp9.999.999" (7,96 em) masih sebaris di
   kolom tersempit; angka yang lebih panjang lagi baru patah. */
.h4h-receive {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--h4-sec-edge);
    container-type: inline-size;
}

.h4h-receive-label {
    margin: 0;
    font-family: var(--h4-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.h4h-receive-amt {
    margin: 10px 0 0;
    font-family: var(--h4-display);
    font-size: clamp(30px, 12cqi, 56px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--h4-blue);
    overflow-wrap: anywhere;
}

.uc-dark .h4h-receive-amt {
    color: #ffffff;
}

.h4h-receive-note {
    margin: 12px 0 0;
    font-family: var(--h4-text);
    font-size: 15px;
    line-height: 1.5;
    color: var(--h4-sec-soft);
}

.h4h-receive-note b {
    font-weight: 600;
    color: var(--h4-sec-ink);
}

/* Panggung tagihan klien: tekstur pastel kartu "Terima bayaran online"
   beranda (tinta gelap), tiruan tagihannya di tengah. */
.h4h-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 20px 14px 22px;
    border-radius: 20px;
    background: #e9e8ee;
}

.h4h-stage-tex {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h4h-stage-label {
    margin: 0 0 14px;
    font-family: var(--h4-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: #0a0a0a;
}

.h4h-bill {
    max-width: 460px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #cfd6e0;
    border-radius: 16px;
    background: #ffffff;
    color: #27354a;
    font-family: var(--h4-text);
    letter-spacing: 0;
    box-shadow: 0 18px 36px -18px rgba(18, 16, 53, 0.4);
}

.uc-dark .h4h-bill {
    box-shadow: none;
}

.h4h-bill-body {
    padding: 16px;
}

.h4h-bill-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid #cfd6e0;
    border-radius: 16px;
    background: #f5f6fa;
}

.h4h-bill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    line-height: 20px;
}

.h4h-bill-row b {
    font-weight: 600;
    white-space: nowrap;
}

.h4h-bill-fee {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h4h-bill-tip {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: #5a6880;
}

.h4h-bill-tip[hidden] {
    display: none;
}

.h4h-bill-tip svg {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.h4h-bill-tip b {
    font-weight: 600;
}

.h4h-bill-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #cfd6e0;
}

.h4h-bill-total {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.h4h-bill-total span {
    font-size: 12px;
    line-height: 20px;
    color: #5a6880;
}

.h4h-bill-total b {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
}

/* Hanya gambar tombol, bukan tombol sungguhan: tidak bisa difokus/diklik. */
.h4h-bill-pay {
    flex: none;
    padding: 14px 24px;
    border-radius: 12px;
    background: #0161e9;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    user-select: none;
}

/* Batang pembagi: tiap ruas tumbuh sebanding nominalnya (flex-grow = rupiah,
   diisi aj-harga.js) sesudah celah 2px antar-ruas dikurangi, jadi
   proporsinya tepat tanpa hitung persen. Pangkal kiri persegi, ujung kanan
   (ujung data) membulat 4px. */
.h4h-split {
    margin-top: 28px;
}

.h4h-split-title {
    margin: 0 0 14px;
    font-family: var(--h4-text);
    font-size: 15px;
    line-height: 1.45;
    color: var(--h4-sec-soft);
}

.h4h-split-title b {
    font-weight: 600;
    color: var(--h4-sec-ink);
}

.h4h-bar {
    display: flex;
    gap: 2px;
    height: 16px;
    transition: opacity 0.2s ease;
}

.h4h-bar-seg {
    flex: 1 1 0;
    min-width: 3px;
    transition: flex-grow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.h4h-bar-seg:last-child {
    border-radius: 0 4px 4px 0;
}

.h4h-calc.is-invalid .h4h-bar {
    opacity: 0.25;
}

.is-net > .h4h-key,
.h4h-bar-seg.is-net {
    background: var(--h4h-seg-net);
}

.is-platform > .h4h-key,
.h4h-bar-seg.is-platform {
    background: var(--h4h-seg-platform);
}

.is-channel > .h4h-key,
.h4h-bar-seg.is-channel {
    background: var(--h4h-seg-channel);
}

.h4h-legend {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.h4h-legend li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-family: var(--h4-text);
    font-size: 15px;
    line-height: 1.4;
    color: var(--h4-sec-ink);
}

.h4h-key {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.h4h-legend b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

@media (min-width: 600px) {
    .h4h-calc-you,
    .h4h-calc-client {
        padding: 32px;
    }

    .h4h-calc-client {
        padding-top: 4px;
    }

    .h4h-stage {
        padding: 26px 28px 30px;
    }

    .h4h-money-input {
        font-size: 30px;
    }
}

/* Layar lebar: dua kolom; "Masuk ke Dompetmu" menempel ke dasar kolomnya,
   sejajar keterangan batang di kanan. */
@media (min-width: 960px) {
    .h4h-calc {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .h4h-calc-you,
    .h4h-calc-client {
        padding: 40px;
    }

    .h4h-calc-client {
        padding-left: 0;
    }

    .h4h-receive {
        margin-top: auto;
    }

    .h4h-method {
        margin-bottom: 32px;
    }

    .h4h-stage {
        padding: 30px 32px 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .h4h-money,
    .h4h-chip span,
    .h4h-bar,
    .h4h-bar-seg {
        transition: none;
    }
}

/* ── Rincian biaya: yang kamu bayar & yang dibayar klien ─────────────────── */

/* Dua sisi yang langsung terbedakan: panggung bertekstur biru untuk yang kamu
   bayar, jingga untuk yang dibayar klien (pasangan tekstur kartu Bayaran
   beranda). Tiap biaya satu tiket putih — nama di atas, angka besar huruf
   judul — seperti kartu "Bisa DP" beranda; tiketnya tetap putih di kedua tema
   (benda di atas tekstur). Satu kelompok tiket miring utuh, kiri & kanan
   saling menjauh: tiket satu-satu yang miring di kisi rapat terlihat seperti
   celah yang tidak rata. */
.h4h-fees {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    margin-top: 56px;
}

.h4h-fee-head {
    margin: 0;
    font-family: var(--h4-display);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0;
    text-wrap: balance;
}

.h4h-fee-desc {
    margin: 10px 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;
}

.h4h-fee-stage {
    container: h4h-stage / inline-size;
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: center;
    margin-top: 22px;
    padding: 18px 14px;
    overflow: hidden;
    border-radius: 20px;
}

/* Warna rata-rata teksturnya selama gambarnya dimuat (seperti kartu Bayaran). */
.h4h-fee-stage.is-you {
    background: #2626a6;
}

.h4h-fee-stage.is-client {
    background: #a647e0;
}

.h4h-fee-tex {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h4h-tix {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    rotate: -1.2deg;
}

.is-client .h4h-tix {
    rotate: 1.2deg;
}

/* Panggung sempit: satu tiket per baris, nama kiri & angka kanan. */
.h4h-tik {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #ffffff;
    color: #0a0a0a;
    box-shadow: 0 14px 30px -16px rgba(5, 8, 60, 0.6);
}

.is-client .h4h-tik {
    box-shadow: 0 14px 30px -16px rgba(60, 10, 40, 0.55);
}

.uc-dark .h4h-tik {
    box-shadow: none;
}

.h4h-tik-name {
    min-width: 0;
    font-family: var(--h4-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.h4h-tik-name small {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: #5c5c66;
}

.h4h-tik-val {
    flex: none;
    font-family: var(--h4-display);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
    text-align: right;
    white-space: nowrap;
}

/* Yang gratis berangka biru merek; yang berbayar hitam. */
.h4h-tik.is-free .h4h-tik-val {
    color: var(--h4-blue);
}

/* Biaya platform selalu ada, lalu "+" satu biaya metode — tanda tambahnya
   bulatan hitam yang menjembatani celah ke tiket berikutnya. Digambar dua
   gradien, bukan teks, jadi tidak ikut dibaca pembaca layar. */
.h4h-tik.is-platform {
    margin-bottom: 16px;
}

.h4h-tik.is-platform::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -31px;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    border-radius: 50%;
    background:
        linear-gradient(#ffffff 0 0) center / 14px 3px no-repeat,
        linear-gradient(#ffffff 0 0) center / 3px 14px no-repeat,
        #0a0a0a;
}

.h4h-fee-note {
    margin: 16px 0 0;
    font-family: var(--h4-text);
    font-size: 14px;
    line-height: 1.55;
    color: var(--h4-sec-soft);
}

.h4h-fee-note a,
.h4h-faq-help a {
    color: var(--h4-sec-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.h4h-fee-note a:hover,
.h4h-faq-help a:hover {
    text-decoration-thickness: 2px;
}

.h4h-fee-note a:focus-visible,
.h4h-faq-help a:focus-visible {
    outline: 2px solid var(--h4-sec-ink);
    outline-offset: 3px;
    border-radius: 3px;
}

@media (min-width: 600px) {
    .h4h-fee-stage {
        padding: 28px;
        border-radius: 24px;
    }
}

/* Panggung yang cukup lebar (tablet; layar lebar mulai ±1200px, saat dua sisi
   berdampingan): tiket dua kolom, nama di atas & angka besar di bawah —
   angkanya ikut lebar tiket (cqi); biaya platform selebar panggung. Laptop
   900–1200px tetap satu tiket per baris seperti ponsel. */
@container h4h-stage (min-width: 520px) {
    .h4h-tix {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .h4h-tik {
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        gap: 18px;
        padding: 16px 18px 18px;
        border-radius: 14px;
        container-type: inline-size;
    }

    .h4h-tik-val {
        font-size: clamp(20px, 11.5cqi, 34px);
        text-align: left;
        white-space: normal;
        text-wrap: balance;
    }

    .h4h-tik.is-platform {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        margin-bottom: 12px;
    }

    .h4h-tik.is-platform .h4h-tik-val {
        font-size: clamp(28px, 7cqi, 44px);
    }
}

/* Layar lebar: dua kolom; tiap kolom subgrid empat baris (judul, kalimat,
   panggung, catatan), jadi panggungnya mulai & berakhir sejajar walau judul
   kanan dua baris — tiket sisi kiri yang lebih sedikit di tengah panggungnya. */
@media (min-width: 900px) {
    .h4h-fees {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(32px, 4vw, 80px);
        row-gap: 0;
        margin-top: 88px;
    }

    .h4h-fee {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        align-content: start;
    }

    .h4h-fee-head {
        font-size: clamp(26px, 2.2vw, 34px);
    }

    .h4h-fee-desc {
        font-size: 17px;
    }

    .h4h-fee-stage {
        margin-top: 26px;
        padding: clamp(24px, 2.4vw, 36px);
    }

    .h4h-tik-name {
        font-size: 16px;
    }

    .h4h-tik-name small {
        font-size: 14px;
    }
}

/* ── Semua termasuk: empat kartu bertekstur pastel, tinta gelap ──────────── */

/* Judulnya dua baris juga di layar lebar ("Satu paket, semua / fitur
   terbuka"), bukan tiga. Di ponsel patah biasa ("Satu paket, / semua fitur
   / terbuka"): balance di sana menyisakan "semua" sendirian. */
.h4h-termasuk .h4-sec-head {
    max-width: 1000px;
}

@media (max-width: 599px) {
    .h4h-termasuk .h4-sec-title {
        text-wrap: wrap;
    }
}

/* Ponsel: kartu bergeser mendatar (snap) sampai tepi layar, seperti kartu
   Bayaran & Fitur beranda; tablet dua kolom; desktop lebar empat sejajar. */
.h4h-incl {
    display: flex;
    gap: 12px;
    margin: 0 calc(-1 * var(--h4-pad));
    padding: 0 var(--h4-pad);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--h4-pad);
    scrollbar-width: none;
}

.h4h-incl::-webkit-scrollbar {
    display: none;
}

.h4h-incl-card {
    position: relative;
    flex: 0 0 min(82vw, 330px);
    min-width: 0;
    isolation: isolate;
    overflow: hidden;
    scroll-snap-align: start;
    padding: 26px 24px 28px;
    border-radius: 20px;
    /* Warna rata-rata teksturnya (--h4-wait di markup) selama dimuat. */
    background: var(--h4-wait, var(--h4-sec-wait));
    color: #0a0a0a;
}

.h4h-incl-tex {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h4h-incl-title {
    margin: 0 0 18px;
    font-family: var(--h4-display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
}

.h4h-incl-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h4h-incl-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--h4-text);
    font-size: 16px;
    line-height: 1.4;
}

.h4h-incl-list svg {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    fill: var(--h4-blue);
}

@media (min-width: 640px) {
    .h4h-incl {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }
}

@media (min-width: 1360px) {
    .h4h-incl {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(16px, 1.4vw, 24px);
    }

    .h4h-incl-card {
        padding: 30px 26px 32px;
    }

    .h4h-incl-title {
        font-size: clamp(22px, 1.6vw, 26px);
    }
}

/* ── FAQ: judul kiri, akordeon kanan ─────────────────────────────────────── */

/* Di ponsel urutannya judul → akordeon → ajakan ke Pusat Bantuan; di layar
   lebar ajakannya naik ke bawah judul, di kolom kiri. */
.h4h-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        'title'
        'list'
        'help';
    row-gap: 32px;
}

.h4h-faq-title {
    grid-area: title;
    max-width: 9em;
}

.h4h-faq-list {
    grid-area: list;
}

.h4h-faq-help {
    grid-area: help;
    max-width: 22em;
    margin: 0;
    font-family: var(--h4-sub);
    font-size: 17px;
    font-stretch: 125%;
    line-height: 1.5;
    color: var(--h4-sec-soft);
    text-wrap: pretty;
}

@media (min-width: 960px) {
    .h4h-faq-grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            'title list'
            'help list';
        align-items: start;
        column-gap: clamp(48px, 6vw, 120px);
        row-gap: 28px;
    }

    .h4h-faq-help {
        font-size: clamp(17px, 1.3vw, 20px);
    }
}