/* ============================================================
   WEFLUENCE PUSAT BANTUAN, tata letak gaya iOS / Wise (28 Okt 2026)
   Disamakan dengan aplikasi: token warna di bawah = palet peran app
   (src/theme/palette.js), terang dan gelap. Font Source Sans 3
   (bawaan app), wordmark Inter 700 seperti components/Logo.js,
   ikon gaya SF Symbols (blog-tools/sf_glyphs.py, sumbernya SFIcon app).

   Tata bahasanya:
   - Halaman di atas kanvas abu tipis, isi dikelompokkan dalam kartu
     putih radius 16 bergaris 1px, label grup 13/600 abu di atasnya.
   - Berat huruf maksimal 600, 700 cuma buat judul halaman.
   - Biru cuma buat yang bisa diklik di tengah kalimat dan kolom yang
     lagi diisi. Tombol pintu (Buka aplikasi, Email) tinta.
   - Gerak cuma buat menjelaskan perubahan (chevron berputar, jawaban
     FAQ membuka). Tanpa animasi masuk.
   ============================================================ */

:root {
    color-scheme: light;

    /* permukaan */
    --canvas: #FAFAFA;
    --bg: #FFFFFF;
    --fill: #F2F2F2;
    --hover: #F4F4F4;
    --hover-soft: #FAFAFA;
    --press: #EAEAEA;

    /* garis */
    --line: #ECECEC;
    --line-strong: #E6E6E6;
    --line-soft: #F2F2F2;

    /* teks dan ikon */
    --ink: #171717;
    --body: #6B7075;
    --body-soft: #868B91;
    --muted: #9AA0A6;
    --faint: #C4C4C4;
    --logo: #0A0A0A;

    /* biru interaksi */
    --accent: #1A73E8;
    --accent-strong: #1557B0;
    --accent-text: #1A73E8;
    --accent-line: rgba(26, 115, 232, 0.35);

    /* tinta dibalik */
    --ink-fill: #171717;
    --ink-fill-hover: #000000;
    --on-ink-fill: #FFFFFF;

    /* makna */
    --danger: #DC2626;
    --good: #0A7C52;

    --shadow-pop: 0 18px 48px -18px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.05);
    --shadow-bar: 0 10px 30px -12px rgba(0, 0, 0, 0.24);

    --font: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mark: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

    --wrap: 1120px;
    --pad: 24px;
    --bar-h: 60px;
    --toc-w: 220px;
    --col-gap: 56px;
    --measure: 680px;
    --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Palet gelap app: hitam sejuk, permukaan yang lebih dekat ke mata lebih terang.
   Bawaannya TERANG; gelap cuma kalau pengunjung memilihnya lewat tombol tema
   (app.js menyetel data-theme="dark" di <html> dan mengingatnya). */
:root[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #08090C;
    --bg: #0D0F12;
    --fill: #15171B;
    --hover: #1B1E22;
    --hover-soft: #121418;
    --press: #22252A;
    --line: #212529;
    --line-strong: #25292E;
    --line-soft: #1A1D21;
    --ink: #EFF1F4;
    --body: #B8BEC6;
    --body-soft: #989EA6;
    --muted: #8E949C;
    --faint: #54585F;
    --logo: #EFF1F4;
    --accent-text: #8AB4F8;
    --accent-line: rgba(138, 180, 248, 0.4);
    --ink-fill: #EFF1F4;
    --ink-fill-hover: #FFFFFF;
    --on-ink-fill: #0D0F12;
    --danger: #F28B82;
    --good: #81C995;
    --shadow-pop: 0 18px 48px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.02);
    --shadow-bar: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
}

/* ---------- dasar ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--bar-h) + 20px);
    overflow-x: clip;
}

body {
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Halaman baca (artikel) putih polos seperti Apple Support / Wise Help: teks
   langsung di halaman, kotak cuma buat catatan, rumus dan tabel. Beranda tetap
   kanvas abu + kartu, karena itu halaman buat memilih, bukan membaca. */
