/*!
 * INDOSMM MATRIX — sistem desain
 * Navy & charcoal sebagai dasar, biru elektrik untuk aksi, cyan untuk sinyal/status.
 * Satu keluarga huruf: Plus Jakarta Sans (OFL) — dirancang untuk identitas kota Jakarta.
 */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Palet inti */
    --mx-ink: #0A1730;        /* navy gelap: latar publik, sidebar */
    --mx-ink-2: #12223F;      /* panel di atas navy */
    --mx-ink-line: #233759;   /* garis di atas navy */
    --mx-charcoal: #1C2433;   /* teks utama di latar terang */
    --mx-volt: #2F6BFF;       /* biru elektrik: aksi utama */
    --mx-volt-deep: #1F4FD6;
    --mx-signal: #22D3EE;     /* cyan: sinyal, fokus, data hidup */
    --mx-paper: #F3F6FB;      /* latar dashboard */
    --mx-surface: #FFFFFF;
    --mx-line: #DDE3EE;
    --mx-muted: #5A6880;
    --mx-muted-on-ink: #9FB0CC;

    /* Status (kontras ≥ 4.5:1 di atas latar tint masing-masing) */
    --mx-ok: #0F7A45;      --mx-ok-bg: #E3F6EC;
    --mx-wait: #8A5A00;    --mx-wait-bg: #FFF3D6;
    --mx-run: #1F4FD6;     --mx-run-bg: #E6EEFF;
    --mx-bad: #B42318;     --mx-bad-bg: #FDE8E6;
    --mx-part: #6B3FA0;    --mx-part-bg: #F1E9FB;
    --mx-idle: #475467;    --mx-idle-bg: #EEF1F6;

    /* Tipografi — skala 1.25 */
    --mx-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mx-t-xs: .75rem;  --mx-t-sm: .875rem; --mx-t-md: 1rem;    --mx-t-lg: 1.25rem;
    --mx-t-xl: 1.5625rem; --mx-t-2xl: 1.953rem; --mx-t-3xl: 2.441rem; --mx-t-4xl: 3.052rem;

    /* Bentuk — radius mengikuti hierarki, bukan satu nilai untuk semua */
    --mx-r-panel: 16px;
    --mx-r-control: 10px;
    --mx-r-chip: 999px;
    --mx-gap: clamp(16px, 2.2vw, 28px);
    --mx-ease: cubic-bezier(.2, .7, .2, 1);
    --mx-focus: 0 0 0 3px rgba(34, 211, 238, .55);
}

/* ------------------------------------------------------------------ Dasar */
.mx, .mx body { font-family: var(--mx-font); }
.mx body {
    margin: 0;
    color: var(--mx-charcoal);
    background: var(--mx-paper);
    font-size: var(--mx-t-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "tnum" 0;
}
.mx h1, .mx h2, .mx h3, .mx h4, .mx h5, .mx h6 { font-family: var(--mx-font); letter-spacing: -.015em; line-height: 1.2; color: inherit; }
.mx .num, .mx td, .mx .mx-stat__value { font-variant-numeric: tabular-nums; }
.mx a { color: var(--mx-volt); text-underline-offset: 3px; }
.mx :focus-visible { outline: none; box-shadow: var(--mx-focus); border-radius: 6px; }
.mx .visually-hidden-focusable:focus { position: fixed; top: 12px; left: 12px; z-index: 2000; background: var(--mx-surface); padding: 10px 16px; border-radius: var(--mx-r-control); }
.mx-wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
@media (prefers-reduced-motion: reduce) {
    .mx *, .mx *::before, .mx *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ Tombol */
.mx-btn {
    --b-bg: var(--mx-volt); --b-fg: #fff; --b-bd: var(--mx-volt);
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 44px; padding: .6em 1.15em; border-radius: var(--mx-r-control);
    border: 1px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg);
    font: 600 var(--mx-t-sm)/1.2 var(--mx-font); text-decoration: none; cursor: pointer;
    transition: background-color .15s var(--mx-ease), border-color .15s var(--mx-ease), transform .1s var(--mx-ease);
}
.mx-btn:hover { --b-bg: var(--mx-volt-deep); --b-bd: var(--mx-volt-deep); color: #fff; }
.mx-btn:active { transform: translateY(1px); }
.mx-btn[disabled], .mx-btn.is-loading { opacity: .65; pointer-events: none; }
.mx-btn.is-loading::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: mx-spin .7s linear infinite; }
.mx-btn--ghost { --b-bg: transparent; --b-fg: var(--mx-charcoal); --b-bd: var(--mx-line); }
.mx-btn--ghost:hover { --b-bg: var(--mx-surface); --b-bd: var(--mx-volt); color: var(--mx-volt); }
.mx-btn--on-ink { --b-bg: transparent; --b-fg: #fff; --b-bd: var(--mx-ink-line); }
.mx-btn--on-ink:hover { --b-bg: var(--mx-ink-2); --b-bd: var(--mx-signal); }
.mx-btn--danger { --b-bg: var(--mx-bad); --b-bd: var(--mx-bad); }
.mx-btn--sm { min-height: 36px; padding: .4em .85em; font-size: var(--mx-t-xs); }
.mx-btn--block { width: 100%; }
@keyframes mx-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ Form */
.mx-field { display: grid; gap: 6px; margin-bottom: 18px; }
.mx-field > label, .mx-label { font-weight: 600; font-size: var(--mx-t-sm); color: var(--mx-charcoal); }
.mx-hint { font-size: var(--mx-t-xs); color: var(--mx-muted); }
.mx-input, .mx-field input:not([type=checkbox]):not([type=radio]), .mx-field select, .mx-field textarea {
    width: 100%; min-height: 44px; padding: .6em .85em; border-radius: var(--mx-r-control);
    border: 1px solid var(--mx-line); background: var(--mx-surface); color: var(--mx-charcoal);
    font: 500 var(--mx-t-md)/1.4 var(--mx-font);
    transition: border-color .15s, box-shadow .15s;
}
.mx-input:focus, .mx-field input:focus, .mx-field select:focus, .mx-field textarea:focus { outline: none; border-color: var(--mx-volt); box-shadow: 0 0 0 3px rgba(47, 107, 255, .18); }
.mx-field .is-invalid, .mx-input.is-invalid { border-color: var(--mx-bad); }
.mx-error { color: var(--mx-bad); font-size: var(--mx-t-xs); font-weight: 600; }
.mx-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--mx-t-sm); }
.mx-check input { width: 18px; height: 18px; accent-color: var(--mx-volt); margin-top: 2px; }

