/* ============================================================================
   aj-h4-bantuan.css — Hubungi Kami (contact-us.html), Pusat Bantuan
   (help.html), dan halaman-halaman kategorinya (help-*.html), dalam desain
   baru beranda.

   Kerangka bersamanya (hero ringkas, seksi isi, akordeon .h4-faq, .h4-prose,
   tombol, penutup, footer) ada di aj-home4.css. Warna kartu & ikon kategori
   memakai tekstur beranda: kartu kontak memakai berkas teksturnya langsung,
   ikon kategori potongan kecilnya (assets/images/aj/bantuan/chip-*.webp,
   160 px) — tekstur jenuhnya ±150 KB, terlalu berat untuk ikon 64 px.
   Tekstur pastel bertinta gelap, tekstur jenuh bertinta putih.
   ========================================================================== */

/* ── Ikon kategori bertekstur ────────────────────────────────────────────── */

.h4-chip {
    display: grid;
    flex: none;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--h4-sec-wait) center / cover no-repeat;
}

.h4-chip svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.h4-chip.is-hijau { background-image: url('../images/aj/bantuan/chip-hijau.webp'); color: #ffffff; }
.h4-chip.is-persik { background-image: url('../images/aj/bantuan/chip-persik.webp'); color: #0a0a0a; }
.h4-chip.is-merah { background-image: url('../images/aj/bantuan/chip-merah.webp'); color: #ffffff; }
.h4-chip.is-lemon { background-image: url('../images/aj/bantuan/chip-lemon.webp'); color: #0a0a0a; }
.h4-chip.is-ungu { background-image: url('../images/aj/bantuan/chip-ungu.webp'); color: #ffffff; }
.h4-chip.is-mint { background-image: url('../images/aj/bantuan/chip-mint.webp'); color: #0a0a0a; }
.h4-chip.is-toska { background-image: url('../images/aj/bantuan/chip-toska.webp'); color: #ffffff; }
.h4-chip.is-langit { background-image: url('../images/aj/bantuan/chip-langit.webp'); color: #0a0a0a; }
.h4-chip.is-magenta { background-image: url('../images/aj/bantuan/chip-magenta.webp'); color: #ffffff; }
.h4-chip.is-jingga { background-image: url('../images/aj/bantuan/chip-jingga.webp'); color: #ffffff; }
.h4-chip.is-lila { background-image: url('../images/aj/bantuan/chip-lila.webp'); color: #0a0a0a; }

/* ── Hubungi Kami ────────────────────────────────────────────────────────── */

.h4-kontak {
    padding-top: 40px;
}


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

/* Kartu kanal: tekstur beranda sebagai latar, nama kanal besar, alamatnya,
   dan ajakan di bawah. Seluruh kartu satu tautan. */
.h4-kontak-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 210px;
    padding: 22px 22px 20px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--h4-wait, var(--h4-sec-wait));
    text-decoration: none;
    isolation: isolate;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.h4-kontak-card.is-ink {
    color: #0a0a0a;
}

.h4-kontak-card.is-light {
    color: #ffffff;
}

.h4-kontak-tex {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h4-kontak-ico svg {
    display: block;
    width: 34px;
    height: 34px;
    fill: currentColor;
}

.h4-kontak-name {
    margin: auto 0 0;
    padding-top: 28px;
    font-family: var(--h4-display);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
}

.h4-kontak-val {
    margin: 8px 0 0;
    font-family: var(--h4-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.h4-kontak-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-family: var(--h4-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.h4-kontak-go svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 0.15s ease;
}

.h4-kontak-card:hover .h4-kontak-go svg {
    transform: translateX(3px);
}

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

/* Alamat kantor: kartu polos di bawah kanal. */
.h4-kontak-alamat {
    display: flex;
    gap: 14px;
    margin-top: 12px;
    padding: 20px 22px;
    border-radius: 24px;
    background: var(--h4-card);
    font-family: var(--h4-text);
    font-size: 16px;
    font-style: normal;
    line-height: 1.6;
}

.h4-kontak-alamat svg {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    fill: currentColor;
    color: var(--h4-sec-soft);
}

.h4-kontak-alamat strong {
    font-weight: 600;
}

@media (min-width: 768px) {
    .h4-kontak-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .h4-kontak-card {
        min-height: 280px;
        padding: 28px 28px 26px;
    }

    .h4-kontak-name {
        font-size: clamp(30px, 3vw, 40px);
    }
}

@media (min-width: 768px) and (hover: hover) {
    .h4-kontak-card:hover {
        transform: translateY(-4px);
    }
}

@media (min-width: 1024px) {
    .h4-kontak {
        padding-top: 72px;
    }

    .h4-kontak-alamat {
        padding: 24px 28px;
    }
}

/* ── Pusat Bantuan: kolom cari di hero ───────────────────────────────────── */

.h4-cari {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 640px;
    height: 56px;
    margin-top: 28px;
    padding: 0 18px;
    border-radius: 9999px;
    background: #ffffff;
    color: var(--h4-ink);
    cursor: text;
}

.h4-cari:focus-within {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.h4-cari svg {
    flex: none;
    width: 22px;
    height: 22px;
    fill: #6f6e86;
}

.h4-cari input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: var(--h4-text);
    font-size: 17px;
    font-weight: 500;
    outline: none;
}

.h4-cari input::placeholder {
    color: #6f6e86;
    opacity: 1;
}

.h4-cari input::-webkit-search-cancel-button {
    cursor: pointer;
}

@media (min-width: 900px) {
    .h4-cari {
        height: 64px;
        margin-top: 36px;
        padding: 0 22px;
    }

    .h4-cari input {
        font-size: 18px;
    }
}

/* ── Pusat Bantuan: kategori, paling sering dicari ───────────────────────── */

.h4-bantuan-sec {
    padding-top: 40px;
}


.h4-cari-kosong {
    margin: 0 0 24px;
    padding: 20px 22px;
    border-radius: 20px;
    background: var(--h4-card);
    font-family: var(--h4-text);
    font-size: 16px;
    line-height: 1.55;
}

.h4-cari-kosong[hidden] {
    display: none;
}

.h4-cari-kosong strong {
    display: block;
    font-weight: 600;
}

.h4-cari-kosong a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

.h4-cat {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    padding: 18px;
    border-radius: 20px;
    background: var(--h4-card);
    color: var(--h4-sec-ink);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.h4-cat:hover {
    background: color-mix(in srgb, var(--h4-card), var(--h4-sec-ink) 6%);
}

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

.h4-cat-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-top: 2px;
}

.h4-cat-name {
    margin: 0;
    font-family: var(--h4-display);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
}

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

.h4-cat-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-family: var(--h4-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.h4-cat-count svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform 0.15s ease;
}

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

.h4-populer {
    margin-top: 64px;
}

.h4-populer-title {
    margin: 0 0 18px;
    font-family: var(--h4-display);
    font-size: clamp(28px, 7.4cqw, 40px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
}

.h4-populer-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--h4-sec-edge);
}

.h4-populer-list li {
    border-bottom: 1px solid var(--h4-sec-edge);
}

.h4-populer-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 2px;
    color: var(--h4-sec-ink);
    font-family: var(--h4-text);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
}

.h4-populer-list a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

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

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

.h4-populer-list a:hover svg {
    transform: translateX(3px);
}

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

@media (min-width: 900px) {
    .h4-populer-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 48px;
        border-top: 0;
    }

    /* Dua kolom: garis atas tiap kolom di baris pertama saja. */
    .h4-populer-list li:nth-child(-n + 2) {
        border-top: 1px solid var(--h4-sec-edge);
    }
}

@media (min-width: 1024px) {
    .h4-bantuan-sec {
        padding-top: 72px;
    }

    .h4-cats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .h4-cat {
        padding: 22px;
    }

    .h4-populer {
        margin-top: 96px;
    }
}

/* ── Halaman kategori: judul dengan ikonnya, daftar artikel ──────────────── */

.h4-art-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.h4-art-hero .h4-chip {
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

.h4-art-hero .h4-chip svg {
    width: 28px;
    height: 28px;
}

.h4-art-sec {
    padding-top: 32px;
}

.h4-art-in {
    max-width: 860px;
}

/* Judul artikel = judul akordeon; <h2> di dalam <summary> mewarisi gayanya. */
.h4-faq-q > h2 {
    display: inline;
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
}

.h4-art {
    scroll-margin-top: calc(var(--h4-nav-h) + 16px);
}

/* Artikel yang dibuka lewat tautan (#id) berkedip sekali. */
.h4-art.is-target > .h4-faq-q {
    animation: h4-art-blink 1.4s ease 0.2s 1;
    border-radius: 8px;
}

@keyframes h4-art-blink {
    0%,
    100% {
        background: transparent;
    }

    30% {
        background: var(--h4-card);
    }
}

/* Langkah bernomor: angka dalam lingkaran di kiri. */
.h4-prose .h4-steps {
    counter-reset: h4-step;
    padding-left: 0;
    list-style: none;
}

.h4-steps > li {
    position: relative;
    padding-left: 42px;
    counter-increment: h4-step;
}

.h4-steps > li + li {
    margin-top: 0.75em;
}

.h4-steps > li::before {
    content: counter(h4-step);
    position: absolute;
    top: 0.15em;
    left: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--h4-sec-ink);
    color: var(--h4-sec-bg);
    font-family: var(--h4-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* Catatan: info (biru muda) dan peringatan (kuning). */
.h4-note {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--h4-blue-soft);
    color: var(--h4-ink);
    font-size: 16px;
    line-height: 1.6;
}

.h4-note > svg {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    fill: var(--h4-blue);
}

.h4-note > p {
    margin: 0;
}

.h4-note.is-warn {
    background: #fff3d6;
    color: #3d2a00;
}

.h4-note.is-warn > svg {
    fill: #a86a00;
}

.uc-dark .h4-note {
    background: rgba(143, 143, 245, 0.12);
    color: #ececff;
}

.uc-dark .h4-note > svg {
    fill: #b3b3ff;
}

.uc-dark .h4-note.is-warn {
    background: rgba(255, 184, 64, 0.12);
    color: #ffefcf;
}

.uc-dark .h4-note.is-warn > svg {
    fill: #ffc25c;
}

/* Tangkapan layar: desktop lebar + ponsel di sampingnya; di ponsel cukup
   tangkapan ponselnya. Diketuk = diperbesar (aj-h4-bantuan.js). */
.h4-shots {
    display: grid;
    gap: 12px;
    justify-items: center;
}

.h4-shot {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: var(--h4-card);
    box-shadow: inset 0 0 0 1px var(--h4-card-edge);
    cursor: zoom-in;
}

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

.h4-shot.is-mobile {
    width: min(100%, 240px);
}

.h4-shot.is-desktop {
    width: 100%;
}

.h4-shots.has-mobile .h4-shot.is-desktop {
    display: none;
}

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

@media (min-width: 640px) {
    .h4-shots.has-mobile {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.34fr);
        align-items: start;
    }

    .h4-shots.has-mobile .h4-shot.is-desktop {
        display: block;
    }

    .h4-shots .h4-shot.is-mobile {
        width: 100%;
    }

    .h4-shots:not(.has-desktop) {
        grid-template-columns: minmax(0, 240px);
        justify-content: start;
    }
}

/* Pembesar tangkapan layar (<dialog>). */
.h4-zoom {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.h4-zoom::backdrop {
    background: rgba(10, 10, 10, 0.88);
}

.h4-zoom-in {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 64px 16px 24px;
    cursor: zoom-out;
}

/* Batas ukurannya dari layar, bukan persen: tinggi baris grid-nya tak tentu. */
.h4-zoom img {
    display: block;
    max-width: min(calc(100vw - 32px), 1600px);
    max-height: calc(100dvh - 96px);
    width: auto;
    height: auto;
    border-radius: 12px;
    cursor: default;
}

.h4-zoom-close {
    position: fixed;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #0a0a0a;
    cursor: pointer;
}

.h4-zoom-close svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

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

/* Kategori lain: kapsul ke halaman kategori lainnya. */
.h4-lain {
    margin-top: 64px;
}

.h4-lain-title {
    margin: 0 0 16px;
    font-family: var(--h4-sub);
    font-size: 18px;
    font-stretch: 112%;
    font-weight: 600;
    line-height: 1.3;
}

.h4-lain-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h4-lain-list a {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 16px;
    border-radius: 9999px;
    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: 500;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.h4-lain-list a:hover {
    background: var(--h4-card);
}

.h4-lain-list a:focus-visible {
    outline: 2px solid var(--h4-sec-ink);
    outline-offset: 2px;
}

@media (min-width: 900px) {
    .h4-art-head {
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }

    .h4-art-hero .h4-chip {
        width: 72px;
        height: 72px;
        border-radius: 20px;
    }

    .h4-art-hero .h4-chip svg {
        width: 34px;
        height: 34px;
    }

    .h4-art-sec {
        padding-top: 56px;
    }

    .h4-lain {
        margin-top: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .h4-kontak-card,
    .h4-kontak-go svg,
    .h4-cat,
    .h4-cat-count svg,
    .h4-populer-list svg,
    .h4-lain-list a {
        transition: none;
    }

    .h4-art.is-target > .h4-faq-q {
        animation: none;
    }
}