body.page-article { --canvas: var(--bg); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

h1, h2, h3, h4 { font-weight: 600; color: var(--ink); line-height: 1.25; letter-spacing: -0.01em; }
p { margin-bottom: 16px; }
strong { font-weight: 600; }

.container, .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* Ikon SF inline: warnanya ikut teks. */
.sf { width: 22px; height: 22px; flex-shrink: 0; }

/* Glyph lewat CSS mask (dipakai di isi artikel yang ditulis alat, jadi
   markup-nya gak perlu nyimpen SVG). */
.note::before, .faq-toggle, .toc-mobile summary::after, .related-card::after,
.feedback-thanks::before {
    content: "";
    display: block;
    background-color: currentColor;
    -webkit-mask: var(--m) center / contain no-repeat;
    mask: var(--m) center / contain no-repeat;
}

/* ============================================================
   BILAH ATAS: seperti situs Apple / Wise / PayPal di HP. Logo di kiri,
   ikon tema polos + satu pil di kanan, tanpa tombol bulat bergaris.
   Garis tipis baru muncul setelah halaman digulir.
   ============================================================ */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--canvas) 86%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
}
.header.scrolled { border-bottom-color: var(--line); }
.nav-container {
    max-width: var(--wrap);
    margin: 0 auto;
    height: var(--bar-h);
    padding: 0 var(--pad);
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Tombol tema: ikon polos, bidang abu cuma waktu disentuh. Bulan = ganti ke
   gelap, matahari = ganti ke terang (ikonnya menunjukkan tujuan). */
.theme-toggle {
    width: 38px; height: 38px; border-radius: 19px; flex-shrink: 0;
    display: grid; place-items: center; padding: 0;
    background: transparent; border: 0; color: var(--ink);
    transition: background 150ms ease;
}
.theme-toggle:hover { background: var(--fill); }
.theme-toggle:active { background: var(--press); }
.theme-toggle .sf { width: 20px; height: 20px; }
.theme-toggle .ico-sun, :root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
.logo { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.logo-text {
    font-family: var(--font-mark);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.5px;
    color: var(--logo);
    line-height: 1;
}
.logo-badge { font-size: 16px; font-weight: 600; color: var(--muted); line-height: 1; white-space: nowrap; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-cta {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 16px; border-radius: 18px;
    background: var(--ink-fill); color: var(--on-ink-fill);
    font-size: 15px; font-weight: 600; white-space: nowrap;
    transition: background 150ms ease;
}
.nav-cta:hover { background: var(--ink-fill-hover); }
.nav-cta .sf { width: 15px; height: 15px; }

/* Progres baca: rel tinta tipis, informasi bukan hiasan. */
.read-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: var(--ink); z-index: 200;
}

/* ============================================================
   BERANDA
   ============================================================ */
.hero { padding: 56px 0 8px; text-align: center; }
.hero-title {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -1.2px;
    line-height: 1.06;
}
.hero-subtitle {
    font-size: 19px;
    line-height: 1.45;
    color: var(--body);
    max-width: 34em;
    margin: 14px auto 28px;
}

/* Kolom cari gaya Spotlight: putih, garis 1px, biru cuma waktu diisi. */
.search-container { position: relative; max-width: 600px; margin: 0 auto; text-align: left; }
.search-shell {
    display: flex; align-items: center; gap: 10px;
    height: 54px; padding: 0 12px 0 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 10px 30px -18px rgba(0, 0, 0, 0.22);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.search-shell:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.search-icon { color: var(--muted); display: flex; }
.search-icon .sf { width: 21px; height: 21px; }
.search-input {
    flex: 1; min-width: 0; height: 100%;
    border: 0; outline: 0; background: transparent;
    font-family: inherit; font-size: 17px; font-weight: 400; color: var(--ink);
}
.search-input::placeholder { color: var(--muted); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-clear {
    width: 30px; height: 30px; flex-shrink: 0; margin-right: -4px;
    display: grid; place-items: center; padding: 0;
    background: none; border: 0; color: var(--faint);
}
.search-clear[hidden], .search-kbd[hidden] { display: none; }
.search-clear svg { width: 19px; height: 19px; }
.search-clear:hover { color: var(--muted); }
.search-kbd {
    font-size: 13px; font-weight: 600; color: var(--muted);
    background: var(--fill); border-radius: 7px; padding: 2px 8px; line-height: 1.5;
}

/* Pintasan populer: pil abu, cuma teks. */
.hero-chips {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin: 18px auto 0; max-width: 820px;
}
.hero-chips a {
    display: inline-flex; align-items: center;
    height: 34px; padding: 0 14px; border-radius: 17px;
    background: var(--fill); color: var(--ink);
    font-size: 15px; font-weight: 500; white-space: nowrap;
    transition: background 150ms ease;
}
.hero-chips a:hover { background: var(--press); }

/* Bagian */
.section { padding: 44px 0 0; }
.section-head { margin: 0 4px 14px; }
.section-title { font-size: 24px; font-weight: 600; letter-spacing: -0.4px; }
.section-subtitle { font-size: 16px; color: var(--body); margin: 2px 0 0; }

/* Topik: kartu di desktop, baris grup di HP. */
.cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cat {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 18px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: background 150ms ease, border-color 150ms ease;
}
.cat:hover { background: var(--hover-soft); border-color: var(--line-strong); }
.cat-ico {
    width: 44px; height: 44px; border-radius: 22px;
    background: var(--fill); color: var(--ink);
    display: grid; place-items: center; margin-bottom: 10px;
}
.cat-ico .sf { width: 23px; height: 23px; }
.cat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cat-title { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.3; }
.cat-desc { font-size: 14.5px; line-height: 1.4; color: var(--body); }
.cat-count { font-size: 14px; color: var(--muted); margin-top: 6px; }
.cat-chev { display: none; }

/* Grup artikel: satu kartu putih berisi baris, dua kolom di layar lebar. */
.group { margin-bottom: 40px; scroll-margin-top: calc(var(--bar-h) + 16px); }
.group:last-child { margin-bottom: 0; }
.group-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    margin: 0 4px 12px;
}
.group-title { font-size: 22px; font-weight: 600; letter-spacing: -0.3px; }
.group-subtitle { font-size: 15.5px; color: var(--body); margin: 1px 0 0; line-height: 1.4; }
.group-tag { font-size: 14px; color: var(--muted); white-space: nowrap; padding-bottom: 2px; }

.articles {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}
.a-card {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    min-height: 74px; padding: 14px 16px;
    transition: background 150ms ease;
}
.a-card:hover { background: var(--hover-soft); }
.a-card:active { background: var(--hover); }
/* Garis pemisah mulai dari teks, bukan dari tepi kartu. */
.a-card:nth-child(n+3)::before {
    content: ""; position: absolute; top: 0; left: 66px; right: 0;
    height: 1px; background: var(--line-soft);
}
.a-card:nth-child(even) { box-shadow: inset 1px 0 0 var(--line-soft); }
/* Grup satu artikel gak nyisain setengah kartu kosong. */
.articles:has(> .a-card:only-child) { grid-template-columns: minmax(0, 1fr); }
.a-card-ico {
    width: 36px; height: 36px; border-radius: 18px; flex-shrink: 0;
    background: var(--fill); color: var(--ink);
    display: grid; place-items: center;
}
.a-card-ico .sf, .a-card-ico svg { width: 20px; height: 20px; }
.a-body { flex: 1; min-width: 0; }
.a-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.a-title { font-size: 16.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.3; }
.a-badge {
    display: inline-flex; align-items: center;
    height: 20px; padding: 0 7px; border-radius: 10px;
    background: var(--fill); color: var(--body);
    font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.a-badge.solid { color: var(--ink); }
.a-excerpt { font-size: 14.5px; line-height: 1.4; color: var(--body); margin: 2px 0 0; }
.a-arrow { flex-shrink: 0; color: var(--faint); display: flex; }
.a-arrow .sf { width: 15px; height: 15px; }

/* Pencarian tanpa hasil: lingkaran abu + judul + satu baris, seperti app. */
.search-none { text-align: center; padding: 28px 16px 8px; }
.search-none[hidden] { display: none; }
.search-none-ico {
    width: 56px; height: 56px; border-radius: 28px; margin: 0 auto 12px;
    background: var(--fill); color: var(--muted); display: grid; place-items: center;
}
.search-none-ico .sf { width: 26px; height: 26px; }
.search-none-title { font-size: 18px; font-weight: 600; letter-spacing: -0.2px; margin: 0 0 4px; }
.search-none-text { font-size: 15.5px; line-height: 1.5; color: var(--body); margin: 0 auto; max-width: 30em; }
.search-none-text a { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }

/* Segera hadir */
.soon {
    display: flex; align-items: flex-start; gap: 14px;
    margin-top: 12px; padding: 16px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
}
.soon .a-card-ico { margin-top: 2px; }
.soon-body { flex: 1; min-width: 0; }
.soon-body p { font-size: 15px; line-height: 1.45; color: var(--body); margin: 4px 0 0; }
.soon-body a { color: var(--accent-text); font-weight: 600; }
.soon-body a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* FAQ: satu kartu, baris dengan chevron yang berputar waktu dibuka. */
.faq-list {
    max-width: 760px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
    overflow: hidden;
}
.faq-item { position: relative; }
.faq-item + .faq-item::before {
    content: ""; position: absolute; top: 0; left: 16px; right: 0;
    height: 1px; background: var(--line-soft);
}
.faq-q {
    width: 100%; min-height: 58px; padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: none; border: 0; text-align: left;
    font-size: 16.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.35; color: var(--ink);
    transition: background 150ms ease;
}
.faq-q:hover { background: var(--hover-soft); }
.faq-toggle {
    --m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.1%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6.5 9.5 12 15l5.5-5.5%22/%3E%3C/svg%3E");
    width: 18px; height: 18px; flex-shrink: 0; color: var(--muted);
    transition: transform 260ms var(--ease);
}
.faq-item.open .faq-toggle { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease); }
.faq-a-inner { padding: 0 16px 16px; font-size: 16px; line-height: 1.55; color: var(--body); }
.faq-a-inner p { margin: 0; }
.faq-a-inner strong { color: var(--ink); }
.faq-a-inner a { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.faq-a code { font-family: var(--mono); font-size: 0.86em; background: var(--fill); padding: 2px 6px; border-radius: 6px; color: var(--ink); }

/* Masih bingung: kartu putih biasa, tombol pintu tinta. */
.cta { padding: 44px 0 8px; }
.cta-box {
    display: flex; align-items: center; gap: 16px;
    padding: 20px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
}
.cta-ico {
    width: 48px; height: 48px; border-radius: 24px; flex-shrink: 0;
    background: var(--fill); color: var(--ink); display: grid; place-items: center;
}
.cta-ico .sf { width: 24px; height: 24px; }
.cta-text { flex: 1; min-width: 0; }
.cta-box h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.3px; }
.cta-box p { font-size: 15.5px; line-height: 1.45; color: var(--body); margin: 2px 0 0; }
.cta-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 18px; border-radius: 20px; flex-shrink: 0;
    background: var(--ink-fill); color: var(--on-ink-fill);
    font-size: 15px; font-weight: 600; white-space: nowrap;
    transition: background 150ms ease;
}
.cta-btn:hover { background: var(--ink-fill-hover); }
.cta-btn .sf { width: 17px; height: 17px; }

/* Kaki halaman */
.footer { margin-top: 56px; padding: 32px 0 40px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer-brand .logo-text { font-size: 18px; }
.footer-tag { font-size: 15px; line-height: 1.5; color: var(--body); margin: 10px 0 0; max-width: 30em; }
.footer-col h4 { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; letter-spacing: 0; }
.footer-col a { display: block; font-size: 15px; color: var(--body); padding: 5px 0; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-soft);
    font-size: 14px; color: var(--muted);
}
.footer-bottom p { margin: 0; }
.footer-bottom a:hover { color: var(--ink); }
.footer-slim { margin-top: 0; padding-top: 0; border-top: 0; }
.footer-article { margin-top: 0; padding: 0 0 30px; border-top: 0; }
.footer-article .footer-slim { padding-top: 18px; border-top: 1px solid var(--line-soft); }
/* Masih butuh bantuan: pengganti bilah bantuan mengambang, seperti
   "Butuh bantuan lainnya?" di ujung artikel Apple Support. */
.help-more { padding: 26px 0 30px; border-top: 1px solid var(--line); }
.help-more-title { font-size: 19px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.3; margin: 0 0 4px; }
.help-more-text { font-size: 16px; line-height: 1.55; color: var(--body); margin: 0; max-width: var(--measure); }
.help-more-text a { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
@media (min-width: 981px) {
    .footer-article .help-more { margin-left: calc(var(--toc-w) + var(--col-gap)); }
}

/* ============================================================
   ARTIKEL
   ============================================================ */
.article-hero { padding: 28px 0 4px; }
.article-crumbs { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.article-chip {
    width: 44px; height: 44px; border-radius: 22px; flex-shrink: 0;
    background: var(--fill); color: var(--ink);
    display: grid; place-items: center;
}
.article-chip .sf { width: 23px; height: 23px; }
.breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    font-size: 15px; font-weight: 500; color: var(--body); line-height: 1.3;
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb-sep { color: var(--faint); }
/* Remah terakhir = judul di bawahnya, jadi gak diulang. */
.breadcrumb > span:last-child, .breadcrumb > .breadcrumb-sep:nth-last-child(2) { display: none; }
/* Kicker tetap di HTML buat build_md.py (kategori .md), tampilannya diwakili remah. */
.article-kicker { display: none; }
.article-title {
    font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1.1;
    max-width: 22em;
}
.article-lede {
    font-size: 19px; line-height: 1.5; color: var(--body);
    max-width: var(--measure); margin: 12px 0 0;
}
.article-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-top: 14px; font-size: 14.5px; color: var(--muted);
}
.article-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.article-meta-item .sf { width: 15px; height: 15px; }
.article-meta-item + .article-meta-item::before { content: "·"; margin-right: 6px; color: var(--faint); }
.article-hero-ill { display: none; }
/* Di desktop kepala artikel sejajar kolom isi, bukan kolom daftar isi. */
@media (min-width: 981px) {
    .article-hero .container { padding-left: calc(var(--pad) + var(--toc-w) + var(--col-gap)); }
}

/* Dua kolom di desktop: daftar isi lengket + isi. */
.article-layout {
    display: grid;
    grid-template-columns: var(--toc-w) minmax(0, 1fr);
    gap: var(--col-gap);
    padding: 28px 0 56px;
}
.article-main { min-width: 0; max-width: var(--measure); }

/* Daftar isi: baris bilah samping gaya iPadOS, terpilih = pil abu. */
.toc {
    position: sticky; top: calc(var(--bar-h) + 20px); align-self: start;
    max-height: calc(100vh - var(--bar-h) - 40px); overflow: auto;
    margin-left: -10px;
}
.toc-label { font-size: 13.5px; font-weight: 600; color: var(--muted); margin: 0 10px 6px; }
.toc a {
    display: block; padding: 7px 10px; border-radius: 9px;
    font-size: 15px; line-height: 1.35; color: var(--body);
    transition: background 150ms ease, color 150ms ease;
}
.toc a:hover { background: var(--hover); color: var(--ink); }
.toc a.active { background: var(--press); color: var(--ink); font-weight: 600; }

/* Isi */
.prose { min-width: 0; font-size: 17.5px; line-height: 1.65; color: var(--ink); overflow-wrap: break-word; }
.prose p { margin-bottom: 18px; }
.prose h2 {
    font-size: 25px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.25;
    margin: 48px 0 14px; scroll-margin-top: calc(var(--bar-h) + 20px);
}
.prose h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.2px; margin: 28px 0 8px; scroll-margin-top: calc(var(--bar-h) + 20px); }
.prose h4 { font-size: 17.5px; font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 1.3em; }
.prose li { margin-bottom: 7px; padding-left: 3px; }
.prose li::marker { color: var(--muted); }
.prose a:not(.related-card):not(.btn-app) {
    color: var(--accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--accent-line);
    text-underline-offset: 3px;
}
.prose a:not(.related-card):not(.btn-app):hover { text-decoration-color: currentColor; }
.prose code {
    font-family: var(--mono); font-size: 0.86em;
    background: var(--fill); padding: 2px 6px; border-radius: 6px;
}
.prose strong { color: var(--ink); }
.prose dfn { font-style: normal; }
/* Entri glosarium (<p><strong><dfn>): seperti daftar kamus iOS. */
.prose p:has(> strong:first-child > dfn) {
    margin: 0; padding: 13px 0 14px;
    border-top: 1px solid var(--line-soft);
    font-size: 16.5px; line-height: 1.55; color: var(--body);
}
.prose p:has(> strong:first-child > dfn) > strong:first-child { display: block; font-size: 17.5px; letter-spacing: -0.2px; margin-bottom: 2px; }
.prose h2 + p:has(> strong:first-child > dfn) { border-top: 0; padding-top: 2px; }

/* Jawaban singkat: isinya hampir sama dengan lede di atasnya, jadi di layar
   cuma bikin pengantar dobel. Tetap ada di HTML buat Google, mesin jawaban AI
   dan build_md (.md / llms-full), tapi gak ditampilkan. Apple Support juga
   cuma punya satu paragraf pembuka. */
.tldr { display: none; }

/* Langkah bernomor ala pelacak transfer Wise, langsung di halaman. */
.steps {
    list-style: none; counter-reset: step;
    margin: 22px 0 26px; padding: 0;
}
.prose ol.steps { padding-left: 0; }
.steps > li {
    position: relative; counter-increment: step;
    margin: 0; padding: 0 0 22px 42px;
    font-size: 16.5px; line-height: 1.55; color: var(--body);
}
.steps > li::marker { content: none; }
.steps > li::before {
    content: counter(step);
    position: absolute; left: 0; top: -1px;
    width: 26px; height: 26px; border-radius: 13px;
    background: var(--ink-fill); color: var(--on-ink-fill);
    display: grid; place-items: center;
    font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.steps > li::after {
    content: ""; position: absolute; left: 12px; top: 29px; bottom: 3px;
    width: 2px; border-radius: 1px; background: var(--line);
}
.steps > li:last-child::after { display: none; }
/* Cuma tebal pertama = judul langkah; tebal di tengah kalimat tetap sebaris. */
.steps > li strong { color: var(--ink); }
.steps > li > strong:first-child { display: block; font-size: 17px; margin-bottom: 1px; }

/* Catatan: bidang abu lembut + glyph, tanpa garis tepi dan tanpa warna. */
.note {
    --m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.2%22 y=%223.2%22 width=%2217.6%22 height=%2217.6%22 rx=%228.8%22/%3E%3Cpath d=%22M12 11v5.4%22 stroke-width=%221.9%22/%3E%3Crect x=%2211.05%22 y=%227%22 width=%221.9%22 height=%221.9%22 rx=%220.95%22 fill=%22black%22 stroke=%22none%22/%3E%3C/svg%3E");
    position: relative;
    margin: 24px 0; padding: 15px 18px 15px 50px;
    background: var(--fill); border-radius: 14px;
    color: var(--ink);
}
.note::before { position: absolute; left: 17px; top: 16px; width: 21px; height: 21px; }
.note-title { font-size: 17px; font-weight: 600; line-height: 1.4; margin-bottom: 2px; color: var(--ink); }
.note p { font-size: 16px; line-height: 1.55; color: var(--body); margin-bottom: 8px; }
.note p:last-child, .note ul:last-child { margin-bottom: 0; }
.note ul, .note ol { font-size: 16px; color: var(--body); }
.note strong { color: var(--ink); }
/* Intinya: bidang abu yang sama, glyph bohlam. */
.note.invert {
    --m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3c-3.6 0-6.2 2.7-6.2 6 0 2.2 1.1 3.7 2.3 4.9.8.8 1.2 1.6 1.2 2.6v.6h5.4v-.6c0-1 .4-1.8 1.2-2.6 1.2-1.2 2.3-2.7 2.3-4.9 0-3.3-2.6-6-6.2-6z%22/%3E%3Cpath d=%22M9.6 19.4h4.8M10.4 21.6h3.2%22/%3E%3C/svg%3E");
}
/* Dua catatan berurutan = satu grup dengan garis tipis di antaranya, bukan
   dua kotak terpisah (gaya daftar berkelompok iOS). */
.note:has(+ .note) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.note + .note { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: inset 0 1px 0 var(--bg); }
/* Hati-hati: glyph segitiga, tetap tinta (tingkat tengah gak dapat warna). */
.note.warn {
    --m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10.3 4.1c.75-1.3 2.65-1.3 3.4 0l7.1 12.4c.75 1.3-.2 2.9-1.7 2.9H4.9c-1.5 0-2.45-1.6-1.7-2.9z%22/%3E%3Cpath d=%22M12 9.2v4.3%22 stroke-width=%221.9%22/%3E%3Crect x=%2211.05%22 y=%2215.6%22 width=%221.9%22 height=%221.9%22 rx=%220.95%22 fill=%22black%22 stroke=%22none%22/%3E%3C/svg%3E");
}

/* Rumus: bidang abu lembut, huruf mono. */
.formula {
    font-family: var(--mono); font-size: 15px; line-height: 1.65; color: var(--ink);
    background: var(--fill); border: 0; border-radius: 14px;
    padding: 15px 18px; margin: 20px 0; overflow-x: auto;
}
.formula b { font-weight: 600; }

/* Tabel: kartu grup iOS, kepala abu kecil, pemisah tipis. */
.tbl-wrap {
    margin: 24px 0; overflow-x: auto;
    background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
}
table.tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
table.tbl th {
    text-align: left; vertical-align: bottom;
    padding: 12px 16px 8px; font-size: 13.5px; font-weight: 600; color: var(--muted);
    border-bottom: 1px solid var(--line-soft);
}
table.tbl td { padding: 12px 16px; vertical-align: top; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
table.tbl td:first-child { font-weight: 600; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl th:first-child, table.tbl td:first-child { padding-left: 18px; }
/* Tabel 2-3 kolom muat di HP; kalau suatu hari ada 4 kolom, digeser di dalam kartunya. */
table.tbl:has(tr > :nth-child(4)) { min-width: 560px; }
table.tbl.fit { min-width: 0; }

/* Kartu definisi */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 20px 0; }
.card { background: var(--fill); border-radius: 14px; padding: 15px 18px 16px; }
.card h4 { font-size: 17px; font-weight: 600; margin-bottom: 3px; letter-spacing: -0.2px; }
.card p { font-size: 15.5px; line-height: 1.5; color: var(--body); margin: 0; }

/* Kebantu gak: baris polos di bawah garis tipis, kapsul abu kecil di kanan. */
.feedback {
    margin-top: 48px; padding-top: 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border-top: 1px solid var(--line);
}
.feedback-q { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }
.feedback-btns { display: flex; gap: 8px; flex-shrink: 0; }
.feedback-btn {
    height: 36px; padding: 0 16px; border-radius: 18px; border: 0;
    background: var(--fill); color: var(--ink);
    font-size: 15px; font-weight: 600; white-space: nowrap;
    transition: background 150ms ease, color 150ms ease;
}
.feedback-btn:hover { background: var(--press); }
.feedback-btn.picked { background: var(--ink-fill); color: var(--on-ink-fill); }
.feedback-thanks {
    --m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12.6l4.4 4.4L19 7.4%22/%3E%3C/svg%3E");
    display: none; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 500; color: var(--ink); min-height: 36px;
}
.feedback-thanks::before { width: 20px; height: 20px; flex-shrink: 0; color: var(--good); }
.feedback-thanks.is-unclear { align-items: flex-start; color: var(--body); line-height: 1.55; }
.feedback-thanks.is-unclear::before { display: none; }
.feedback-thanks a { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.feedback.done .feedback-btns, .feedback.done .feedback-q { display: none; }
.feedback.done .feedback-thanks { display: flex; }

/* Lanjut ke sini: judul kecil + daftar polos bergaris tipis, seperti
   "Artikel terkait" di Wise. */
.related { margin-top: 40px; }
.related-title { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.3px; margin: 0 0 4px; line-height: 1.3; }
.related-grid { display: flex; flex-direction: column; }
.related-card {
    --m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9.5 5.5 16 12l-6.5 6.5%22/%3E%3C/svg%3E");
    position: relative;
    display: flex; flex-direction: column; justify-content: center;
    min-height: 60px; padding: 12px 32px 12px 0;
}
.related-card:hover .related-card-title { color: var(--accent-text); }
.related-card + .related-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    height: 1px; background: var(--line-soft);
}
.related-card::after {
    position: absolute; right: 2px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px;
    color: var(--faint);
}
.related-card-title { order: -1; font-size: 16.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.35; color: var(--ink); }
.related-kicker { font-size: 14px; color: var(--body); line-height: 1.35; margin-top: 1px; }

/* Daftar isi versi HP/tablet: kartu yang bisa dibuka. */
.toc-mobile { display: none; }

/* FAQ di dalam artikel (dibangun app.js dari h3): baris polos bergaris
   tipis seperti daftar isi, chevron berputar, tinggi jawaban dianimasikan. */
.prose .faq-inline {
    max-width: none; margin: 8px 0 28px;
    background: none; border: 0; border-radius: 0; overflow: visible;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.prose .faq-h { margin: 0; font-size: inherit; letter-spacing: inherit; line-height: inherit; }
.faq-inline .faq-item + .faq-item::before { left: 0; }
.faq-inline .faq-q { padding: 15px 0; min-height: 56px; font-size: 17px; }
.faq-inline .faq-q:hover { background: none; }
.faq-inline .faq-q:hover > span:first-child { color: var(--accent-text); }
.faq-inline .faq-a-inner { padding: 0 28px 18px 0; font-size: 16.5px; line-height: 1.6; }
.faq-inline .faq-a-inner p { margin: 0; }
.faq-inline .faq-a-inner p + p, .faq-inline .faq-a-inner ul, .faq-inline .faq-a-inner ol { margin-top: 10px; }

/* Tombol Bagikan di baris meta kepala artikel. */
.article-share {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 13px 0 11px; border-radius: 16px; border: 0;
    background: var(--fill); color: var(--ink);
    font-size: 14.5px; font-weight: 600; white-space: nowrap;
    transition: background 150ms ease;
}
.article-share:hover { background: var(--press); }
.article-share .sf { width: 16px; height: 16px; }

/* Pintu ke halaman app dari dalam artikel: kapsul tinta + panah keluar. */
.prose .app-open { margin: 6px 0 26px; }
.prose a.btn-app {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 20px; border-radius: 22px;
    background: var(--ink-fill); color: var(--on-ink-fill);
    font-size: 16px; font-weight: 600; text-decoration: none;
    transition: background 150ms ease;
}
.prose a.btn-app:hover { background: var(--ink-fill-hover); }
.prose a.btn-app::after {
    content: ""; width: 15px; height: 15px; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7.6 16.4 16.4 7.6M9.6 7.6h6.8v6.8%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7.6 16.4 16.4 7.6M9.6 7.6h6.8v6.8%22/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Toast: kapsul tinta satu baris di bawah layar, muncul sebentar. */
.toast {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 300;
    transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
    display: flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 22px;
    background: var(--ink-fill); color: var(--on-ink-fill);
    font-size: 15px; font-weight: 600; white-space: nowrap;
    box-shadow: var(--shadow-bar);
    transition: opacity 200ms ease, transform 280ms var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   DROPDOWN HASIL CARI
   ============================================================ */
.search-results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 120;
    background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.search-results.active { opacity: 1; visibility: visible; transform: none; }
.search-results-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px; font-size: 13.5px; color: var(--muted);
    border-bottom: 1px solid var(--line-soft);
}
.search-results-list { max-height: 380px; overflow-y: auto; }
.sr-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.sr-item + .sr-item::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; height: 1px; background: var(--line-soft); }
.sr-item.selected, .sr-item:hover { background: var(--hover); }
.sr-ico { width: 32px; height: 32px; border-radius: 16px; flex-shrink: 0; background: var(--fill); color: var(--ink); display: grid; place-items: center; }
.sr-ico svg { width: 18px; height: 18px; }
.sr-text { flex: 1; min-width: 0; }
.sr-cat, .sr-title, .sr-excerpt { display: block; }
.sr-cat { font-size: 13px; color: var(--muted); line-height: 1.3; }
.sr-title { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; }
.sr-excerpt { font-size: 14px; color: var(--body); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-item mark { background: none; color: var(--ink); font-weight: 600; }
.sr-arrow { color: var(--faint); display: flex; flex-shrink: 0; }
.sr-arrow svg { width: 14px; height: 14px; }
.search-empty { padding: 16px; color: var(--body); font-size: 15.5px; line-height: 1.5; }
.search-empty strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   TOMBOL KE ATAS, LEWATI KE ISI, BILAH BANTUAN HP
   ============================================================ */
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink-fill); color: var(--on-ink-fill); padding: 10px 16px; border-radius: 12px; z-index: 300; }
.skip-link:focus { left: 8px; }
.to-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 90;
    width: 44px; height: 44px; border-radius: 22px;
    display: grid; place-items: center;
    background: var(--bg); color: var(--ink); border: 1px solid var(--line);
    box-shadow: var(--shadow-bar);
    opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 200ms;
}
.to-top.visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--hover); }
.to-top .sf { width: 20px; height: 20px; }

/* ============================================================
   TABLET (<= 980px): daftar isi pindah jadi kartu di atas isi
   ============================================================ */
@media (max-width: 980px) {
    .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .article-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 20px; }
    .article-main { max-width: none; }
    .toc { display: none; }

    .toc-mobile {
        --m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.1%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6.5 9.5 12 15l5.5-5.5%22/%3E%3C/svg%3E");
        display: block; margin: 0 0 22px;
        border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    }
    .toc-mobile.is-short { display: none; }
    .toc-mobile summary {
        list-style: none; cursor: pointer;
        display: flex; align-items: center; justify-content: space-between;
        min-height: 50px; padding: 0;
        font-size: 16px; font-weight: 600; letter-spacing: -0.2px;
    }
    .toc-mobile summary::-webkit-details-marker { display: none; }
    .toc-mobile summary::after { width: 16px; height: 16px; color: var(--muted); transition: transform 260ms var(--ease); }
    .toc-mobile[open] summary::after { transform: rotate(180deg); }
    .toc-mobile nav { border-top: 1px solid var(--line-soft); padding: 2px 0 6px; }
    .toc-mobile a { position: relative; display: block; padding: 10px 0; font-size: 16px; line-height: 1.35; color: var(--body); }
    .toc-mobile a + a::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-soft); }
    .toc-mobile a:active { background: var(--hover); }
}