/* ------------------------------------------------------------------ Panel, statistik */
.mx-panel { background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: var(--mx-r-panel); padding: clamp(16px, 2vw, 24px); }
.mx-panel__head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mx-panel__title { font-size: var(--mx-t-lg); font-weight: 700; margin: 0; }
.mx-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.mx-stat { background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: var(--mx-r-control); padding: 14px 16px; }
.mx-stat__label { font-size: var(--mx-t-sm); color: var(--mx-muted); }
.mx-stat__value { font-size: var(--mx-t-xl); font-weight: 700; letter-spacing: -.02em; }

/* Kartu saldo: satu-satunya elemen berwarna penuh di dashboard */
.mx-wallet { position: relative; overflow: hidden; color: #fff; background: var(--mx-ink); border-radius: var(--mx-r-panel); padding: 22px 24px; }
.mx-wallet::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(34, 211, 238, .22) 1px, transparent 1px); background-size: 14px 14px; mask-image: linear-gradient(105deg, transparent 45%, #000); pointer-events: none; }
.mx-wallet__label { color: var(--mx-muted-on-ink); font-size: var(--mx-t-sm); }
.mx-wallet__value { font-size: var(--mx-t-3xl); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 4px 0 16px; }
.mx-wallet .mx-btn { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ Status pesanan */
.mx-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--mx-r-chip); font-size: var(--mx-t-xs); font-weight: 700; white-space: nowrap; }
.mx-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mx-status--completed { color: var(--mx-ok); background: var(--mx-ok-bg); }
.mx-status--pending, .mx-status--awaiting { color: var(--mx-wait); background: var(--mx-wait-bg); }
.mx-status--processing, .mx-status--progress { color: var(--mx-run); background: var(--mx-run-bg); }
.mx-status--progress::before { animation: mx-pulse 1.6s ease-in-out infinite; }
.mx-status--partial { color: var(--mx-part); background: var(--mx-part-bg); }
.mx-status--canceled, .mx-status--refunded, .mx-status--fail { color: var(--mx-bad); background: var(--mx-bad-bg); }
.mx-status--idle { color: var(--mx-idle); background: var(--mx-idle-bg); }
@keyframes mx-pulse { 50% { opacity: .35; } }

