/* Sesi 20260821 — KOLOM ISIAN 16px, JANGAN DITURUNKAN.
   iOS otomatis memperbesar seluruh halaman begitu kolom isian ber-font
   di bawah 16px disentuh, dan tidak mengecilkannya kembali. Itu sebab
   halaman chat & formulir pemesanan ter-zoom sendiri — bukan cubitan
   jari. Batas 16px ini aturan iOS; tidak ada CSS yang bisa menawarnya.
   Berlaku untuk .mbl-input/.mbl-select/.mbl-textarea, .mbl-main .input/
   .select/.textarea, .form-row--dial, dan .premium-input. */
:root {
    /* Brand & Accent */
    --coral: #cc785c;
    --coral-hover: #b8684c;
    --coral-press: #a9583e;
    --coral-soft: rgba(204,120,92,0.15);
    --coral-ghost: rgba(204,120,92,0.08);
    --coral-grad: linear-gradient(135deg, #cc785c 0%, #e08b6e 100%);
    --brand: #cc785c;

    /* Backgrounds & Surfaces */
    --cream: #faf9f5;
    --canvas: #faf9f5;
    --bg: #faf9f5;
    --white: #ffffff;
    --surface: #ffffff;
    --bg-card: #ffffff;
    --surface-card: #efe9de;
    --bg-elevated: #ffffff;
    --bg-soft: #f5f0e8;
    --surface-soft: #f5f0e8;
    --bg-muted: #f5f0e8;
    --surface-strong: #e8e0d2;
    --dark: #181715;
    --bg-dark: #181715;
    --surface-dark: #181715;
    --bg-dark-2: #252320;
    --surface-dark-2: #252320;
    --dark-elev: #252320;
    --line: #e6dfd8;
    --line-soft: #ebe6df;
    --line-strong: #d8cfc4;

    /* Text & Ink */
    --ink: #141413;
    --text: #141413;
    --body: #3d3d3a;
    --ink-soft: #252523;
    --muted: #6c6a64;
    --text-soft: #6c6a64;
    --faint: #a09d96;
    --text-faint: #a09d96;
    --on-dark: #faf9f5;
    --on-dark-muted: #a09d96;

    /* Status & Semantics */
    --ok: #5db872;
    --green: #5db872;
    --ok-soft: rgba(93,184,114,0.15);
    --green-ghost: rgba(93,184,114,0.1);
    --warn: #d4a017;
    --gold: #d4a017;
    --amber: #e8a55a;
    --warn-soft: rgba(212,160,23,0.15);
    --amber-ghost: rgba(232,165,90,0.1);
    --err: #c64545;
    --red: #c64545;
    --danger: #c64545;
    --err-soft: rgba(198,69,69,0.15);
    --danger-soft: rgba(198,69,69,0.15);
    --red-ghost: rgba(198,69,69,0.1);
    --info: var(--coral);
    --info-soft: var(--coral-soft);
    --teal: #5db8a6;

    /* Typography & Fonts */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --serif: 'Cormorant Garamond', 'Tiempos Headline', Georgia, serif;
    --font-serif: 'Cormorant Garamond', 'Tiempos Headline', Georgia, serif;
    --mono: 'JetBrains Mono', monospace;
    --font-mono: 'JetBrains Mono', monospace;

    /* Shapes & Radius */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-2xl: 24px;
    --r-pill: 9999px;

    /* Shadows & Elevations */
    --shadow-xs: 0 2px 8px rgba(20,20,19,0.04);
    --shadow-sm: 0 4px 16px rgba(20,20,19,0.06);
    --shadow-md: 0 8px 24px rgba(20,20,19,0.08);
    --shadow-lg: 0 16px 48px rgba(20,20,19,0.12);
    --shadow: 0 4px 16px rgba(20,20,19,0.06);
    --shadow-coral: 0 8px 24px rgba(204,120,92,0.25);

    /* Motion & Layout Dimensions */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --header-h: 64px;
    --nav-h: 64px;
    --top-h: 56px;
    --bnav-h: 60px;
    --sidebar-w: 260px;
    --sidebar-w-collapsed: 72px;
    --wrap: 1200px;
    --wrap-sm: 768px;
    --pad: 1rem;
    --s-10: 2.5rem;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --btn-bg: #cc785c;
    --btn-color: #ffffff;
    --btn-border: transparent;
}*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }html {font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-ms-touch-action:manipulation;}body.mbl-body {font-family:var(--sans);font-size:0.938rem;line-height:1.55;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none;color:var(--ink-soft);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100dvh;padding:calc(var(--header-h) + var(--safe-t)) 0 calc(var(--bnav-h) + var(--safe-b) + 0.75rem) 0;}body.mbl-body[data-page="index"] { padding-top:0; }body.mbl-body[data-page="chat"] { padding:0 !important; overflow:hidden !important; }body[data-page="chat"] .mbl-bnav,body[data-page="chat"] .pwa-top-banner,body[data-page="chat"] #serenityTopAppBanner,body[data-page="chat"] .pwa-overlay,body[data-page="chat"] .pwa-banner,body[data-page="chat"] .mbl-header { display:none !important; }body.mbl-body::before {content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;background:radial-gradient(120% 60% at 100% 0%, rgba(204,120,92,0.05) 0%, transparent 55%),radial-gradient(100% 50% at 0% 12%, rgba(204,120,92,0.035) 0%, transparent 50%);}.mbl-header {position:fixed;top:0; left:0; right:0;z-index:100;height:calc(var(--header-h) + var(--safe-t));padding-top:var(--safe-t);background:rgba(250,249,245,0.82);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid transparent;transition:background 250ms var(--ease), border-color 250ms, box-shadow 250ms;}.mbl-header.is-scrolled { border-bottom-color:var(--line); box-shadow:0 2px 18px rgba(20,20,19,0.05); }.mbl-header__inner {height:var(--header-h);display:flex; align-items:center; justify-content:space-between;padding:0 var(--pad);}.mbl-header__brand { display:flex; align-items:center; gap:0.5rem; text-decoration:none; color:var(--ink); }.mbl-header__mark {color:var(--coral); display:flex; align-items:center; justify-content:center;width:30px; height:30px; border-radius:9px;background:var(--coral-ghost);}.mbl-header__mark svg { width:17px; height:17px; }.mbl-header__name { font-family:var(--serif); font-size:1.32rem; font-weight:600; letter-spacing:-0.01em; line-height:1; }body[data-page="index"] .mbl-header:not(.is-scrolled) {background:transparent;backdrop-filter:none; -webkit-backdrop-filter:none;}body[data-page="index"] .mbl-header:not(.is-scrolled) .mbl-header__name { color:var(--on-dark); text-shadow:0 1px 8px rgba(20,20,19,0.35); }body[data-page="index"] .mbl-header:not(.is-scrolled) .mbl-header__mark { background:rgba(255,255,255,0.18); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }body[data-page="index"] .mbl-header:not(.is-scrolled) .mbl-lang { background:rgba(255,255,255,0.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }body[data-page="index"] .mbl-header:not(.is-scrolled) .mbl-lang__btn { color:rgba(255,255,255,0.75); }body[data-page="index"] .mbl-header:not(.is-scrolled) .mbl-lang__btn.is-on { background:#fff; color:var(--ink); }.mbl-lang { display:flex; align-items:center; gap:1px; background:var(--surface-soft); border-radius:var(--r-pill); padding:3px; transition:background 250ms; }.mbl-lang__btn {padding:4px 11px; font-size:0.68rem; font-weight:600; border:none; background:none;cursor:pointer; border-radius:var(--r-pill); color:var(--faint); font-family:var(--sans);line-height:1.3; transition:all 150ms;}.mbl-lang__btn.is-on { background:var(--ink); color:var(--on-dark); }
.mbl-hero {position:relative;min-height:min(54.6vh, 434px);padding:calc(var(--header-h) + var(--safe-t) + 1.5rem) var(--pad) 5.5rem;display:flex; flex-direction:column; justify-content:flex-end;overflow:hidden;}.mbl-hero::after {content:''; position:absolute; inset:0; z-index:0;background:linear-gradient(180deg, rgba(20,20,19,0.28) 0%, rgba(20,20,19,0.12) 34%, rgba(20,20,19,0.62) 74%, rgba(20,20,19,0.86) 100%);}.mbl-hero > * { position:relative; z-index:1; }.mbl-hero__eyebrow {display:inline-flex; align-items:center; gap:0.4rem; align-self:flex-start;font-size:0.66rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;color:#fff; padding:0.4rem 0.85rem; border-radius:var(--r-pill);background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.22);-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);margin-bottom:1rem;}.mbl-hero__eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(93,184,114,0.35); }.mbl-hero__title {font-family:var(--serif); font-weight:600; color:#fff;font-size:clamp(2.35rem, 11vw, 3.2rem); line-height:1.04; letter-spacing:-0.02em;text-shadow:0 3px 24px rgba(20,20,19,0.4);}.mbl-hero__title em { color:var(--gold); font-style:italic; }.mbl-hero__sub {color:rgba(255,255,255,0.92); font-size:0.95rem; line-height:1.5; margin-top:0.85rem;max-width:30ch; text-shadow:0 1px 12px rgba(20,20,19,0.4);}.mbl-hero-showcase {position:relative; z-index:5;margin:-4rem var(--pad) 0;}.mbl-hero-showcase .hero-showcase__card {border-radius:var(--r-2xl);}.mbl-sect { padding:1.15rem var(--pad); }.mbl-sect--tight { padding:0.55rem var(--pad); }.mbl-sect--flush { padding-top:0.35rem; }.mbl-sect__head { display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem; margin-bottom:0.9rem; }.mbl-sect__title { font-family:var(--serif); font-size:1.6rem; font-weight:600; color:var(--ink); letter-spacing:-0.015em; line-height:1.1; }.mbl-sect__link { font-size:0.82rem; font-weight:600; color:var(--coral); text-decoration:none; white-space:nowrap; flex-shrink:0; }.mbl-sect__link:active { color:var(--coral-press); }.mbl-stack { display:flex; flex-direction:column; gap:0.7rem; }.mbl-stack--lg { gap:0.9rem; }.mbl-divider { border:none; border-top:1px solid var(--line-soft); margin:1.25rem 0; }.mbl-center { text-align:center; }.mbl-mt { margin-top:0.75rem; }.mbl-mt-lg { margin-top:1.5rem; }.mbl-mb { margin-bottom:0.75rem; }.mbl-row { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }.mbl-h1 { font-family:var(--serif); font-size:2.2rem; font-weight:600; color:var(--ink); line-height:1.08; letter-spacing:-0.02em; }.mbl-h2 { font-family:var(--serif); font-size:1.55rem; font-weight:600; color:var(--ink); line-height:1.15; letter-spacing:-0.015em; }.mbl-h3 { font-size:1rem; font-weight:700; color:var(--ink); }.mbl-lead { font-size:0.96rem; color:var(--muted); line-height:1.55; }.mbl-small { font-size:0.8rem; color:var(--faint); }.mbl-mono { font-family:var(--mono); font-size:0.85rem; }.mbl-muted { color:var(--muted); font-size:0.85rem; }.mbl-eyebrow { font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--coral); display:block; margin-bottom:0.4rem; }.mbl-main { }.mbl-chips {display:flex; gap:0.55rem; overflow-x:auto; padding:0.15rem var(--pad) 0.35rem;scrollbar-width:none; -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}.mbl-chips::-webkit-scrollbar { display:none; }.mbl-chip {flex-shrink:0; scroll-snap-align:start;display:inline-flex; align-items:center; gap:0.4rem;font-size:0.82rem; font-weight:600; color:var(--ink-soft);background:var(--white); border:1px solid var(--line);padding:0.5rem 0.95rem; border-radius:var(--r-pill);text-decoration:none; transition:transform 120ms, background 150ms;box-shadow:var(--shadow-xs);}.mbl-chip:active { transform:scale(0.95); }.mbl-chip.is-on { background:var(--ink); color:var(--on-dark); border-color:var(--ink); }.mbl-chip__ic { font-size:0.95rem; }.mbl-card { background:var(--white); border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow-sm); }.mbl-card__body { padding:1.25rem var(--pad); }.mbl-card--tap { transition:transform 130ms var(--ease); }.mbl-card--tap:active { transform:scale(0.985); }.mbl-card--flat { box-shadow:none; }.mbl-action {display:flex; align-items:center; gap:0.9rem; padding:1.05rem var(--pad);background:var(--white); border-radius:var(--r-lg); border:1px solid var(--line);text-decoration:none; color:inherit; box-shadow:var(--shadow-sm);transition:transform 130ms var(--ease);}.mbl-action:active { transform:scale(0.98); }.mbl-action__icon { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.35rem; }.mbl-action__icon--coral { background:var(--coral-ghost); color:var(--coral); }.mbl-action__icon--green { background:var(--green-ghost); color:var(--green); }.mbl-action__icon--grad { background:var(--coral-grad); color:#fff; box-shadow:var(--shadow-coral); }.mbl-action__text { flex:1; min-width:0; }.mbl-action__title { font-weight:700; font-size:0.96rem; color:var(--ink); }.mbl-action__sub { font-size:0.8rem; color:var(--muted); margin-top:1px; }.mbl-action__ar { color:var(--faint); font-size:1.05rem; flex-shrink:0; }.mbl-tlist {display:flex; gap:0.9rem; align-items:center; padding:0.85rem var(--pad);background:var(--white); border-radius:var(--r-lg); border:1px solid var(--line);text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); transition:transform 130ms var(--ease);}.mbl-tlist:active { transform:scale(0.985); }.mbl-tlist__av { position:relative; width:60px; height:60px; border-radius:16px; overflow:hidden; flex-shrink:0; background:var(--surface-strong); }.mbl-tlist__av img { width:100%; height:100%; object-fit:cover; }.mbl-tlist__av-fb { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.6rem; color:var(--faint); background:linear-gradient(160deg,var(--surface-soft),var(--surface-strong)); }.mbl-tlist__av .mbl-dot { position:absolute; bottom:3px; right:3px; width:12px; height:12px; border-radius:50%; background:var(--green); border:2px solid var(--white); }.mbl-tlist__info { flex:1; min-width:0; }.mbl-tlist__nm { font-weight:700; font-size:0.96rem; color:var(--ink); }.mbl-tlist__mt { font-size:0.8rem; color:var(--muted); margin-top:1px; }.mbl-tlist__rt { font-size:0.8rem; font-weight:600; color:var(--gold); margin-top:3px; }.mbl-tlist__rt small { color:var(--faint); font-weight:400; }.mbl-tlist__ar { color:var(--faint); flex-shrink:0; }.mbl-svc {display:block; background:var(--white); border-radius:var(--r-lg); border:1px solid var(--line);padding:1.05rem var(--pad); text-decoration:none; color:inherit; box-shadow:var(--shadow-sm);transition:transform 130ms var(--ease), border-color 150ms;}.mbl-svc:active { transform:scale(0.985); border-color:var(--coral); }.mbl-svc__top { display:flex; align-items:center; gap:0.85rem; }.mbl-svc__ic {width:50px; height:50px; border-radius:15px; flex-shrink:0;display:flex; align-items:center; justify-content:center; font-size:1.5rem;background:var(--coral-ghost); color:var(--coral);}.mbl-svc__ic--grad { background:var(--coral-grad); color:#fff; box-shadow:var(--shadow-coral); }.mbl-svc__hd { flex:1; min-width:0; }.mbl-svc__nm { font-family:var(--sans); font-weight:700; font-size:1.05rem; color:var(--ink); letter-spacing:-0.01em; }.mbl-svc__tag { font-family:var(--sans); font-size:0.82rem; color:var(--muted); margin-top:2px; }.mbl-svc__ar { color:var(--coral); flex-shrink:0; font-size:1.1rem; transition:transform 130ms; }.mbl-svc:active .mbl-svc__ar { transform:translateX(4px); }.mbl-svc__prices { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.85rem; }.mbl-svc__price {font-family:var(--mono); font-size:0.75rem; font-weight:600; color:var(--ink-soft);background:var(--surface-soft); padding:0.35rem 0.65rem; border-radius:var(--r-sm);}.mbl-svc__price b { color:var(--coral); font-weight:700; }.mbl-svc__desc { font-family:var(--sans); font-size:0.84rem; line-height:1.5; color:var(--ink-soft); margin-top:0.6rem; }.mbl-svc__feats { display:flex; flex-wrap:wrap; gap:0.35rem; margin-top:0.55rem; }.mbl-svc__feat { font-family:var(--sans); font-size:0.72rem; font-weight:500; color:var(--ink-soft); background:var(--surface-soft); padding:0.2rem 0.5rem; border-radius:var(--r-sm); }.mbl-svc-row {display:flex; align-items:center; gap:0.85rem; padding:0.9rem var(--pad);background:var(--white); border-radius:var(--r-md); border:1px solid var(--line);text-decoration:none; color:inherit; box-shadow:var(--shadow-xs); transition:transform 120ms;}.mbl-svc-row:active { transform:scale(0.985); }.mbl-svc-row__icon {width:42px; height:42px; border-radius:12px; flex-shrink:0; font-size:1.2rem;display:flex; align-items:center; justify-content:center;background:var(--coral-ghost); color:var(--coral);}.mbl-svc-row__info { flex:1; min-width:0; }.mbl-svc-row__name { font-weight:600; font-size:0.92rem; color:var(--ink); }.mbl-svc-row__price { font-size:0.78rem; color:var(--muted); margin-top:1px; }.mbl-svc-row__ar { color:var(--faint); flex-shrink:0; }.mbl-svc-icon {width:50px; height:50px; border-radius:15px; flex-shrink:0; font-size:1.5rem;display:inline-flex; align-items:center; justify-content:center;background:var(--coral-ghost); color:var(--coral);}.mbl-dark {margin:1.15rem var(--pad); background:var(--dark); color:var(--on-dark);border-radius:var(--r-2xl); padding:1.75rem 1.5rem; overflow:hidden; position:relative;}.mbl-dark::before {content:''; position:absolute; top:-40%; right:-20%; width:260px; height:260px;border-radius:50%; background:radial-gradient(circle, rgba(204,120,92,0.35), transparent 68%);pointer-events:none;}.mbl-dark > * { position:relative; z-index:1; }.mbl-dark__eyebrow { font-size:0.68rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); }.mbl-dark__title { font-family:var(--serif); font-size:1.7rem; font-weight:600; color:#fff; line-height:1.12; letter-spacing:-0.015em; margin:0.5rem 0 1.15rem; }.mbl-steps { display:flex; flex-direction:column; gap:1rem; }.mbl-step { display:flex; gap:0.9rem; align-items:flex-start; }.mbl-step__n {width:32px; height:32px; border-radius:10px; flex-shrink:0;display:flex; align-items:center; justify-content:center;font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--gold);background:var(--dark-elev); border:1px solid rgba(232,165,90,0.3);}.mbl-step__tt { font-weight:700; font-size:0.92rem; color:var(--on-dark); }.mbl-step__tx { font-size:0.83rem; color:var(--on-dark-muted); margin-top:2px; line-height:1.5; }.mbl-btn {display:inline-flex; align-items:center; justify-content:center; gap:0.45rem;font-family:var(--sans); font-size:0.92rem; font-weight:700;padding:0.8rem 1.4rem; border-radius:var(--r-pill); border:none;cursor:pointer; text-decoration:none !important; line-height:1.25; min-height:48px;transition:transform 120ms var(--ease), background 150ms, border-color 150ms, box-shadow 150ms;}.mbl-btn:active { transform:scale(0.96); }.mbl-btn--fill, a.mbl-btn--fill, button.mbl-btn--fill { background:var(--coral-grad); color:#ffffff !important; width:100%; box-shadow:var(--shadow-coral); }.mbl-btn--fill:hover, .mbl-btn--fill:focus, .mbl-btn--fill:focus-visible, a.mbl-btn--fill:hover, a.mbl-btn--fill:focus, a.mbl-btn--fill:focus-visible, button.mbl-btn--fill:hover, button.mbl-btn--fill:focus { color:#ffffff !important; background:linear-gradient(135deg, #d68368 0%, #e69174 100%) !important; box-shadow:0 8px 24px rgba(204,120,92,0.32) !important; text-decoration:none !important; }.mbl-btn--fill:active, a.mbl-btn--fill:active { color:#ffffff !important; transform:scale(0.96); }.mbl-btn--outline, a.mbl-btn--outline, button.mbl-btn--outline { background:var(--white); color:var(--ink) !important; border:1.5px solid var(--line); width:100%; }.mbl-btn--outline:hover, .mbl-btn--outline:focus, .mbl-btn--outline:focus-visible, a.mbl-btn--outline:hover, a.mbl-btn--outline:focus, a.mbl-btn--outline:focus-visible, button.mbl-btn--outline:hover, button.mbl-btn--outline:focus { color:var(--ink) !important; background:#ffffff !important; border-color:var(--ink) !important; text-decoration:none !important; }.mbl-btn--outline:active, a.mbl-btn--outline:active { color:var(--ink) !important; transform:scale(0.96); }.mbl-btn--dark, a.mbl-btn--dark, button.mbl-btn--dark { background:var(--dark); color:var(--on-dark) !important; width:100%; }.mbl-btn--dark:hover, .mbl-btn--dark:focus, a.mbl-btn--dark:hover, a.mbl-btn--dark:focus { color:#ffffff !important; background:#252320 !important; text-decoration:none !important; }.mbl-btn--ghost, a.mbl-btn--ghost, button.mbl-btn--ghost { background:var(--coral-ghost); color:var(--coral) !important; width:100%; }.mbl-btn--ghost:hover, .mbl-btn--ghost:focus, a.mbl-btn--ghost:hover, a.mbl-btn--ghost:focus { color:var(--coral) !important; background:rgba(204,120,92,0.14) !important; text-decoration:none !important; }.mbl-btn--sm { font-size:0.84rem; padding:0.6rem 1.1rem; min-height:42px; }.mbl-btn--xs { font-size:0.76rem; padding:0.45rem 0.9rem; min-height:34px; }.mbl-pill {display:inline-flex; align-items:center; gap:0.25rem;font-size:0.7rem; font-weight:700; padding:0.24rem 0.65rem;border-radius:var(--r-pill); line-height:1.3; text-transform:uppercase; letter-spacing:0.03em;}.mbl-pill--coral { background:var(--coral-soft); color:var(--coral-press); }.mbl-pill--green { background:var(--green-ghost); color:var(--green); }.mbl-pill--amber { background:var(--amber-ghost); color:var(--amber); }.mbl-pill--red { background:var(--red-ghost); color:var(--red); }.mbl-pill--ink { background:var(--surface-soft); color:var(--ink); }.mbl-ticket { background:var(--dark); border-radius:var(--r-lg); padding:1.3rem 1.15rem; color:var(--on-dark); }.mbl-ticket__code { font-family:var(--mono); font-size:1.2rem; font-weight:500; letter-spacing:0.05em; }.mbl-ticket__rows { margin-top:0.85rem; display:flex; flex-direction:column; gap:0.45rem; }.mbl-ticket__row { display:flex; justify-content:space-between; font-size:0.85rem; }.mbl-ticket__row span:first-child { color:var(--on-dark-muted); }.mbl-ticket__row span:last-child { color:var(--on-dark); font-weight:500; text-align:right; }.mbl-timeline { display:flex; justify-content:space-between; padding:0.4rem 0; position:relative; }.mbl-timeline::before { content:''; position:absolute; top:11px; left:12%; right:12%; height:1.5px; background:rgba(250,249,245,0.15); }.mbl-timeline__step { display:flex; flex-direction:column; align-items:center; gap:0.3rem; z-index:1; flex:1; }.mbl-timeline__dot { width:10px; height:10px; border-radius:50%; background:rgba(250,249,245,0.2); border:2px solid rgba(250,249,245,0.2); }.mbl-timeline__step.is-done .mbl-timeline__dot,.mbl-timeline__step.is-active .mbl-timeline__dot { background:var(--coral); border-color:var(--coral); }.mbl-timeline__step.is-active .mbl-timeline__dot { box-shadow:0 0 0 4px rgba(204,120,92,0.25); }.mbl-timeline__label { font-size:0.58rem; color:rgba(250,249,245,0.45); text-align:center; max-width:55px; line-height:1.2; }.mbl-timeline__step.is-done .mbl-timeline__label,.mbl-timeline__step.is-active .mbl-timeline__label { color:var(--on-dark); }.mbl-field { margin-bottom:0.9rem; }.mbl-label { display:block; font-size:0.8rem; font-weight:700; color:var(--ink); margin-bottom:0.35rem; }.mbl-input, .mbl-select, .mbl-textarea {width:100%; font-family:var(--sans); font-size:16px;padding:0.8rem 0.9rem; border:1.5px solid var(--line);border-radius:var(--r-sm); background:var(--white); color:var(--ink);-webkit-appearance:none; transition:border-color 150ms, box-shadow 150ms;}.mbl-input:focus, .mbl-select:focus, .mbl-textarea:focus { outline:none; border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-ghost); }.mbl-select {background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%236c6a64' stroke-width='1.5' fill='none'/></svg>");background-repeat:no-repeat; background-position:right 0.75rem center; padding-right:2rem;}.mbl-textarea { resize:vertical; min-height:90px; }.mbl-check { display:flex; align-items:flex-start; gap:0.5rem; font-size:0.82rem; color:var(--ink-soft); cursor:pointer; }.mbl-check input { margin-top:2px; flex-shrink:0; accent-color:var(--coral); }.mbl-note { padding:0.9rem 1.05rem; border-radius:var(--r-md); font-size:0.86rem; line-height:1.5; }.mbl-note--info { background:var(--info-soft); color:var(--ink); border:1px solid var(--line-strong); }.mbl-note--ok { background:var(--green-ghost); color:var(--green); border:1px solid var(--ok-soft); }.mbl-note--warn { background:var(--amber-ghost); color:var(--amber); border:1px solid var(--warn-soft); }.mbl-note--err { background:var(--red-ghost); color:var(--red); border:1px solid var(--err-soft); }.mbl-404 { text-align:center; padding:3rem var(--pad); }.mbl-404__code { font-family:var(--serif); font-size:6.5rem; font-weight:600; line-height:1; background:var(--coral-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }.mbl-404__title { font-family:var(--serif); font-size:1.55rem; font-weight:600; color:var(--ink); margin-top:0.5rem; }.mbl-404__text { color:var(--muted); margin-top:0.5rem; font-size:0.92rem; }.mbl-404__btns { display:flex; flex-direction:column; gap:0.65rem; margin-top:1.5rem; max-width:280px; margin-left:auto; margin-right:auto; }.mbl-faq { display:flex; flex-direction:column; gap:0.5rem; }.mbl-faq__item { background:var(--white); border-radius:var(--r-md); border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow-xs); }.mbl-faq__q {width:100%; text-align:left; font-family:var(--sans); font-size:0.92rem;font-weight:600; color:var(--ink); background:none; border:none;padding:1rem var(--pad); cursor:pointer; display:flex; justify-content:space-between;align-items:center; gap:0.5rem; min-height:52px;}.mbl-faq__q:active { background:var(--surface-soft); }.mbl-faq__arrow { transition:transform 200ms var(--ease); color:var(--coral); flex-shrink:0; font-size:0.8rem; }.mbl-faq__item.is-open .mbl-faq__arrow { transform:rotate(180deg); }.mbl-faq__a { display:none; padding:0 var(--pad) 1rem; font-size:0.86rem; color:var(--ink-soft); line-height:1.6; }.mbl-faq__item.is-open .mbl-faq__a { display:block; }.mbl-burger { display:flex; flex-direction:column; }.mbl-burger a { display:flex; align-items:center; padding:0.9rem 0; text-decoration:none; color:var(--ink); font-weight:600; font-size:0.92rem; border-bottom:1px solid var(--line-soft); }.mbl-burger a:last-child { border-bottom:none; }.mbl-burger a:active { color:var(--coral); }.mbl-bnav {position:fixed;left:0; right:0; bottom:0;z-index:100;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));align-items:stretch;width:100%;min-height:var(--bnav-h);margin:0;padding:0 0 var(--safe-b);background:var(--coral, #cc785c);backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);border:0;border-top:1px solid rgba(255,255,255,0.18);border-radius:0;box-shadow:0 -6px 24px rgba(204, 120, 92, 0.35);}
.mbl-bnav.has-active-booking { grid-template-columns:repeat(5, minmax(0, 1fr)); }.mbl-bnav__item {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.15rem;min-height:52px;min-width:0;padding:0.4rem 0.15rem 0.45rem;font-size:0.66rem;font-weight:500;color:rgba(255,255,255,0.68);text-align:center;text-decoration:none;transition:transform 0.1s ease, color 0.15s;-webkit-tap-highlight-color:transparent;background:none;}.mbl-bnav__item:active { transform:scale(0.93); }.mbl-bnav__icon { width:22px; height:22px; flex-shrink:0; stroke:rgba(255,255,255,0.72); color:rgba(255,255,255,0.72); stroke-width:1.75; margin-bottom:1px; transition:all 0.15s ease; }.mbl-bnav__label {font-size:0.66rem;font-weight:500;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;opacity:1;transition:all 0.15s ease;white-space:nowrap;color:rgba(255,255,255,0.72);}.mbl-bnav__item.is-active {color:#ffffff;background:none;box-shadow:none;}.mbl-bnav__item.is-active .mbl-bnav__label {color:#ffffff;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,0.18);}.mbl-bnav__item.is-active .mbl-bnav__icon {stroke:#ffffff;color:#ffffff;stroke-width:2.2;filter:drop-shadow(0 2px 5px rgba(0,0,0,0.22));}.toast-stack { left:50% !important; right:auto !important; transform:translateX(-50%) !important; bottom:calc(var(--bnav-h, 56px) + var(--safe-b, 0px) + 0.85rem) !important; z-index:10000 !important; width:calc(100% - 2rem) !important; max-width:360px !important; }[hidden] { display:none !important; }[data-page="booking"] #bookingModal { all:unset; }[data-page="booking"] .modal-overlay { all:unset; display:block !important; }[data-page="booking"] .modal-sheet { all:unset; display:block !important; }[data-page="booking"] .modal-sheet__head { display:none; }.mbl-main .progress { display:flex; gap:0.35rem; margin-bottom:1.35rem; }.mbl-main .progress__item { flex:1; display:flex; flex-direction:column; gap:0.35rem; align-items:center; }.mbl-main .progress__bar { width:100%; height:4px; border-radius:2px; background:var(--line); transition:background 200ms; }.mbl-main .progress__bar.is-active,.mbl-main .progress__bar.is-done { background:var(--coral); }.mbl-main .progress__cap { font-size:0.62rem; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:0.04em; }.mbl-main .booking-step__title { font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--ink); margin:0.3rem 0 0.5rem; letter-spacing:-0.015em; }.mbl-main .step-label { font-size:0.7rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--coral); }.mbl-main .lead { font-size:0.86rem; color:var(--muted); margin-bottom:1rem; }.mbl-main .therapist-pick-grid { display:flex; flex-direction:column; gap:0.65rem; }.mbl-main .therapist-pick__card {display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto auto;column-gap:0.85rem; row-gap:0.1rem; align-items:center;padding:0.8rem 0.9rem; background:var(--white); border:1.5px solid var(--line);border-radius:var(--r-md); box-shadow:var(--shadow-xs);}.mbl-main .therapist-pick__photo,.mbl-main .therapist-pick__initials {grid-column:1; grid-row:1 / span 3; align-self:center;width:56px; height:56px; border-radius:15px; object-fit:cover; flex-shrink:0;}.mbl-main .therapist-pick__initials {display:grid; place-items:center;background:linear-gradient(160deg, var(--surface-soft), var(--surface-strong));font-family:var(--serif); font-size:1.5rem; color:var(--faint);}.mbl-main .therapist-pick input:checked + .therapist-pick__card { border-color:var(--coral); background:var(--coral-ghost); }.mbl-main .therapist-pick input[type="radio"] { accent-color:var(--coral); position:absolute; opacity:0; width:0; height:0; }.mbl-main .therapist-pick__name { grid-column:2; font-weight:700; font-size:0.95rem; color:var(--ink); }.mbl-main .therapist-pick__meta { grid-column:2; font-size:0.82rem; font-weight:600; color:var(--gold); }.mbl-main .therapist-pick__spec { grid-column:2; font-size:0.78rem; color:var(--muted); }.mbl-main .therapist-pick__spec:empty { display:none; }.mbl-main .field { margin-bottom:0.9rem; }.mbl-main .field label,.mbl-main .fieldset-label { display:block; font-size:0.8rem; font-weight:700; color:var(--ink); margin-bottom:0.35rem; }.mbl-main .field-hint { font-size:0.78rem; color:var(--faint); margin-top:-0.4rem; margin-bottom:0.75rem; }.mbl-main .input,.mbl-main .select,.mbl-main .textarea {width:100%; font-family:var(--sans); font-size:16px;padding:0.8rem 0.9rem; border:1.5px solid var(--line);border-radius:var(--r-sm); background:var(--white); color:var(--ink);}.mbl-main .select {background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%236c6a64' stroke-width='1.5' fill='none'/></svg>");background-repeat:no-repeat; background-position:right 0.75rem center; padding-right:2rem;}.mbl-main .textarea { resize:vertical; min-height:85px; }.mbl-main .input:focus, .mbl-main .select:focus, .mbl-main .textarea:focus { outline:none; border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-ghost); }.mbl-main .form-row { display:flex; gap:0.6rem; }.mbl-main .form-row .field { flex:1; min-width:0; }.mbl-main .field--dial { flex:0 0 4.5rem; }.mbl-main .pills--duration { display:flex; gap:0.5rem; flex-wrap:wrap; }.mbl-main .estimate-line { text-align:center; padding:1rem; background:var(--surface-soft); border-radius:var(--r-md); font-size:0.85rem; color:var(--muted); margin-top:0.75rem; }.mbl-main .estimate-line strong { display:block; font-family:var(--serif); font-size:1.6rem; font-weight:600; color:var(--ink); margin-top:0.15rem; }.mbl-main .summary { background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:1.1rem; margin-top:1rem; box-shadow:var(--shadow-xs); }.mbl-main .summary__title { font-weight:700; font-size:0.85rem; color:var(--ink); }.mbl-main .pay-stack { display:flex; flex-direction:column; gap:0.6rem; }.mbl-main .booking-actions { display:flex; flex-direction:column; gap:0.6rem; margin-top:1rem; position:relative; z-index:5; }.mbl-main .btn {flex:1; display:inline-flex; align-items:center; justify-content:center; gap:0.45rem;font-family:var(--sans); font-size:0.92rem; font-weight:700;padding:0.8rem 1.1rem; border-radius:var(--r-pill); border:none;cursor:pointer; min-height:48px; transition:transform 120ms var(--ease);position:relative; z-index:5; pointer-events:auto; -webkit-tap-highlight-color:transparent;touch-action:manipulation;}.mbl-main .btn:active { transform:scale(0.96); }.mbl-main .btn--primary,.mbl-main .btn--block { background:var(--coral-grad); color:#fff; box-shadow:var(--shadow-coral); }.mbl-main .btn--secondary { background:var(--white); color:var(--ink); border:1.5px solid var(--line); }.mbl-main .btn--block { width:100%; }.mbl-main .btn--lg { min-height:48px; padding:0.8rem 1.1rem; font-size:0.92rem; }.mbl-main .booking-actions .btn { width:100%; flex:0 0 auto; }.mbl-main .pesanan-login__form { display:flex; flex-direction:column; gap:0.75rem; }.mbl-main .input--code { text-align:center; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.08em; }.mbl-main .status-newnote {display:flex; align-items:flex-start; gap:0.6rem; padding:0.95rem 1.05rem;background:var(--green-ghost); border:1px solid var(--ok-soft); border-radius:var(--r-md);margin-bottom:0.85rem;}.mbl-main .status-newnote strong { color:var(--ink); font-size:0.88rem; display:block; }.mbl-main .status-ticket {background:var(--dark); color:var(--on-dark);border-radius:var(--r-2xl); padding:1.75rem 1.35rem 1.5rem;margin-bottom:1rem; position:relative; overflow:hidden;box-shadow:0 8px 32px rgba(20,20,19,0.18);}.mbl-main .status-ticket::before { content:''; position:absolute; top:-50%; right:-15%; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(204,120,92,0.28), transparent 65%); pointer-events:none; }.mbl-main .status-ticket::after { content:''; position:absolute; bottom:-30%; left:-10%; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, rgba(232,165,90,0.12), transparent 65%); pointer-events:none; }.mbl-main .status-ticket > * { position:relative; z-index:1; }.mbl-main .status-ticket__top { display:flex; align-items:flex-start; justify-content:space-between; gap:0.75rem; margin-bottom:1.1rem; }.mbl-main .status-ticket__label { display:block; font-size:0.62rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--on-dark-muted); margin-bottom:0.25rem; }.mbl-main .status-ticket__code { font-family:var(--mono); font-size:1.3rem; font-weight:600; letter-spacing:0.04em; word-break:break-all; line-height:1.3; }.mbl-main .status-ticket .pill {display:inline-flex; align-items:center; font-size:0.68rem; font-weight:700;padding:0.32rem 0.75rem; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:0.03em;background:rgba(250,249,245,0.14); color:var(--on-dark);white-space:nowrap; flex-shrink:0;}.mbl-main .timeline { display:flex; justify-content:space-between; padding:0.5rem 0; position:relative; margin-top:0.85rem; }.mbl-main .timeline::before { content:''; position:absolute; top:12px; left:10%; right:10%; height:2px; background:rgba(250,249,245,0.12); border-radius:1px; }.mbl-main .timeline__item { display:flex; flex-direction:column; align-items:center; gap:0.35rem; z-index:1; flex:1; }.mbl-main .timeline__dot { display:block; width:10px; height:10px; border-radius:50%; background:rgba(250,249,245,0.2); border:2px solid rgba(250,249,245,0.2); transition:all 0.3s ease; }.mbl-main .timeline__item.is-done .timeline__dot,.mbl-main .timeline__item.is-active .timeline__dot { background:var(--coral); border-color:var(--coral); }.mbl-main .timeline__item.is-active .timeline__dot { box-shadow:0 0 0 4px rgba(204,120,92,0.25); }.mbl-main .timeline__body h4 { font-size:0.6rem; color:rgba(250,249,245,0.4); text-align:center; max-width:64px; line-height:1.2; }.mbl-main .timeline__item.is-done .timeline__body h4,.mbl-main .timeline__item.is-active .timeline__body h4 { color:var(--on-dark); font-weight:600; }.mbl-main .track-card { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.25rem 1.15rem; margin-bottom:0.85rem; box-shadow:var(--shadow-xs); }.mbl-main .track-card__title { font-weight:700; font-size:0.92rem; color:var(--ink); margin-bottom:0.65rem; }.mbl-main .track-table th { text-align:left; font-weight:400; color:var(--muted); padding:0.35rem 0.5rem 0.35rem 0; white-space:nowrap; font-size:0.82rem; }.mbl-main .track-table td { padding:0.35rem 0; color:var(--ink); text-align:right; font-size:0.85rem; font-weight:500; }.mbl-main .star-rating { display:inline-flex; flex-direction:row-reverse; gap:0.2rem; font-size:1.7rem; margin-bottom:0.85rem; }.mbl-main .star-rating__star { color:var(--line); cursor:pointer; transition:color 120ms; }.mbl-main .star-rating__input:checked ~ .star-rating__star,.mbl-main .star-rating__star:hover,.mbl-main .star-rating__star:hover ~ .star-rating__star { color:var(--gold); }.mbl-main .akun-modal-login { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:1.5rem 1.25rem;}.mbl-main .form-stack { display:flex; flex-direction:column; gap:1rem; }.mbl-main .pesanan-login__icon { font-size:3.5rem; margin-bottom:0.75rem; text-align:center; }.mbl-main .pesanan-login__lead { font-size:0.88rem; color:var(--muted); text-align:center; margin-bottom:1.25rem; line-height:1.5; }.mbl-main .status-newnote__check { color:var(--green); font-size:1.5rem; flex-shrink:0; }.mbl-main .status-ticket__cancelled { display:block; text-align:center; font-size:0.88rem; color:var(--on-dark); margin-top:0.6rem; padding:0.8rem 0 0;border-top:1px solid rgba(250,249,245,0.1);}.mbl-main .status-ticket__cancelled em { font-style:italic; color:var(--on-dark-muted); font-size:0.82rem; display:block; margin-top:0.35rem;}.mbl-main .track-actions { display:flex; flex-direction:column; gap:0.75rem; padding:1.25rem 1.15rem; margin-bottom:0.85rem;background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-xs);}.mbl-main .track-actions .muted { font-size:0.8rem; color:var(--muted); text-align:center;}.mbl-main .track-actions .btn { width:100%; }.mbl-main .review-card { background:var(--surface-soft); border-radius:var(--r-lg); padding:1.25rem 1.15rem; margin-bottom:0.85rem; }.mbl-main .review-card__stars { display:flex; justify-content:center; gap:0.25rem; font-size:1.5rem; margin-bottom:0.75rem;}.mbl-main .review-card__stars .star { color:var(--gold); }.mbl-main .review-card__comment { font-size:0.9rem; color:var(--ink); line-height:1.5; margin-bottom:0.75rem; padding:0 0.25rem;}.mbl-main .review-card__note { font-size:0.78rem; color:var(--muted); text-align:center; margin-top:0.35rem; padding-top:0.7rem; border-top:1px solid var(--line-soft);}.mbl-main .track-table { width:100%; border-collapse:collapse; }.mbl-main .track-table td { font-size:0.88rem; }.mbl-main .account-dd__head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding-bottom:1rem; border-bottom:1px solid var(--line-soft); margin-bottom:1rem; }.mbl-main .account-dd__head-lang { display:none !important; }.mbl-main .account-dd__head-id strong { font-weight:700; color:var(--ink); font-size:0.95rem; }.mbl-main .account-dd__wa { font-size:0.8rem; color:var(--muted); font-family:var(--mono); }.mbl-main .account-dd__detail { font-size:0.85rem; color:var(--ink-soft); margin-bottom:0.75rem; }.mbl-main .account-dd__history { display:flex; flex-direction:column; gap:0.4rem; }.mbl-main .account-dd__hist-item {display:flex; align-items:center; justify-content:space-between;padding:0.8rem 0.95rem; background:var(--surface-soft); border-radius:var(--r-md);text-decoration:none; color:inherit;}.mbl-main .account-dd__hist-item:active { background:var(--line); }.mbl-main .account-dd__hist-main .mono { font-family:var(--mono); font-size:0.82rem; font-weight:500; color:var(--ink); }.mbl-main .account-dd__hist-meta { font-size:0.75rem; color:var(--muted); margin-top:1px; display:block; }.mbl-main .account-dd__foot { display:flex; gap:0.5rem; margin-top:1rem; padding-top:0.75rem; border-top:1px solid var(--line-soft); }.mbl-main .account-dd__section-label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--faint); margin-bottom:0.35rem; }.mbl-main .account-dd__empty { font-size:0.85rem; color:var(--muted); }.mbl-main .step-label {display:none !important;}.mbl-main .modal-overlay {position:fixed; inset:0; z-index:1000;display:flex; align-items:flex-end; justify-content:center;}.mbl-main .modal-overlay[hidden] { display:none !important; }.mbl-main .modal-overlay__bg {position:absolute; inset:0;background:rgba(20,20,19,0.55);backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);cursor:pointer;}body.modal-open { overflow:hidden; }.mbl-main .modal-sheet {position:relative; z-index:1;width:100%; max-width:500px;max-height:92dvh;background:var(--cream);border-radius:var(--r-xl) var(--r-xl) 0 0;display:flex; flex-direction:column;box-shadow:0 -12px 48px rgba(20,20,19,0.25);animation:modalSheetUp 0.28s ease;}.mbl-main .modal-sheet__head {display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;padding:1.25rem 1.25rem 0.85rem;border-bottom:1px solid rgba(20,20,19,0.08);flex:0 0 auto;}.mbl-main .modal-sheet__title {font-family:var(--serif); font-size:1.25rem; font-weight:500;color:var(--ink); margin:0.1rem 0 0;}.mbl-main .modal-sheet__close {flex:0 0 auto;width:32px; height:32px; border-radius:50%;border:1px solid rgba(20,20,19,0.12); background:#fff;font-size:1.25rem; line-height:1; cursor:pointer; color:var(--ink);display:flex; align-items:center; justify-content:center;}.mbl-main .modal-sheet__close:active { background:rgba(20,20,19,0.05); }.mbl-main .modal-sheet__body {padding:1.25rem 1.25rem 2rem;overflow-y:auto; -webkit-overflow-scrolling:touch;}@keyframes modalSheetUp {from { transform:translateY(24px); opacity:0; }to { transform:none; opacity:1; }}.mbl-main .modal-sheet--cancel { width:100%; }.mbl-main .modal-sheet--cancel .cancel-summary__code {font-family:var(--mono); font-size:1.15rem; font-weight:700;text-align:center; margin-bottom:1rem; color:var(--coral);}.mbl-main .modal-sheet--cancel .booking-actions {display:flex; flex-direction:column; gap:0.75rem; margin-top:1.25rem;}.mbl-main .modal-sheet--cancel .btn {flex:1; min-height:48px; width:100%;}

/* Mobile Service Card Styling */
.mbl-svc:hover .mbl-svc__ar { transform:translateX(4px); }
.mbl-svc__price { font-family:var(--mono); color:var(--coral); font-weight:600; }
.mbl-pill--coral { background:var(--coral); color:#ffffff; border-radius:var(--r-pill); font-size:0.68rem; padding:4px 12px; text-transform:uppercase; vertical-align:middle; }
@media (min-width: 768px) { .mbl-svc { padding:16px; } }

/* Payment Information Cards (Non-radio display) */
.pay-info-card { margin-bottom:1.25rem; } /* Sesi #90: .pay-info-stack dihapus (dua kartu digabung jadi satu); jarak bawahnya dipindah ke kartu */
.pay-info-card { display:flex; align-items:flex-start; gap:0.75rem; background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--r-md); padding:0.85rem 1rem; }
.pay-info-icon { flex:0 0 auto; color:var(--coral); margin-top:2px; }
.pay-info-body strong { display:block; font-size:0.9rem; font-weight:600; color:var(--ink); margin-bottom:0.15rem; }
.pay-info-desc { font-size:0.82rem; color:var(--muted); line-height:1.35; display:block; }

/* Hero Quick-Pick — versi mobile. DESIGN.md §5A: fokus jempol, sentuh minimal 44px. */
.hero-quickpick { display:grid; gap:0.8rem; margin-top:1rem; }
.hero-quickpick__field { display:grid; gap:0.35rem; }
.hero-quickpick__field > label { font-size:0.75rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); }
.hero-quickpick__select { width:100%; min-height:48px; padding:0.7rem 0.9rem; border:1px solid var(--line); border-radius:var(--r-md); background:var(--white); color:var(--ink); font:inherit; font-size:16px; transition:border-color 0.2s ease, box-shadow 0.2s ease; }
.hero-quickpick__select:focus { outline:none; border-color:var(--coral); box-shadow:var(--shadow-glow, 0 0 0 4px rgba(204,120,92,0.15)); }
.hero-quickpick__pills { display:flex; flex-wrap:wrap; gap:0.45rem; }
.hero-quickpick__pill { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-width:72px; min-height:48px; padding:0.4rem 0.8rem; border:1px solid var(--line); border-radius:var(--r-md); background:var(--white); color:var(--ink); font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
.hero-quickpick__pill:active { transform:scale(0.97); }
.hero-quickpick__pill strong { font-size:1.05rem; line-height:1; }
.hero-quickpick__pill small { font-size:0.7rem; color:var(--muted); }
.hero-quickpick__pill.is-active { border-color:var(--coral); background:var(--coral-soft); }
.hero-quickpick__pill.is-active small { color:var(--coral-hover, #b8684c); }
.hero-quickpick__price { display:flex; align-items:baseline; justify-content:space-between; gap:0.5rem; margin:0; padding-top:0.2rem; }
.hero-quickpick__price-label { font-size:0.82rem; color:var(--muted); }
.hero-quickpick__price strong { font-family:var(--font-serif); font-size:1.45rem; font-weight:500; color:var(--coral); letter-spacing:-0.01em; }
/* Sesi 20260805: dipakai JS (includes/hero-quickpick.php) untuk feedback validasi
   saat "Pesan sekarang" ditekan sebelum layanan/durasi dipilih — sudah ada di
   desktop (style.css) tapi tidak pernah disalin ke mobile, jadi pesannya tampil
   tanpa gaya/nyaris tak terlihat dan tombolnya terasa tidak merespons apa pun. */
.hero-quickpick__hint { margin:0; font-size:0.8rem; font-weight:600; color:var(--coral-hover, #b8684c); }
.hero-quickpick__pills--attn { animation: hqShake 0.4s ease; }
@keyframes hqShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }

/* Kutipan ulasan di kartu terapis (Sesi #88) */
.therapist-pick__quote { display:block; margin-top:0.3rem; font-size:0.76rem; line-height:1.45; color:var(--muted); font-style:italic; }

/* ── Pilih terapis — MOBILE (Sesi #102) ─────────────────────────────────────
   Berdiri sendiri, TIDAK berbagi kelas dengan public/assets/css/style.css.
   Bahasa visualnya sengaja beda: kartu bertumpuk vertikal + tombol selebar
   kartu (target sentuh), bukan baris horizontal dengan tombol kecil di kanan
   seperti versi desktop. */
.mbl-pick { display:grid; gap:0.7rem; margin-top:0.85rem; }
.mbl-pick__card { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:0.85rem; display:grid; gap:0.7rem; box-shadow:var(--shadow-sm); }
.mbl-pick__top { display:flex; align-items:center; gap:0.75rem; }
.mbl-pick__photo { width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.mbl-pick__initials { width:64px; height:64px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background:var(--coral-grad); color:#fff; font-weight:700; font-size:1.3rem; }
.mbl-pick__id { min-width:0; display:grid; gap:2px; }
.mbl-pick__name { font-weight:700; font-size:1rem; color:var(--ink); }
.mbl-pick__meta { font-size:0.8rem; color:var(--muted); }
.mbl-pick__role { font-size:0.75rem; color:var(--faint); }
.mbl-pick__desc { font-size:0.85rem; line-height:1.55; color:var(--muted); margin:0; }
.mbl-pick__cta { width:100%; }
.mbl-pick__note { margin-top:0.7rem; }

/* Sheet dari bawah layar — kebiasaan aplikasi mobile, bukan kotak di tengah. */
.mbl-sheet-overlay .mbl-sheet { position:fixed; left:0; right:0; bottom:0; max-height:88vh; overflow-y:auto; background:var(--white); border-radius:20px 20px 0 0; padding:0.6rem 1rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); box-shadow:0 -8px 32px rgba(20,20,19,0.18); animation:mblSheetUp 0.22s var(--ease); }
@keyframes mblSheetUp { from { transform:translateY(12%); opacity:0.6; } to { transform:translateY(0); opacity:1; } }
.mbl-sheet__grabber { display:block; width:38px; height:4px; margin:0.35rem auto 0.7rem; border-radius:999px; background:var(--line); }
.mbl-sheet__head { display:flex; align-items:flex-start; justify-content:space-between; gap:0.75rem; }
.mbl-sheet__title { font-family:var(--serif, inherit); font-size:1.15rem; font-weight:600; color:var(--ink); margin:0; }
.mbl-sheet__sub { font-size:0.82rem; color:var(--muted); margin:0.2rem 0 0; }
.mbl-sheet__close { background:none; border:0; font-size:1.6rem; line-height:1; color:var(--faint); cursor:pointer; padding:0 0.25rem; min-height:44px; min-width:44px; }
.mbl-sheet__body { margin-top:0.5rem; }

/* Badge hitungan di tombol "Pilih terapis" pada kartu hero mobile. */
.btn__count { display:inline-grid; place-items:center; min-width:1.35rem; height:1.35rem; margin-left:0.4rem; padding:0 0.35rem; border-radius:999px; background:rgba(255,255,255,0.25); font-size:0.72rem; font-weight:700; }

/* Sesi #123: halaman Chat Admin AI (chat.php) — sembunyikan bottom-nav supaya
   terasa full-screen seperti aplikasi chat sungguhan (server-nav tab "Pesan"
   tidak relevan lagi di layar ini), dan lepas padding-bottom yang tadinya
   dicadangkan untuk bottom-nav itu supaya bar input chat bisa sticky pas di
   dasar viewport tanpa jarak kosong. */
body.mbl-body[data-page="chat"] { padding-bottom: 0; padding-top: 0; }
body.mbl-body[data-page="chat"] .mbl-bnav { display: none; }
/* Header situs standar (judul + tombol kembali) DIHILANGKAN di halaman chat —
   header chat sendiri (nama admin + gir pengaturan + tombol tutup) sudah
   menggantikan fungsinya, dua header bertumpuk terlihat redundan. */
body.mbl-body[data-page="chat"] .mbl-header { display: none !important; }

/* Sesi #123 (perbaikan regresi): CSS khusus beranda mobile (index.php) INI
   TADINYA dicetak per-halaman lewat $head_extra_css di <head> — bagus untuk
   mencegah kedipan hero di FULL page load, TAPI SPA soft-nav (app-nav.js)
   cuma menukar isi #mblMain, TIDAK PERNAH menyentuh <head> lagi. Akibatnya
   begitu konsumen masuk ke index.php lewat navigasi SPA dari halaman lain
   (mis. tombol Tutup chat.php → index.php), CSS ini tidak pernah termuat —
   header situs & "header sapaan" custom index tampil BERTUMPUK ("bentrok").
   Dipindah ke sini (stylesheet global, selalu termuat di SETIAP halaman,
   tidak peduli hard-load atau SPA) supaya konsisten di kedua jalur navigasi.
   Selector-nya sudah digerbangi [data-page="index"] jadi aman, tidak
   memengaruhi halaman lain. */
.mbl-body[data-page="index"] .mbl-header {
  display: none !important;
}
.mbl-body[data-page="index"] .mbl-main {
  padding-top: 0 !important;
}
.mbl-shell {
  background-color: #faf9f5;
}
.app-greeting-header {
  padding: 1.75rem 1.25rem 0.75rem;
  background: #faf9f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.app-greeting-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink, #1c1a17);
  margin: 0;
}
.app-greeting-sub {
  font-size: 0.85rem;
  color: var(--muted, #7c7267);
  margin-top: 2px;
}
.app-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.app-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(42, 122, 64, 0.08);
  color: #2a7a40;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
}
.app-status-dot {
  width: 7px;
  height: 7px;
  background-color: #2a7a40;
  border-radius: 50%;
  animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.6; }
}
.mbl-hero {
  margin: 0 1rem;
  border-radius: 20px;
  overflow: hidden;
  height: 210px !important;
  min-height: auto !important;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem !important;
  box-shadow: var(--shadow-sm);
}
.mbl-hero::after {
  display: none !important;
}
.mbl-hero > * {
  position: relative;
  z-index: 2;
}
/* Sesi 20260804: foto banner asli (bukan overlay teks) — judul & deskripsi
   sudah dipindah ke .mbl-hero-copy DI BAWAH kartu ini (bukan di atas foto),
   jadi gambar mengisi penuh kartu tanpa perlu ruang untuk teks di atasnya. */
.mbl-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.mbl-hero__title {
  font-size: 1.35rem !important;
  margin: 4px 0 0 !important;
  color: #fff !important;
  line-height: 1.25 !important;
}
.mbl-hero__eyebrow {
  font-size: 0.68rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7) !important;
  font-weight: 600;
}
.mbl-hero__sub {
  display: none !important;
}
.mbl-hero-showcase {
  margin: 0.75rem 1rem 1rem !important;
}
.hero-showcase__card {
  border-radius: 18px !important;
  border: 1px solid var(--line, #e6dfd8) !important;
  box-shadow: 0 10px 25px rgba(28,26,23,0.06) !important;
  background: #fff !important;
  color: #1c1a17 !important;
}
.hero-live__foot {
  border-top: 1px solid var(--line-soft, #f5f0e8) !important;
  color: var(--muted, #7c7267) !important;
}
.app-action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  padding: 0 1rem;
  margin: 1.5rem 0 1rem;
}
.app-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.app-action-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  box-shadow: var(--shadow-xs);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.app-action-item:active .app-action-icon-wrap {
  transform: scale(0.95);
}
.app-action-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink, #1c1a17);
  text-align: center;
}
.app-action-item--book .app-action-icon-wrap {
  background: linear-gradient(135deg, #fef1ec, #fcdcd0);
  color: var(--coral, #cc785c);
}
.app-action-item--therapists .app-action-icon-wrap {
  background: linear-gradient(135deg, #ebf9ee, #d1f3d8);
  color: #2a7a40;
}
.app-action-item--status .app-action-icon-wrap {
  background: linear-gradient(135deg, #f3efe8, #e8e2d9);
  color: #706c65;
}
.app-action-item--help .app-action-icon-wrap {
  background: linear-gradient(135deg, #fdf8e7, #faecc3);
  color: #d97706;
}
.mbl-svc {
  background: #fff !important;
  border: 1px solid var(--line, #e6dfd8) !important;
  border-radius: 16px !important;
  padding: 1.15rem !important;
  box-shadow: 0 4px 12px rgba(28,26,23,0.03) !important;
  margin-bottom: 0.85rem !important;
  transition: transform 0.15s ease;
  display: block;
  text-decoration: none;
}
.mbl-svc:active {
  transform: scale(0.98);
}
.mbl-svc__ic {
  border-radius: 10px !important;
  background: #faf9f5 !important;
  color: var(--coral) !important;
}
.mbl-svc__ic--grad {
  background: linear-gradient(135deg, #fef1ec, #fcdcd0) !important;
  color: var(--coral) !important;
}
.mbl-svc__prices {
  border-top: 1px dashed var(--line-soft, #f5f0e8) !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mbl-svc__price {
  font-size: 0.82rem !important;
}
.mbl-svc__price b {
  color: var(--coral) !important;
  font-size: 0.95rem !important;
}
.mbl-svc__book-btn {
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
}
.mbl-dark {
  margin: 1.5rem 1rem !important;
  border-radius: 20px !important;
  padding: 1.5rem !important;
  box-shadow: var(--shadow-sm);
}
.mbl-sect {
  padding: 1.25rem 1rem !important;
}
.mbl-sect__head {
  padding-bottom: 0.85rem !important;
}
.mbl-card {
  border-radius: 14px !important;
  border: 1px solid var(--line, #e6dfd8) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important;
  background: #fff !important;
}

/* =====================================================================
   BINGKAI PONSEL UNTUK LAYAR LEBAR (Sesi 20260809)
   ---------------------------------------------------------------------
   Sejak folder /mobile/ dihapus, tampilan ini adalah SATU-SATUNYA tampilan —
   pengunjung desktop pun melihatnya. Tanpa batas lebar, tata letak yang
   dirancang untuk layar 390px akan melar sampai 1920px: kartu jadi pita
   panjang, teks satu baris selebar layar, dan bottom-nav membentang penuh.
   Aturan di bawah HANYA berlaku mulai 768px, jadi tampilan di HP asli tidak
   tersentuh sama sekali.

   --app-w dipakai bersama oleh body, header, dan bottom-nav. Header dan nav
   position:fixed, yang mengukur diri terhadap viewport, bukan terhadap induknya
   — karena itu keduanya perlu left/right/margin sendiri, tidak cukup membatasi
   body saja.
   ===================================================================== */
@media (min-width: 768px) {
  :root { --app-w: 460px; }

  /* Latar di luar bingkai, supaya jelas ini satu panel utuh, bukan halaman rusak. */
  html { background:#eceae4; }

  body.mbl-body {
    width:100%;
    max-width:var(--app-w);
    margin-inline:auto;
    background:var(--cream);
    box-shadow:0 0 0 1px rgba(20,20,19,0.06), 0 18px 60px rgba(20,20,19,0.10);
    min-height:100dvh;
  }

  /* Gradien latar body memakai position:fixed (inset:0) — tanpa ini ia bocor
     ke seluruh lebar layar, di luar bingkai. */
  body.mbl-body::before {
    left:50%;
    width:var(--app-w);
    max-width:100%;
    transform:translateX(-50%);
  }

  .mbl-header,
  .mbl-bnav {
    left:50%;
    right:auto;
    width:100%;
    max-width:var(--app-w);
    transform:translateX(-50%);
  }

  /* Overlay modal & bottom sheet tetap menutupi bingkai saja, bukan layar penuh.
     Selektor HARUS sepersis aslinya (.mbl-main .modal-overlay, .mbl-sheet-overlay
     .mbl-sheet) — versi pendeknya kalah spesifisitas dan aturan ini diam-diam
     tidak berlaku. */
  .mbl-main .modal-overlay,
  .mbl-sheet-overlay,
  .mbl-sheet-overlay .mbl-sheet {
    left:50%;
    right:auto;
    width:100%;
    max-width:var(--app-w);
    transform:translateX(-50%);
  }

  /* Kursor mouse: elemen yang di HP disentuh harus terasa bisa diklik. */
  .mbl-bnav__item, .mbl-btn, .mbl-svc { cursor:pointer; }

  /* Teks di HP sengaja tidak bisa diseleksi (rasa aplikasi). Di desktop orang
     wajar menyalin alamat/harga, jadi izinkan lagi. */
  body.mbl-body { -webkit-user-select:text; user-select:text; }
}

/* ── Tanya-Jawab (includes/faq-section.php) — Sesi 20260809 ──────────────
   Akordeon tanpa JavaScript. Jawaban tetap ada di HTML walau terlipat, jadi
   perayapan mesin pencari tetap membacanya — syarat wajib schema FAQPage. */
.mbl-faq__item { padding:0; overflow:hidden; }
.mbl-faq__q {
  display:flex; align-items:flex-start; justify-content:space-between; gap:0.6rem;
  padding:0.85rem 0.95rem; cursor:pointer; list-style:none;
  font-size:0.9rem; font-weight:600; color:var(--ink); line-height:1.45;
  -webkit-tap-highlight-color:transparent;
}
.mbl-faq__q::-webkit-details-marker { display:none; }
.mbl-faq__q::after {
  content:'+'; flex-shrink:0; font-size:1.15rem; font-weight:400;
  line-height:1; color:var(--coral); transition:transform 160ms ease;
}
.mbl-faq__item[open] .mbl-faq__q::after { content:'−'; }
/* /faq memakai pola lama: kelas .is-open pada item, bukan atribut [open] pada
   <details>. Tanpa baris ini penandanya berhenti di '+' walau jawabannya sudah
   terbuka — memberi tahu yang salah kepada pengunjung. */
.mbl-faq__item.is-open .mbl-faq__q::after { content:'−'; }
.mbl-faq__a {
  padding:0 0.95rem 0.95rem; margin-top:-0.15rem;
  font-size:0.86rem; line-height:1.7; color:var(--ink-soft);
}


/* ── Baris harga per durasi di kartu layanan (Sesi 20260809) ───────────── */
.mbl-price-rows { display:flex; flex-wrap:wrap; gap:0.35rem 0.5rem; }
.mbl-price-row {
  display:inline-flex; align-items:baseline; gap:0.35rem;
  padding:0.28rem 0.55rem; border:1px solid var(--line); border-radius:999px;
  background:var(--white); font-size:0.76rem; color:var(--muted); white-space:nowrap;
}
.mbl-price-row__amt { color:var(--ink); font-weight:600; }

/* ── Daftar berpoin dalam konten (Sesi 20260809) ───────────────────────── */
.mbl-list { margin:0; padding:0; list-style:none; }
.mbl-list li {
  position:relative; padding:0 0 0 1.15rem; margin-bottom:0.55rem;
  font-size:0.86rem; line-height:1.65; color:var(--ink-soft);
}
.mbl-list li::before {
  content:''; position:absolute; left:0; top:0.62em;
  width:5px; height:5px; border-radius:50%; background:var(--coral);
}
.mbl-list li:last-child { margin-bottom:0; }


/* ── Badan teks (Sesi 20260809, koreksi) ────────────────────────────────
   .mbl-small memakai --faint #a09d96: kontras 2,57:1 di atas krem, GAGAL ambang
   WCAG AA 4,5:1. Itu warna keterangan tanggal, bukan warna paragraf — tapi
   sempat dipakai untuk 20 paragraf naskah, sehingga seluruh isi tampil pucat
   dan sulit dibaca. area.php sejak awal sudah menimpanya jadi --ink-soft secara
   manual; kelas ini membuat perbaikan itu resmi dan bisa dipakai ulang.
   --muted (5,1:1) untuk kalimat pendukung, --ink-soft (14,6:1) untuk badan utama. */
.mbl-copy {
  margin-top:0.6rem;
  font-size:0.875rem;
  line-height:1.7;
  color:var(--ink-soft);
}
.mbl-copy + .mbl-copy { margin-top:0.7rem; }
.mbl-copy--soft { color:var(--muted); }

/* ── Varian permukaan untuk memecah irama (Sesi 20260809) ────────────────
   Aturan: maksimum dua seksi krem beruntun. Dua varian di bawah adalah alat
   pemecahnya — dipakai bergantian dengan .mbl-dark yang sudah ada. */

/* Nada lembut: jeda tanpa seberat pita gelap. Melebar ke tepi layar supaya
   terbaca sebagai PITA, bukan sekadar kartu besar. */
.mbl-sect--tint {
  /* Geometri SAMA PERSIS dengan .mbl-dark (margin 24/16, radius 20, padding 24).
     Versi pertama dibuat melebar penuh dengan sudut siku — hasilnya dua "permukaan
     istimewa" di halaman yang sama bicara dengan dua bahasa bentuk berbeda, dan itu
     terbaca sebagai tidak disengaja. Permukaan boleh berbeda warna; bentuknya tidak. */
  margin:24px 16px;
  padding:24px;
  border-radius:20px;
  background:var(--coral-ghost);
  border:1px solid rgba(204,120,92,0.14);
}

/* Daftar berpoin di atas latar gelap: titik dan teks harus dibalik nadanya,
   kalau tidak --ink-soft di atas #181715 praktis tidak terbaca. */
.mbl-list--onDark li { color:rgba(255,255,255,0.82); }
.mbl-list--onDark li::before { background:var(--coral); }

/* Pita gelap "alasan memilih" duduk tepat setelah blok paket — beri jarak
   sedikit lebih besar supaya pergantian permukaannya terasa disengaja. */
.mbl-dark--why { margin-top:2rem; }

/* ═══════════════════════════════════════════════════════════════════════
   POLA APLIKASI (Sesi 20260809) — Traveloka / Gojek / Grab / Airbnb
   ---------------------------------------------------------------------
   Audit kepadatan menunjukkan /booking 71 kata per elemen visual, beranda
   punya paragraf 62 kata. Aplikasi sungguhan ada di kisaran 3-10. Orang di
   HP MEMINDAI: mereka menggeser deretan kartu, membaca angka, menekan chip —
   bukan membaca alinea. Komponen di bawah adalah alat untuk mengubah alinea
   jadi bentuk yang bisa dipindai, tanpa membuang isinya (isi tetap ada di
   DOM untuk mesin pencari, hanya dilipat).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header seksi: judul kiri, tautan "Lihat semua" kanan ────────────────
   Pola paling universal di aplikasi Indonesia. Menggantikan <h2> sendirian
   yang selalu diikuti paragraf pengantar — judul + tautan sudah cukup. */
.mbl-sechead {
  display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem;
  margin-bottom:0.75rem;
}
.mbl-sechead h2, .mbl-sechead .mbl-h2 { margin:0; }
.mbl-sechead__link {
  flex-shrink:0; font-size:0.78rem; font-weight:600; color:var(--coral);
  text-decoration:none; white-space:nowrap;
}
.mbl-sechead__link:active { opacity:0.6; }

/* ── Rail geser horizontal ───────────────────────────────────────────────
   Kartu berjajar yang digeser jempol. Satu baris rail menampung 4 paket
   dalam tinggi 150px; versi tumpuk vertikal butuh 600px. Inilah cara
   Traveloka dan Gojek memuat banyak pilihan tanpa halaman jadi panjang. */
.mbl-rail {
  display:flex; gap:0.6rem; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  /* Melebar ke tepi layar lalu diberi padding, supaya kartu pertama sejajar
     konten tapi kartu terakhir tetap bisa digeser mepet tepi. */
  margin-inline:calc(var(--pad) * -1);
  padding:0.15rem var(--pad) 0.5rem;
  scrollbar-width:none;
}
.mbl-rail::-webkit-scrollbar { display:none; }
.mbl-rail__item {
  flex:0 0 auto; width:158px; scroll-snap-align:start;
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:0.85rem 0.9rem; text-decoration:none; color:inherit;
  transition:transform 0.1s ease;
}
.mbl-rail__item:active { transform:scale(0.97); }
.mbl-rail__ic { font-size:1.35rem; line-height:1; margin-bottom:0.5rem; display:block; }
.mbl-rail__nm { font-size:0.82rem; font-weight:600; color:var(--ink); line-height:1.3; }
.mbl-rail__meta { margin-top:0.3rem; font-size:0.72rem; color:var(--muted); }
.mbl-rail__price { margin-top:0.45rem; font-size:0.86rem; font-weight:700; color:var(--coral); }

/* ── Baris angka (bukti sosial tanpa kalimat) ────────────────────────────
   "Kami sudah melayani 40 pesanan dengan rata-rata 5,0" = 9 kata terlewat.
   Angka besar + label kecil = terbaca dalam sekali lirik. Berat dan warna
   yang membangun hierarki, bukan ukuran saja. */
.mbl-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; }
.mbl-stat {
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:0.85rem 0.5rem; text-align:center;
}
.mbl-stat__n {
  font-family:var(--serif); font-size:1.6rem; font-weight:600; line-height:1;
  color:var(--ink); display:block;
}
.mbl-stat__l {
  margin-top:0.35rem; font-size:0.68rem; font-weight:500; line-height:1.3;
  color:var(--muted); display:block;
}

/* ── Chip fakta ──────────────────────────────────────────────────────────
   Menggantikan daftar berpoin pendek. Empat chip terbaca lebih cepat
   daripada empat baris berpoin, dan makan setengah tingginya. */
.mbl-chips { display:flex; flex-wrap:wrap; gap:0.4rem; }
.mbl-chip {
  display:inline-flex; align-items:center; gap:0.3rem;
  padding:0.4rem 0.7rem; border-radius:999px;
  background:var(--white); border:1px solid var(--line);
  font-size:0.76rem; font-weight:500; color:var(--ink-soft); white-space:nowrap;
}
.mbl-chip--on { background:var(--coral-ghost); border-color:rgba(204,120,92,0.22); color:var(--coral); }

/* ── "Selengkapnya" — naskah panjang dilipat ─────────────────────────────
   Isi tetap ada di HTML (terbaca perayapan mesin pencari dan asisten AI),
   tapi tidak menghadang pengunjung sebagai tembok. Ini kompromi yang benar
   antara kebutuhan SEO dan kebiasaan orang memindai di HP. */
.mbl-more { border-top:1px solid var(--line); padding-top:0.75rem; margin-top:0.9rem; }
.mbl-more > summary {
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:0.35rem;
  font-size:0.8rem; font-weight:600; color:var(--coral);
  -webkit-tap-highlight-color:transparent;
}
.mbl-more > summary::-webkit-details-marker { display:none; }
.mbl-more > summary::after { content:'▾'; font-size:0.7rem; transition:transform 160ms ease; }
.mbl-more[open] > summary::after { transform:rotate(180deg); }
.mbl-more[open] > summary { margin-bottom:0.5rem; }

/* ── Pemotong baris untuk halaman daftar (Sesi 20260809) ─────────────────
   /area memuat 42 kecamatan, masing-masing dengan deskripsi; /artikel memuat
   19 artikel dengan kutipan. Ditampilkan penuh, keduanya jadi gulungan tanpa
   ujung — audit menandai 12 paragraf >160 karakter di /area saja.
   line-clamp memotong TAMPILANNYA saja: teks tetap utuh di HTML sehingga mesin
   pencari dan asisten AI tetap membaca seluruhnya. Ini pola daftar standar di
   aplikasi: judul jelas, cuplikan dua baris, ketuk untuk selengkapnya. */
.mbl-clamp2 {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}

/* ── Akordeon wilayah di /area (Sesi 20260809) ───────────────────────────
   Enam wilayah × 42 kecamatan terbuka sekaligus = halaman 7.339px. Dilipat,
   pengunjung langsung menuju wilayahnya. Kepala akordeon dibuat setinggi 52px
   supaya nyaman disentuh jempol (ambang praktis 44px). */
.mbl-region { border-bottom:1px solid var(--line); }
.mbl-region:first-of-type { border-top:1px solid var(--line); }
.mbl-region__head {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:0.6rem;
  min-height:52px; padding:0.35rem 0; -webkit-tap-highlight-color:transparent;
}
.mbl-region__head::-webkit-details-marker { display:none; }
.mbl-region__nm {
  flex:1; font-family:var(--serif); font-size:1.18rem; font-weight:600; color:var(--ink);
}
.mbl-region__ct { font-size:0.74rem; color:var(--muted); }
.mbl-region__head::after {
  content:'›'; font-size:1.3rem; line-height:1; color:var(--coral);
  transition:transform 160ms ease; transform:rotate(90deg);
}
.mbl-region[open] .mbl-region__head::after { transform:rotate(-90deg); }
.mbl-region__body { padding-bottom:0.9rem; }

/* Halaman Area (Sesi 20260813 revisi ke-2): kartu kecamatan memakai .mbl-card
   seperti semula. Yang tersisa di sini hanya kotak pilih wilayah dan panel
   wilayah yang sedang tidak dipilih. */
.mbl-wil[hidden] { display:none; }



/* Kotak pilih wilayah menggantikan judul besar, jadi nadanya dinaikkan supaya
   tetap terbaca sebagai kepala halaman, bukan kolom isian biasa. */
.mbl-select--wil {
  font-family:var(--serif); font-size:1.28rem; font-weight:600;
  color:var(--ink); padding-top:0.65rem; padding-bottom:0.65rem;
}

/* Panah kotak pilih: bawaan peramban dimatikan oleh -webkit-appearance:none
   di .mbl-select, jadi tanpa ini kotaknya tidak terlihat bisa dibuka. */
.mbl-field select.mbl-select {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23cc785c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.95rem center;
  padding-right:2.4rem;
}

/* ── Bilah navigasi: kembali | judul | aksi (Sesi 20260809) ──────────────
   Pola bawaan aplikasi mobile. Sebelumnya judul rata kiri, dan tombol
   "← Kembali" berdiri sendiri di dalam badan halaman tepat di atas judul besar
   yang mengulang kata yang sama — tiga elemen untuk satu pesan.
   Grid tiga kolom dengan sisi kiri dan kanan berlebar sama supaya judul benar-
   benar di tengah optis, bukan sekadar "kira-kira tengah" ala space-between. */
.mbl-header__inner--nav {
  display:grid;
  grid-template-columns:40px 1fr 40px;
  gap:0.35rem;
  align-items:center;
}
.mbl-header__back {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-left:-8px;   /* ratakan optis ke tepi konten */
  border-radius:50%; color:var(--ink); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background 140ms ease, transform 0.1s ease;
}
.mbl-header__back:active { background:var(--coral-ghost); transform:scale(0.92); }
.mbl-header__brand--center {
  justify-content:center; min-width:0;
}
/* ── Pita janji di beranda (Sesi 20260810) ──────────────────────────────
   Satu baris, satu kalimat, di bawah kartu pemesanan. Permukaan bertinta
   --coral-ghost: cukup berbeda dari krem di sekitarnya untuk terbaca sebagai
   blok tersendiri, tapi jauh lebih ringan daripada kartu putih bergaris — ia
   TIDAK boleh menandingi kartu pemesanan tepat di atasnya.
   Teks memakai --ink-soft (14,6:1). Ini kalimat utuh, jadi --faint terlarang. */
/* Menempel di tepi atas kartu pemesanan, bukan mengambang di bawahnya.
   Margin negatif menarik pita keluar dari padding kartu (20px atas, 18,4px
   samping) supaya ia menyentuh tepi kartu dari dalam — "full-bleed". Sudut
   atasnya mengikuti radius kartu (18px) dikurangi 1px tebal garis kartu; kalau
   disamakan persis, akan tampak celah putih tipis di kedua pojok.
   Sudut bawahnya siku: itu yang membuatnya terbaca menyatu dengan kartu, bukan
   sebagai kotak kedua yang kebetulan diletakkan berdekatan. */
/* Padding kartu berbeda di dua lebar layar: 1.25rem/1.15rem di HP dan
   1.5rem/1.4rem di layar lebar (style.css). Nilainya dicatat sebagai variabel
   DI KARTUNYA supaya pita di bawah ini selalu memakai angka yang sama.
   Versi pertama memakai angka mati -20px/-18.4px: di 1440px padding kartunya
   4px lebih besar, jadi tersisa cincin krem 4px mengelilingi pita — terlihat
   seperti kotak yang gagal menempel, persis yang tidak diinginkan. */
.hero-showcase__card { --kartu-pad-y:20px; --kartu-pad-x:18.4px; }
@media (min-width:768px) {
  .hero-showcase__card { --kartu-pad-y:24px; --kartu-pad-x:22.4px; }
}
.mbl-promise {
  display:flex; align-items:center; gap:0.6rem;
  margin:calc(var(--kartu-pad-y) * -1) calc(var(--kartu-pad-x) * -1) 0.75rem;
  padding:0.7rem 0.9rem;
  background:var(--coral-ghost);
  border-bottom:1px solid rgba(204,120,92,0.18);
  border-radius:17px 17px 0 0;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.mbl-promise__icon {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex-shrink:0;
  border-radius:50%; background:var(--coral, #cc785c); color:#ffffff;
}
.mbl-promise__text {
  font-size:0.85rem; font-weight:500; line-height:20px !important; height:20px !important; color:var(--ink-soft);
  display:inline-block; vertical-align:middle; overflow:hidden; white-space:nowrap;
}

/* ── Peringatan nomor WhatsApp (Sesi 20260811) ────────────────────────────
   Muncul tepat di bawah baris nomor, saat konsumen masih mengetik. Merah untuk
   nomor yang mustahil dihubungi (ditolak server juga), kuning untuk yang cuma
   mencurigakan (boleh lanjut).

   #b03636 = 6,1:1 dan #8a6a1f = 5,3:1 di atas putih. Peringatan yang tidak
   terbaca sama saja dengan tidak ada. */
.wa-cek {
  margin: 6px 0 0; font-size: 0.78rem; line-height: 1.4; color: #b03636;
}
.wa-cek--kuning { color: #8a6a1f; }
.wa-cek[hidden] { display: none; }
input.wa-cek--salah { border-color: #b03636 !important; }
input.wa-cek--ragu { border-color: #d3a53a !important; }

/* ── Ulasan berganti di tempat (Sesi 20260811, revisi) ───────────────────
   Satu kartu per layar, berganti dengan bergeser. Tombol kiri-kanan di luar
   jendela geser supaya tidak menutupi teks yang sedang dibaca.

   Tinggi jendela DIKUNCI ke kartu tertinggi lewat align-items:stretch pada track:
   kalau tiap kartu setinggi isinya sendiri, blok ini akan mengembang-mengempis
   setiap pergantian dan isi di bawahnya ikut melompat. */
.mbl-quotes { margin: 1.25rem 0 0.5rem; }
.mbl-quotes__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  padding: 0 var(--pad); margin-bottom: 0.7rem;
}
.mbl-quotes__title {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  color: var(--ink); letter-spacing: -0.015em; line-height: 1.15; margin: 0;
}
.mbl-quotes__all { font-size: 0.8rem; font-weight: 600; color: var(--coral); text-decoration: none; flex-shrink: 0; }

.mbl-quotes__box {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0 calc(var(--pad) - 0.25rem);
}
.mbl-quotes__view { flex: 1; overflow: hidden; min-width: 0; }
.mbl-quotes__track {
  display: flex; align-items: stretch;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .mbl-quotes__track { transition: none; }
}
.mbl-quote {
  flex: 0 0 100%; min-width: 0; margin: 0;
  padding: 0.9rem 1rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md, 14px); box-shadow: var(--shadow-xs, 0 4px 10px rgba(0,0,0,.02));
  display: flex; flex-direction: column;
}
.mbl-quote__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mbl-quote__name { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.mbl-quote__stars { color: var(--coral); font-size: 0.82rem; letter-spacing: 1px; flex-shrink: 0; }
/* --muted (5,1:1), bukan --faint: nama daerah ikut membangun kepercayaan
   ("ada yang di dekat saya"), jadi ia harus terbaca. */
.mbl-quote__area { display: block; margin-top: 1px; font-size: 0.73rem; color: var(--muted); }
.mbl-quote__tx {
  margin: 0.55rem 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--ink-soft);
}

/* 34px: cukup besar untuk diketuk ibu jari tanpa merebut perhatian dari kartunya.
   Sengaja tidak memakai warna penuh — ia alat bantu, bukan ajakan utama. */
.mbl-quotes__nav {
  flex: 0 0 34px; width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, background 140ms ease, color 140ms ease;
}
.mbl-quotes__nav svg { width: 17px; height: 17px; }
.mbl-quotes__nav:active { transform: scale(0.92); background: var(--coral-ghost); color: var(--coral); }
.mbl-quotes__nav:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* ── Tiga alasan percaya (Sesi 20260811) ─────────────────────────────────
   Dipakai di /layanan, tepat di atas kartu pertama.

   Tiga kolom sama lebar, bukan daftar bertumpuk: bertumpuk memakan tinggi tiga
   kali lipat dan mendorong harga — hal yang justru dicari — keluar layar. Yang
   dibaca cuma tiga potong pendek, jadi tiga kolom cukup di 375px.

   Permukaan bertinta tipis, tanpa bayangan dan tanpa garis tebal: ini pengantar
   sebelum kartu layanan, dan kartu layanan itulah yang harus paling menarik
   diketuk. Kalau blok ini ikut menonjol, keduanya berebut dan tidak ada yang
   menang.

   Teks memakai --ink-soft (14,6:1). Ini kalimat pendek yang justru harus terbaca
   sekilas; --faint (2,6:1) akan membuatnya sekadar hiasan. */
.mbl-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0.7rem var(--pad) 0.6rem;   /* 4px ke bilah header terlalu mepet; blok ini butuh napas sendiri */
  padding: 0.85rem 0.6rem;
  background: var(--coral-ghost);
  border: 1px solid rgba(204, 120, 92, 0.14);
  border-radius: var(--r-md, 14px);
}
.mbl-trust__item {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  text-align: center; min-width: 0;
}
.mbl-trust__ic {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%; background: var(--coral, #cc785c); color: #ffffff;
}
.mbl-trust__ic svg { width: 17px; height: 17px; }
.mbl-trust__tx {
  font-size: 0.7rem; line-height: 1.3; font-weight: 500; color: var(--ink-soft);
  text-wrap: balance;   /* hindari satu kata menggantung sendirian di baris ketiga */
}

/* ── Baris nomor WhatsApp di formulir pemesanan (Sesi 20260811) ───────────
   Keluhan pemilik proyek: kotak kode negara tidak pernah presisi di hampir semua
   tempat. Selain label "+62" yang dulu memakai angka mati (sudah diperbaiki di
   main.js), kotaknya sendiri memang tidak seragam di sini:

     kode negara : huruf 15,0px, tinggi 47px
     kolom nomor : huruf 14,7px, tinggi 51px

   Dua kotak bersebelahan dengan ukuran huruf dan tinggi berbeda selalu terlihat
   miring, sekecil apa pun selisihnya. Barisnya memakai align-items:end sehingga
   tinggi masing-masing dibiarkan apa adanya.

   Diseragamkan di satu tempat: ukuran huruf diwarisi dari baris, dan tinggi
   diregangkan sama. Bukan menambal satu angka — menghapus sumber selisihnya. */
.form-row--dial { align-items: stretch; }
.form-row--dial .field { display: flex; flex-direction: column; }
.form-row--dial .select,
.form-row--dial .input {
  font-size: 16px;
  /* line-height WAJIB disamakan. Inilah sumber selisih tinggi 4px itu: <select>
     memakai `normal` (±1,2× ukuran huruf) sementara <input> mewarisi 1,55.
     Padding dan border keduanya sudah identik, jadi tinggi kotak sepenuhnya
     ditentukan baris ini. */
  /* line-height select ternyata masih ditimpa aturan lain yang lebih kuat, jadi
     tingginya tidak pernah ikut. Dipatok TINGGI BERSAMA saja — satu angka untuk
     kedua kotak, bukan menebak selisihnya. 48px = ambang nyaman untuk ibu jari
     dan di atas min-height 44px yang sudah berlaku, jadi tidak ada yang mengecil. */
  height: 48px;
  min-height: 48px;
  line-height: 1.2;
  flex: none;
}
/* Tebal 600 khusus kotak kode negara dibatalkan: kolom nomor di sebelahnya
   berbobot normal, dan satu-satunya yang tebal terbaca seperti keliru. */
.field--dial .select { font-weight: 400; }

.mbl-bnav__icon-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.mbl-bnav__badge {
  position: absolute;
  top: -4px;
  right: -9px;
  min-width: 15px;
  height: 15px;
  padding: 0 3.5px;
  /* Sesi 20260819 — dibalik: dulu pil PUTIH dengan angka merah. Di atas
     bottom-nav coral, pil putih itu terbaca seperti bagian dari ikon dan mudah
     terlewat. Sekarang merah penuh dengan angka putih; cincin putih tipis di
     tepinya yang memisahkannya dari latar coral, bukan warna isinya. */
  background: #dc2626;
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 5;
  font-variant-numeric: tabular-nums lining-nums;
  animation: mbl-badge-pop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes mbl-badge-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Pembungkus dropdown kode negara (Sesi 20260810) ─────────────────────
   Lebar ini dulu ditulis langsung di elemen oleh main.js. Dipindah ke sini
   supaya bisa dikalahkan di tempat yang butuh lebar lain — lihat
   .ai-whatsapp-row di chat.css, tempat kolom nomor sempat menciut karena
   pembungkus ini meminta lebar penuh di dalam baris flex. */
.dial-select-wrapper { width:100%; }

/* ── Ulasan cepat (Sesi 20260810) ────────────────────────────────────────
   Dropdown berisi kotak centang, dipakai di formulir ulasan. Tertutup secara
   bawaan: sepuluh baris yang langsung terbuka akan mendorong tombol "Kirim
   Ulasan" keluar layar, dan tombol yang tidak terlihat sama saja dengan tidak
   ada. Ringkasannya menampilkan hitungan berjalan supaya konsumen tahu berapa
   lagi yang kurang tanpa harus menghitung sendiri. */
.rq { margin:0.75rem 0; }
.rq__box {
  border:1px solid var(--line); border-radius:var(--r-md, 14px);
  background:var(--white); overflow:hidden;
}
.rq__head {
  display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
  padding:0.8rem 0.9rem; cursor:pointer; list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.rq__head::-webkit-details-marker { display:none; }
.rq__head::after {
  content:'›'; font-size:1.25rem; line-height:1; color:var(--coral);
  transform:rotate(90deg); transition:transform 160ms ease; flex-shrink:0;
}
.rq__box[open] .rq__head::after { transform:rotate(-90deg); }
.rq__title { font-size:0.88rem; font-weight:600; color:var(--ink); }
/* --muted (5,1:1), bukan --faint: ini penunjuk berapa lagi yang harus dipilih,
   informasi yang justru harus terbaca. */
.rq__hint { margin-left:auto; margin-right:0.15rem; font-size:0.74rem; color:var(--muted); }
.rq__hint.is-kurang { color:var(--coral); font-weight:600; }
.rq__hint.is-ok { color:#3f7d52; font-weight:600; }
.rq__list { border-top:1px solid var(--line); padding:0.35rem 0.25rem 0.5rem; }
/* min-height 46px: hasil ukur pertama cuma 40px — di bawah ambang nyaman untuk
   ibu jari, dan salah centang di daftar sepuluh baris berdempetan itu menjengkelkan
   justru pada langkah yang seharusnya paling mudah. */
.rq__item {
  display:flex; align-items:center; gap:0.65rem; min-height:46px;
  padding:0.55rem 0.65rem; border-radius:10px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.rq__item:active { background:var(--coral-ghost); }
/* Kotak centang aslinya disembunyikan tapi TETAP di alur fokus (bukan
   display:none) supaya papan ketik dan pembaca layar masih bisa memakainya. */
.rq__item input { position:absolute; opacity:0; width:1px; height:1px; }
.rq__tick {
  width:20px; height:20px; flex-shrink:0; margin-top:1px;
  border:1.5px solid var(--line); border-radius:6px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background 130ms ease, border-color 130ms ease;
}
.rq__tick::after {
  content:''; width:5px; height:9px; margin-top:-2px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
  transition:transform 130ms ease;
}
.rq__item input:checked ~ .rq__tick { background:var(--coral); border-color:var(--coral); }
.rq__item input:checked ~ .rq__tick::after { transform:rotate(45deg) scale(1); }
.rq__item input:focus-visible ~ .rq__tick { outline:2px solid var(--coral); outline-offset:2px; }
.rq__text { font-size:0.85rem; line-height:1.4; color:var(--ink-soft); }

/* ── Label kelompok daftar (Sesi 20260810) ──────────────────────────────
   Dipakai di /bantuan. Sebelumnya 12 baris identik ditumpuk tanpa jeda: tinggi
   sama, ikon sama besar, tanpa satu pun titik istirahat — mata harus membaca
   kedua belas nama untuk tahu mana yang dicarinya. Empat label memecahnya jadi
   kelompok yang bisa dilewati sekaligus.
   --muted (5,1:1), bukan --faint (2,6:1): ini penunjuk arah, bukan hiasan, dan
   harus terbaca. Ukurannya kecil dan berhuruf besar supaya jelas ia label —
   BUKAN judul yang bersaing dengan nama halaman di bawahnya. */
.mbl-listgroup {
  margin:1.35rem 0 0.55rem;
  font-size:0.68rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--muted);
}
.mbl-listgroup:first-child { margin-top:0.25rem; }

/* Sesi 20260810: penyeimbang kolom kanan setelah ikon WhatsApp header dihapus.
   Tanpa ini kolom ketiga grid kosong tanpa isi dan judul tetap terpusat — tapi
   pada halaman TANPA tombol kembali bilahnya flex space-between, dan brand
   sendirian akan melar memenuhi lebar. Lebarnya disamakan dengan bekas ikon. */
.mbl-header__spacer { width:40px; height:40px; flex-shrink:0; display:inline-block; }
.mbl-header__brand--center .mbl-header__name {
  /* Judul panjang dipotong dengan elipsis, bukan membungkus jadi dua baris —
     bilah header tingginya tetap 64px dan tidak boleh melar. */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;
}

/* ── Kepala wilayah di /area (Sesi 20260809) ─────────────────────────────
   Menggantikan kepala akordeon setelah akordeonnya dibatalkan. Nama wilayah
   dan jumlah kecamatan tetap sebaris supaya daftar mudah dipindai, tapi tidak
   ada lagi yang bisa ditutup — semuanya tampil. */
.mbl-region-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem;
  margin-bottom:0.6rem; padding-top:0.35rem;
}
.mbl-region-head .mbl-h2 { margin:0; }

/* ── Judul langkah di bilah header /booking (Sesi 20260809) ──────────────
   Bilah booking: "Pesan" (kiri) · judul langkah (tengah) · WhatsApp (kanan).
   Grid tiga kolom dengan kolom tengah fleksibel; kolom kiri dibiarkan auto
   karena kata "Pesan" lebarnya berbeda dari ikon 40px di kanan, dan judulnya
   dipusatkan terhadap SELURUH bilah lewat position absolute — kalau hanya
   mengandalkan grid, ia akan tercentang di tengah kolomnya sendiri, bukan
   di tengah layar. */
.mbl-header__inner--step { position:relative; }
.mbl-header__step {
  position:absolute; left:50%; transform:translateX(-50%);
  max-width:52%; text-align:center;
  font-family:var(--serif); font-size:1.02rem; font-weight:600; color:var(--ink);
  line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;   /* jangan menghalangi ketukan ke tombol di kiri/kanan */
}

/* ── Kontrol notifikasi di menu Akun (Sesi 20260809, revisi) ─────────────
   Dua tombol SEJAJAR dalam satu baris, lebar sama rata. Keterangan status
   notifikasi disuntik push.js sebagai baris tersendiri di bawah keduanya —
   kalau ia ikut masuk ke dalam baris tombol, tinggi tombol notifikasi jadi
   berbeda dari tombol Keluar dan keduanya tidak lagi sejajar. */
/* GRID dua kolom, bukan flex. Dengan flex, kedua tombol sudah diberi
   `flex:1 1 0; min-width:0` tapi lebarnya tetap timpang (201px vs 166px):
   label "Matikan notifikasi" ber-white-space:nowrap sehingga lebar min-content-nya
   menahan penyusutan. Grid `1fr 1fr` membagi kolom berdasarkan ruang yang ada,
   bukan berdasarkan isi — dua tombol dijamin sama lebar apa pun tulisannya,
   termasuk saat label berganti antara "Aktifkan" dan "Matikan". */
/* Selektor HARUS `.mbl-main .account-dd__foot` — persis sekhusus aturan aslinya
   di berkas ini. Versi polos `.account-dd__foot` kalah spesifisitas (0,1,0 lawan
   0,2,0) dan diam-diam tidak berlaku, berapa pun urutannya. Ini kesalahan yang
   sama persis dengan kasus `.mbl-main .modal-overlay` sebelumnya. */
.mbl-main .account-dd__foot {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.5rem;
  align-items:stretch;
}
.mbl-main .account-dd__foot > form { margin:0; min-width:0; }
.mbl-main .account-dd__foot .btn {
  width:100%;
  /* Label panjang dipotong elipsis, tidak melebarkan kolomnya. */
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mbl-main .account-dd__foot + .push-status { margin-top:0.45rem; }

/* === PREMIUM LOGIN & ACCOUNT STYLES === */
.mbl-main .premium-login {
  padding: 2.5rem 1.25rem;
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at top right, rgba(204, 120, 92, 0.05), transparent 60%);
}

.mbl-main .login-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  box-shadow: 0 10px 30px rgba(20, 20, 19, 0.05);
}

.mbl-main .login-card__header {
  text-align: center;
  margin-bottom: 2rem;
}

.mbl-main .login-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--coral);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.mbl-main .login-card__title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.mbl-main .login-card__subtitle {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.mbl-main .premium-form-group {
  margin-bottom: 1.25rem;
  text-align: left;
}

.mbl-main .premium-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mbl-main .premium-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size:16px;
  color: var(--ink);
  background: #ffffff;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.mbl-main .premium-input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.12);
}

.mbl-main .phone-input-wrapper {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.mbl-main .phone-input-wrapper .dial-select-wrapper {
  width: 106px;
  flex: 0 0 106px;
  min-width: 0;
  display: block;
  align-self: stretch;
}

.mbl-main .phone-input-wrapper .premium-input {
  margin: 0;
  height: auto;
  align-self: stretch;
}

.mbl-main .phone-input-wrapper select.dial-select {
  padding-right: 1.5rem;
  background-position: right 0.5rem center;
}

.mbl-main .premium-btn {
  width: 100%;
  padding: 0.9rem 1.5rem;
  background: var(--coral);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  text-decoration: none;
}

.mbl-main .premium-btn:hover {
  background: #b56449;
}

.mbl-main .login-card__footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

/* --- DASHBOARD STYLES --- */
.mbl-main .premium-dashboard {
  padding: 1.5rem 1rem;
}

.mbl-main .dashboard-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-muted);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

.mbl-main .dashboard-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--coral);
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.mbl-main .dashboard-info {
  flex: 1 1 auto;
  min-width: 0;
}

.mbl-main .dashboard-info__name {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mbl-main .dashboard-info__wa {
  font-size: 0.88rem;
  color: var(--muted);
  font-family: var(--font-mono, monospace);
}

.mbl-main .dashboard-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(20, 20, 19, 0.02);
}

.mbl-main .dashboard-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 1.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.75rem;
  text-align: left;
}

.mbl-main .dashboard-card__title svg {
  color: var(--coral);
}

.mbl-main .dashboard-btn-outline {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: all 0.2s ease;
}

.mbl-main .dashboard-btn-outline:hover {
  background: var(--bg-muted);
}

/* ── Hapus Titik Putih pada Dot Timeline (Sesi 20260812) ── */
.timeline__dot::before,
.timeline__dot::after,
.mbl-timeline__dot::before,
.mbl-timeline__dot::after {
  display: none !important;
  content: none !important;
}
.mbl-main .timeline__dot,
.timeline__dot,
.mbl-timeline__dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(250, 249, 245, 0.25) !important;
  border: none !important;
  box-shadow: none !important;
}
.mbl-main .timeline__item.is-done .timeline__dot,
.mbl-main .timeline__item.is-active .timeline__dot,
.timeline__item.is-done .timeline__dot,
.timeline__item.is-active .timeline__dot,
.mbl-timeline__step.is-done .mbl-timeline__dot,
.mbl-timeline__step.is-active .mbl-timeline__dot {
  background: var(--coral, #cc785c) !important;
  border-color: var(--coral, #cc785c) !important;
}
.mbl-main .timeline__item.is-active .timeline__dot,
.timeline__item.is-active .timeline__dot,
.mbl-timeline__step.is-active .mbl-timeline__dot {
  box-shadow: 0 0 0 4px rgba(204, 120, 92, 0.28) !important;
}

/* ── Penomoran halaman artikel ─────────────────────────────────────────────
   Sesi 20260813. Dua tombol besar dan satu keterangan posisi, bukan deretan
   nomor: di layar 375px deretan nomor jadi target kecil yang berdempetan, dan
   nomor halaman bukan hal yang dicari pembaca artikel — yang mereka cari
   "berikutnya" dan "sebelumnya".

   Tombolnya bergaris, bukan coral penuh: di halaman ini aksi utamanya membaca
   artikel, dan kalau tombol halaman ikut menyala coral ia bersaing dengan
   kartu artikel yang justru harus menang. */
.mbl-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.mbl-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--coral);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 120ms var(--ease);
}

.mbl-pager__btn:active { transform: scale(0.97); }

.mbl-pager__btn.is-off {
  color: var(--faint);
  border-color: var(--line);
  background: transparent;
  pointer-events: none;
}

.mbl-pager__pos {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Styling Tabel dalam Artikel (.prose table) */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.25rem 0;
    border: 1px solid #efe8e1;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.prose table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    background: #ffffff;
    border: none !important;
}
.prose thead { display: table-header-group; }
.prose tbody { display: table-row-group; }
.prose tr { display: table-row; }
.prose th,
.prose td {
    border: none !important;
}
.prose th {
    background: #fcf9f5;
    color: var(--ink, #181715);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    border-bottom: 2px solid #efe8e1 !important;
    text-align: left;
    white-space: nowrap;
}
.prose td {
    padding: 12px;
    border-bottom: 1px solid #f6f2ed !important;
    color: var(--ink-soft, #423e38);
    vertical-align: middle;
}
.prose tr:last-child td {
    border-bottom: none !important;
}
.prose tr:hover td {
    background: #fdfcfa;
}
.prose table strong {
    color: var(--coral, #cc785c);
}

/* ── Sesi 20260816: Perbaikan kontras WCAG AA ──────────────────────
   --faint (#a09d96) pada latar --cream (#faf9f5) hanya 2,57:1 — gagal
   ambang WCAG AA 4,5:1. Elemen teks yang PERLU DIBACA pengguna dikoreksi
   ke --muted (5,1:1). Elemen dekoratif (ikon panah, avatar fallback,
   tombol nonaktif) tetap --faint karena bukan teks konten.
   ─────────────────────────────────────────────────────────────────── */
.mbl-main .field-hint,
.mbl-main .progress__cap,
.mbl-main .mbl-pick__role,
.mbl-main .account-dd__section-label {
  color: var(--muted, #66635c);
}

/* ── Tiga alasan singkat di bawah banner (Sesi 20260828) ───────────────────
   Gayanya diwarisi penuh dari .mbl-trust (permintaan pemilik: samakan dengan
   blok di bawah daftar layanan). Yang diatur di sini hanya letaknya: blok ini
   berada DI DALAM .mbl-hero-showcase yang sudah punya padding sisi sendiri,
   jadi margin sisi milik .mbl-trust harus dinolkan — kalau tidak, tepinya
   masuk ke dalam dan tidak lagi sejajar dengan kartu di bawahnya. */
.mbl-trust--atas {
  margin: 0 0 0.7rem;
  width: 100%;
  box-sizing: border-box;
}