/* ============================================================
   HP (<= 640px): judul besar rata kiri, daftar bertumpuk,
   bilah bantuan mengambang dalam jangkauan jempol.
   ============================================================ */
@media (max-width: 640px) {
    :root { --pad: 20px; --bar-h: 52px; }
    body { font-size: 17px; }

    .logo-text { font-size: 18px; }
    .logo-badge { font-size: 15px; }
    .nav-cta { height: 32px; padding: 0 13px; border-radius: 16px; font-size: 14.5px; }
    .nav-cta .sf { display: none; }
    .theme-toggle { width: 36px; height: 36px; border-radius: 18px; }
    .theme-toggle .sf { width: 19px; height: 19px; }

    .hero { padding: 18px 0 0; text-align: left; }
    .hero-title { font-size: 32px; letter-spacing: -0.7px; line-height: 1.1; }
    .hero-subtitle { font-size: 16.5px; margin: 8px 0 18px; }
    .search-shell { height: 48px; border-radius: 14px; padding: 0 12px 0 14px; }
    .search-input { font-size: 17px; }
    .search-kbd { display: none; }
    /* Pintasan jadi satu baris geser, menembus tepi layar. */
    .hero-chips {
        flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
        margin: 12px calc(var(--pad) * -1) 0; padding: 0 var(--pad);
        scrollbar-width: none; max-width: none;
    }
    .hero-chips::-webkit-scrollbar { display: none; }

    .section { padding-top: 32px; }
    .section-title { font-size: 22px; }

    .cats {
        grid-template-columns: minmax(0, 1fr); gap: 0;
        background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
    }
    .cat {
        position: relative; flex-direction: row; align-items: center; gap: 12px;
        min-height: 60px; padding: 10px 16px;
        border: 0; border-radius: 0; background: none;
    }
    .cat:active { background: var(--hover); }
    .cat + .cat::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--line-soft); }
    .cat-ico { width: 36px; height: 36px; border-radius: 18px; margin: 0; }
    .cat-ico .sf { width: 20px; height: 20px; }
    .cat-text { flex: 1; }
    .cat-title { font-size: 17px; }
    .cat-desc { display: none; }
    /* Hitungan cuma angka, seperti jumlah di folder Mail iPhone. */
    .cat-count { margin: 0; font-size: 16px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .cat-unit { display: none; }
    .cat-chev { display: flex; color: var(--faint); }
    .cat-chev .sf { width: 14px; height: 14px; }

    .group { margin-bottom: 30px; }
    .group-head { margin-bottom: 8px; }
    .group-title { font-size: 20px; }
    .group-subtitle { font-size: 15px; }
    .group-tag { display: none; }
    .articles { grid-template-columns: minmax(0, 1fr); }
    .a-card { min-height: 66px; padding: 12px 16px; gap: 12px; align-items: flex-start; }
    .a-card-ico { margin-top: 1px; }
    .a-arrow { align-self: center; }
    .a-card:nth-child(n+2)::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--line-soft); }
    .a-card:nth-child(even) { box-shadow: none; }
    .a-title { font-size: 16.5px; }
    .a-excerpt { font-size: 14.5px; }

    .faq-q { font-size: 16.5px; }
    .cta-box { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
    .cta-btn { width: 100%; height: 48px; border-radius: 24px; font-size: 16px; }

    .footer { margin-top: 44px; padding: 26px 0 32px; }
    .footer-article { margin-top: 0; padding: 0 0 28px; }
    .help-more { padding: 24px 0 26px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }

    .article-hero { padding-top: 20px; }
    .article-crumbs { margin-bottom: 12px; }
    /* Di HP ikon kepala disembunyikan: satu benda lebih sedikit sebelum judul. */
    .article-chip { display: none; }
    .breadcrumb { font-size: 14.5px; }
    .article-title { font-size: 30px; letter-spacing: -0.6px; line-height: 1.14; }
    .article-lede { font-size: 17px; margin-top: 10px; }
    .article-meta { font-size: 14px; margin-top: 12px; }
    .article-share { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 17px; }
    .article-share span { display: none; }
    .article-share .sf { width: 17px; height: 17px; }
    .prose a.btn-app { display: flex; width: 100%; height: 48px; border-radius: 24px; }
    .faq-inline .faq-q { font-size: 16.5px; }
    .faq-inline .faq-a-inner { font-size: 16px; padding-right: 8px; }
    .article-layout { padding: 24px 0 40px; }

    .prose { font-size: 17px; line-height: 1.6; }
    .prose h2 { font-size: 22px; margin-top: 42px; }
    .prose h3 { font-size: 19px; }
    .tldr { font-size: 16.5px; padding: 14px 16px; margin-bottom: 24px; }
    .steps > li { padding-left: 40px; font-size: 16px; }
    .steps > li > strong:first-child { font-size: 16.5px; }
    .note { padding: 13px 16px 13px 46px; }
    .note::before { left: 15px; top: 15px; width: 20px; height: 20px; }
    .note-title { font-size: 16.5px; }
    .note p, .note ul, .note ol { font-size: 15.5px; }
    table.tbl { font-size: 15px; }
    table.tbl th, table.tbl td { padding-left: 14px; padding-right: 14px; }
    table.tbl th:first-child, table.tbl td:first-child { padding-left: 16px; }
    table.tbl:has(tr > :nth-child(3)) { font-size: 14.5px; }
    table.tbl:has(tr > :nth-child(3)) th, table.tbl:has(tr > :nth-child(3)) td { padding-left: 10px; padding-right: 10px; }
    table.tbl:has(tr > :nth-child(3)) th:first-child, table.tbl:has(tr > :nth-child(3)) td:first-child { padding-left: 14px; }
    table.tbl td { hyphens: auto; }
    .card p { font-size: 15px; }

    .feedback { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 40px; }
    .feedback-btns { gap: 8px; }
    .feedback-btn { flex: 1 1 0; height: 44px; border-radius: 22px; font-size: 16px; }
    .feedback-thanks { justify-content: flex-start; }
    .related { margin-top: 36px; }

    .to-top { display: none; }

}

/* ============================================================
   GERAK DAN CETAK
   ============================================================ */
@media (max-width: 380px) {
    .logo-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
    .header, .toc, .toc-mobile, .to-top, .feedback, .read-progress, .search-results, .related { display: none !important; }
    body { background: #fff; color: #000; }
    .article-layout { grid-template-columns: minmax(0, 1fr); }
}