/* ------------------------------------------------------------------ Tabel → kartu di layar kecil */
.mx-table-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.mx-table-tools .mx-field { margin: 0; min-width: 160px; flex: 1 1 160px; }
.mx-table-wrap { overflow-x: auto; border: 1px solid var(--mx-line); border-radius: var(--mx-r-control); background: var(--mx-surface); }
.mx-table { width: 100%; border-collapse: collapse; font-size: var(--mx-t-sm); }
.mx-table th { text-align: left; font-weight: 600; color: var(--mx-muted); background: #F7F9FC; padding: 11px 14px; border-bottom: 1px solid var(--mx-line); white-space: nowrap; }
.mx-table th a { color: inherit; text-decoration: none; }
.mx-table th a[aria-sort]::after { content: " ↕"; opacity: .5; }
.mx-table td { padding: 12px 14px; border-bottom: 1px solid var(--mx-line); vertical-align: top; }
.mx-table tr:last-child td { border-bottom: 0; }
.mx-table tbody tr:hover { background: #FAFBFE; }
.mx-table .mx-cell-link { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) {
    .mx-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .mx-table--stack, .mx-table--stack tbody, .mx-table--stack tr, .mx-table--stack td { display: block; width: 100%; }
    .mx-table--stack tr { padding: 12px 14px; border-bottom: 1px solid var(--mx-line); }
    .mx-table--stack td { border: 0; padding: 3px 0 3px 38%; position: relative; min-height: 26px; }
    .mx-table--stack td::before { content: attr(data-label); position: absolute; left: 0; top: 3px; width: 35%; color: var(--mx-muted); font-weight: 600; }
    .mx-table--stack td[data-label=""] { padding-left: 0; }
    .mx-table--stack td[data-label=""]::before { content: none; }
    .mx-table-wrap { border-radius: var(--mx-r-control); }
}

/* Kosong, memuat, galat */
.mx-empty { text-align: center; padding: 40px 16px; color: var(--mx-muted); }
.mx-empty__title { color: var(--mx-charcoal); font-weight: 700; font-size: var(--mx-t-lg); margin: 12px 0 4px; }
.mx-empty svg { width: 64px; height: 64px; }
.mx-skeleton { background: linear-gradient(90deg, #EDF1F7 25%, #F6F8FB 37%, #EDF1F7 63%); background-size: 400% 100%; animation: mx-shimmer 1.4s ease infinite; border-radius: 8px; min-height: 14px; }
@keyframes mx-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.mx-alert { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--mx-r-control); font-size: var(--mx-t-sm); border: 1px solid; }
.mx-alert--info { background: var(--mx-run-bg); border-color: #C7D7FF; color: #18388F; }
.mx-alert--warn { background: var(--mx-wait-bg); border-color: #F6D78A; color: #6B4600; }
.mx-alert--bad { background: var(--mx-bad-bg); border-color: #F5B5AE; color: #8E1C12; }
.mx-alert--ok { background: var(--mx-ok-bg); border-color: #A7E3C3; color: #0B5C34; }

/* Pagination (Laravel default/Bootstrap markup) */
.mx .pagination { gap: 6px; flex-wrap: wrap; margin: 16px 0 0; }
.mx .pagination .page-link { border-radius: 8px !important; border: 1px solid var(--mx-line); color: var(--mx-charcoal); min-width: 40px; min-height: 40px; display: grid; place-items: center; font-weight: 600; }
.mx .pagination .active .page-link { background: var(--mx-volt); border-color: var(--mx-volt); color: #fff; }

/* ================================================================== SITUS PUBLIK */
.mx-public body { background: var(--mx-ink); color: #E7EDF7; }
.mx-public a { color: var(--mx-signal); }
.mx-skip { position: absolute; left: -999px; }
.mx-skip:focus { left: 16px; top: 16px; z-index: 2000; background: #fff; color: var(--mx-ink); padding: 10px 14px; border-radius: 8px; }

.mx-header { position: sticky; top: 0; z-index: 100; background: rgba(10, 23, 48, .86); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--mx-ink-line); }
.mx-header__bar { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.mx-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff !important; text-decoration: none; font-weight: 800; letter-spacing: -.02em; font-size: var(--mx-t-lg); }
.mx-brand img { max-height: 36px; width: auto; }
.mx-brand__mark { width: 30px; height: 30px; flex: none; }
.mx-nav { display: flex; gap: 4px; margin: 0 auto 0 12px; padding: 0; list-style: none; }
.mx-nav a { display: block; padding: 8px 12px; border-radius: 8px; color: #C9D5EA !important; text-decoration: none; font-weight: 600; font-size: var(--mx-t-sm); }
.mx-nav a:hover, .mx-nav a[aria-current=page] { color: #fff !important; background: var(--mx-ink-2); }
.mx-header__actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.mx-burger { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--mx-ink-line); background: transparent; color: #fff; }
@media (max-width: 991.98px) {
    .mx-burger { display: inline-grid; place-items: center; }
    .mx-nav { position: fixed; inset: 68px 0 auto 0; flex-direction: column; background: var(--mx-ink); padding: 12px 16px 20px; border-bottom: 1px solid var(--mx-ink-line); margin: 0; display: none; }
    .mx-nav.is-open { display: flex; }
    .mx-nav a { padding: 12px; font-size: var(--mx-t-md); }
    .mx-header__actions .mx-btn--on-ink { display: none; }
}

/* Hero: konsol pemesanan — elemen yang diingat */
.mx-hero { position: relative; padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 8vw, 104px); overflow: hidden; }
.mx-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--mx-ink-line) 1px, transparent 1px), linear-gradient(90deg, var(--mx-ink-line) 1px, transparent 1px); background-size: 44px 44px; opacity: .35; mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%); pointer-events: none; }
.mx-hero__grid { position: relative; display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1.05fr .95fr; align-items: center; }
@media (max-width: 991.98px) { .mx-hero__grid { grid-template-columns: 1fr; } }
.mx-hero h1 { font-size: clamp(2.1rem, 4.6vw, var(--mx-t-4xl)); font-weight: 800; letter-spacing: -.035em; color: #fff; margin: 0 0 18px; max-width: 16ch; }
.mx-hero__lead { font-size: var(--mx-t-lg); color: var(--mx-muted-on-ink); max-width: 46ch; margin: 0 0 28px; line-height: 1.55; }
.mx-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.mx-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--mx-muted-on-ink); font-size: var(--mx-t-sm); }
.mx-hero__facts li { display: flex; align-items: center; gap: 8px; }
.mx-hero__facts li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--mx-signal); }

.mx-console { position: relative; background: var(--mx-ink-2); border: 1px solid var(--mx-ink-line); border-radius: 20px; padding: 20px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); color: #E7EDF7; }
.mx-console__bar { display: flex; align-items: center; justify-content: space-between; font-size: var(--mx-t-xs); color: var(--mx-muted-on-ink); margin-bottom: 14px; }
.mx-console__live { display: inline-flex; align-items: center; gap: 6px; color: var(--mx-signal); font-weight: 700; }
.mx-console__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mx-signal); box-shadow: 0 0 0 4px rgba(34, 211, 238, .18); }
.mx-console__row { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--mx-ink-line); border-radius: 12px; margin-bottom: 10px; background: rgba(10, 23, 48, .55); }
.mx-console__k { font-size: var(--mx-t-xs); color: var(--mx-muted-on-ink); }
.mx-console__v { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-console__qty { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.mx-console__meter { height: 6px; border-radius: 99px; background: var(--mx-ink-line); overflow: hidden; }
.mx-console__meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mx-volt), var(--mx-signal)); transition: width 1.6s var(--mx-ease); }
.mx-console__total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 4px 4px; }
.mx-console__total strong { font-size: var(--mx-t-2xl); color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Bagian halaman publik */
.mx-section { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--mx-ink-line); }
.mx-section--light { background: var(--mx-paper); color: var(--mx-charcoal); border-top: 0; }
.mx-section--light a { color: var(--mx-volt); }
.mx-section__head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 44px); }
.mx-section__head h2 { font-size: clamp(1.7rem, 3.2vw, var(--mx-t-3xl)); font-weight: 800; letter-spacing: -.03em; margin: 0 0 12px; color: inherit; }
.mx-section__head p { color: var(--mx-muted-on-ink); font-size: var(--mx-t-lg); margin: 0; }
.mx-section--light .mx-section__head p { color: var(--mx-muted); }
.mx-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--mx-ink-line); }
.mx-feature { padding: 26px 26px 26px 0; border-bottom: 1px solid var(--mx-ink-line); }
.mx-feature + .mx-feature { padding-left: 26px; border-left: 1px solid var(--mx-ink-line); }
@media (max-width: 767.98px) { .mx-feature + .mx-feature { padding-left: 0; border-left: 0; } }
.mx-feature h3 { font-size: var(--mx-t-lg); font-weight: 700; color: #fff; margin: 14px 0 8px; }
.mx-feature p { color: var(--mx-muted-on-ink); margin: 0; }
.mx-feature img { width: 40px; height: 40px; object-fit: contain; }
.mx-steps { counter-reset: step; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; margin: 0; }
.mx-steps li { counter-increment: step; position: relative; padding: 22px; border-radius: var(--mx-r-panel); background: var(--mx-surface); border: 1px solid var(--mx-line); }
.mx-steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--mx-ink); color: var(--mx-signal); font-weight: 800; margin-bottom: 14px; }
.mx-steps h3 { font-size: var(--mx-t-lg); margin: 0 0 6px; font-weight: 700; }
.mx-steps p { margin: 0; color: var(--mx-muted); }
.mx-platforms { display: flex; flex-wrap: wrap; gap: 10px; }
.mx-platform { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--mx-ink-line); color: #fff; text-decoration: none; font-weight: 600; background: var(--mx-ink-2); }
.mx-platform:hover { border-color: var(--mx-signal); color: #fff; }
.mx-platform img { width: 22px; height: 22px; object-fit: contain; }
.mx-faq { border-top: 1px solid var(--mx-line); }
.mx-faq details { border-bottom: 1px solid var(--mx-line); padding: 4px 0; }
.mx-faq summary { cursor: pointer; list-style: none; padding: 16px 40px 16px 0; font-weight: 700; font-size: var(--mx-t-lg); position: relative; }
.mx-faq summary::-webkit-details-marker { display: none; }
.mx-faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 1.6rem; font-weight: 400; color: var(--mx-volt); transition: transform .2s var(--mx-ease); }
.mx-faq details[open] summary::after { transform: rotate(45deg); }
.mx-faq .mx-faq__a { padding: 0 0 18px; color: var(--mx-muted); max-width: 70ch; }
.mx-cta { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: 20px; background: var(--mx-volt); color: #fff; }
.mx-cta h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, var(--mx-t-2xl)); font-weight: 800; letter-spacing: -.02em; }
.mx-cta p { margin: 6px 0 0; color: #DCE6FF; }
.mx-cta .mx-btn { --b-bg: #fff; --b-fg: var(--mx-ink); --b-bd: #fff; }
@media (max-width: 767.98px) { .mx-cta { grid-template-columns: 1fr; } }
.mx-prose { max-width: 72ch; font-size: 1.0625rem; line-height: 1.75; }
.mx-prose h2, .mx-prose h3 { margin: 1.8em 0 .5em; }
.mx-page-head { padding: clamp(36px, 6vw, 64px) 0 clamp(20px, 3vw, 32px); }
.mx-page-head h1 { font-size: clamp(1.9rem, 4vw, var(--mx-t-3xl)); font-weight: 800; letter-spacing: -.03em; color: #fff; margin: 0; }
.mx-page-head p { color: var(--mx-muted-on-ink); margin: 10px 0 0; max-width: 60ch; }
.mx-footer { border-top: 1px solid var(--mx-ink-line); padding: 48px 0 28px; color: var(--mx-muted-on-ink); font-size: var(--mx-t-sm); }
.mx-footer__grid { display: grid; gap: 28px; grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 767.98px) { .mx-footer__grid { grid-template-columns: 1fr 1fr; } .mx-footer__grid > :first-child { grid-column: 1 / -1; } }
.mx-footer h2 { font-size: var(--mx-t-sm); color: #fff; font-weight: 700; margin: 0 0 12px; }
.mx-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mx-footer a { color: var(--mx-muted-on-ink); text-decoration: none; }
.mx-footer a:hover { color: #fff; }
.mx-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--mx-ink-line); }

/* Halaman otentikasi */
.mx-auth { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 1fr 1fr; }
.mx-auth__aside { position: relative; padding: clamp(32px, 6vw, 72px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.mx-auth__aside::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(34, 211, 238, .25) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(to top, #000, transparent 80%); }
.mx-auth__aside h1 { position: relative; color: #fff; font-size: clamp(1.8rem, 3.4vw, var(--mx-t-3xl)); font-weight: 800; letter-spacing: -.03em; max-width: 14ch; margin: 0 0 12px; }
.mx-auth__aside p { position: relative; color: var(--mx-muted-on-ink); max-width: 40ch; margin: 0; }
.mx-auth__main { background: var(--mx-paper); color: var(--mx-charcoal); display: grid; place-items: center; padding: clamp(24px, 5vw, 64px) 16px; }
.mx-auth__card { width: min(440px, 100%); }
.mx-auth__card h2 { font-size: var(--mx-t-2xl); font-weight: 800; margin: 0 0 6px; letter-spacing: -.02em; }
.mx-auth__card .mx-sub { color: var(--mx-muted); margin: 0 0 24px; }
.mx-auth__alt { margin-top: 20px; font-size: var(--mx-t-sm); color: var(--mx-muted); text-align: center; }
.mx-auth__social { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 16px; }
.mx-auth__social a { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--mx-line); border-radius: var(--mx-r-control); color: var(--mx-charcoal); text-decoration: none; font-weight: 600; font-size: var(--mx-t-sm); background: #fff; }
.mx-auth__social img { width: 18px; height: 18px; }
.mx-divider { display: flex; align-items: center; gap: 12px; color: var(--mx-muted); font-size: var(--mx-t-xs); margin: 20px 0 4px; }
.mx-divider::before, .mx-divider::after { content: ""; flex: 1; height: 1px; background: var(--mx-line); }
@media (max-width: 991.98px) { .mx-auth { grid-template-columns: 1fr; } .mx-auth__aside { display: none; } }

/* Katalog layanan publik */
.mx-catalog { background: var(--mx-paper); color: var(--mx-charcoal); padding: 28px 0 72px; }
.mx-filterbar { display: grid; gap: 10px; grid-template-columns: 2fr 1fr 1fr auto; align-items: end; background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: var(--mx-r-panel); padding: 16px; margin-bottom: 18px; }
.mx-filterbar .mx-field { margin: 0; }
@media (max-width: 767.98px) { .mx-filterbar { grid-template-columns: 1fr; } }
.mx-cat-group { margin-bottom: 22px; }
.mx-cat-group > h2 { font-size: var(--mx-t-lg); font-weight: 700; margin: 0 0 10px; display: flex; gap: 10px; align-items: center; }
.mx-cat-group > h2 small { font-size: var(--mx-t-xs); color: var(--mx-muted); font-weight: 600; }
.mx-rate { font-weight: 700; white-space: nowrap; }
.mx-rate small { display: block; color: var(--mx-muted); font-weight: 500; font-size: var(--mx-t-xs); }

/* Halaman galat */
.mx-error-page { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 48px 16px; }
.mx-error-page__code { font-size: clamp(4rem, 14vw, 8rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--mx-signal); }
.mx-error-page h1 { color: #fff; font-size: var(--mx-t-2xl); margin: 12px 0 8px; }
.mx-error-page p { color: var(--mx-muted-on-ink); margin: 0 auto 24px; max-width: 44ch; }

/* Notiflix — selaras dengan token */
.mx [id^=NotiflixNotify] > div { font-family: var(--mx-font) !important; border-radius: 12px !important; }

/* Perbaikan spesifisitas: warna teks tombol tidak ikut warna tautan */
.mx a.mx-btn, .mx .mx-btn { color: var(--b-fg); }
.mx a.mx-btn:hover { color: var(--b-fg); }
.mx .mx-btn:hover { --b-fg: #fff; }
.mx .mx-btn--ghost:hover { --b-fg: var(--mx-volt); }

/* Banner cookie & popup PWA (markup bawaan aplikasi) */
.mx .cookies-alert { display: none; position: fixed; z-index: 1050; left: 16px; bottom: 16px; width: min(380px, calc(100% - 32px)); background: var(--mx-surface); color: var(--mx-charcoal); border: 1px solid var(--mx-line); border-radius: var(--mx-r-panel); padding: 18px; box-shadow: 0 18px 50px -20px rgba(10, 23, 48, .45); font-size: var(--mx-t-sm); }
.mx .cookies-alert h4 { font-size: var(--mx-t-md); font-weight: 700; margin: 6px 0 4px; color: var(--mx-charcoal); }
.mx .cookies-alert img { width: 32px; height: 32px; }
.mx .cookies-alert a { color: var(--mx-volt); font-weight: 600; margin-right: 12px; }
.mx .pwa-popup { display: none; position: fixed; z-index: 1060; right: 16px; bottom: 16px; width: min(360px, calc(100% - 32px)); background: var(--mx-surface); color: var(--mx-charcoal); border: 1px solid var(--mx-line); border-radius: var(--mx-r-panel); padding: 16px; box-shadow: 0 18px 50px -20px rgba(10, 23, 48, .45); }
.mx .pwa-popup .header { display: flex; justify-content: space-between; gap: 10px; }
.mx .pwa-popup .pwa-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.mx .pwa-popup h2 { font-size: var(--mx-t-md); margin: 0; }
.mx .pwa-popup .header-text p, .mx .pwa-popup .description { margin: 0; color: var(--mx-muted); font-size: var(--mx-t-sm); }
.mx .pwa-popup .close-btn { border: 0; background: transparent; font-size: 1.4rem; line-height: 1; }
.mx .pwa-popup .carousel-container { height: 0; overflow: hidden; transition: height .3s; }
.mx .pwa-popup .carousel-content { display: flex; overflow: hidden; }
.mx .pwa-popup .carousel-content img { width: 100%; flex: none; border-radius: 10px; }
.mx .pwa-popup .carousel-btn { display: none; }
.mx .pwa-popup .actions { display: flex; gap: 8px; margin-top: 12px; }
.mx .pwa-popup .action-btn { flex: 1; min-height: 40px; border-radius: var(--mx-r-control); border: 1px solid var(--mx-line); background: #fff; font-weight: 600; }
.mx .pwa-popup .action-btn.install { background: var(--mx-volt); border-color: var(--mx-volt); color: #fff; }

.mx-brand span { white-space: nowrap; }
@media (max-width: 420px) { .mx-brand { font-size: var(--mx-t-md); gap: 8px; } .mx-header__bar { gap: 10px; } }

/* ================================================================== LANDING v3 — gerak lembut & mobile
 * Prinsip: satu sekuens saat hero dimuat, elemen lain muncul pelan saat masuk layar (sekali saja).
 * Semua gerak memakai opacity + transform (tanpa reflow), dinonaktifkan oleh prefers-reduced-motion,
 * dan hanya aktif jika JS berjalan (.mx-js) sehingga konten tidak pernah tersembunyi tanpa JS.
 */
:root { --mx-ease-soft: cubic-bezier(.16, 1, .3, 1); --mx-reveal-dur: .75s; }

/* Muncul saat di-scroll */
.mx-js [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity var(--mx-reveal-dur) var(--mx-ease-soft), transform var(--mx-reveal-dur) var(--mx-ease-soft); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; }
.mx-js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

/* Sekuens hero saat halaman dimuat */
.mx-js .mx-in { opacity: 0; transform: translate3d(0, 16px, 0); animation: mx-in .9s var(--mx-ease-soft) forwards; animation-delay: calc(var(--d, 0) * 110ms + 80ms); }
.mx-js .mx-console.mx-in { transform: translate3d(0, 24px, 0) scale(.985); }
@keyframes mx-in { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .mx-js [data-reveal], .mx-js .mx-in { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
    .mx-hero__glow { animation: none !important; }
}

/* Header: tembus pandang di atas hero, padat saat halaman digulir */
.mx-header { transition: background-color .35s var(--mx-ease-soft), border-color .35s var(--mx-ease-soft), box-shadow .35s var(--mx-ease-soft); }
.mx-header:not(.is-scrolled) { background: rgba(10, 23, 48, .55); border-bottom-color: transparent; }
.mx-header.is-scrolled { background: rgba(10, 23, 48, .92); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7); }
.mx-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.mx-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--mx-volt), var(--mx-signal)); }

/* Menu mobile: panel geser, bukan muncul tiba-tiba */
@media (max-width: 991.98px) {
    .mx-nav { display: flex; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s var(--mx-ease-soft), transform .3s var(--mx-ease-soft), visibility 0s linear .3s; max-height: calc(100dvh - 68px); overflow-y: auto; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .8); }
    .mx-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
    .mx-nav li { border-bottom: 1px solid var(--mx-ink-line); }
    .mx-nav li:last-child { border-bottom: 0; }
    .mx-nav a { padding: 14px 4px; border-radius: 0; }
    .mx-nav a:hover, .mx-nav a[aria-current=page] { background: transparent; color: var(--mx-signal) !important; }
    .mx-burger[aria-expanded=true] i::before { content: "\f00d"; }
}

/* Hero */
.mx-hero__glow { position: absolute; width: min(720px, 120vw); aspect-ratio: 1; right: -14%; top: -16%; border-radius: 50%; background: radial-gradient(circle at 45% 45%, rgba(47, 107, 255, .28), rgba(34, 211, 238, .10) 38%, transparent 62%); filter: blur(20px); pointer-events: none; animation: mx-drift 18s ease-in-out infinite alternate; }
@keyframes mx-drift { from { translate: 0 0; } to { translate: -6% 8%; } }
.mx-hero__copy { position: relative; min-width: 0; }
.mx-console { transition: transform .5s var(--mx-ease-soft), box-shadow .5s var(--mx-ease-soft); }
@media (hover: hover) { .mx-console:hover { transform: translateY(-4px); box-shadow: 0 40px 90px -34px rgba(47, 107, 255, .45); } }

@media (max-width: 575.98px) {
    .mx-hero { padding: 36px 0 48px; }
    .mx-hero h1 { font-size: clamp(1.85rem, 8.6vw, 2.3rem); max-width: none; }
    .mx-hero__lead { font-size: var(--mx-t-md); margin-bottom: 22px; }
    .mx-hero__cta { display: grid; grid-template-columns: 1fr 1fr; }
    .mx-hero__cta .mx-btn { width: 100%; padding-inline: .6em; }
    .mx-hero__facts { gap: 8px; margin-top: 20px; }
    .mx-hero__facts li { padding: 5px 10px 5px 8px; border: 1px solid var(--mx-ink-line); border-radius: var(--mx-r-chip); background: rgba(18, 34, 63, .6); font-size: var(--mx-t-xs); }
    .mx-console { padding: 16px; border-radius: 16px; }
    .mx-console__total strong { font-size: var(--mx-t-xl); }
}

/* Keunggulan */
.mx-feature__mark { display: block; width: 28px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--mx-volt), var(--mx-signal)); transform-origin: 0 50%; transform: scaleX(.3); transition: transform .9s var(--mx-ease-soft) .25s; }
.mx-js [data-reveal].is-in .mx-feature__mark, .mx-nojs .mx-feature__mark { transform: none; }
.mx-feature h3 { margin-top: 16px; }
@media (max-width: 767.98px) { .mx-feature { padding: 22px 0; } }

/* Kategori layanan (data nyata) */
.mx-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mx-cat { position: relative; display: grid; gap: 4px; padding: 18px 52px 18px 18px; border: 1px solid var(--mx-ink-line); border-radius: 14px; background: var(--mx-ink-2); color: #fff !important; text-decoration: none; height: 100%; transition: border-color .25s var(--mx-ease-soft), transform .35s var(--mx-ease-soft), background-color .25s; }
.mx-cat__name { font-weight: 700; line-height: 1.3; }
.mx-cat__meta { font-size: var(--mx-t-sm); color: var(--mx-muted-on-ink); font-variant-numeric: tabular-nums; }
.mx-cat__go { position: absolute; right: 16px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--mx-signal); background: rgba(34, 211, 238, .08); transition: transform .3s var(--mx-ease-soft); }
.mx-cat:hover { border-color: var(--mx-signal); background: #15284A; }
.mx-cat:hover .mx-cat__go { transform: translateX(3px); }
.mx-section__more { margin: 24px 0 0; }

/* Langkah pemesanan: garis penghubung yang tergambar saat terlihat */
.mx-steps { position: relative; }
.mx-steps li { transition-property: opacity, transform, box-shadow, border-color; }
@media (hover: hover) { .mx-steps li:hover { border-color: #C7D7FF; box-shadow: 0 16px 40px -28px rgba(31, 79, 214, .6); } }
@media (max-width: 767.98px) {
    .mx-steps { gap: 0; grid-template-columns: 1fr; }
    .mx-steps li { padding: 0 0 26px 54px; background: transparent; border: 0; border-radius: 0; }
    .mx-steps li::before { position: absolute; left: 0; top: 0; margin: 0; }
    .mx-steps li::after { content: ""; position: absolute; left: 17px; top: 42px; bottom: 4px; width: 2px; background: var(--mx-line); transform-origin: top; transform: scaleY(0); transition: transform .8s var(--mx-ease-soft) .3s; }
    .mx-steps li.is-in::after, .mx-nojs .mx-steps li::after { transform: none; }
    .mx-steps li:last-child { padding-bottom: 0; }
    .mx-steps li:last-child::after { content: none; }
}

/* Statistik */
.mx-counter { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--mx-ink-line); border-bottom: 1px solid var(--mx-ink-line); }
.mx-counter__item { padding: 28px 24px; }
.mx-counter__item + .mx-counter__item { border-left: 1px solid var(--mx-ink-line); }
.mx-counter__value { margin: 0; font-size: clamp(1.9rem, 5vw, var(--mx-t-4xl)); font-weight: 800; letter-spacing: -.04em; color: #fff; line-height: 1.05; }
.mx-counter__label { margin: 6px 0 0; color: var(--mx-muted-on-ink); font-size: var(--mx-t-sm); }
@media (max-width: 575.98px) { .mx-counter__item { padding: 20px 10px; text-align: center; } .mx-counter__label { font-size: var(--mx-t-xs); } }

/* FAQ: jawaban terbuka dengan lembut */
.mx-faq summary { transition: color .2s; }
.mx-faq summary:hover { color: var(--mx-volt); }
.mx-faq details[open] .mx-faq__a { animation: mx-faq .45s var(--mx-ease-soft); }
@keyframes mx-faq { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 575.98px) { .mx-faq summary { font-size: var(--mx-t-md); padding-block: 14px; } .mx-faq summary::after { top: 8px; } }

/* CTA */
.mx-cta { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(120deg, var(--mx-volt-deep), var(--mx-volt) 55%, #3B82F6); }
.mx-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px); background-size: 16px 16px; mask-image: linear-gradient(100deg, transparent 40%, #000 95%); }
@media (max-width: 767.98px) { .mx-cta .mx-btn { width: 100%; } }

/* Bilah aksi mobile: muncul setelah hero terlewati, hilang saat CTA/footer terlihat */
.mx-dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; display: none; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 10px 10px 16px; border-radius: 14px; background: rgba(18, 34, 63, .94); backdrop-filter: blur(10px); border: 1px solid var(--mx-ink-line); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); color: #fff; font-size: var(--mx-t-sm); font-weight: 600; transform: translateY(140%); visibility: hidden; transition: transform .45s var(--mx-ease-soft), visibility 0s linear .45s; }
.mx-dock.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
@media (max-width: 767.98px) { .mx-js .mx-dock { display: flex; } }

/* Popup cookie: lembar bawah di ponsel */
@media (max-width: 575.98px) {
    .mx .cookies-alert { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; padding: 14px 16px; }
    .mx .cookies-alert img { width: 24px; height: 24px; }
}

/* Footer ringkas di ponsel */
@media (max-width: 575.98px) {
    .mx-footer { padding-top: 36px; }
    .mx-footer__grid > :last-child { grid-column: 1 / -1; }
    .mx-footer__legal { flex-direction: column; }
}
.mx-section { scroll-margin-top: 76px; }
html.mx-public { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.mx-public { scroll-behavior: auto; } .mx-dock { transition: none; } }

/* Ikon media sosial (gambar unggahan, ikon merek cadangan, atau huruf awal) */
.mx-social-ico { width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; object-fit: contain; border-radius: 6px; vertical-align: middle; }
.mx-social-ico--font { font-size: 18px; color: var(--mx-volt, #2F6BFF); }
.mx-social-ico--letter { background: var(--mx-run-bg, #E6EEFF); color: var(--mx-volt, #2F6BFF); font-weight: 800; font-size: 12px; }
.mx-public .mx-platform .mx-social-ico--font { color: var(--mx-signal); }
.social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.social-btn .mx-social-ico { width: 26px; height: 26px; }

/* Statistik pengunjung di footer */
.mx-visits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 36px 0 0; border: 1px solid var(--mx-ink-line); border-radius: 14px; overflow: hidden; }
.mx-visits__item { padding: 14px 18px; display: flex; flex-direction: column-reverse; gap: 2px; }
.mx-visits__item + .mx-visits__item { border-left: 1px solid var(--mx-ink-line); }
.mx-visits dt { font-weight: 500; font-size: 12px; color: var(--mx-muted-on-ink); display: flex; align-items: center; gap: 6px; }
.mx-visits dd { margin: 0; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.mx-visits__item--live dd { color: var(--mx-signal); }
.mx-visits__dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: mx-live 2s ease-out infinite; }
@keyframes mx-live { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } }
@media (prefers-reduced-motion: reduce) { .mx-visits__dot { animation: none; } }
@media (max-width: 575.98px) {
    .mx-visits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mx-visits__item:nth-child(3) { border-left: 0; }
    .mx-visits__item:nth-child(n+3) { border-top: 1px solid var(--mx-ink-line); }
    .mx-visits dd { font-size: 18px; }
}

/* Halaman artikel */
.mx-article .mx-wrap { max-width: 820px; }
.mx-article__title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 14px; }
.mx-article__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--mx-muted); font-size: var(--mx-t-sm); margin: 0 0 24px; }
.mx-article__meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; margin-right: 18px; vertical-align: middle; }
.mx-article__cover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; margin-bottom: 28px; }
.mx-article .mx-prose { max-width: none; }
.mx-article .mx-prose h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.mx-article .mx-prose h3 { font-size: 1.15rem; font-weight: 700; }
.mx-article .mx-prose ul, .mx-article .mx-prose ol { padding-left: 1.25em; }
.mx-article .mx-prose li { margin-bottom: .35em; }
.mx-article .mx-prose a { color: var(--mx-volt-deep); }
.mx-article__tags { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mx-article__tags li { font-size: 13px; font-weight: 600; color: var(--mx-volt-deep); background: var(--mx-run-bg); border-radius: 999px; padding: 5px 12px; }
.mx-article__cta { margin: 36px 0 0; padding: 22px 24px; border-radius: 18px; background: var(--mx-ink); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.mx-article__cta div { display: flex; flex-direction: column; gap: 4px; max-width: 46ch; }
.mx-article__cta span { color: var(--mx-muted-on-ink); font-size: var(--mx-t-sm); }
.mx-article__related { margin-top: 56px; }
.mx-article__related h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 18px; }
.mx-article__card { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; font-weight: 700; line-height: 1.35; }
.mx-article__card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.mx-article__card:hover span { color: var(--mx-volt-deep); }
@media (max-width: 575.98px) { .mx-article__meta { gap: 2px 14px; } .mx-article__meta > * + *::before { display: none; } }

/* ===== Platform berjalan (marquee) di section Layanan ===== */
.mx-section--platforms { overflow: hidden; }
/* Lebar penuh layar walau berada di dalam .mx-wrap. Bisa digeser (swipe/drag) dan berjalan otomatis lewat JS. */
.mx-marquee { position: relative; overflow-x: auto; overflow-y: hidden; margin-inline: calc(50% - 50vw); padding: 8px 0 10px;
    scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mx-marquee::-webkit-scrollbar { display: none; }
.mx-marquee.is-dragging { cursor: grabbing; user-select: none; }
.mx-marquee.is-dragging a { pointer-events: none; }
.mx-marquee__track { display: flex; width: max-content; }
.mx-marquee__set { display: flex; gap: 14px; padding: 0 7px; margin: 0; list-style: none; }
.mx-nojs .mx-marquee__set[aria-hidden="true"] { display: none; }

.mx-pcard { --brand: #2F6BFF; display: flex; align-items: center; gap: 14px; width: 248px; padding: 14px 16px; border-radius: 16px;
    background: var(--mx-ink-2); border: 1px solid var(--mx-ink-line); color: #fff; text-decoration: none;
    transition: border-color .2s, transform .2s, box-shadow .2s; }
.mx-pcard:hover, .mx-pcard:focus-visible { color: #fff; border-color: var(--brand); transform: translateY(-3px);
    box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--brand) 70%, transparent); }
.mx-pcard:focus-visible { outline: 2px solid var(--mx-signal); outline-offset: 2px; }
.mx-pcard__ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--brand) 16%, var(--mx-ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent); }
.mx-pcard__ico .mx-social-ico { width: 26px; height: 26px; }
.mx-pcard__ico .mx-social-ico--font { font-size: 22px; color: var(--brand); }
.mx-pcard__ico .mx-social-ico--letter { background: transparent; color: var(--brand); font-size: 18px; }
.mx-pcard__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mx-pcard__name { color: #fff; font-weight: 700; font-size: var(--mx-t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-pcard__meta { font-size: var(--mx-t-xs); color: var(--mx-muted-on-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-marquee__hint { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 18px 0 0; font-size: var(--mx-t-sm); color: var(--mx-muted-on-ink); }
.mx-marquee__hint a { color: var(--mx-signal); font-weight: 600; }
@media (max-width: 575.98px) {
    .mx-pcard { width: 186px; padding: 11px 12px; gap: 10px; }
    .mx-pcard__ico { width: 42px; height: 42px; border-radius: 12px; }
    .mx-pcard__meta { white-space: normal; line-height: 1.3; }
    .mx-marquee__set { gap: 10px; padding: 0 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .mx-marquee__set[aria-hidden="true"] { display: none; }
}

/* ===== Baris geser (chip platform di halaman layanan, dsb.) ===== */
.mx-scroller { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; }
.mx-scroller__track { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x proximity;
    scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: 4px 2px 6px; flex: 1; min-width: 0; cursor: grab; }
.mx-scroller__track::-webkit-scrollbar { display: none; }
.mx-scroller__track > * { flex: none; scroll-snap-align: start; }
.mx-scroller__track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.mx-scroller__track.is-dragging a { pointer-events: none; }
.mx-scroller.has-more-start .mx-scroller__track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); }
.mx-scroller.has-more-end .mx-scroller__track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.mx-scroller.has-more-start.has-more-end .mx-scroller__track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.mx-scroller__btn { display: none; flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--mx-line); background: #fff; color: var(--mx-charcoal); place-items: center; }
.mx-scroller__btn:disabled { opacity: .35; }
.mx-scroller__btn:hover:not(:disabled) { border-color: var(--mx-volt); color: var(--mx-volt); }
@media (hover: hover) and (min-width: 768px) { .mx-scroller.is-overflowing .mx-scroller__btn { display: grid; } }
.mx-chip-platform { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--mx-line);
    background: #fff; color: var(--mx-charcoal); font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .15s, box-shadow .15s; }
.mx-scroller .mx-chip-platform, .mx-scroller .mx-chip-platform:hover { color: var(--mx-charcoal); }
.mx-chip-platform:hover { border-color: var(--mx-volt); }
.mx-chip-platform[aria-current="page"] { border-color: var(--mx-volt); box-shadow: 0 0 0 2px rgba(47, 107, 255, .2); background: #F5F8FF; }
.mx-chip-platform .mx-social-ico { width: 22px; height: 22px; }
.mx-chip-platform .mx-social-ico--font { font-size: 18px; color: var(--brand, var(--mx-volt)); }

/* ===== Hero: notifikasi ala media sosial ===== */
.mx-hero__visual { position: relative; min-width: 0; }
.mx-pops { position: absolute; inset: -34px -24px; pointer-events: none; z-index: 2; }
.mx-pop { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .96); color: #1C2433; font-size: 13px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 12px 30px -10px rgba(3, 10, 30, .65); opacity: 0;
    animation: mx-pop-in .6s var(--mx-ease-soft, ease) forwards, mx-float 6s ease-in-out infinite;
    animation-delay: calc(.9s + var(--i) * .35s), calc(1.5s + var(--i) * .8s); }
.mx-pop > i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; }
.mx-pop b { font-weight: 800; }
.mx-pop--like { top: 0; left: -6%; } .mx-pop--like > i { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.mx-pop--follow { top: 22%; right: -4%; } .mx-pop--follow > i { background: #2F6BFF; }
.mx-pop--view { bottom: 18%; left: -10%; } .mx-pop--view > i { background: #FF0033; }
.mx-pop--comment { bottom: -2%; right: 4%; } .mx-pop--comment > i { background: #111; }
@keyframes mx-pop-in { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes mx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
/* Hati kecil naik dari notifikasi "suka". */
.mx-hearts { position: absolute; left: 14px; top: 0; width: 0; height: 0; }
.mx-hearts i { position: absolute; left: 0; top: 0; color: #E1306C; font-size: 11px; opacity: 0; animation: mx-heart 3.6s ease-out infinite; }
.mx-hearts i:nth-child(2) { left: 8px; font-size: 9px; animation-delay: 1.2s; }
.mx-hearts i:nth-child(3) { left: -6px; font-size: 13px; animation-delay: 2.4s; }
@keyframes mx-heart { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -46px) scale(1.1); } }
@media (max-width: 991.98px) { .mx-pops { inset: -26px -6px; } .mx-pop--like { left: 0; } .mx-pop--view { left: -2%; } .mx-pop--follow { right: 0; } }
@media (max-width: 575.98px) {
    .mx-pop { font-size: 12px; padding: 7px 12px 7px 8px; } .mx-pop > i { width: 22px; height: 22px; font-size: 10px; }
    .mx-pop--view, .mx-pop--comment { display: none; }
    .mx-pops { inset: -18px 0; }
    .mx-pop--like { top: 0; left: auto; right: 4%; } .mx-pop--follow { top: auto; bottom: 0; right: auto; left: 4%; }
}
@media (prefers-reduced-motion: reduce) {
    .mx-pop { animation: none; opacity: 1; }
    .mx-hearts { display: none; }
}