@layer legacy {
/* ==== tokens.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS & THEME VARIABLES
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────────────────────────── */
:root {
    /* ── LEBAR KOLOM APLIKASI ──────────────────────────────────────────────
       Satu angka yang sebelumnya DISALIN ke 40 tempat di 24 berkas: kolom
       utama, dan setiap bilah `position: fixed` yang harus sejajar dengannya
       (bottom-nav, pay-bar, sticky-footer, chat-input-bar, toast-host, …).

       Selama ia tersebar, "melebarkan tampilan di desktop" berarti menemukan
       keempat puluh tempat itu tanpa melewatkan satu pun — dan yang terlewat
       tidak gagal keras, ia hanya menjadi bilah yang lebarnya tak lagi sama
       dengan kolom di atasnya. Satu token membuat perubahan itu jadi satu
       baris, dan membuat ketidaksesuaian mustahil.

       `58-page-transition.css` MENURUNKAN `--pt-kolom` dari token ini, jadi
       jarak geser dan klip transisi ikut benar dengan sendirinya. */
    --lebar-kolom: 480px;

    /* Dark theme — base defaults */
    /* --bg-base disamakan dengan --bg-page agar SEMUA halaman punya latar yang
       sama seperti /lives (canvas explore/home/messages & ring avatar ikut). */
    /* Charcoal HANGAT (bukan near-black kebiruan) → buang kesan "OLED crypto".
       Skala surface konsisten dari page → elevated. */
    --bg-base: #16151d;
    --bg-page: #16151d;
    --bg-surface: #1a1922;
    --bg-card: #201f29;
    --bg-card-hover: #272631;
    --bg-elevated: #2c2b37;
    --bg-elevated-2: #3a3848;

    --text-primary: #f0f0f8;
    --text-secondary: #8888aa;
    --text-muted: #55556a;
    --text-soft-accent: #c8d8ff;
    --text-on-accent: #100f16;

    /* Lime DIJINAKKAN: dulu neon chartreuse → kini lime lembut #a6d96a. Tetap
       identitas brand, tapi tak lagi "trading terminal". live-green → mint. */
    --accent-lime: #a6d96a;
    --accent-blue: #4f6bff;
    --accent-violet: #7c4fff;
    --accent-info: #7da7ff;
    --accent-pink: #ff6b9d;
    --accent-promo: #b78cff;
    --live-green: #4bd88f;
    --warning-amber: #ffad2b;
    --danger: #ff4f6b;

    --border-soft: rgba(255, 255, 255, 0.06);
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.1);

    --overlay-blur: rgba(22, 21, 29, 0.97);
    --overlay-blur-soft: rgba(22, 21, 29, 0.75);
    --notch-bg: #16151d;
    --map-bg-1: #201f29;
    --map-bg-2: #16151d;
    --map-grid: rgba(79, 107, 255, 0.08);

    --scrollbar-track: #100f16;
    --scrollbar-thumb: #2c2b37;

    /* Adaptive primary CTA — lime in dark, blue in light */
    --color-primary: var(--accent-lime);
    --color-primary-text: var(--text-on-accent);
    /* Glow diperlembut (alpha & lebar turun) → tak lagi neon menyala. */
    --color-primary-glow: rgba(166, 217, 106, 0.28);
    --color-primary-soft: rgba(166, 217, 106, 0.08);
    --color-primary-border: rgba(166, 217, 106, 0.3);

    --bdot-inactive: rgba(255, 255, 255, 0.2);
    --chip-active-bg: #ffffff;
    --chip-active-text: #100f16;
    --tab-active-bg: #ffffff;
    --tab-active-text: #100f16;
    --social-btn-border-hover: rgba(255, 255, 255, 0.15);

    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 18px rgba(166, 217, 106, 0.22);

    --font-display: "Bebas Neue", sans-serif;
    --font-body: "Space Mono", monospace;

    /* ── Z-Index Layer System ──────────────────────────────────────── */
    --z-base: 1;
    --z-sticky: 10;
    --z-overlay: 20;
    --z-header: 40;
    --z-nav: 50; /* bottom-nav */
    --z-footer: 80; /* sticky footers (cart, pay, sticky) */
    --z-nav-top: 100; /* top-level nav always on top */
    --z-modal-backdrop: 200;
    --z-toast: 300;
    --z-search-overlay: 300;
    --z-story: 900;
    --z-story-ui: 901;
}

.home-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    text-decoration: none;
    transition:
        background 0.2s,
        color 0.2s;
}
.home-link:hover {
    background: var(--bg-card-hover);
    color: var(--accent-lime);
}

/* Auth header — disamakan styling dengan tombol navigasi lainnya */
.auth-header .home-link {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}
[data-theme="light"] .auth-header .home-link {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}

/* Header logo */
.kinetic-logo {
    font-family: "Bebas Neue", sans-serif;
    font-size: 28px;
    letter-spacing: 3px;
    color: var(--text-primary);
}

/* Pastikan logo tetap kontras di mode terang */
[data-theme="light"] .kinetic-logo {
    color: var(--text-primary); /* warna otomatis menyesuaikan tema */
}

/* ── LIGHT THEME OVERRIDES ──────────────────────────────────────────────────── */
[data-theme="light"] {
    /* Samakan dengan --bg-page (lihat catatan di :root). */
    --bg-base: #f3f3fb;
    --bg-page: #f3f3fb;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #ebebf5;
    --bg-elevated: #e2e2f0;
    --bg-elevated-2: #cccce6;

    --text-primary: #0c0c1a;
    --text-secondary: #48486a;
    --text-muted: #70709a;
    --text-soft-accent: #14532d;
    --text-on-accent: #ffffff;

    --accent-lime: #3d6600;
    /* ── Yang dulu biru, kini hijau ────────────────────────────────────────
     * Nama tokennya SENGAJA tidak diganti. `--accent-blue` dirujuk 142 kali di
     * 20 berkas gaya; me-rename-nya berarti menyunting semuanya sekaligus demi
     * perubahan yang tak terlihat di layar, dan setiap berkas yang terlewat
     * akan kehilangan warnanya dalam diam — `var()` yang tak dikenal batal
     * tanpa galat. Yang berubah cukup NILAInya di sini, satu tempat.
     *
     * Nada hijaunya sengaja BERBEDA dari `--accent-lime` di atas. Keduanya
     * kerap dipakai berdampingan dalam satu gradien (mis. cincin story:
     * `linear-gradient(45deg, lime, blue, violet)`); kalau nilainya
     * disamakan, gradiennya kehilangan peralihan dan tampak seperti blok
     * warna datar. */
    --accent-blue: #1f7a45;
    --accent-violet: #5522c8;
    --accent-info: #2e8b57;
    --accent-pink: #c42a6a;
    --accent-promo: #7233c0;
    --live-green: #0a7035;
    --warning-amber: #875000;
    --danger: #bc1830;

    --border-soft: rgba(0, 0, 20, 0.06);
    --border: rgba(0, 0, 20, 0.09);
    --border-strong: rgba(0, 0, 20, 0.14);

    --overlay-blur: rgba(243, 243, 251, 0.96);
    --overlay-blur-soft: rgba(255, 255, 255, 0.88);
    --notch-bg: #f3f3fb;
    --map-bg-1: #e0e4f8;
    --map-bg-2: #f3f3fb;
    --map-grid: rgba(31, 122, 69, 0.12);

    --scrollbar-track: #e2e2f0;
    --scrollbar-thumb: #bebede;

    /* ── Warna utama: hijau ───────────────────────────────────────────────
     * `--accent-lime` di mode terang bernilai #3d6600 — hijau tua, BUKAN
     * hijau muda. Itu disengaja dan tak boleh dicerahkan: nilai ini dipakai
     * sebagai warna TEKS dan ikon di atas latar putih, dan hijau muda di sana
     * tak akan lolos rasio kontras yang bisa dibaca. Kesan `hijau muda` datang
     * dari latarnya, bukan dari tintanya.
     *
     * Turunan glow/soft/border mengikuti rgb 61,102,0 — sebelumnya semuanya
     * masih memakai rgb biru 31, 122, 69. Kalau tidak ikut diganti, tombol hijau
     * akan berpendar biru dan bingkai fokusnya biru, dan hanya terlihat pada
     * keadaan yang jarang diuji: hover, fokus keyboard, dan latar lembut. */
    --color-primary: var(--accent-lime);
    --color-primary-text: #ffffff;
    --color-primary-glow: rgba(61, 102, 0, 0.3);
    --color-primary-soft: rgba(61, 102, 0, 0.08);
    --color-primary-border: rgba(61, 102, 0, 0.3);

    --bdot-inactive: rgba(0, 0, 30, 0.18);
    --chip-active-bg: #0c0c1a;
    --chip-active-text: #ffffff;
    --tab-active-bg: #0c0c1a;
    --tab-active-text: #ffffff;
    --social-btn-border-hover: rgba(0, 0, 20, 0.2);

    --shadow-card: 0 10px 24px rgba(0, 0, 20, 0.08);
    --shadow-glow: 0 0 24px rgba(61, 102, 0, 0.2);
}

/* ── Light mode — redupkan overlay/gradient dari tema gelap ──────── */
[data-theme="light"] .hero-overlay {
    background: linear-gradient(
        to top,
        rgba(12, 12, 26, 0.78) 0%,
        rgba(12, 12, 26, 0.18) 60%,
        transparent 100%
    );
}
[data-theme="light"] .upgrade-banner {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-violet) 100%);
}
[data-theme="light"] .upgrade-btn {
    background: #ffffff;
    color: var(--accent-blue);
}
[data-theme="light"] .nav-avatar {
    border-color: rgba(31, 122, 69, 0.45);
    background: var(--bg-card);
}
[data-theme="light"] .bell-dot {
    background: var(--accent-blue);
    box-shadow: 0 0 8px rgba(31, 122, 69, 0.45);
    border-color: var(--bg-page);
}
[data-theme="light"] .count-dot {
    background: var(--accent-blue);
}
[data-theme="light"] .scarcity-dot {
    background: var(--accent-blue);
}
[data-theme="light"] .pulse-dot--green {
    background: var(--accent-blue);
    box-shadow: 0 0 8px rgba(31, 122, 69, 0.45);
}
[data-theme="light"] .avatar-circle {
    border-color: var(--accent-blue);
    box-shadow:
        0 0 0 4px rgba(31, 122, 69, 0.1),
        0 0 40px rgba(31, 122, 69, 0.14);
}
[data-theme="light"] .avatar-edit {
    background: var(--accent-blue);
    color: #fff;
}
[data-theme="light"] .profile-glow {
    background: radial-gradient(circle, rgba(31, 122, 69, 0.1) 0%, transparent 70%);
}
[data-theme="light"] .header-badge {
    color: var(--accent-blue);
    background: rgba(31, 122, 69, 0.1);
    border-color: rgba(31, 122, 69, 0.25);
}
[data-theme="light"] .auth-prompt-link {
    color: var(--accent-blue);
}
[data-theme="light"] .forgot-link:hover {
    color: var(--accent-blue);
}
[data-theme="light"] .stat-value {
    color: var(--accent-blue);
}
[data-theme="light"] .grid-bg {
    background: var(--bg-page);
}
[data-theme="light"] .orb-2 {
    background: radial-gradient(circle, rgba(31, 122, 69, 0.45) 0%, transparent 70%);
}
[data-theme="light"] .vip-icon-wrap {
    color: #fff;
}
[data-theme="light"] .qr-box {
    background: #fff;
    border: 1px solid var(--border);
}
[data-theme="light"] .td-qr {
    background: #fff;
    box-shadow: 0 0 40px rgba(31, 122, 69, 0.18);
}
[data-theme="light"] .vl-pin-circle {
    border-color: var(--accent-blue);
    box-shadow: 0 0 30px rgba(31, 122, 69, 0.3);
}
[data-theme="light"] .vl-pin-dot {
    background: var(--accent-blue);
}
[data-theme="light"] .vl-pin-pulse {
    background: rgba(31, 122, 69, 0.18);
}
[data-theme="light"] .vl-pin-label {
    color: var(--accent-blue);
    border-color: rgba(31, 122, 69, 0.35);
}
[data-theme="light"] .vl-section-line {
    background: var(--accent-blue);
}
[data-theme="light"] .vl-distance {
    background: rgba(31, 122, 69, 0.08);
    border-color: rgba(31, 122, 69, 0.22);
}
[data-theme="light"] .bottom-item--active {
    color: var(--accent-blue);
}
[data-theme="light"] .view-all,
[data-theme="light"] .results-clear,
[data-theme="light"] .past-cta-btn,
[data-theme="light"] .vl-view-all,
[data-theme="light"] .section-badge,
[data-theme="light"] .nd-eyebrow,
[data-theme="light"] .vl-eyebrow,
[data-theme="light"] .event-badge,
[data-theme="light"] .live-badge,
[data-theme="light"] .notif-cta,
[data-theme="light"] .order-cta--view,
[data-theme="light"] .td-qr-ref {
    color: var(--accent-blue);
}
[data-theme="light"] .notif-cta {
    border-color: var(--accent-blue);
}
[data-theme="light"] .notif-cta:hover {
    background: rgba(31, 122, 69, 0.08);
}
[data-theme="light"] .order-cta--view {
    border-color: rgba(31, 122, 69, 0.35);
}
[data-theme="light"] .hero-price,
[data-theme="light"] .trending-price,
[data-theme="light"] .item-price,
[data-theme="light"] .ticket-price,
[data-theme="light"] .event-card-price,
[data-theme="light"] .order-price,
[data-theme="light"] .order-compact-price,
[data-theme="light"] .vl-event-price,
[data-theme="light"] .nd-total {
    color: var(--accent-blue);
    font-weight: 700;
}
[data-theme="light"] .total-final-amt,
[data-theme="light"] .starting-price {
    color: var(--accent-blue);
}
[data-theme="light"] .notif-amount,
[data-theme="light"] .notif-highlight,
[data-theme="light"] .nd-info-banner strong,
[data-theme="light"] .nd-subtitle strong {
    color: var(--accent-blue);
}
[data-theme="light"] .auth-prompt-link,
[data-theme="light"] .forgot-link {
    color: var(--accent-blue);
}
[data-theme="light"] .method-card--active {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
}
[data-theme="light"] .method-check {
    background: var(--color-primary);
    color: var(--color-primary-text);
}
[data-theme="light"] .nd-pay-icon,
[data-theme="light"] .vl-addr-icon,
[data-theme="light"] .nd-info-banner,
[data-theme="light"] .nd-info-icon,
[data-theme="light"] .flash-icon-wrap {
    background: rgba(31, 122, 69, 0.1);
    border-color: rgba(31, 122, 69, 0.2);
}
[data-theme="light"] .nd-info-banner p {
    color: var(--text-secondary);
}
[data-theme="light"] .nd-check-ring {
    background: conic-gradient(
        var(--accent-blue) 0deg,
        var(--accent-violet) 180deg,
        var(--accent-blue) 360deg
    );
    box-shadow: 0 0 50px rgba(31, 122, 69, 0.25);
}
[data-theme="light"] .nd-check-circle {
    background: var(--accent-blue);
    color: #fff;
}
[data-theme="light"] .success-card {
    border-color: rgba(31, 122, 69, 0.25);
}
[data-theme="light"] .success-icon {
    background: rgba(31, 122, 69, 0.08);
    border-color: rgba(31, 122, 69, 0.2);
    color: var(--accent-blue);
}
[data-theme="light"] .pay-bar-btn,
[data-theme="light"] .nd-cta-btn,
[data-theme="light"] .vl-directions-btn,
[data-theme="light"] .td-btn--primary {
    background: var(--accent-blue);
    color: #fff;
}
[data-theme="light"] .order-pill--upcoming {
    background: var(--accent-blue);
    color: #fff;
}
[data-theme="light"] .notif-pill--live {
    background: var(--accent-blue);
    color: #fff;
}
[data-theme="light"] .pulse-dot {
    background: #fff;
}
[data-theme="light"] .live-badge-card {
    background: var(--accent-blue);
    color: #fff;
}
[data-theme="light"] .slide-badge--live {
    background: var(--accent-blue);
    color: #fff;
}
[data-theme="light"] .banner-price {
    color: #a6d96a;
} /* keep original on dark image overlay */
[data-theme="light"] .footer-meta-desc,
[data-theme="light"] .order-meta-row {
    color: var(--text-secondary);
}

/* ── SMOOTH THEME TRANSITION ──────────────────────────────────────────────── */
html,
body,
.page,
.auth-page,
.bottom-nav,
.cart-footer,
.pay-bar,
.sticky-footer,
.search-bar,
.search-wrap,
.field-box,
.ticket-card,
.order-card,
.menu-item,
.notif-card,
.nd-card,
.nd-venue-card,
.vl-info-card,
.vl-facility,
.event-card,
.trending-card,
.auth-card,
.summary-card,
.order-item,
.method-card,
.promo-wrap,
.map-card,
.tier-card,
.stat-card,
.flash-card,
.cd-block,
.iq-btn,
.qty-btn,
.td-stub,
.td-pill,
.td-info-card,
.nav-avatar,
.back-btn,
.bell-btn,
.icon-btn,
.chip,
.filter-tab,
.reset-btn,
.submit-btn,
.grab-btn,
.proceed-btn,
.access-btn,
.confirm-btn,
.pay-bar-btn,
.nd-cta-btn,
.vl-directions-btn,
.browse-btn,
.book-btn,
.upgrade-btn,
.promo-apply-btn,
.orders-search,
.order-card-compact,
.vl-event-card,
.menu-section-label,
.page-logo {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* ==== base.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   BASE RESET, ANIMATIONS & LAYOUT
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── BASE RESET ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    line-height: 1.1;
}
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

/* ── ANIMATIONS ─────────────────────────────────────────────────────────────── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}
@keyframes orbFloat {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(30px, 20px);
    }
}
@keyframes pulse-ring {
    0% {
        transform: translateX(-50%) scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: translateX(-50%) scale(1.6);
        opacity: 0;
    }
}

.animate-fade-up {
    animation: fadeUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.animate-fade-up-delay-1 {
    animation-delay: 0.1s;
}
.animate-fade-up-delay-2 {
    animation-delay: 0.2s;
}
.animate-fade-up-delay-3 {
    animation-delay: 0.35s;
}

/* ── SHARED CHROME ──────────────────────────────────────────────────────────── */
.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.nav-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid rgba(79, 107, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    overflow: hidden;
    flex-shrink: 0;
}
.nav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bottom-nav {
    position: fixed;
    bottom: 0;
    /* ── DIPUSATKAN TANPA `transform` ─────────────────────────────────────
       Dulu `left: 50%` + `translateX(-50%)`. Hasil visualnya sama, tapi
       `transform`-nya bukan tanpa akibat: `58-page-transition.css` memberi
       bilah ini `view-transition-name` sendiri, dan elemen bertransform yang
       diangkat menjadi potretan tersendiri dipetakan ulang posisinya oleh
       peramban. Yang terlihat adalah bilah nav BERGESER sekejap di awal dan
       akhir SETIAP perpindahan halaman — persis jenis gangguan yang terbaca
       sebagai "transisinya kurang halus" tanpa pernah jelas apa penyebabnya.

       `left/right: 0` + `margin-inline: auto` memusatkan kotak berlebar
       terbatas tanpa satu pun transform, jadi tak ada yang perlu dipetakan
       ulang. */
    left: 0;
    right: 0;
    margin-inline: auto;
    width: 100%;
    max-width: var(--lebar-kolom);
    background: var(--overlay-blur);
    /* `backdrop-filter` DIBUANG, bukan lupa.

       `--overlay-blur` bernilai `rgba(22,21,29,0.97)` di tema gelap dan
       `rgba(243,243,251,0.96)` di terang — 96-97% buram. Apa pun yang diburamkan
       di belakangnya tertutup lapisan itu dan tak pernah terlihat. Yang tersisa
       hanyalah biayanya: `backdrop-filter` memaksa peramban membaca kembali
       latar, memburamkannya, lalu mengomposit ulang — pada elemen yang ADA DI
       SETIAP HALAMAN, dan yang ikut dirasterisasi tiap kali potretan transisi
       diambil.

       Kalau kelak bilahnya memang ingin tembus pandang, turunkan dulu alfa
       `--overlay-blur` ke sekitar 0.6 — barulah buramnya punya sesuatu untuk
       dikerjakan. */
    border-top: 1px solid var(--border-strong);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 8px 0 20px;
    z-index: 100;
}
.bottom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    padding: 6px 0;
    color: var(--text-muted);
    transition: color 0.2s;
}
.bottom-item--active {
    color: var(--accent-lime);
}

/* Nama aplikasi di atas nav — HANYA dipakai sidebar desktop (≥1200px, lihat
   `60-desktop.css`). Disembunyikan di sini, bukan di sana, supaya default
   elemennya hidup bersama elemen nav lain dan `60-desktop.css` tetap berisi
   media query saja: apa pun yang ada di berkas itu mustahil menyentuh ponsel.
   Di ponsel bilah nav tak punya ruang untuk nama aplikasi, dan header tiap
   halaman sudah memuatnya (`.page-logo`). */
.nav-brand {
    display: none;
}
.bottom-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.06em;
}

/* ══════════════════════════════════════════════════════════════════════════════
   KONSISTENSI UKURAN — semua halaman gunakan base .page (var(--lebar-kolom), padding-bottom 100px)
   Override per-halaman hanya jika benar-benar diperlukan
   ══════════════════════════════════════════════════════════════════════════════ */

/* Cart punya fixed footer lebih tinggi — beri ruang lebih */
.cart-page {
    padding-bottom: 160px;
}

/* Profile & detail acara perlu penanganan overflow */
.profile-page {
    position: relative;
    width: 100%;
}

/* ── 5. overflow-x containment without breaking fixed children ───────────── */
/* .page must NOT have overflow-x: hidden (breaks position:fixed).
   Containment is on body instead (already set above).
   Guard negative-margin scroll tracks explicitly: */
.home-genre-grid,
.lineup-grid,
.chip-row,
.exp-chips {
    /* These use negative margins or padding tricks for edge-to-edge scroll.
     clip-path on parent is safer than overflow:hidden for fixed children. */
    overflow-x: auto;
    scrollbar-width: none;
}
.home-genre-grid::-webkit-scrollbar,
.lineup-grid::-webkit-scrollbar {
    display: none;
}

/* ── 6. Bottom-nav on-screen guarantee ──────────────────────────────────── */
/* Force bottom-nav to always be within the safe viewport area */
.bottom-nav {
    /* Pad for iOS home indicator */
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    /* Ensure it's never obscured by transforms on parent */
    will-change: unset;
    /* `transform: translateX(-50%)` yang dulu ditegaskan ulang di sini SUDAH
       DIBUANG bersama pasangannya di atas — pemusatannya kini lewat
       `margin-inline: auto`, yang tak perlu ditegaskan ulang karena tak ada
       aturan lain yang menimpanya. */
}

/* Ensure <main> always takes full viewport width — prevents shimmer width collapse */
main {
    display: block;
    width: 100%;
    min-height: 100dvh;
}

/* Page bottom padding accounts for nav + safe area */
.page {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 12px));
}

/* Generic content container — same var(--lebar-kolom) width as .page */
.container {
    width: 100%;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
}
/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE TAP HIGHLIGHT FIX — Hapus kotak biru/highlight saat touch di mobile
   Berlaku untuk semua elemen interaktif
   ══════════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; /* Cegah callout (copy/paste popup) saat long-press link */
}

/* Pastikan focus tetap terlihat untuk aksesibilitas keyboard (bukan touch) */
:focus-visible {
    outline: 2px solid var(--accent-lime, #a6d96a);
    outline-offset: 2px;
}

/* Hapus outline default yang muncul dari rule sebelumnya saat tap touch */
:focus:not(:focus-visible) {
    outline: none;
}

/* Semua elemen yang bisa diklik */
a,
button,
input,
select,
textarea,
label,
[role="button"],
[tabindex],
.chip,
.filter-tab,
.bottom-item,
.menu-item,
.notif-card,
.ticket-card--link,
.trending-card,
.event-card,
.upcoming-card,
.rec-card,
.vl-event-card,
.order-card,
.order-card-compact,
.explore-product-card-v2,
.exp-card-wrap,
.msg-convo-row,
.msg-hot-card,
.mhub-nav-item,
.mhub-product-card,
.story-add-btn,
.story-user-btn,
.sc-tombol-bulat,
.sc-tombol-alat,
.sc-tombol-stiker,
.sc-item-musik,
.sc-item-filter,
.drg-overlay,
.home-genre-card,
.ed-accordion-item,
.ed-cat-card-full,
.banner-slide-inner,
.exp-banner-link,
.back-btn,
.bell-btn,
.icon-btn,
.theme-toggle,
.home-link,
.nav-avatar {
    -webkit-tap-highlight-color: transparent;
}

/* User-select: none untuk elemen UI yang tidak perlu dipilih teks */
button,
.chip,
.filter-tab,
.bottom-item,
.bottom-label,
.section-title,
.page-logo,
.kinetic-logo,
[role="button"] {
    user-select: none;
    -webkit-user-select: none;
}



/* Audio Pill — Instagram Glass */
.ap-root {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.15s;
    
    /* 🔴 FIX: fixed width untuk semua state */
    width: 140px;           /* fixed width */
    justify-content: center; /* center content */
    box-sizing: border-box;
}

.ap-root:active { transform: scale(0.92); }
.ap-root:hover  { background: rgba(0,0,0,0.45); }
.ap-root:hover {
    background: rgba(0, 0, 0, 0.65);
}

.ap-icon-wrap {
    position: relative;
    width: 18px; height: 18px;
    display: grid; place-items: center;
}
.ap-speaker, .ap-slash { grid-area: 1/1; }

/* Wave Bars — pure CSS, no JS/WASM alloc */
.ap-waves {
    position: absolute;
    right: -10px; top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    height: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ap-waves--active { opacity: 1; }
.ap-bar {
    width: 2.5px;
    border-radius: 2px;
    background: #4bd88f; /* hijau Instagram */
    animation: ap-wave 0.8s ease-in-out infinite;
}
.ap-bar:nth-child(1) { height: 6px; animation-delay: 0s; }
.ap-bar:nth-child(2) { height: 10px; animation-delay: 0.15s; }
.ap-bar:nth-child(3) { height: 6px; animation-delay: 0.3s; }

@keyframes ap-wave {
    0%, 100% { transform: scaleY(0.6); }
    50%      { transform: scaleY(1.0); }
}

.ap-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    text-align: center;
}
.ap-root:hover .ap-label,
.ap-root:focus-visible .ap-label {
    max-width: 120px;
    opacity: 1;
    margin-left: 2px;
}

.ap-icon-wrap {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Close button: absolute positioning alternative (optional) */
.sv-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;      /* never shrink */
    transition: background 0.15s;
}

/* Alternative: absolute positioning untuk X (paling robust) */
.sv-header--absolute-x {
    position: relative;
}
.sv-header--absolute-x .sv-close-btn {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 11;
}


/* Scale badge di kiri overlay */
.drg-scale-badge {
    position: absolute;
    left: -48px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    animation: badge-pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.drg-scale-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
}
.drg-scale-badge__text {
    color: white;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    font-family: -apple-system, sans-serif;
    min-width: 28px;
}

/* Instagram text styles */
.ig-text-classic {
    font-family: "Bebas Neue", "Arial Black", sans-serif;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    font-weight: 600;
}
.ig-text-modern {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.ig-text-strong {
    font-family: "Arial Black", sans-serif;
    text-transform: uppercase;
    background: rgba(0,0,0,0.8);
    padding: 4px 12px;
    border-radius: 4px;
}
.ig-text-typewriter {
    font-family: "Courier New", monospace;
    background: rgba(0,0,0,0.75);
    padding: 6px 10px;
}

/* Panel teks */
.sc-text-preview-box {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.15s ease;
    word-break: break-word;
}
.sc-text-edit-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}
.sc-size-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 40px;
}
.sc-slider-vertical {
    writing-mode: vertical-lr;
    direction: rtl;
    height: 120px;
    width: 4px;
    accent-color: #fff;
}
.sc-size-label {
    color: white;
    font-size: 11px;
    font-weight: 700;
}
.sc-text-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sc-font-carousel {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0;
}
.sc-font-chip {
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
    color: white;
    font-size: 13px;
}
.sc-font-chip--aktif {
    background: white;
    color: black;
    border-color: white;
}
.sc-align-row {
    display: flex;
    gap: 8px;
}
.sc-align-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: white;
    font-size: 16px;
}
.sc-align-btn--aktif {
    background: rgba(255,255,255,0.2);
}
.sc-bg-toggle {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
    color: white;
    font-size: 12px;
    font-weight: 700;
}
.sc-bg-toggle--on {
    background: white;
    color: black;
}


/* ── Kolom aplikasi ────────────────────────────────────────────────────────
   Dipakai `<main>` di `web/app/router.rs`. Lebarnya satu token, supaya kolom
   dan setiap bilah melayang yang harus sejajar dengannya tak pernah bisa
   berselisih. */
.kolom-app {
    max-width: var(--lebar-kolom);
    margin-inline: auto;
}

/* ==== components.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   SHARED COMPONENTS
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Grid Background (auth pages) ──────────────────────────────────────────── */
.grid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--bg-base);
}
.grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--map-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--map-grid) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
}
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}
.orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--accent-blue) 0%, transparent 70%);
    top: -100px;
    left: -100px;
    animation: orbFloat 8s ease-in-out infinite;
}
.orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--accent-lime) 0%, transparent 70%);
    bottom: -80px;
    right: -80px;
    animation: orbFloat 10s ease-in-out infinite reverse;
}

/* ── ORB DIMATIKAN SAAT TAK ADA GUTTER ────────────────────────────────────
   Latar grid hanya terlihat di gutter kiri-kanan, dan gutter hanya ada ketika
   layarnya LEBIH LEBAR daripada kolom var(--lebar-kolom). Di bawah itu kolom yang opaque
   menutupi seluruh viewport — orbnya tetap ada, tetap berputar 8 dan 10 detik
   tanpa henti, tetap dicat dengan `blur(80px)`, dan tak seorang pun pernah
   melihatnya.

   Itu bukan biaya kecil: blur radius 80px pada bidang 400px adalah salah satu
   hal termahal yang bisa diminta dari compositor, dan ia berjalan SELAMANYA di
   tiap halaman — di ponsel, yaitu perangkat yang paling tak sanggup
   membayarnya. Ia juga ikut dirasterisasi tiap kali potretan transisi diambil,
   karena `.grid-bg` punya `view-transition-name` sendiri.

   Ambangnya 520px, bukan var(--lebar-kolom): di bawah itu gutternya tinggal beberapa piksel
   di tiap sisi dan orb yang terpusat di sudut tak menyumbang apa pun. */
@media (max-width: 520px) {
    .orb {
        display: none;
    }
}

/* ── INPUTS ─────────────────────────────────────────────────────────────────── */
.field-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.field-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.field-box {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.field-box--focused {
    border-color: rgba(79, 107, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.12);
}
.field-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 14px 16px;
    width: 100%;
}
.field-input::placeholder {
    color: var(--text-muted);
}
.field-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pass-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 14px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.pass-toggle:hover {
    color: var(--text-secondary);
}

/* ── BANNERS / ALERTS ───────────────────────────────────────────────────────── */
.error-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 79, 107, 0.1);
    border: 1px solid rgba(255, 79, 107, 0.25);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    color: var(--danger);
    animation: fadeUp 0.3s ease both;
}
.success-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(75, 216, 143, 0.08);
    border: 1px solid rgba(75, 216, 143, 0.25);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    color: var(--live-green);
    animation: fadeUp 0.3s ease both;
}
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(128, 128, 128, 0.3);
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

/* ── PAGE HEADER (canonical — semua halaman gunakan ini) ──────────────────── */
/* Selokan 20px, sama dengan SELURUH isi halaman di bawahnya (`.avatar-section`,
 * `.stats-row`, `.menu-section`, `.profile-points-card`, dan padanannya di
 * explore/home/orders/tickets — semuanya 20px). Dulu 16px, dan selisih 4px itu
 * membuat header tampak sedikit melenceng ke luar dibanding segala sesuatu di
 * bawahnya di 16 halaman yang memakainya.
 *
 * Yang disejajarkan adalah apa yang TERLIHAT, bukan kotaknya:
 *   * Tombol BERISI (`.back-btn`, `.bell-btn` — lingkaran 40px berlatar dan
 *     bergaris) punya tepi yang kelihatan, jadi tepi itulah yang berdiri di
 *     garis 20px. Tak perlu penyesuaian.
 *   * Tombol POLOS (`.icon-btn` — tanpa latar, cuma glif + padding 4px) tak
 *     punya tepi yang kelihatan. Yang dilihat mata adalah glifnya, jadi
 *     kotaknya ditarik keluar 4px supaya GLIF-nya yang mendarat di 20px.
 *     Tanpa penarikan ini glif polos berhenti di 24px dan justru terbaca lebih
 *     masuk daripada teks di bawahnya — persis kesalahan yang sedang dibetulkan. */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-soft);
    width: 100%;
    min-width: 0;
}
/* Hanya anak PERTAMA/TERAKHIR: `.icon-btn` di tengah deretan tak menyentuh tepi
 * halaman, jadi menariknya justru merusak jarak antar-tombol. */
.page-header > .icon-btn:first-child {
    margin-left: -4px;
}
.page-header > .icon-btn:last-child {
    margin-right: -4px;
}
/* `.header-actions` adalah pembungkus; yang perlu ditarik adalah tombol polos
 * di ujungnya, bukan pembungkusnya — kalau pembungkusnya yang ditarik, tombol
 * BERISI di dalamnya ikut terseret keluar garis. */
.page-header > .header-actions:last-child > .icon-btn:last-child {
    margin-right: -4px;
}

/* ── BACK BUTTON (canonical — semua halaman gunakan ini) ──────────────────── */
.back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none;
    padding: 0;
}
.back-btn:hover {
    background: var(--bg-elevated-2);
}

/* ── HEADER BELL ────────────────────────────────────────────────────────────── */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bell-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.bell-btn:hover {
    background: var(--bg-card-hover);
}
.bell-dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-lime);
    border: 2px solid var(--bg-page);
    box-shadow: 0 0 8px rgba(166, 217, 106, 0.6);
}

/* ── THEME TOGGLE BUTTON ────────────────────────────────────────────────────── */
.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s,
        transform 0.2s;
    padding: 0;
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--bg-card-hover);
    color: var(--accent-lime);
    transform: rotate(12deg);
}
.theme-toggle:active {
    transform: scale(0.94);
}
.auth-header .theme-toggle {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}
[data-theme="light"] .auth-header .theme-toggle {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}

/* ── Icon color helpers (used by inline SVGs that previously hardcoded gray strokes) ──── */
.search-bar svg,
.search-wrap svg,
.orders-search svg,
.empty-state svg,
.ticket-venue-row svg,
.menu-item > svg:last-child {
    color: var(--text-muted);
}

/* ── BANNER SLIDER ──────────────────────────────────────────────────────────── */
.banner-slider-wrap {
    overflow: hidden;
    margin-bottom: 20px;
    touch-action: pan-y;
}

/* outer drag container — full width, no visible clip */
.banner-track-outer {
    width: 100%;
    overflow: hidden;
}

/* The moving track: slides are not percentage-based anymore;
   we use translate3d(calc(-N * slideWidth + dragDelta), 0, 0)
   driven entirely from Rust. CSS just provides the snap transition. */
.banner-track {
    display: flex;
    will-change: transform;
    /* transition applied inline when NOT dragging; none when dragging */
}

.banner-slide {
    flex: 0 0 calc(100% - 40px);
    /* first/last handled inline or with :first-child / :last-child */
    margin: 0 6px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    height: 180px;
    user-select: none;
    -webkit-user-drag: none;
}
.banner-slide:first-child {
    margin-left: 20px;
}
.banner-slide:last-child {
    margin-right: 20px;
}

/* inner link fills the slide */
.banner-slide-inner {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.banner-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.2) 55%,
        transparent 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
    gap: 6px;
    pointer-events: none;
}
.slide-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.14em;
    padding: 3px 9px;
    border-radius: 100px;
    font-weight: 700;
    align-self: flex-start;
}
.slide-badge--live {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}
.slide-badge--upcoming {
    background: rgba(79, 107, 255, 0.85);
    color: #fff;
}
.slide-badge--sale {
    background: rgba(255, 107, 79, 0.85);
    color: #fff;
}
.slide-badge--featured {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
}
.banner-title {
    font-family: var(--font-display);
    font-size: 26px;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.04em;
}
.banner-subtitle {
    display: none;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    max-width: 480px;
}
.banner-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.banner-date {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.06em;
}
.banner-price {
    font-family: var(--font-body);
    font-size: 13px;
    color: #a6d96a;
    font-weight: 700;
}
.banner-cta-btn {
    display: none;
}

.banner-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 0 0;
}
.bdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bdot-inactive);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-block;
    border: none;
    padding: 0;
}
.bdot--active {
    background: var(--accent-lime);
    width: 18px;
    border-radius: 4px;
}
   MERCHANT — CREATE EVENT form & inventory header
   ══════════════════════════════════════════════════════════════════════════════ */

/* Inventory header row with NEW EVENT button */
.mhub-inv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.mhub-new-event-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--accent-lime);
    border: none;
    border-radius: 100px;
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.mhub-new-event-btn:hover {
    opacity: 0.88;
}

/* Modal — form section dividers */
.mhub-form-section-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--accent-lime);
    padding: 8px 0 4px;
    border-bottom: 1px solid rgba(166, 217, 106, 0.15);
    margin-bottom: 10px;
}

/* Ticket tier blocks inside modal */
.mhub-tier-block {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
.mhub-tier-block--vip {
    border-color: rgba(79, 107, 255, 0.3);
    background: rgba(79, 107, 255, 0.04);
}

.mhub-tier-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mhub-tier-block-name {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-primary);
}
.mhub-tier-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.mhub-tier-check {
    width: 14px;
    height: 14px;
    accent-color: var(--accent-lime);
    cursor: pointer;
}
.mhub-tier-toggle-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* Make modal scrollable on small screens */
.mhub-modal {
    max-height: 88dvh;
    overflow-y: auto;
}
.mhub-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHAT — 1-message limit UI + merchant badge
   ══════════════════════════════════════════════════════════════════════════════ */

/* Merchant unlimited badge */
.chat-merchant-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    margin: 0;
    background: linear-gradient(90deg, rgba(79, 107, 255, 0.12) 0%, rgba(166, 217, 106, 0.06) 100%);
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent-lime);
}
.chat-merchant-badge svg {
    color: var(--accent-lime);
    flex-shrink: 0;
}

/* Input hint counter (hanya untuk user biasa, 1 pesan tersisa) */
.chat-send-hint {
    text-align: center;
    padding: 4px 20px 6px;
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    background: var(--overlay-blur);
    position: fixed;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--lebar-kolom);
}

/* Input "last chance" highlight */
.chat-input--last-chance {
    border-color: rgba(166, 217, 106, 0.35);
}
.chat-input--last-chance:focus {
    border-color: var(--accent-lime);
}

/* Read-only bar — user sudah habis jatah */
.chat-readonly-bar {
    /* `backdrop-filter` dibuang: latarnya ≥ 95% buram, jadi yang diburamkan
       di belakangnya tak pernah terlihat — yang tersisa hanya biaya baca-balik
       + blur + komposit ulang, pada bilah yang menempel di layar sepanjang
       waktu dan ikut dirasterisasi tiap potretan transisi. */
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--lebar-kolom);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 28px;
    background: var(--overlay-blur);
    border-top: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    z-index: 20;
}
.chat-readonly-bar svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHECKOUT — group join notification (muncul singkat setelah bayar)
   ══════════════════════════════════════════════════════════════════════════════ */

.checkout-group-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    margin: 0 0 8px;
    background: rgba(166, 217, 106, 0.08);
    border: 1px solid rgba(166, 217, 106, 0.2);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.5;
}
.checkout-group-notice svg {
    color: var(--accent-lime);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MESSAGES LIST — empty state & loading
   ═══════════════════════════════════════════════════════════════════════════ */
.msg-loading,
.msg-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 13px;
}
.msg-error {
    color: var(--danger);
}
.msg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 24px;
    text-align: center;
    color: var(--text-muted);
}
.msg-empty p {
    font-size: 13px;
    margin: 0;
}
.msg-empty-sub {
    font-size: 11px;
    opacity: 0.7;
}
.msg-explore-btn {
    margin-top: 8px;
    padding: 11px 24px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border-radius: 100px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT ROOM — loading, avatar placeholder, merchant badge inline
   ═══════════════════════════════════════════════════════════════════════════ */
.chat-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.chat-other-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.chat-merchant-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(166, 217, 106, 0.12);
    border: 1px solid rgba(166, 217, 106, 0.25);
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-lime);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   SHIMMER / SKELETON LOADING
   ═══════════════════════════════════════════════════════════════════════ */

/* Skeleton placeholder — lihat .shim di bagian bawah untuk animasi */

/* ── Skeleton kartu produk ────────────────────────────────────────────────
   Aturannya DIBUANG, tidak dipindah. `ProductCardShimmer` kini memakai kelas
   kartu yang sebenarnya (`.exp-mkt-*`), jadi ukurannya datang dari satu tempat
   dan tak ada lagi angka yang perlu disamakan dengan tangan. Yang tersisa cuma
   perbedaan perilaku, di `46-shimmer-fit.css`.

   Aturan lama menuliskan sendiri `height: 170px`, `width: 80%`, dan seterusnya
   — tebakan yang meleset dari kartu sungguhan, sehingga tata letak melompat
   tepat pada saat data tiba. */

/* ── Ticket card skeleton ── dimensi mengikuti .ticket-card asli ─────── */
.shim-ticket-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.shim-ticket-card + .shim-ticket-card {
    margin-top: 16px;
}
.shim-ticket-card .shim-tkt-cover {
    height: 180px;
    width: 100%;
    border-radius: 0;
}
.shim-tkt-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.shim-ticket-card .shim-tkt-title {
    height: 26px;
    width: 70%;
}
.shim-ticket-card .shim-tkt-venue {
    height: 11px;
    width: 55%;
}
.shim-tkt-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.shim-tkt-meta .shim-tkt-meta-item {
    height: 30px;
}
.shim-tkt-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.shim-tkt-qr-wrap .shim-tkt-qr {
    width: 184px;
    height: 184px;
    border-radius: 12px;
}
.shim-tkt-qr-wrap .shim-tkt-code {
    height: 11px;
    width: 130px;
}
.shim-tkt-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.shim-ticket-card .shim-tkt-badge {
    height: 30px;
    width: 100px;
    border-radius: 100px;
}
.shim-tkt-foot .shim-tkt-price {
    height: 16px;
    width: 90px;
}

/* ── Order card skeleton ──────────────────────────────────────────────── */
.shim-order-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shim-order-card .shim-ord-code {
    height: 14px;
    width: 45%;
}
.shim-order-card .shim-ord-event {
    height: 18px;
    width: 70%;
}
.shim-order-card .shim-ord-status {
    height: 22px;
    width: 80px;
    border-radius: 100px;
}
.shim-order-card .shim-ord-amount {
    height: 14px;
    width: 35%;
}

/* ── Merchant inventory skeleton ─────────────────────────────────────── */
.shim-merchant-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
    gap: 12px;
}
.shim-merchant-row .shim-mr-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.shim-merchant-row .shim-mr-name {
    height: 14px;
    width: 65%;
}
.shim-merchant-row .shim-mr-venue {
    height: 11px;
    width: 45%;
}
.shim-merchant-row .shim-mr-badge {
    height: 20px;
    width: 60px;
    border-radius: 100px;
}

/* ── Merchant/Admin event card skeleton (mirrors .mhub-product-card) ────── */
.shim-mhub-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
}
.shim-mhub-card .shim-mhub-img {
    width: 100%;
    aspect-ratio: 16 / 8;
    display: block;
    border-radius: 0;
}
.shim-mhub-card .shim-mhub-body {
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.shim-mhub-card .shim-mhub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.shim-mhub-card .shim-mhub-title { height: 19px; width: 58%; }
.shim-mhub-card .shim-mhub-price { height: 18px; width: 24%; }
.shim-mhub-card .shim-mhub-meta  { height: 11px; width: 72%; }
.shim-mhub-card .shim-mhub-key   { height: 10px; width: 28%; }
.shim-mhub-card .shim-mhub-bar   { height: 6px;  width: 100%; border-radius: 3px; }
.shim-mhub-card .shim-mhub-btn   { height: 38px; width: 100%; border-radius: 12px; margin-top: 2px; }

/* ── Message room skeleton ────────────────────────────────────────────── */
.shim-msg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}
.shim-msg-row .shim-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}
.shim-msg-row .shim-msg-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shim-msg-row .shim-msg-name {
    height: 14px;
    width: 55%;
}
.shim-msg-row .shim-msg-preview {
    height: 11px;
    width: 80%;
}

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════════════════ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    text-align: center;
    gap: 12px;
}
.empty-state-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 4px;
}
.empty-state-title {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.empty-state-body {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 260px;
    line-height: 1.6;
}
.empty-state-cta {
    margin-top: 8px;
    padding: 12px 28px;
    min-height: 44px;
    background: var(--accent-blue);
    color: #fff;
    border-radius: 100px;
    font-size: 12px;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.15s, transform 0.1s;
}
.empty-state-cta:hover { opacity: 0.88; }
.empty-state-cta:active { transform: scale(0.97); }

/* ══════════════════════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL UI/UX IMPROVEMENTS (no duplicates)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page enter animation */
/* page-enter TIDAK boleh pakai transform — transform membuat new containing block
   yang menyebabkan position:fixed children (bottom-nav, buy-footer, dll.) ikut
   scroll bersama .page alih-alih menempel di viewport. Gunakan opacity saja. */
@keyframes page-enter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.page {
    animation: page-enter 0.18s ease-out both;
}

/* ── Cincin fokus ─────────────────────────────────────────────────────────
   Tombol tetap memakai garis tegas: ia hanya muncul lewat `:focus-visible`,
   yaitu saat orang bernavigasi dengan papan ketik, dan di situ penanda yang
   tegas memang yang dibutuhkan.

   Field teks DIPISAH karena perilakunya berbeda: `:focus` menyala pada SETIAP
   klik tetikus, bukan hanya navigasi papan ketik. Garis 2px yang MENGAMBANG
   2px di luar bentuknya karena itu tampil pada tiap orang yang sekadar
   mengetuk kolom cari — dan pada kolom `rounded-full`, garis terpisah yang
   mengikuti lengkungan penuh itu terbaca seperti galat, bukan seperti fokus.

   Gantinya: garis rambut yang MEMELUK bentuknya (offset 0) plus halo lembut.
   Tetap jelas terlihat — syarat fokus yang bisa dilihat tak dilanggar — tapi
   tak lagi berteriak. Ini juga menyamakan seluruh aplikasi dengan gaya yang
   sudah dipakai `.abn-field` di tab Spanduk. */
button:focus-visible {
    outline: 2px solid var(--accent-lime);
    outline-offset: 2px;
}
input:focus,
select:focus,
textarea:focus {
    /* `outline`, BUKAN `border-color`: kolom-kolom ini memakai utility Tailwind
       (`border-line`) untuk tepinya, dan utility hidup di layer yang MENANG
       atas CSS lama ini — berapa pun spesifisitasnya. Mengubah `border-color`
       dari sini tak akan berpengaruh apa pun. `outline` dan `box-shadow` tak
       disentuh utility itu, jadi keduanya berlaku. */
    outline: 1px solid var(--accent-lime);
    outline-offset: 0;
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* Bottom nav micro-interaction */
.bottom-item {
    transition:
        color 0.15s ease,
        transform 0.1s ease;
}
.bottom-item:active {
    transform: scale(0.92);
}
.bottom-item--active svg {
    filter: drop-shadow(0 0 5px var(--accent-lime));
}

/* EventCard hover lift */
.explore-product-card-v2 {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}
.explore-product-card-v2:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* Shimmer v2 — base fill + sheen band yang melintas via ::after translateX.
   Lebih smooth & performant vs background-position sweep. */
@keyframes shimmer-sheen {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(120%);
    }
}
@keyframes shimmer-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.shim {
    position: relative;
    overflow: hidden;
    background: var(--bg-elevated);
    border-radius: 8px;
    isolation: isolate;
}
.shim::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(
        100deg,
        transparent 0%,
        var(--bg-elevated-2, rgba(255, 255, 255, 0.07)) 45%,
        rgba(255, 255, 255, 0.12) 50%,
        var(--bg-elevated-2, rgba(255, 255, 255, 0.07)) 55%,
        transparent 100%
    );
    animation: shimmer-sheen 1.25s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .shim::after { animation: none; }
    .shim { animation: shimmer-breathe 1.8s ease-in-out infinite; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT DETAIL — New UI matching design
   ═══════════════════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.ed-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 4px;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.ed-breadcrumb-step--done {
    color: var(--accent-lime);
}
.ed-breadcrumb-sep {
    opacity: 0.5;
}
.ed-breadcrumb-current {
    color: var(--text-secondary);
}

/* Meta bar */
.ed-meta-bar {
    padding: 4px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ed-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ed-meta-event-title {
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}
.ed-meta-row--sub {
    font-size: 11px;
    color: var(--text-muted);
}
.ed-meta-by {
    opacity: 0.7;
}
.ed-meta-organizer {
    color: var(--accent-lime);
    font-weight: 600;
}
.ed-meta-platform-sep {
    opacity: 0.4;
}
.ed-meta-platform {
    color: var(--text-secondary);
    text-decoration: underline;
    cursor: pointer;
}

/* Cover with selling badge */
.ed-cover-wrap {
    position: relative;
    margin: 0 0 0;
}
.ed-cover-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.ed-selling-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(166, 217, 106, 0.15);
    border: 1px solid var(--accent-lime);
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 5px 10px;
    border-radius: 100px;
    backdrop-filter: blur(8px);
}
.ed-selling-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-lime);
    animation: pulse-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.7);
    }
}

/* Title block */
.ed-title-block {
    padding: 16px 16px 4px;
}
.ed-event-title {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: 0.03em;
    line-height: 1.1;
    margin: 0 0 12px;
}
.ed-event-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ed-event-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.ed-event-meta-item svg {
    flex-shrink: 0;
}

/* Section blocks */
.ed-section-block {
    padding: 18px 16px 4px;
}
.ed-section-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    margin: 0 0 14px;
}
.ed-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.ed-section-row .ed-section-label {
    margin-bottom: 0;
}
.ed-see-all-link {
    font-size: 12px;
    color: var(--accent-lime);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Category grid (ticket tiers as cards) */
.ed-category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ed-cat-card-full {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.ed-cat-card-full:first-child {
    border-color: var(--accent-lime);
    background: rgba(166, 217, 106, 0.04);
}
.ed-cat-card-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ed-cat-type-badge {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.ed-cat-sub {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.ed-cat-price-row {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 4px;
}
.ed-cat-avail-row {
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* About text */
.ed-about-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 0;
}
.ed-read-more {
    color: var(--accent-lime);
    cursor: pointer;
    font-weight: 600;
}

/* Venue map card */
.ed-map-card {
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
}
.ed-map-visual {
    position: relative;
    height: 140px;
    background: var(--bg-elevated);
    overflow: hidden;
}
.ed-map-visual .map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.6;
}
.ed-map-visual .map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    filter: drop-shadow(0 4px 12px rgba(166, 217, 106, 0.4));
}
.ed-map-info {
    padding: 14px 16px 16px;
}
.ed-map-name {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.ed-map-addr {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.ed-directions-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(166, 217, 106, 0.1);
    border: 1px solid rgba(166, 217, 106, 0.3);
    border-radius: 100px;
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.ed-directions-btn:hover {
    background: rgba(166, 217, 106, 0.18);
}

/* Essential info accordion */
.ed-accordion {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
}
.ed-accordion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg-card);
    border: none;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.15s;
}
.ed-accordion-item:last-of-type {
    border-bottom: none;
}
.ed-accordion-item:hover {
    background: var(--bg-elevated);
}
.ed-accordion-body {
    padding: 12px 16px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-soft);
}

/* BUY TICKETS sticky footer */
.ed-buy-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--lebar-kolom);
    background: var(--overlay-blur, rgba(13, 13, 26, 0.92));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 12px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 50;
}
.ed-buy-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ed-buy-label {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    font-weight: 700;
}
.ed-buy-price {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.ed-buy-btn {
    flex-shrink: 0;
    padding: 14px 28px;
    background: var(--accent-lime);
    color: #16151d;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition:
        opacity 0.15s,
        transform 0.1s;
}
.ed-buy-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}
.ed-buy-btn:active {
    transform: scale(0.98);
}

/* Bottom padding for sticky footer on event detail */
.ed-page {
    padding-bottom: 90px;
}

   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Fixed footer z-index layering (prevents overlap on same page) ─────── */
.bottom-nav {
    z-index: var(--z-nav-top);
}
.ed-buy-footer {
    z-index: var(--z-footer);
}
.sticky-footer {
    z-index: var(--z-footer);
}
.pay-bar {
    z-index: var(--z-footer);
}
.chat-input-bar {
    z-index: var(--z-overlay);
}

/* Pages that use a secondary fixed footer exclude .bottom-nav via component.
   Add bottom offset so secondary footers don't overlap bottom-nav. */
.ed-buy-footer {
    /* bottom-nav height ≈ 64px; buy footer sits above it on pages without nav */
    bottom: 0;
}

/* ── 2. Light-theme overrides — new components ─────────────────────────────── */

/* Event Detail — selling badge */
[data-theme="light"] .ed-selling-badge {
    background: rgba(61, 102, 0, 0.12);
    border-color: var(--accent-lime);
    color: var(--accent-lime);
}
[data-theme="light"] .ed-selling-dot {
    background: var(--accent-lime);
}

/* Event Detail — category cards */
[data-theme="light"] .ed-cat-card-full {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: var(--shadow-card);
}
[data-theme="light"] .ed-cat-card-full:first-child {
    border-color: var(--accent-lime);
    background: rgba(61, 102, 0, 0.05);
}
[data-theme="light"] .ed-cat-avail-row {
    color: var(--accent-lime);
}

/* Event Detail — directions button */
[data-theme="light"] .ed-directions-btn {
    background: rgba(61, 102, 0, 0.1);
    border-color: rgba(61, 102, 0, 0.28);
    color: var(--accent-lime);
}
[data-theme="light"] .ed-directions-btn:hover {
    background: rgba(61, 102, 0, 0.17);
}

/* Event Detail — map visual */
[data-theme="light"] .ed-map-visual {
    background: var(--bg-elevated);
}
[data-theme="light"] .ed-map-visual .map-grid {
    background-image:
        linear-gradient(var(--map-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--map-grid) 1px, transparent 1px);
}
[data-theme="light"] .ed-map-visual .map-pin {
    filter: drop-shadow(0 4px 12px rgba(61, 102, 0, 0.35));
}

/* Event Detail — accordion */
[data-theme="light"] .ed-accordion {
    border-color: var(--border);
}
[data-theme="light"] .ed-accordion-item {
    background: var(--bg-card);
    border-bottom-color: var(--border);
    color: var(--text-primary);
}
[data-theme="light"] .ed-accordion-item:hover {
    background: var(--bg-card-hover);
}
[data-theme="light"] .ed-accordion-body {
    background: var(--bg-elevated);
    border-bottom-color: var(--border);
}

/* Event Detail — buy footer */
[data-theme="light"] .ed-buy-footer {
    background: var(--overlay-blur);
    border-top-color: var(--border);
}
[data-theme="light"] .ed-buy-btn {
    color: var(--text-on-accent);
}

/* Event Detail — breadcrumb & meta */
[data-theme="light"] .ed-breadcrumb-step--done {
    color: var(--accent-lime);
}
[data-theme="light"] .ed-meta-organizer {
    color: var(--accent-lime);
}
[data-theme="light"] .ed-read-more {
    color: var(--accent-lime);
}

/* Explore — search bar */
[data-theme="light"] .exp-search-inner {
    background: var(--bg-card);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card);
}
[data-theme="light"] .exp-search-inner:focus-within {
    border-color: var(--accent-lime);
    box-shadow: 0 0 0 3px rgba(61, 102, 0, 0.13);
}
[data-theme="light"] .exp-search-bar--sticky {
    background: var(--bg-base);
    border-bottom-color: var(--border);
}

/* Explore — chips */
[data-theme="light"] .exp-chip {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text-secondary);
}
[data-theme="light"] .exp-chip:hover {
    border-color: var(--accent-lime);
    color: var(--text-primary);
}
[data-theme="light"] .exp-chip--on {
    background: var(--accent-lime);
    border-color: var(--accent-lime);
    /* lime in light is dark green #3d6600 — white text for contrast */
    color: #ffffff;
}

/* Explore — banner dots */
[data-theme="light"] .exp-bdot {
    background: var(--border-strong);
}
[data-theme="light"] .exp-bdot--on {
    background: var(--accent-lime);
}

/* Explore — results bar */
[data-theme="light"] .exp-results-eyebrow {
    color: var(--accent-lime);
}

/* Explore — clear button */
[data-theme="light"] .exp-clear-btn {
    background: rgba(188, 24, 48, 0.08);
    border-color: rgba(188, 24, 48, 0.22);
    color: var(--danger);
}
[data-theme="light"] .exp-clear-btn:hover {
    background: rgba(188, 24, 48, 0.14);
}

/* Explore — reset button */
[data-theme="light"] .exp-reset-btn {
    color: #ffffff;
}

/* Explore — hero */
[data-theme="light"] .exp-hero-dot {
    color: var(--accent-lime);
}

/* Home banner (legacy .home-banner-*) */
[data-theme="light"] .home-bdot {
    background: var(--border-strong);
}
[data-theme="light"] .home-bdot--on {
    background: var(--accent-lime);
}

/* ── 3. Hero overlay — softer gradient for light mode ────────────────────── */
[data-theme="light"] .hero-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.12) 55%,
        transparent 100%
    );
}
/* Also soften the banner slide overlay and ed-cover on light */
[data-theme="light"] .banner-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.1) 55%,
        transparent 100%
    );
}
[data-theme="light"] .event-card-cat-badge {
    background: rgba(255, 255, 255, 0.82);
    color: var(--accent-blue);
    border-color: var(--border);
}

/* ── 4. Slim down the mega-transition selector ───────────────────────────── */
/* Override: restrict theme-transition to only structural containers.
   Interactive elements get their own targeted transitions. */
.exp-chip,
.exp-search-inner,
.exp-search-bar,
.ed-cat-card-full,
.ed-accordion-item,
.ed-accordion-body,
.ed-buy-footer,
.ed-map-card,
.home-banner-slider {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── STORY: Panel Geser — drag handle centered, title+close aligned ────────── */

/* Panel geser needs top padding for the absolute drag handle */
.sc-panel-geser {
    padding-top: 28px !important;
    position: relative !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 72dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

/* Drag handle: absolute top-center of the panel, NOT part of flex row */
.sc-garis-pemisah {
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 38px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Panel header: title centered between spacer and close btn */
.sc-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    min-height: 28px !important;
}

/* When garis-pemisah is first child in panel-header, zero it out of flow */
.sc-panel-header > .sc-garis-pemisah:first-child {
    position: absolute !important;
    /* already handled above */
    flex-shrink: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Title takes up the space between the hidden handle and the close btn */
.sc-judul-panel {
    flex: 1 !important;
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    letter-spacing: 0.05em !important;
    color: #fff !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Close button: consistent size, no accidental flex-grow */
.sc-tombol-tutup-panel {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

/* When there's NO title (judul is empty), still keep close btn right-aligned */
.sc-panel-header:not(:has(.sc-judul-panel)) .sc-tombol-tutup-panel {
    margin-left: auto;
}

/* Story toolbar: always accessible on right side, not left */
.sc-toolbar-samping {
    right: 14px !important;
    left: auto !important;
}

/* Story viewfinder: make sure panel doesn't cover bottom controls */
.sc-panel-geser {
    bottom: 80px !important;
}

/* sc-area-bawah: clear above mode bar */
.sc-area-bawah {
    bottom: 44px !important;
}

/* Story: filter thumb showing the actual filter color */
.sc-thumb-filter.filter-clarendon { filter: contrast(1.2) saturate(1.3); }
.sc-thumb-filter.filter-gingham   { filter: brightness(1.05) hue-rotate(-10deg); }
.sc-thumb-filter.filter-moon      { filter: grayscale(1) contrast(1.1); }
.sc-thumb-filter.filter-lark      { filter: contrast(0.9); }
.sc-thumb-filter.filter-reyes     { filter: sepia(0.5) contrast(0.9); }
.sc-thumb-filter.filter-juno      { filter: contrast(1.1) saturate(1.2); }
.sc-thumb-filter.filter-slumber   { filter: brightness(0.9) saturate(0.8); }
.sc-thumb-filter.filter-crema     { filter: sepia(0.3) contrast(0.95); }
.sc-thumb-filter.filter-ludwig    { filter: saturate(1.1) contrast(1.05); }

/* Story: text preview box min-height for usability */
.sc-text-preview-box {
    min-height: 72px !important;
    border-radius: 12px !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
}

/* Story: font chip scroll container */
.sc-font-carousel {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
}
.sc-font-carousel::-webkit-scrollbar { display: none; }

/* Story: sticker grid on small panels */
.sc-grid-stiker {
    max-height: 200px !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
}
.sc-grid-stiker::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   TICKET DETAIL — Missing layout classes (td-mobile-layout, td-page-title,
   td-hero-img, td-hero-gradient, td-hero-content, td-empty-state)
   ───────────────────────────────────────────────────────────────────────────── */

/* Page title in the header (center of page-header) */
.td-page-title {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
}

/* Full-page layout wrapper for ticket detail content */
.td-mobile-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 80px;
}

/* Hero: full-bleed image area, overrides old td-hero margins for the image version */
.td-hero {
    position: relative;
    width: 100%;
    height: 260px;
    margin: 0;               /* full width, no side margins */
    border-radius: 0;        /* no radius — image goes edge-to-edge */
    overflow: hidden;
    flex-shrink: 0;
}

/* Actual cover image inside the hero */
.td-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dark gradient overlay from bottom */
.td-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8, 8, 16, 0.15) 0%,
        rgba(8, 8, 16, 0)    35%,
        rgba(8, 8, 16, 0.75) 80%,
        rgba(8, 8, 16, 0.95) 100%
    );
}

/* Text content sitting on top of the gradient */
.td-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* td-confirmed badge is already defined; keep, but make sure it fits inside hero-content */
.td-hero-content .td-confirmed {
    align-self: flex-start;
}

/* td-event-title inside hero — white text over image */
.td-hero-content .td-product-title {
    color: #fff;
    font-size: 34px;
    line-height: 1;
}

/* Stub card: sits flush under the hero, no top border-radius gap */
.td-stub {
    margin: 0 16px;
    border-radius: 0 0 20px 20px;
    border-top: none;
}

/* Empty / not-found state */
.td-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 24px;
    text-align: center;
}
.td-empty-state h2 {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin: 0;
}
.td-empty-state p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 260px;
    line-height: 1.6;
}
.td-empty-state .td-btn {
    margin-top: 8px;
    text-decoration: none;
}

/* td-stub-bottom: more breathing room */
.td-stub-bottom {
    padding: 20px 20px 28px;
}

/* QR box: white background is fine in dark mode, but needs border in light */
[data-theme="light"] .td-qr {
    border: 1px solid var(--border);
}

/* Pulse strip: bottom margin accounts for nav */
.td-pulse-strip {
    margin: 0 16px 100px;
}

/* Actions: full width inside the layout container */
.td-actions {
    padding: 16px 16px 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MERCHANT CREATE / EDIT EVENT — Layout polish & fixes
   ───────────────────────────────────────────────────────────────────────────── */

/* medit-page: ensure scrollable content above sticky footer */
.medit-page {
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* medit-container: clean vertical stack with consistent spacing */
.medit-container {
    gap: 18px !important;
    padding: 0 16px 100px !important; /* extra bottom for sticky footer */
}

/* medit-header: full-width header card for create event (no back btn) */
.medit-header {
    background: var(--bg-page);
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border-soft);
    margin: 0 -16px;
    width: calc(100% + 32px);
    box-sizing: border-box;
}

/* medit-header-top: center title */
.medit-header-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    position: relative;
}

/* medit-title: clear uppercase treatment */
.medit-title {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
}

/* Back button inside header-top: absolute left */
.medit-header-top .medit-back-btn {
    position: absolute;
    left: 0;
}

/* Section header: consistent spacing above form groups */
.medit-section-header {
    margin-top: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(166, 217, 106, 0.12);
}

.medit-section-label {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.22em;
    color: var(--accent-lime);
    text-transform: uppercase;
    opacity: 0.85;
}

/* Field group: tighter gap for labels + inputs */
.medit-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.medit-field-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* medit-input: consistent rounding and focus ring */
.medit-input,
.medit-textarea {
    border-radius: 10px !important;
}
.medit-input:focus,
.medit-textarea:focus {
    border-color: rgba(166, 217, 106, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(166, 217, 106, 0.1) !important;
}

/* Category grid: pill chips in a flex-wrap */
.medit-category-grid {
    gap: 7px !important;
}

.medit-checkbox-label {
    padding: 7px 14px !important;
    font-size: 10px !important;
}

/* File input wrapper: slightly larger tap target */
.medit-file-input-wrapper {
    padding: 14px 16px !important;
}

/* Cover preview: 16/9, rounded */
.medit-cover-preview {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Variant card: consistent inner spacing */
.medit-variant-card {
    border-radius: 16px !important;
    padding: 16px !important;
    gap: 12px !important;
}

/* Variant name big input: bottom border accent on focus */
.medit-variant-name-input:focus {
    border-bottom-color: var(--accent-lime) !important;
}

/* Add variant row button: full width dashed */
.medit-add-variant-row {
    border-radius: 12px !important;
}

/* Sticky footer: extra safe-area on iOS */
.medit-sticky-footer {
    padding: 12px 16px max(20px, env(safe-area-inset-bottom, 20px)) !important;
}

/* Update/Publish button: bold CTA */
.medit-update-btn {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    border-radius: 12px !important;
}

/* Error / success banners: smooth appear */
.medit-error-banner,
.medit-success-banner {
    border-radius: 10px !important;
    animation: fadeUp 0.25s ease both !important;
}

/* grid-2: consistent gap */
.medit-grid-2 {
    gap: 10px !important;
}

/* ── Light theme support for medit pages ─── */
[data-theme="light"] .medit-input,
[data-theme="light"] .medit-textarea {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
[data-theme="light"] .medit-input:focus,
[data-theme="light"] .medit-textarea:focus {
    border-color: rgba(61, 102, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(61, 102, 0, 0.1);
}
[data-theme="light"] .medit-section-label {
    color: var(--accent-lime);
}
[data-theme="light"] .medit-variant-card {
    background: var(--bg-elevated);
    border-color: var(--border);
}
[data-theme="light"] .medit-add-variant-row {
    border-color: rgba(61, 102, 0, 0.35);
    color: var(--accent-lime);
}
[data-theme="light"] .medit-add-variant-row:hover {
    background: rgba(61, 102, 0, 0.06);
    border-color: rgba(61, 102, 0, 0.6);
}
[data-theme="light"] .medit-header {
    background: var(--bg-page);
    border-color: var(--border);
}
[data-theme="light"] .medit-file-input-wrapper {
    border-color: var(--border-strong);
    background: var(--bg-elevated);
}
[data-theme="light"] .medit-file-input-wrapper:hover {
    border-color: var(--accent-lime);
}
[data-theme="light"] .medit-checkbox-label {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text-secondary);
}
[data-theme="light"] .medit-checkbox-label:has(input:checked) {
    border-color: var(--accent-lime);
    background: rgba(61, 102, 0, 0.08);
    color: var(--text-primary);
}
[data-theme="light"] .medit-rp-prefix {
    color: var(--text-secondary);
}
[data-theme="light"] .medit-variant-name-input {
    color: var(--text-primary);
    border-bottom-color: var(--border-strong);
}
[data-theme="light"] .medit-variant-name-input:focus {
    border-bottom-color: var(--accent-lime);
}
[data-theme="light"] .medit-sticky-footer {
    background: var(--overlay-blur);
    border-color: var(--border);
}
[data-theme="light"] .medit-update-btn {
    color: #fff;
}

/* ── Ticket Detail: light mode ─── */
[data-theme="light"] .td-hero-gradient {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1)  0%,
        rgba(0, 0, 0, 0)    30%,
        rgba(0, 0, 0, 0.55) 80%,
        rgba(0, 0, 0, 0.85) 100%
    );
}
[data-theme="light"] .td-hero-content .td-product-title {
    color: #fff; /* always white over image */
}
[data-theme="light"] .td-page-title {
    color: var(--text-primary);
}


/* ── EventGrid (komponen daftar event reusable) ─────────────────────────────
   <EventGrid/> memakai kontainer .exp-mkt-grid + kartu .exp-mkt-card (styling di
   09-page-explore.css) — SATU desain kartu dipakai Explore, Event Detail, /m/:id. */
.product-grid-empty {
    color: var(--text-muted);
    font-size: 14px;
    padding: 18px 0;
}

/* ── Tombol "lihat password" di dalam .field-box ──────────────────────────
   `.field-box` sudah `display:flex`, jadi tombol ini cukup menjadi anak kedua
   di sebelah `.field-input` (yang `flex:1`). Tak perlu absolut — dan justru
   tak boleh: posisi absolut akan menumpuk di atas teks sandi yang panjang,
   sedangkan sebagai anak flex ia MENYISAKAN ruang untuk dirinya sendiri. */
.field-eye {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    align-self: stretch;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.field-eye:hover {
    color: var(--text-primary);
}
/* Sandi yang SEDANG terlihat ditandai warnanya — kalau tidak, satu-satunya
   petunjuk adalah bentuk ikon, dan mata-dicoret vs mata biasa terlalu mirip
   untuk dibedakan sekilas di layar kecil. */
.field-eye[aria-pressed="true"] {
    color: var(--accent-lime);
}

/* ==== message_stories.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   MESSAGES & CHAT PAGES
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   CHAT / MESSAGES PAGES — Design sesuai screenshot
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Messages list page ───────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════════
   MESSAGES PAGE  /pulse
   ══════════════════════════════════════════════════════════════════════════════ */

.msg-page {
    padding-bottom: 80px;
    background: var(--bg-base);
    min-height: 100dvh;
    width: 100%;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    position: relative;
}

/* Header */
.msg-list-header {
    /* `backdrop-filter` dibuang: latarnya ≥ 95% buram, jadi yang diburamkan
       di belakangnya tak pernah terlihat — yang tersisa hanya biaya baca-balik
       + blur + komposit ulang, pada bilah yang menempel di layar sepanjang
       waktu dan ikut dirasterisasi tiap potretan transisi. */
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--overlay-blur);
    border-bottom: 1px solid var(--border);
    /* relative so absolute title can center itself */
    position: sticky;
}
.msg-list-avatar-wrap {
    flex-shrink: 0;
}
.msg-list-avatar-placeholder {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.msg-list-avatar-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}
.msg-list-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    white-space: nowrap;
    pointer-events: none;
}
.msg-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 6px;
    border-radius: 50%;
    transition: background 0.2s;
}
.msg-icon-btn:hover {
    background: var(--bg-elevated);
}

/* Search */
.msg-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 16px;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
}
.msg-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}
.msg-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
}
.msg-search-input::placeholder {
    color: var(--text-muted);
}

/* Conversation list */
.msg-convos-section {
    padding: 0 0 16px;
}
.msg-convos-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    padding: 14px 16px 8px;
}
.msg-convos-list {
    display: flex;
    flex-direction: column;
}
.msg-convo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    transition: background 0.15s;
}
.msg-convo-row:hover {
    background: var(--bg-card-hover);
}
.msg-convo-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.msg-convo-avatar {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    object-fit: cover;
}
.msg-convo-live-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--live-green);
    border: 2px solid var(--bg-base);
    box-shadow: 0 0 6px var(--live-green);
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
.msg-convo-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.msg-convo-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.msg-convo-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-convo-time {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.msg-convo-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}
.msg-convo-preview {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.msg-convo-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 100px;
    background: var(--accent-blue);
    color: #fff;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHAT ROOM PAGE  /pulse/:id
   ══════════════════════════════════════════════════════════════════════════════ */

.chat-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding-bottom: 72px;
    background: var(--bg-page);
    width: 100%;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    position: relative;
}

/* Header */
.chat-header {
    /* `backdrop-filter` dibuang: latarnya ≥ 95% buram, jadi yang diburamkan
       di belakangnya tak pernah terlihat — yang tersisa hanya biaya baca-balik
       + blur + komposit ulang, pada bilah yang menempel di layar sepanjang
       waktu dan ikut dirasterisasi tiap potretan transisi. */
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--overlay-blur);
    border-bottom: 1px solid var(--border);
}
.chat-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}
.chat-back-btn:hover {
    background: var(--bg-elevated);
}
.chat-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}
.chat-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-header-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-header-sub {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.chat-status-live {
    color: var(--live-green);
}
.chat-status-connecting {
    color: var(--text-muted);
}
.chat-header-actions {
    display: flex;
    gap: 4px;
}
.chat-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.chat-icon-btn:hover {
    background: var(--bg-elevated);
}

/* Messages area */
.chat-messages {
    flex: 1;
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

/* Shimmer */
.chat-shimmer-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}
.chat-shimmer-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.chat-shimmer-row--self {
    flex-direction: row-reverse;
}
.chat-shimmer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}
.chat-shimmer-bubble {
    border-radius: 18px;
    min-height: 44px;
}
.chat-shimmer-bubble--sm {
    width: 45%;
}
.chat-shimmer-bubble--md {
    width: 62%;
}
.chat-shimmer-bubble--lg {
    width: 74%;
    min-height: 60px;
}

/* Empty state */
.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 60px 32px;
    text-align: center;
}
.chat-empty-icon {
    font-size: 44px;
}
.chat-empty-title {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
    letter-spacing: 0.05em;
}
.chat-empty-body {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 240px;
    line-height: 1.6;
}

/* Rows */
.chat-row {
    display: flex;
    gap: 8px;
}
.chat-row--self {
    justify-content: flex-end;
}
.chat-row--other {
    align-items: flex-end;
}

/* Avatar inisial */
.chat-other-avatar-wrap {
    width: 36px;
    flex-shrink: 0;
}
.chat-other-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Bubble */
.chat-bubble-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 75%;
}
.chat-bubble-wrap--self {
    align-items: flex-end;
}
.chat-sender-name {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    padding-left: 4px;
}
.chat-bubble {
    padding: 11px 15px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
}
.chat-bubble-text {
    margin: 0 0 8px;
}
.chat-bubble--other {
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 4px 18px 18px 18px;
    border: 1px solid var(--border-soft);
}
.chat-bubble--self {
    background: var(--accent-blue);
    color: #fff;
    border-radius: 18px 18px 4px 18px;
}
.chat-msg-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
}
.chat-msg-time {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}
.chat-msg-sent-icon {
    color: var(--accent-lime);
    display: flex;
}

/* Ticket card bubble */
.chat-ticket-card {
    margin-top: 8px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--accent-lime);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chat-ticket-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chat-ticket-badge {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent-lime);
}
.chat-ticket-tier {
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 100px;
}
.chat-ticket-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-ticket-event {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.chat-ticket-venue {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
}
.chat-ticket-price {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.chat-ticket-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}
.chat-ticket-view-btn {
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border: none;
    border-radius: 100px;
    padding: 7px 18px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.chat-ticket-view-btn:hover {
    opacity: 0.85;
}

/* System message */
.chat-system-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
}
.chat-system-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.chat-system-bubble {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    max-width: 85%;
    line-height: 1.5;
}

/* Error toast */
.chat-error-toast {
    position: fixed;
    bottom: 76px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(min(100%, var(--lebar-kolom)) - 32px);
    max-width: 448px;
    background: var(--danger);
    color: #fff;
    border-radius: 10px;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    z-index: 30;
    animation: fadeInUp 0.25s ease;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Input bar */
.chat-input-bar {
    /* `backdrop-filter` dibuang: latarnya ≥ 95% buram, jadi yang diburamkan
       di belakangnya tak pernah terlihat — yang tersisa hanya biaya baca-balik
       + blur + komposit ulang, pada bilah yang menempel di layar sepanjang
       waktu dan ikut dirasterisasi tiap potretan transisi. */
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--lebar-kolom);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--overlay-blur);
    border-top: 1px solid var(--border);
    z-index: 20;
}
.chat-input {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 10px 16px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.chat-input:focus {
    border-color: rgba(79, 107, 255, 0.4);
}
.chat-input::placeholder {
    color: var(--text-muted);
}
.chat-input:disabled {
    opacity: 0.5;
}
.chat-input-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s;
}
.chat-input-icon-btn:hover {
    color: var(--text-secondary);
}
.chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(79, 107, 255, 0.35);
    transition: opacity 0.2s;
}
.chat-send-btn:hover {
    opacity: 0.88;
}
.chat-send-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════════════════════════
   REDESIGN — MESSAGES PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

.msg-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--bg-base);
    padding-bottom: 80px;
    width: 100%;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    position: relative;
}

/* Header */
.msg-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-soft);
}
.msg-header-avatar-wrap {
    flex-shrink: 0;
}
.msg-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-blue);
}
.msg-avatar--placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.msg-header-title {
    flex: 1;
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin: 0;
}
.msg-icon-btn {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition:
        color 0.2s,
        background 0.2s;
}
.msg-icon-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Search bar */
.msg-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
}
.msg-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}
.msg-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
}
.msg-search-input::placeholder {
    color: var(--text-muted);
}
.msg-search-filter-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    padding: 0;
}

/* Hot Stages — Live Now */
.msg-live-section {
    padding: 0 16px 16px;
}
.msg-live-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 14px;
}
.msg-live-eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--accent-lime);
    margin: 0 0 2px;
}
.msg-live-title {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin: 0;
}
.msg-live-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--live-green);
    background: rgba(75, 216, 143, 0.08);
    border: 1px solid rgba(75, 216, 143, 0.2);
    border-radius: 100px;
    padding: 4px 10px;
    white-space: nowrap;
}
.msg-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--live-green);
    animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

.msg-hot-stages-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.msg-hot-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
}
.msg-hot-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.msg-hot-card:hover .msg-hot-card-img {
    transform: scale(1.04);
}
.msg-hot-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 40%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
    gap: 3px;
}
.msg-hot-card-badge {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--accent-lime);
    opacity: 0.9;
}
.msg-hot-card-name {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.2;
}

/* Conversations list */
.msg-convos-section {
    padding: 0 16px;
}
.msg-convos-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: 0 0 10px;
}
.msg-convo-list {
    display: flex;
    flex-direction: column;
}
.msg-convo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.msg-convo-row:hover {
    background: var(--bg-card);
}
.msg-convo-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.msg-convo-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}
.msg-convo-live-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--live-green);
    border: 2px solid var(--bg-base);
}
.msg-convo-body {
    flex: 1;
    min-width: 0;
}
.msg-convo-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.msg-convo-name {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-convo-time {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.msg-convo-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.msg-convo-preview {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-convo-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    flex-shrink: 0;
}

/* FAB */
.msg-fab {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: none;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(79, 107, 255, 0.45);
    transition:
        transform 0.2s,
        box-shadow 0.2s;
    z-index: 40;
}
.msg-fab:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 28px rgba(79, 107, 255, 0.6);
}

/* ══════════════════════════════════════════════════════════════════════════════
   REDESIGN — CHAT ROOM PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

/* Header */
.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-soft);
    backdrop-filter: blur(12px);
}
.chat-header-avatar-wrap {
    flex-shrink: 0;
}
.chat-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--border-strong);
}
.chat-header-info {
    flex: 1;
    min-width: 0;
}
.chat-header-name {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-header-sub {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}
.chat-status-live {
    color: var(--live-green);
}
.chat-status-connecting {
    color: var(--warning-amber);
}
.chat-header-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.chat-icon-btn {
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition:
        background 0.15s,
        color 0.15s;
}
.chat-icon-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Ticket card inside bubble */
.chat-ticket-card {
    margin-top: 8px;
    background: var(--bg-elevated);
    border: 1px solid rgba(166, 217, 106, 0.3);
    border-left: 3px solid var(--accent-lime);
    border-radius: 12px;
    overflow: hidden;
}
.chat-ticket-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 6px;
    border-bottom: 1px solid var(--border-soft);
}
.chat-ticket-badge {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--accent-lime);
    font-weight: 700;
}
.chat-ticket-tier {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-secondary);
    background: var(--bg-card);
    border-radius: 100px;
    padding: 2px 8px;
}
.chat-ticket-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    gap: 10px;
}
.chat-ticket-event {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--text-primary);
    margin: 0 0 2px;
}
.chat-ticket-venue {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0 0 6px;
}
.chat-ticket-price {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
    margin: 0;
}
.chat-ticket-view-btn {
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.chat-ticket-view-btn:hover {
    opacity: 0.85;
}

/* Message meta (time + sent checkmark) */
.chat-msg-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.chat-msg-time {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
}
.chat-msg-sent-icon {
    color: var(--accent-blue);
    display: flex;
}

/* Input bar — emoji + attach + camera + send */
/* chat-input-bar defined below */
.chat-input-icon-btn {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition:
        color 0.15s,
        background 0.15s;
}
.chat-input-icon-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.chat-input {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 10px 16px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.chat-input:focus {
    border-color: var(--accent-blue);
}
.chat-input::placeholder {
    color: var(--text-muted);
}
.chat-input:disabled {
    opacity: 0.5;
}
.chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: none;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        opacity 0.2s,
        transform 0.2s;
}
.chat-send-btn:hover:not(:disabled) {
    opacity: 0.85;
    transform: scale(1.05);
}
.chat-send-btn:disabled {
    background: var(--bg-elevated-2);
    cursor: not-allowed;
}

/* bubble-text inside ticket card wrapper */
.chat-bubble-text {
    margin: 0 0 8px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   STORIES SECTION (IG-style) — di atas list messages
   ══════════════════════════════════════════════════════════════════════════════ */

.msg-stories-section {
    padding: 14px 0 12px;
    border-bottom: 1px solid var(--border-soft);
}

.msg-stories-scroll {
    display: flex;
    gap: 18px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.msg-stories-scroll::-webkit-scrollbar { display: none; }

/* ── Story item ─────────────────────────────────────────────────────────── */
.msg-story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
    width: 64px;
}

/* Avatar ring wrapper — gradient for unseen, gray for seen */
.msg-story-avatar-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 2.5px;
    background: var(--border-soft);   /* default: seen */
    flex-shrink: 0;
}

/* Unseen — Instagram gradient ring */
.msg-story-item--unseen .msg-story-avatar-wrap {
    background: conic-gradient(
        from 180deg,
        #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%
    );
}

/* Live — lime green ring + pulse */
.msg-story-item--live .msg-story-avatar-wrap {
    background: var(--accent-lime);
    animation: story-live-pulse 2s ease-in-out infinite;
}
@keyframes story-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(166, 217, 106, 0.45); }
    50%      { box-shadow: 0 0 0 5px rgba(166, 217, 106, 0); }
}

/* My story — dashed border via outline trick */
.msg-story-item--mine .msg-story-avatar-wrap {
    background: var(--bg-elevated);
    border: 2px dashed var(--border-strong);
    padding: 1px;
}

/* Avatar image */
.msg-story-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--bg-base);
    display: block;
}

/* Add-story + button */
.msg-story-add-btn {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-lime);
    cursor: pointer;
    transition: background 0.2s;
}
.msg-story-add-btn:hover { background: var(--bg-card); }

/* LIVE badge sits on avatar bottom-center */
.msg-story-live-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-lime);
    color: #0a0a14;
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    border: 2px solid var(--bg-base);
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

/* Label under avatar */
.msg-story-label {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    width: 64px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.msg-story-item--unseen .msg-story-label {
    font-weight: 700;
    color: var(--text-primary);
}
.msg-story-item--live .msg-story-label {
    font-weight: 700;
    color: var(--accent-lime);
}
.msg-story-item--seen .msg-story-label {
    color: var(--text-muted);
}

/* ── Light mode overrides ────────────────────────────────────────────────── */
[data-theme="light"] .msg-stories-section { border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .msg-story-avatar { border-color: #f5f5f7; }
[data-theme="light"] .msg-story-live-badge { border-color: #f5f5f7; }
[data-theme="light"] .msg-story-item--mine .msg-story-avatar-wrap { background: #e8e8ed; border-color: #bbb; }
[data-theme="light"] .msg-story-add-btn { background: #e8e8ed; color: #3d6600; }
[data-theme="light"] .msg-story-label { color: #555; }
[data-theme="light"] .msg-story-item--unseen .msg-story-label { color: #111; }
[data-theme="light"] .msg-story-item--seen .msg-story-label { color: #999; }


/* ── /stories — arsip publik semua story ───────────────────────────────────── */
.sarc-hero {
    padding: 18px 20px 6px;
}
.sarc-title {
    font-family: var(--font-display);
    font-size: 32px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    line-height: 1.05;
}
.sarc-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1.5;
}
.sarc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 14px 16px 20px;
}
.sarc-shim-card {
    aspect-ratio: 9 / 14;
    border-radius: 14px;
}
.sarc-card {
    position: relative;
    aspect-ratio: 9 / 14;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    background: var(--bg-elevated);
    padding: 0;
    cursor: pointer;
    text-align: left;
}
.sarc-card-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sarc-card-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.72) 100%);
}
.sarc-play-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}
/* Jumlah story milik user (kartu /stories per-user) — kanan-bawah agar tidak
   bertumpuk dengan play badge (kiri-atas), AKTIF (kanan-atas), dan info user
   (kiri-bawah). */
.sarc-count-badge {
    position: absolute;
    bottom: 34px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    z-index: 1;
}
.sarc-live-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
}
.sarc-card-info {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.sarc-card-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}
.sarc-card-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sarc-card-user {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sarc-card-date {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.75);
}
.sarc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 24px;
    gap: 6px;
}
.sarc-empty-icon {
    font-size: 2.4rem;
    margin-bottom: 4px;
}
.sarc-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.sarc-empty-sub {
    font-size: 12px;
    color: var(--text-secondary);
}
.sarc-empty-cta {
    margin-top: 14px;
    padding: 11px 22px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
}
.sarc-more-wrap {
    display: flex;
    justify-content: center;
    padding: 0 16px 28px;
}
.sarc-more-btn {
    padding: 12px 26px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
}
.sarc-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sarc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(10px);
}
.sarc-lb-inner {
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
}
.sarc-lb-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sarc-lb-head .sarc-card-user,
.sarc-lb-head .sarc-card-date {
    color: var(--text-primary);
}
.sarc-lb-head .sarc-card-date {
    color: var(--text-muted);
}
.sarc-lb-close {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}
.sarc-lb-media {
    width: 100%;
    max-height: 64vh;
    object-fit: contain;
    border-radius: 12px;
    background: #000;
}
.sarc-lb-event {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 100px;
    background: rgba(79, 107, 255, 0.12);
    border: 1px solid rgba(79, 107, 255, 0.25);
    color: var(--accent-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
}

/* ==== notifications.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATIONS PAGE — List + Empty State
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page shell ────────────────────────────────────────────────────────── */
.page {
    min-height: 100dvh;
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    position: relative;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 12px));
    color: var(--text-primary);
    font-family: var(--font-body);
}

/* ── Header: notif page gunakan grid agar title bisa center ───────────── */
.notif-page .page-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    overflow: hidden;
}

.notif-page .page-logo {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    justify-self: center;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}

.nav-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-elevated-2, rgba(255,255,255,0.08));
    border: 1.5px solid var(--border, rgba(255,255,255,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
    text-decoration: none;
}

/* ── Empty State ───────────────────────────────────────────────────────── */
.notif-empty-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    text-align: center;
    gap: 20px;
}

.notif-empty-icon-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.notif-empty-bell-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgba(166, 217, 106,0.12), rgba(166, 217, 106,0.03) 60%, transparent 70%);
    border: 1px solid rgba(166, 217, 106,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-lime);
    position: relative;
}

.notif-empty-bell-dot {
    position: absolute;
    bottom: 28px;
    right: 28px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-lime);
    border: 3px solid var(--bg-page);
    opacity: 0;
    animation: pulseDot 2s ease-in-out infinite;
}

.notif-empty-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.notif-empty-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 100%;
    margin: 0;
}

.notif-empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 14px 28px;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--accent-info), var(--accent-blue));
    color: var(--text-on-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    box-shadow: 0 4px 20px rgba(125,167,255,0.25);
}
.notif-empty-cta:hover { transform: translateY(-1px); opacity: 0.95; }
.notif-empty-cta:active { transform: scale(0.98); }

.notif-empty-tips {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin-top: 16px;
}

.notif-empty-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 10px;
    border-radius: 14px;
    background: var(--bg-elevated, rgba(255,255,255,0.04));
    border: 1px solid var(--border-soft);
    text-align: left;
}

.notif-empty-tip-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(166, 217, 106,0.08);
    border: 1px solid rgba(166, 217, 106,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-lime);
    flex-shrink: 0;
}

.notif-empty-tip-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notif-empty-tip-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.notif-empty-tip-sub {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Notification List ───────────────────────────────────────────────────── */
.notif-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    width: 100%;
}

.notif-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}

.notif-section-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 4px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Mark all as read link (jika nanti ditambahkan) */
.notif-section-label a,
.notif-section-label button {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-lime);
    background: none;
    border: none;
    cursor: pointer;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* ── Notification Card ──────────────────────────────────────────────────── */
.notif-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    background: var(--bg-elevated, rgba(255,255,255,0.04));
    border: 1px solid var(--border-soft);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-width: 0;
}
.notif-card:hover {
    background: var(--bg-card, rgba(255,255,255,0.06));
    border-color: rgba(255,255,255,0.1);
    transform: translateY(-1px);
}

/* Left accent strip */
.notif-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
}
.notif-card:has(.notif-icon--success)::before { background: var(--accent-lime); }
.notif-card:has(.notif-icon--promo)::before   { background: var(--accent-promo); }
.notif-card:has(.notif-icon--artist)::before  { background: var(--accent-pink); }
.notif-card:has(.notif-icon--alert)::before   { background: var(--accent-info); }

.notif-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}
.notif-icon--success { background: rgba(166, 217, 106,0.1); border-color: rgba(166, 217, 106,0.18); color: var(--accent-lime); }
.notif-icon--promo   { background: rgba(183,140,255,0.1); border-color: rgba(183,140,255,0.18); color: var(--accent-promo); }
.notif-icon--artist  { background: rgba(255,107,157,0.1); border-color: rgba(255,107,157,0.18); color: var(--accent-pink); }
.notif-icon--alert   { background: rgba(125,167,255,0.1); border-color: rgba(125,167,255,0.18); color: var(--accent-info); }

.notif-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-pink), var(--accent-promo));
    border: 2px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.notif-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.notif-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.notif-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.notif-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}
.notif-pill--live {
    background: rgba(166, 217, 106,0.12);
    color: var(--accent-lime);
    border: 1px solid rgba(166, 217, 106,0.2);
}
.notif-pill--promo {
    background: rgba(183,140,255,0.12);
    color: var(--accent-promo);
    border: 1px solid rgba(183,140,255,0.2);
}
.notif-pill--new {
    background: rgba(125,167,255,0.12);
    color: var(--accent-info);
    border: 1px solid rgba(125,167,255,0.2);
}

.pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-lime);
    animation: pulseDot 1.8s ease-in-out infinite;
}

.notif-time {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

.notif-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    word-wrap: break-word;
}
.notif-body strong {
    color: var(--text-primary);
    font-weight: 700;
}

.notif-amount {
    color: var(--accent-lime);
    font-weight: 700;
}

.notif-highlight {
    color: var(--text-primary);
    font-weight: 700;
}

.notif-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.notif-cta {
    align-self: flex-start;
    margin-top: 4px;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--accent-lime);
    color: #0a0a14;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}
.notif-cta:hover { opacity: 0.9; }
.notif-cta:active { transform: scale(0.97); }

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* ── Light mode overrides ────────────────────────────────────────────────── */
[data-theme="light"] .page { background: var(--bg-page); color: var(--text-primary); }
[data-theme="light"] .page-header { background: var(--bg-page); border-color: var(--border); }
[data-theme="light"] .back-btn { background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .page-logo { color: var(--text-primary); }
[data-theme="light"] .nav-avatar { background: var(--bg-elevated); border-color: var(--border); color: var(--text-secondary); }
[data-theme="light"] .notif-card { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .notif-card:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
[data-theme="light"] .notif-title { color: var(--text-secondary); }
[data-theme="light"] .notif-body { color: var(--text-secondary); }
[data-theme="light"] .notif-body strong { color: var(--text-primary); }
[data-theme="light"] .notif-time { color: var(--text-muted); }
[data-theme="light"] .notif-empty-title { color: var(--text-primary); }
[data-theme="light"] .notif-empty-body { color: var(--text-secondary); }
[data-theme="light"] .notif-empty-tip { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .notif-empty-tip-title { color: var(--text-primary); }
[data-theme="light"] .notif-empty-tip-sub { color: var(--text-secondary); }
[data-theme="light"] .notif-empty-bell-circle { background: radial-gradient(circle at 50% 40%, rgba(var(--accent-lime-rgb, 61,102,0), 0.08), transparent 70%); border-color: var(--border); }
[data-theme="light"] .notif-cta { background: var(--accent-lime); color: #fff; }
[data-theme="light"] .notif-cta:hover { background: var(--accent-blue); opacity: 1; }


/* ==== page-admin.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   ADMIN PAGE
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ADMIN DESIGN SYSTEM ──────────────────────────────────────────────────── */

/* Add button — lime accent consistent with app */
.admin-add-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
    border: none;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: opacity 0.15s;
}
.admin-add-btn:hover {
    opacity: 0.85;
}

/* Toast — dark-theme aware */
.admin-toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    backdrop-filter: blur(12px);
}
.admin-toast--ok {
    background: rgba(75, 216, 143, 0.12);
    color: var(--live-green);
    border: 1px solid rgba(75, 216, 143, 0.25);
}
.admin-toast--err {
    background: rgba(255, 79, 107, 0.12);
    color: var(--danger);
    border: 1px solid rgba(255, 79, 107, 0.25);
}
.admin-toast-x {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: inherit;
    padding: 0 4px;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.admin-toast-x:hover {
    opacity: 1;
}
/* Seluruh tab "Spanduk" hidup di `43-admin-banners.css` (kelas `.abn-*`).
 *
 * Dulu ia tersebar sebagai `.admin-banner-*` di berkas ini DAN di
 * `40-banner-slider.css`, dan `.admin-banner-actions` didefinisikan di
 * keduanya. Itu tidak menghasilkan "yang belakangan menang" seperti yang biasa
 * diharapkan — melainkan GABUNGAN: berkas 40 tak pernah menyebut
 * `flex-direction`, jadi `column` dari sini tetap berlaku, bertemu
 * `flex-wrap: wrap` dari sana, dan tombolnya menumpuk ke bawah lalu melar
 * selebar kartunya karena `align-items` bawaan flex adalah `stretch`.
 *
 * Aturan duplikat lintas-berkas seperti itu sulit dilihat justru karena
 * keduanya "benar" saat dibaca sendiri-sendiri. Satu komponen, satu berkas. */
.admin-del-btn {
    padding: 0.35rem 0.65rem;
    border-radius: 9px;
    border: none;
    background: rgba(255, 79, 107, 0.12);
    color: var(--danger);
    font-size: 0.82rem;
    cursor: pointer;
    transition:
        opacity 0.15s,
        background 0.15s;
}
.admin-del-btn:hover {
    background: rgba(255, 79, 107, 0.2);
}
.admin-del-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Modal backdrop */
.admin-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: admin-fadein 0.18s ease;
}
@keyframes admin-fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal panel — bottom sheet sitting ABOVE the bottom nav */
.admin-modal-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 480px;
    /* 92dvh minus bottom-nav height (~72px) so submit btn is always reachable */
    max-height: calc(92dvh - 72px);
    /* Lift the sheet above the bottom nav */
    margin-bottom: 72px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.4rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    animation: admin-slideup 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes admin-slideup {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Drag handle pill */
.admin-modal-panel::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-strong);
    border-radius: 2px;
    margin: 0 auto 1.2rem;
}

/* Modal header */
.admin-modal-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}
.admin-modal-ttl {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0;
}
.admin-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s,
        color 0.15s;
}
.admin-modal-close:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}

/* Image preview box */
.admin-preview-box {
    position: relative;
    min-height: 100px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px dashed rgba(166, 217, 106, 0.25);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}
.admin-preview-box:hover {
    border-color: rgba(166, 217, 106, 0.45);
}
.admin-preview-img {
    width: 100%;
    max-height: 170px;
    object-fit: cover;
    display: block;
}
.admin-preview-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-family: var(--font-body);
    padding: 1.5rem;
}
.admin-upload-lbl {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.38rem 0.8rem;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity 0.15s;
}
.admin-upload-lbl:hover {
    opacity: 0.85;
}

/* Form inside modal */
.admin-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.admin-form-row2 {
    display: flex;
    gap: 0.75rem;
}
.admin-form-err {
    background: rgba(255, 79, 107, 0.1);
    border: 1px solid rgba(255, 79, 107, 0.2);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    color: var(--danger);
    font-family: var(--font-body);
    font-size: 0.78rem;
    margin: 0.1rem 0;
}

/* Submit button — ensure visibility inside modal */
.admin-modal-panel .mhub-modal-submit {
    width: 100%;
    margin-top: 16px;
    padding: 14px 28px;
    display: block;
    /* force visibility even if parent has dark bg */
    background: var(--accent-lime) !important;
    color: var(--text-on-accent) !important;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.2s;
    position: relative;
    z-index: 1;
}
.admin-modal-panel .mhub-modal-submit:hover {
    opacity: 0.88;
}
.admin-modal-panel .mhub-modal-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ==== page-auth.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   AUTH PAGES (Login, Register, OTP, Forgot)
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── AUTH PAGES ─────────────────────────────────────────────────────────────── */
.auth-page {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    padding: 24px 20px 40px;
    gap: 28px;
}
.auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-badge {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--accent-lime);
    background: rgba(166, 217, 106, 0.1);
    border: 1px solid rgba(166, 217, 106, 0.25);
    padding: 4px 10px;
    border-radius: 100px;
}
.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    text-decoration: none;
    flex-shrink: 0;
}
.auth-logo {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 3px;
    color: var(--text-primary);
}
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(44px, 13vw, 68px);
    color: var(--text-primary);
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 10px;
}
.hero-sub {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.auth-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 28px 24px;
    backdrop-filter: blur(20px);
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.form-row {
    display: flex;
    justify-content: flex-end;
}
.forgot-link {
    font-size: 11px;
    color: var(--text-secondary);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 0.2s;
}
.forgot-link:hover {
    color: var(--accent-lime);
}
.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: white;
    border: none;
    border-radius: 12px;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition:
        opacity 0.2s,
        transform 0.2s;
    margin-top: 4px;
}
.submit-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 8px 32px rgba(79, 107, 255, 0.4);
}
.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.btn-loading {
    display: flex;
    align-items: center;
    gap: 12px;
}
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
}
.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-strong);
}
.divider-text {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: 0.06em;
}
.social-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition:
        background 0.2s,
        border-color 0.2s;
}
.social-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--social-btn-border-hover);
}
.auth-prompt {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: var(--text-muted);
}
.auth-prompt-link {
    color: var(--accent-lime);
    text-decoration: none;
    transition: opacity 0.2s;
}
.trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* ── FORGOT PASSWORD SUCCESS ───────────────────────────────────────────────── */
.success-card {
    background: var(--bg-surface);
    border: 1px solid rgba(166, 217, 106, 0.2);
    border-radius: 24px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(166, 217, 106, 0.08);
    border: 1px solid rgba(166, 217, 106, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.success-title {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: 0.06em;
}
.success-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
}
.success-text strong {
    color: var(--text-primary);
}
.back-login-btn {
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: white;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.1em;
    margin-top: 8px;
}

/* ── OTP VERIFICATION PAGE ──────────────────────────────────────────────────── */
.verify-page {
    gap: 24px;
}
.verify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.verify-title-mini {
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
.verify-headline {
    line-height: 1.05;
}
.verify-headline-accent {
    color: var(--text-soft-accent);
}

.verify-card {
    padding: 28px 22px;
}
.verify-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.otp-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 6px 0 4px;
}
.otp-cell {
    width: 100%;
    aspect-ratio: 1 / 1.05;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(22px, 6vw, 30px);
    color: var(--text-primary);
    caret-color: var(--accent-blue);
    outline: none;
    transition:
        border-color 0.2s,
        box-shadow 0.2s,
        transform 0.15s;
}
.otp-cell:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.18);
    transform: translateY(-1px);
}
.otp-cell:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.verify-submit {
    margin-top: 6px;
}

.resend-row {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}
.resend-link {
    background: none;
    border: none;
    padding: 0 4px;
    font: inherit;
    color: var(--accent-lime);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    letter-spacing: 0.02em;
}
.resend-link:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    text-decoration: none;
}

.verify-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}
.verify-meta-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.verify-meta-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.verify-meta-icon--expiry {
    background: rgba(166, 217, 106, 0.12);
    color: var(--accent-lime);
}
.verify-meta-icon--sent {
    background: rgba(124, 79, 255, 0.16);
    color: var(--text-soft-accent);
}
.verify-meta-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.verify-meta-label {
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.verify-meta-value {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 360px) {
    .otp-row {
        gap: 6px;
    }
    .otp-cell {
        border-radius: 12px;
    }
}


/* ==== page-cart.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   CART & CHECKOUT PAGES
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CART ───────────────────────────────────────────────────────────────────── */
/* Higher specificity to win over .page rule cascade conflicts */
.page.cart-page {
    padding-bottom: 160px;
}
.item-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
}
.item-info {
    flex: 1;
    min-width: 0;
}
.item-venue {
    font-size: 10px;
    color: var(--text-muted);
}
.item-price {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-primary);
    margin-top: 4px;
    font-weight: 700;
}
.item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.footer-meta-desc {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.footer-total-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
}

/* ── CHECKOUT ───────────────────────────────────────────────────────────────── */
.checkout-hero {
    padding: 24px 20px 0;
}
.checkout-title {
    font-family: var(--font-display);
    font-size: 60px;
    color: var(--text-soft-accent);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.checkout-sub {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
    word-break: break-word;
}
.checkout-section {
    padding: 24px 20px 0;
}
.section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.section-head {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-primary);
    letter-spacing: 0.1em;
    font-weight: 700;
}
.section-badge {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--color-primary);
    letter-spacing: 0.1em;
}
.order-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.order-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
}
.order-item-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.order-item-info {
    flex: 1;
    min-width: 0;
}
.order-item-name {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    line-height: 1.3;
    word-break: break-word;
}
.order-item-meta {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.5;
}
.order-item-qty {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
}
.order-item-price {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
    flex-shrink: 0;
    font-weight: 700;
}
.empty-msg {
    font-size: 13px;
    color: var(--text-secondary);
}
.method-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.method-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    text-align: left;
    transition:
        border-color 0.2s,
        background 0.2s;
    width: 100%;
    color: var(--text-primary);
}
.method-card--active {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
}
.method-icon {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.method-info {
    flex: 1;
}
.method-label {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.method-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.method-check {
    width: 22px;
    height: 22px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.promo-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.promo-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
}
.promo-input-row {
    display: flex;
    gap: 8px;
}
.promo-input {
    flex: 1;
    background: var(--bg-page);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    padding: 10px 12px;
    outline: none;
    letter-spacing: 0.06em;
}
.promo-apply-btn {
    padding: 10px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    white-space: nowrap;
}
.promo-apply-btn:disabled {
    opacity: 0.4;
}
.promo-error {
    font-size: 11px;
    color: var(--danger);
    margin-top: 8px;
}
.promo-success {
    font-size: 11px;
    color: var(--live-green);
    margin-top: 8px;
}
.total-section {
    margin-top: 4px;
}
.total-head {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}
.total-line {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.total-line--discount span {
    color: var(--live-green);
}
.total-final-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
}
.total-final-label {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.total-final-amt {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--color-primary);
}
.confirm-section {
    padding: 24px 20px;
}
.pay-error {
    background: rgba(255, 79, 107, 0.1);
    border: 1px solid rgba(255, 79, 107, 0.2);
    border-radius: 8px;
    padding: 12px;
    color: var(--danger);
    font-size: 12px;
    margin-bottom: 12px;
}
.confirm-btn {
    width: 100%;
    padding: 16px;
    background: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.08em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 0.2s;
    box-shadow: 0 4px 20px var(--color-primary-glow);
}
.confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.terms-note {
    text-align: center;
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-top: 12px;
    line-height: 1.6;
}
.trust-icons {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 14px;
}
.pay-bar {
    /* `backdrop-filter` dibuang: latarnya ≥ 95% buram, jadi yang diburamkan
       di belakangnya tak pernah terlihat — yang tersisa hanya biaya baca-balik
       + blur + komposit ulang, pada bilah yang menempel di layar sepanjang
       waktu dan ikut dirasterisasi tiap potretan transisi. */
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--lebar-kolom);
    background: var(--overlay-blur);
    border-top: 1px solid var(--border);
    padding: 14px 20px 28px;
    z-index: 50;
}
.pay-bar-btn {
    width: 100%;
    padding: 16px;
    background: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.06em;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    box-shadow: 0 4px 20px var(--color-primary-glow);
}
.pay-bar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ── Checkout: panel sukses pasca-bayar (data dari response API) ───────────── */
.co-done-overlay {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 8, 20, 0.72);
    backdrop-filter: blur(12px);
    animation: coDoneFade 0.25s ease;
}
@keyframes coDoneFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.co-done-card {
    width: 100%;
    max-width: 400px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: coDonePop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes coDonePop {
    from { transform: translateY(16px) scale(0.97); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.co-done-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 107, 255, 0.14);
    color: var(--accent-blue);
}
.co-done-icon--paid {
    background: rgba(166, 217, 106, 0.14);
    color: var(--accent-lime);
}
.co-done-title {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--text-primary);
}
.co-done-sub {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: center;
    margin-top: -6px;
}
.co-done-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.co-done-code {
    color: var(--text-primary);
    font-weight: 700;
}
.co-done-status {
    color: var(--accent-blue);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.co-done-status--paid {
    color: var(--accent-lime);
}
.co-done-items {
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.co-done-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}
.co-done-item span:last-child {
    white-space: nowrap;
    color: var(--text-primary);
}
.co-done-total {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 700;
}
.co-done-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-decoration: none;
}
.co-done-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 100px;
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 12px;
    text-decoration: none;
}

.summary-line--discount,
.total-line--discount {
    color: var(--accent-promo);
}

/* Biaya admin kanal, tampil di kartunya masing-masing supaya perbandingan
   antar-kanal terjadi sebelum memilih, bukan sesudah. */
.method-charge {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    margin-left: auto;
    padding-left: 10px;
}
.method-card--active .method-charge {
    color: var(--text-primary);
}
.method-card--loading {
    justify-content: center;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: default;
}

.order-item-warn {
    font-size: 11px;
    color: var(--warning-amber);
    font-weight: 600;
    margin-top: 3px;
}

/* Nomor Virtual Account: satu-satunya hal yang benar-benar dicari pembeli di
   layar setelah checkout, jadi ia berdiri sendiri dengan angka besar dan
   berjarak — bukan sebaris kecil di antara rincian lain. */
.co-done-va {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    padding: 14px;
    margin: 12px 0;
    border: 1px dashed var(--border-strong);
    border-radius: 14px;
    background: var(--bg-surface);
}
.co-done-va-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.co-done-va-num {
    font-family: var(--font-mono, monospace);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    user-select: all;
}

.co-done-instruction {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 10px 0 4px;
    text-align: left;
}

/* ── Ikon keranjang di header ─────────────────────────────────────────────── */
.nav-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.nav-cart:active {
    transform: scale(0.94);
}
.nav-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border: 2px solid var(--bg-page);
}

/* ==== page-event-detail.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   EVENT DETAIL PAGE
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero badges (LIVE NOW + kategori) ─────────────────────────────────────── */
.ed-hero-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.ed-live-badge {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--live-green);
    color: var(--bg-base);
    display: flex;
    align-items: center;
    gap: 5px;
}
.ed-live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bg-base);
    animation: pulse 1.5s infinite;
}
/* Badge LIVE yang bisa diklik → loncat ke pemutar siaran */
.ed-live-badge--link {
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}
.ed-live-badge--link:hover { opacity: 0.9; }
.ed-live-badge--link:active { transform: scale(0.95); }
/* Offset agar judul section tak tertutup header saat di-scroll ke anchor */
.ed-live-section { scroll-margin-top: 72px; }
.ed-cat-badge {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ── Hero meta row (tanggal + venue) ────────────────────────────────────────── */
.ed-hero-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 0;
}
.ed-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
}
.ed-hero-meta-item svg {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.55);
}

/* ── Section eyebrow label ──────────────────────────────────────────────────── */
.ed-section-eyebrow {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* ── Categories section ─────────────────────────────────────────────────────── */
.ed-categories-section {
    padding: 18px 20px 0;
}
.ed-chips-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ed-chip {
    font-family: var(--font-body);
    font-size: 11px;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}
.ed-chip:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* ── Select Tickets header ──────────────────────────────────────────────────── */
.ed-tickets-header {
    padding: 26px 20px 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.ed-tickets-title {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}
.ed-tickets-avail {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}

/* ── Tier Add button ─────────────────────────────────────────────────────────── */
.tier-add-btn {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 10px 22px;
    border-radius: 100px;
    background: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    cursor: pointer;
    transition:
        opacity 0.15s,
        transform 0.1s;
    flex-shrink: 0;
}
.tier-add-btn:hover {
    opacity: 0.9;
}
.tier-add-btn:active {
    transform: scale(0.97);
}

/* ── Footer: STARTING FROM + Secure Tickets ────────────────────────────────── */
.ed-footer-starting {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* .starting-price already defined, reuse var(--accent-lime) color from tokens */

.ed-secure-btn {
    padding: 14px 26px;
    background: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        opacity 0.15s,
        transform 0.1s;
    white-space: nowrap;
    box-shadow: 0 4px 16px var(--color-primary-glow);
}
.ed-secure-btn:hover {
    opacity: 0.9;
}
.ed-secure-btn:active {
    transform: scale(0.97);
}
.ed-secure-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* ── Footer cart qty badge (shown instead of starting-price when cart has items) */
.footer-cart-qty {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--color-primary);
    line-height: 1;
}

/* ── Light mode overrides ────────────────────────────────────────────────────── */
[data-theme="light"] .ed-cat-badge {
    background: rgba(0, 0, 20, 0.08);
    color: var(--text-primary);
    border-color: rgba(0, 0, 20, 0.14);
}
[data-theme="light"] .ed-chip {
    border-color: var(--border-strong);
}

.detail-hero {
    position: relative;
    height: 280px;
    overflow: hidden;
}
.detail-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, var(--bg-page) 100%);
}
.event-intro {
    padding: 0 20px 20px;
}
.event-badge {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.12em;
    display: block;
    margin-bottom: 8px;
}
.event-title {
    font-family: var(--font-display);
    font-size: 52px;
    color: white;
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}
.event-subtitle {
    color: var(--text-soft-accent);
}
.starting-from {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.starting-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-secondary);
    letter-spacing: 0.12em;
}
.starting-price {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--color-primary);
    line-height: 1;
}
.info-section {
    padding: 0 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.info-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
}
.info-val {
    font-size: 14px;
    color: var(--text-primary);
}
.access-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: white;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    margin-top: 12px;
}
.access-btn:hover {
    opacity: 0.92;
}
.section {
    padding: 0 20px 28px;
}
.lineup-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.artist-card {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1;
}
.artist-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.2);
}
.artist-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}
.artist-role {
    display: block;
    font-family: var(--font-body);
    font-size: 8px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.1em;
}
.artist-name {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    color: white;
    letter-spacing: 0.06em;
}
.about-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.8;
}
.map-card {
    margin: 0 20px 28px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
}
.map-visual {
    height: 140px;
    background: var(--bg-card-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--map-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--map-grid) 1px, transparent 1px);
    background-size: 32px 32px;
}
.map-pin {
    position: relative;
    z-index: 1;
}
.map-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.map-name {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
}
.map-addr {
    font-size: 12px;
    color: var(--text-secondary);
}
.directions-btn {
    align-self: flex-start;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(79, 107, 255, 0.12);
    border: 1px solid rgba(79, 107, 255, 0.25);
    color: var(--accent-blue);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 100px;
    transition: background 0.2s;
}
.directions-btn:hover {
    background: rgba(79, 107, 255, 0.2);
}
.tier-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 12px;
}
.tier-card--vip {
    border-color: rgba(79, 107, 255, 0.25);
    background: rgba(79, 107, 255, 0.06);
}
.tier-top {
    margin-bottom: 12px;
}
.tier-name {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.tier-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.tier-scarcity {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--live-green);
    margin-top: 6px;
}
.scarcity-dot {
    width: 6px;
    height: 6px;
    background: var(--live-green);
    border-radius: 50%;
    animation: pulse 2s infinite;
}
.tier-perks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.perk-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.tier-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.tier-price {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text-primary);
    display: block;
}
.tier-zone {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    display: block;
    margin-top: 2px;
}
.qty-ctrl {
    display: flex;
    align-items: center;
    gap: 0;
}
.qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s;
}
.qty-btn--minus {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.qty-btn--minus:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.qty-btn--plus {
    background: var(--color-primary);
    color: var(--color-primary-text);
}
.qty-val {
    width: 40px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
}
.sticky-footer {
    /* `backdrop-filter` dibuang: latarnya ≥ 95% buram, jadi yang diburamkan
       di belakangnya tak pernah terlihat — yang tersisa hanya biaya baca-balik
       + blur + komposit ulang, pada bilah yang menempel di layar sepanjang
       waktu dan ikut dirasterisasi tiap potretan transisi. */
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--lebar-kolom);
    background: var(--overlay-blur);
    border-top: 1px solid var(--border);
    padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 12px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 50;
}
.sticky-footer .footer-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
}
.footer-items {
    font-size: 12px;
    color: var(--text-secondary);
}
.footer-pay-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.footer-total-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.footer-total-amt {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text-primary);
    line-height: 1;
}
.book-btn {
    flex: 1;
    min-width: 0;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: white;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.06em;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}
.book-btn:hover:not(:disabled) {
    opacity: 0.92;
}
.book-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── VENUE LOCATION ─────────────────────────────────────────────────────────── */
.vl-map {
    position: relative;
    height: 280px;
    margin: 0 0 -32px;
    background: radial-gradient(ellipse at center, var(--map-bg-1) 0%, var(--map-bg-2) 70%);
    overflow: hidden;
}
.vl-map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--map-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--map-grid) 1px, transparent 1px);
    background-size: 36px 36px;
}
.vl-map-route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.vl-pin-mini {
    position: absolute;
    opacity: 0.5;
}
.vl-pin-main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.vl-pin-pulse {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(166, 217, 106, 0.15);
    animation: pulse-ring 2s infinite;
}
.vl-pin-circle {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-card-hover);
    border: 3px solid var(--accent-lime);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(166, 217, 106, 0.4);
}
.vl-pin-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-lime);
}
.vl-pin-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.14em;
    font-weight: 700;
    background: var(--overlay-blur-soft);
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid rgba(166, 217, 106, 0.3);
}
.vl-cta-wrap {
    position: relative;
    z-index: 2;
    padding: 0 40px 18px;
}
.vl-directions-btn {
    width: 100%;
    padding: 16px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.1em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: var(--shadow-glow);
}
.vl-directions-btn:hover {
    opacity: 0.92;
}
.vl-info-card {
    margin: 0 20px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    padding: 18px;
}
.vl-info-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}
.vl-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.14em;
    margin-bottom: 6px;
}
.vl-venue-name {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--text-primary);
    line-height: 1.05;
    letter-spacing: 0.02em;
}
.vl-distance {
    background: rgba(125, 167, 255, 0.1);
    border: 1px solid rgba(125, 167, 255, 0.25);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    min-width: 64px;
}
.vl-dist-val {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--accent-blue);
    line-height: 1;
}
.vl-dist-unit {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--accent-blue);
    letter-spacing: 0.1em;
    font-weight: 700;
}
.vl-dist-away {
    font-family: var(--font-body);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    margin-top: 4px;
}
.vl-addr-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.vl-addr-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(166, 217, 106, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vl-addr-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
.vl-section {
    padding: 18px 20px 14px;
}
.vl-section-line {
    height: 2px;
    width: 28px;
    background: var(--accent-lime);
    margin-bottom: 8px;
    border-radius: 2px;
}
.vl-section-title {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-primary);
    letter-spacing: 0.16em;
    font-weight: 700;
}
.vl-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vl-view-all {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.12em;
    font-weight: 700;
    cursor: pointer;
}
.vl-facilities-grid {
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.vl-facility {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.vl-facility-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vl-facility-icon--blue {
    background: rgba(125, 167, 255, 0.12);
}
.vl-facility-icon--lime {
    background: rgba(166, 217, 106, 0.12);
}
.vl-facility-label {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.25;
    font-weight: 500;
}
.vl-events-list {
    padding: 0 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vl-event-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}
.vl-event-card:hover {
    background: var(--bg-card-hover);
}
.vl-event-cover {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    flex-shrink: 0;
}
.vl-event-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.vl-event-date {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-secondary);
    letter-spacing: 0.12em;
}
.vl-event-title {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.2;
}
.vl-event-price {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--accent-lime);
    font-weight: 700;
}
.vl-event-chev {
    flex-shrink: 0;
}

/* ── TICKET CARD LINK ───────────────────────────────────────────────────────── */
.ticket-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition:
        transform 0.15s,
        border-color 0.2s;
}
.ticket-card--link:hover {
    transform: translateY(-2px);
    border-color: rgba(166, 217, 106, 0.25);
}
.ticket-card--vip.ticket-card--link:hover {
    box-shadow: 0 8px 30px rgba(79, 107, 255, 0.3);
}

/* ══════════════════════════════════════════════════════════════════════════════
   EVENT DETAIL PAGE — Clean mobile-first design
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────────────────── */
/* == ed-page root: needs position relative for absolute header */
.ed-page {
    position: relative;
}

.ed-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
    background: transparent !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    padding-top: max(14px, env(safe-area-inset-top));
}
.ed-header .page-logo {
    color: #fff;
    font-size: 20px;
    letter-spacing: 3px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.ed-header .back-btn {
    background: rgba(8, 8, 16, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(8px);
}
.ed-header .bell-btn {
    background: rgba(8, 8, 16, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(8px);
}
.ed-header .nav-avatar {
    background: rgba(8, 8, 16, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(8px);
}
.ed-header .theme-toggle {
    background: rgba(8, 8, 16, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(8px);
}
.ed-header .icon-btn {
    background: rgba(8, 8, 16, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(8px);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* == Hero == */
.ed-hero {
    position: relative;
    width: 100%;
    margin-top: 0;
    height: 420px;
    overflow: hidden;
    flex-shrink: 0;
}
.ed-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: src 0.3s;
}
.ed-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8, 8, 16, 0.3) 0%,
        rgba(8, 8, 16, 0) 40%,
        rgba(8, 8, 16, 0.85) 100%
    );
}
.ed-hero-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 24px;
}
.ed-hero-overlay-content .event-badge {
    color: var(--accent-lime);
    font-size: 9px;
    letter-spacing: 0.16em;
    font-family: var(--font-body);
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}
.ed-hero-title {
    font-family: var(--font-display);
    font-size: 52px;
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 0.92;
    margin: 0 0 14px;
}
.ed-hero-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 36px;
}
.ed-hero-starting {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ed-hero-starting .starting-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.14em;
}
.ed-hero-starting .starting-price {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--color-primary);
    line-height: 1;
}

/* ── Hero bottom row: price + share button side by side ──────────────────── */
.ed-hero-bottom-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

/* ── Share-to-Story button ─────────────────────────────────────────────────── */
.ed-share-story-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.92);
    padding: 7px 14px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
    flex-shrink: 0;
    margin-bottom: 2px; /* align vertically with starting-price baseline */
}
.ed-share-story-btn:hover {
    background: rgba(166, 217, 106, 0.18);
    border-color: var(--accent-lime);
    color: var(--accent-lime);
    transform: scale(1.04);
}
.ed-share-story-btn:active {
    transform: scale(0.97);
}
.ed-share-story-btn svg {
    flex-shrink: 0;
}

/* ── Body & layout ──────────────────────────────────────────────────────────── */
.ed-body {
    display: flex;
    flex-direction: column;
}
.ed-main {
    flex: 1;
}
.ed-sidebar {
    display: none;
} /* Desktop only — sembunyikan di mobile */

/* ── Info section ───────────────────────────────────────────────────────────── */
.ed-info-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    margin: 20px 20px 0;
    overflow: hidden;
}
.ed-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-secondary);
}
.ed-info-item:last-of-type {
    border-bottom: none;
}
.ed-info-item svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--accent-lime);
}
.ed-info-item .info-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    display: block;
    margin-bottom: 3px;
}
.ed-info-item .info-val {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

/* ── Mobile CTA button inside info section ──────────────────────────────────── */
.ed-mobile-cta {
    margin: 0;
    border-radius: 0;
    width: 100%;
    padding: 16px 20px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.ed-mobile-cta:hover {
    opacity: 0.9;
}

/* ── Sections ───────────────────────────────────────────────────────────────── */
.section {
    padding: 28px 20px 0;
}
.section-title {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0 0 16px;
}
.about-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* ── Lineup grid ────────────────────────────────────────────────────────────── */
.lineup-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 20px 4px;
    margin: 0 -20px;
    scrollbar-width: none;
}
.lineup-grid::-webkit-scrollbar {
    display: none;
}

.artist-card {
    flex: 0 0 130px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    height: 190px;
    cursor: pointer;
    transition: transform 0.2s;
}
.artist-card:hover {
    transform: scale(1.02);
}
.artist-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.artist-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 10px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, transparent 100%);
}
.artist-role {
    display: block;
    font-family: var(--font-body);
    font-size: 8px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.12em;
    margin-bottom: 2px;
}
.artist-name {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* ── Map card ───────────────────────────────────────────────────────────────── */
.map-card {
    margin: 28px 20px 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
}
.map-visual {
    height: 130px;
    background: var(--bg-card-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--map-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--map-grid) 1px, transparent 1px);
    background-size: 28px 28px;
}
.map-pin {
    position: relative;
    z-index: 1;
}
.map-info {
    padding: 16px 20px;
}
.map-name {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.map-addr {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}
.directions-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(79, 107, 255, 0.1);
    border: 1px solid rgba(79, 107, 255, 0.25);
    color: var(--accent-blue);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    padding: 9px 16px;
    border-radius: 100px;
    transition: background 0.2s;
    text-decoration: none;
}
.directions-btn:hover {
    background: rgba(79, 107, 255, 0.18);
}

/* ── Tier cards (mobile) ────────────────────────────────────────────────────── */
.ed-mobile-tiers {
    padding-bottom: 0;
}
.tier-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 12px;
}
.tier-card--vip {
    border-color: rgba(79, 107, 255, 0.25);
    background: rgba(79, 107, 255, 0.04);
}
.tier-top {
    margin-bottom: 12px;
}
.tier-name {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.tier-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.65;
}
.tier-scarcity {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--live-green);
    margin-top: 8px;
}
.scarcity-dot {
    width: 6px;
    height: 6px;
    background: var(--live-green);
    border-radius: 50%;
    animation: pulse 2s infinite;
}
.tier-perks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.perk-tag {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-secondary);
}
.perk-tag svg {
    color: var(--accent-lime);
    flex-shrink: 0;
}
.tier-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.tier-price {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--text-primary);
    display: block;
    line-height: 1;
}
.tier-zone {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    display: block;
    margin-top: 3px;
}
.qty-ctrl {
    display: flex;
    align-items: center;
    gap: 0;
}
.qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s;
}
.qty-btn--minus {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.qty-btn--minus:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.qty-btn--plus {
    background: var(--color-primary);
    color: var(--color-primary-text);
}
.qty-val {
    width: 40px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
}

/* ── Sticky footer (mobile payment bar) ─────────────────────────────────────── */
.ed-mobile-footer.sticky-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.sticky-footer .footer-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
}
.footer-items {
    font-size: 12px;
    color: var(--text-secondary);
}
.footer-pay-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 1;
}
.footer-total-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-total-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
}
.footer-total-amt {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    line-height: 1;
}
.book-btn {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: white;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.06em;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}
.book-btn:hover:not(:disabled) {
    opacity: 0.92;
}
.book-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — Banner Slider (from /api/banners)
   ═══════════════════════════════════════════════════════════════════════════ */
.home-banner-slider {
    position: relative;
    overflow: hidden;
    margin: 12px 16px 20px;
    border-radius: 14px;
}
.home-banner-track {
    display: flex;
    width: 100%;
    will-change: transform;
}
.home-banner-slide {
    min-width: 100%;
    flex-shrink: 0;
}
.home-banner-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}
.home-banner-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}
.home-bdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition:
        background 0.2s,
        width 0.2s;
}
.home-bdot--active {
    background: var(--accent-lime);
    width: 18px;
    border-radius: 3px;
}

/* ── Grid with waterfall cascade ── */
.exp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 4px 16px 100px;
}
@media (max-width: 360px) {
    .exp-grid {
        grid-template-columns: 1fr;
    }
}

/* Waterfall cascade entrance animation */
@keyframes exp-fall-in {
    0% {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
    }
    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.exp-cascade {
    animation: exp-fall-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
    /* stagger each card: --i CSS var set inline */
    animation-delay: calc(var(--i, 0) * 55ms);
}

.exp-shimmer-wrap {
    animation: exp-fall-in 0.38s ease both;
    animation-delay: calc(var(--i, 0) * 50ms, 0ms);
}

.exp-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
}
.exp-reset-btn {
    padding: 12px 28px;
    background: var(--accent-lime);
    color: #16151d;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition:
        opacity 0.15s,
        transform 0.1s;
}
.exp-reset-btn:hover {
    opacity: 0.88;
    transform: scale(1.02);
}

/* Card wrap fills grid cell */
.exp-card-wrap {
    display: contents;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUDIT FIX — Comprehensive CSS hardening
   ═══════════════════════════════════════════════════════════════════════════

   1. Fixed footer stacking — z-index layering enforced
   2. Light-theme overrides for new components (Explore, Event Detail)
   3. Hero overlay softened for light mode
   4. Big transition selector trimmed to structural elements only
   5. overflow-x safety restored without breaking fixed positioning
   6. Negative margin scroll containers guarded
/* ═══════════════════════════════════════════════════════════════════════════
   RELATED EVENTS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.event-related-section {
    padding: 32px 16px 100px;
    border-top: 1px solid var(--border-soft);
    background: var(--bg-page);
}

/* ── Section header ─────────────────────────────────────────────────────── */
.ed-related-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.ed-related-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ed-related-eyebrow {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-lime);
}
.ed-related-heading {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.1;
}
.ed-related-see-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    text-decoration: none;
    flex-shrink: 0;
    transition: color 0.15s;
    padding-bottom: 4px; /* align baseline with heading */
}
.ed-related-see-all:hover {
    color: var(--accent-lime);
}
.ed-related-see-all svg {
    transition: transform 0.15s;
}
.ed-related-see-all:hover svg {
    transform: translateX(3px);
}

/* ── Card grid ──────────────────────────────────────────────────────────── */
.ed-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

/* EventCard (explore-event-card-v2) sizing inside this grid */
.ed-related-grid .explore-product-card-v2 {
    display: flex;
    flex-direction: row;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition:
        border-color 0.15s,
        transform 0.15s,
        box-shadow 0.15s;
    min-height: 110px;
}
.ed-related-grid .explore-product-card-v2:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

/* Image — fixed left column */
.ed-related-grid .explore-ecard-img-wrap {
    width: 110px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.ed-related-grid .explore-ecard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.ed-related-grid .explore-product-card-v2:hover .explore-ecard-img {
    transform: scale(1.05);
}
.ed-related-grid .explore-ecard-cat {
    position: absolute;
    top: 8px;
    left: 8px;
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent, #0a0a14);
    white-space: nowrap;
    pointer-events: none;
}

/* Body — right column */
.ed-related-grid .explore-ecard-body {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    justify-content: center;
}
.ed-related-grid .explore-ecard-title {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ed-related-grid .explore-ecard-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ed-related-grid .explore-ecard-meta svg {
    flex-shrink: 0;
    color: var(--text-muted);
}
.ed-related-grid .explore-ecard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}
.ed-related-grid .explore-ecard-price {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-lime);
    letter-spacing: 0.02em;
}
.ed-related-grid .explore-ecard-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition:
        background 0.15s,
        color 0.15s;
}
.ed-related-grid .explore-product-card-v2:hover .explore-ecard-arrow {
    background: var(--accent-lime);
    color: var(--text-on-accent, #0a0a14);
    border-color: var(--accent-lime);
}

/* Shimmer row in related grid */
.ed-related-grid .event-card-shimmer {
    display: flex;
    flex-direction: row;
    border-radius: 18px;
    overflow: hidden;
    min-height: 110px;
}
.ed-related-grid .event-card-shimmer .shim {
    border-radius: 0;
}

/* ── Light mode ─────────────────────────────────────────────────────────── */
[data-theme="light"] .event-related-section {
    background: #f5f5f7;
    border-top-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .ed-related-heading {
    color: #111;
}
[data-theme="light"] .ed-related-see-all {
    color: #555;
}
[data-theme="light"] .ed-related-see-all:hover {
    color: #3d6600;
}
[data-theme="light"] .ed-related-grid .explore-product-card-v2 {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .ed-related-grid .explore-product-card-v2:hover {
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .ed-related-grid .explore-ecard-title {
    color: #111;
}
[data-theme="light"] .ed-related-grid .explore-ecard-meta {
    color: #666;
}
[data-theme="light"] .ed-related-grid .explore-ecard-arrow {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: #555;
}

/* ══════════════════════════════════════════════════════════════════════════
   DETAIL IMAGES SLIDER
   ══════════════════════════════════════════════════════════════════════════ */

.detail-img-wrap {
    position: relative;
    /* negative margin agar slide mepet edge, padding kompensasi */
    margin: 0 -20px;
}

/* ── Scrollable track ───────────────────────────────────────────────────── */
.detail-img-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* padding: kiri = 20px (kompensasi negative margin), kanan juga */
    padding: 0 20px 4px;
}
.detail-img-track::-webkit-scrollbar {
    display: none;
}

/* ── Setiap slide ───────────────────────────────────────────────────────── */
.detail-img-slide {
    flex: 0 0 calc(100% - 40px); /* full width minus 2×padding */
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Kalau hanya 1 foto, tampilkan full tanpa kesan "ada lagi" */
.detail-img-track:has(.detail-img-slide:only-child) .detail-img-slide {
    flex: 0 0 100%;
}

/* Peek sedikit slide berikutnya kalau > 1 */
@supports (selector(:has(*))) {
    .detail-img-track:has(.detail-img-slide:not(:only-child)) .detail-img-slide {
        flex: 0 0 88%; /* sisa 12% = peek slide berikutnya */
    }
}

/* ── Caption ────────────────────────────────────────────────────────────── */
.detail-img-caption {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
    padding: 0 2px;
    margin: 0;
}

/* ── Dots indicator ─────────────────────────────────────────────────────── */
.detail-img-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 0 2px;
}
.detail-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition:
        background 0.2s,
        width 0.2s,
        border-radius 0.2s;
    flex-shrink: 0;
}
.detail-dot--active {
    width: 20px;
    border-radius: 3px;
    background: var(--accent-lime);
}

/* Light mode */
[data-theme="light"] .detail-dot {
    background: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .detail-dot--active {
    background: #5a9000;
}


/* ── Footer beli: transisi hide saat melewati kartu venue ──────────────────── */
.ed-mobile-footer.sticky-footer {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.ed-mobile-footer.ed-footer-hidden {
    transform: translateX(-50%) translateY(130%);
    opacity: 0;
    pointer-events: none;
}

/* ── Peta venue asli (Leaflet) di detail event ─────────────────────────────── */
.map-visual--live {
    height: 240px;
    display: block;
    background: var(--bg-elevated);
    /* Kurung z-index internal Leaflet (pane 400, kontrol 1000) di dalam
       stacking context container — tanpa ini peta menutupi footer beli
       (z-index 80) saat footer melintas di atas area peta. */
    position: relative;
    z-index: 0;
    isolation: isolate;
}

/* ==== page-explore.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   EXPLORE PAGE — v2 redesign
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER — "Jadi Partner" pill (kiri) + PULSE logo (tengah) + actions (kanan)
   ───────────────────────────────────────────────────────────────────────────── */
.exp-partner-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 7px 11px;
    border-radius: 20px;
    background: rgba(166, 217, 106, 0.08);
    border: 1px solid rgba(166, 217, 106, 0.28);
    color: var(--accent-lime);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition:
        background 0.2s,
        border-color 0.2s;
}
.exp-partner-btn:hover {
    background: rgba(166, 217, 106, 0.15);
    border-color: rgba(166, 217, 106, 0.5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH BAR ROW
   ───────────────────────────────────────────────────────────────────────────── */
.exp-searchbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 12px;
    /* Menempel di atas viewport saat scroll: tombol search selalu terjangkau
       tanpa harus kembali ke atas. Di bawah bottom-nav (100) & search overlay
       (300), di atas kartu/section (≤50). */
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--bg-page);
    /* Garis halus saat menempel agar terpisah dari konten yang lewat. */
    box-shadow: 0 1px 0 var(--border-soft);
}

.exp-searchbar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    color: var(--text-muted);
    cursor: pointer;
    text-align: left;
    transition:
        border-color 0.18s,
        background 0.18s;
    user-select: none;
    -webkit-user-select: none;
}
.exp-searchbar:hover,
.exp-searchbar:focus-visible {
    border-color: var(--accent-lime);
    background: var(--bg-elevated-2);
}

.exp-searchbar-ph {
    flex: 1;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    transition:
        opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.65;
    transform: translateY(0);
}
.exp-searchbar-ph.ph-out {
    opacity: 0;
    transform: translateY(5px);
}
.exp-searchbar-ph.ph-in {
    opacity: 0.65;
    transform: translateY(0);
}

.exp-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
}
.exp-filter-btn:hover {
    background: var(--bg-elevated-2);
    border-color: var(--accent-lime);
    color: var(--accent-lime);
}

[data-theme="light"] .exp-searchbar,
[data-theme="light"] .exp-filter-btn {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="light"] .exp-searchbar:hover {
    border-color: var(--accent-lime);
    background: var(--bg-elevated);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SPONSORED PROMO BANNER
   ───────────────────────────────────────────────────────────────────────────── */
.exp-promo-wrap {
    padding: 0 20px 22px;
}

.exp-promo {
    position: relative;
    border-radius: 20px;
    padding: 22px 20px 20px;
    background:
        linear-gradient(
            140deg,
            #1a3a5c 0%,
            #0d2744 40%,
            #061e16 100%
        );
    border: 1px solid rgba(75, 216, 143, 0.14);
    overflow: hidden;
}

/* Glow blobs */
.exp-promo::before {
    content: "";
    position: absolute;
    top: -30px;
    left: -20px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 120, 220, 0.35) 0%, transparent 70%);
    pointer-events: none;
}
.exp-promo::after {
    content: "";
    position: absolute;
    bottom: -40px;
    right: -20px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(75, 216, 143, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.exp-promo-tag {
    position: absolute;
    top: 14px;
    right: 16px;
    font-family: var(--font-body);
    font-size: 8px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    pointer-events: none;
}

.exp-promo-heading {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    color: #fff;
    font-style: italic;
    margin: 0 0 10px;
    position: relative;
    max-width: 80%;
}

.exp-promo-desc {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 18px;
    position: relative;
    max-width: 78%;
}

.exp-promo-cta {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    background: var(--accent-lime, #a6d96a);
    color: #16151d;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 700;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    position: relative;
    transition:
        opacity 0.2s,
        transform 0.15s;
}
.exp-promo-cta:hover {
    opacity: 0.88;
    transform: scale(1.03);
}
.exp-promo-cta:active {
    transform: scale(0.97);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION HEADER ROW  (TRENDING NOW / Live Events / View All)
   ───────────────────────────────────────────────────────────────────────────── */
.exp-section-hdr-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 4px 20px 14px;
}

.exp-section-hdr-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.exp-section-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.exp-section-title {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    margin: 0;
}

.exp-view-all {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--accent-lime);
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 5px;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.exp-view-all:hover {
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CATEGORY CHIPS (inline filter row)
   ───────────────────────────────────────────────────────────────────────────── */
.exp-chips {
    display: flex;
    gap: 8px;
    padding: 0 20px 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
.exp-chips::-webkit-scrollbar {
    display: none;
}

.exp-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.12em;
    white-space: nowrap;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition:
        background 0.18s,
        border-color 0.18s,
        color 0.18s;
}
.exp-chip:hover {
    border-color: var(--border-strong);
    color: var(--text-secondary);
}
.exp-chip--on {
    background: var(--accent-lime);
    border-color: transparent;
    color: #16151d;
    font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESULTS BAR
   ───────────────────────────────────────────────────────────────────────────── */
.exp-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 12px;
}
.exp-results-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.exp-results-eyebrow {
    font-family: var(--font-body);
    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.6;
}
.exp-results-count {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.exp-results-right {
    display: flex;
    align-items: center;
}
.exp-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: none;
    border: 1px solid var(--border-soft);
    border-radius: 100px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition:
        border-color 0.18s,
        color 0.18s;
}
.exp-clear-btn:hover {
    border-color: var(--accent-lime);
    color: var(--accent-lime);
}

/* ─────────────────────────────────────────────────────────────────────────────
   EVENT FEED + CARD V2
   ───────────────────────────────────────────────────────────────────────────── */
.exp-feed {
    display: flex;
    flex-direction: column;
    padding: 0 16px 4px;
}

/* ── Marketplace grid (Shopee-style) ─────────────────────────────── */
.exp-mkt-grid {
    display: grid;
    /* `minmax(0, 1fr)`, BUKAN `1fr`.

       `1fr` sesungguhnya adalah `minmax(auto, 1fr)`, dan batas bawah `auto`
       berarti "jangan pernah lebih sempit daripada isi terpendek yang tak bisa
       dipatahkan". Nama produk panjang tanpa spasi, atau harga seperti
       `Rp1.250.000`, karena itu bisa MELEBARKAN lajurnya melewati jatahnya —
       gridnya lalu lebih lebar daripada kolom, dan kartu kanan terpotong tepi
       layar. Kegagalannya senyap: ia hanya muncul untuk produk tertentu, di
       lebar layar tertentu.

       `minmax(0, …)` mengembalikan batas bawahnya ke nol, jadi lajurnya
       benar-benar membagi rata dan isi yang kepanjangan dipotong/dilipat di
       dalam kartunya sendiri. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}
/* Selalu 2 kolom (gaya marketplace mobile) — hanya lebarkan jarak di layar besar. */
@media (min-width: 640px) {
    .exp-mkt-grid { gap: 16px; }
}

.exp-mkt-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.exp-mkt-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-lime, #a6d96a);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

.exp-mkt-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--bg-elevated);
}
.exp-mkt-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.exp-mkt-card:hover .exp-mkt-img { transform: scale(1.05); }

.exp-mkt-cat {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 4px 8px;
    border-radius: 100px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    backdrop-filter: blur(4px);
}
.exp-mkt-live {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 4px 8px;
    border-radius: 100px;
    background: #ff2d55;
    color: #fff;
}
.exp-mkt-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: exp-mkt-pulse 1.2s ease-in-out infinite;
}
@keyframes exp-mkt-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}
.exp-mkt-free {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--accent-lime, #a6d96a);
    color: #16151d;
}

.exp-mkt-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 10px 11px;
    flex: 1;
}
.exp-mkt-title {
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.exp-mkt-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.exp-mkt-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--accent-lime, #a6d96a);
    letter-spacing: -.01em;
}
.exp-mkt-hot {
    font-size: 9px;
    font-weight: 700;
    color: #ff6b3d;
}
.exp-mkt-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
}
.exp-mkt-loc {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}
.exp-mkt-loc svg { flex-shrink: 0; opacity: .7; }
.exp-mkt-sold {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.exp-mkt-grid .exp-shimmer-wrap { width: 100%; }

/* Wishlist heart (floating, gaya marketplace) */
.exp-mkt-wish {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #8a8a99;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    transition: transform .15s ease, color .15s ease;
    z-index: 2;
}
.exp-mkt-wish svg { fill: none; }
.exp-mkt-wish:hover { transform: scale(1.1); }
.exp-mkt-wish:active { transform: scale(.9); }
.exp-mkt-wish--on { color: #ff2d55; }
.exp-mkt-wish--on svg { fill: #ff2d55; }

/* Status strip di bawah gambar */
.exp-mkt-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .45));
}
.exp-mkt-strip--live { background: #ff2d55; }
.exp-mkt-strip--out { background: rgba(20, 20, 28, .88); color: #d0d0d8; }
.exp-mkt-strip--hot { background: linear-gradient(90deg, #ff6b3d, #ff2d55); }

/* Store / location row (bawah kartu, dengan pemisah) */
.exp-mkt-store {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted);
    min-width: 0;
}
.exp-mkt-store-ic { display: inline-flex; flex-shrink: 0; opacity: .8; }
.exp-mkt-store-name {
    font-size: 10.5px;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.exp-mkt-chev { flex-shrink: 0; opacity: .5; }

/* Sold count di baris harga → dorong ke kanan */
.exp-mkt-price-row .exp-mkt-sold { margin-left: auto; font-size: 9.5px; }

/* ── Kartu marketplace gaya Kiddo (merchant • meta • harga • rating) ── */
.exp-mkt-img-wrap { aspect-ratio: 4 / 3; }
.exp-mkt-body { gap: 3px; padding: 10px 11px 12px; }
.exp-mkt-merchant {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-lime, #22c55e);
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.exp-mkt-title {
    font-size: 13px;
    font-weight: 700;
    min-height: 2.5em;
    margin: 1px 0 2px;
}
.exp-mkt-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 2px 0;
}
.exp-mkt-meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.exp-mkt-meta-row svg { flex-shrink: 0; opacity: .75; }
.exp-mkt-price-block {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}
.exp-mkt-from { font-size: 10px; color: var(--text-muted); }
.exp-mkt-price { font-size: 16px; }
.exp-mkt-foot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}
.exp-mkt-star { color: #ffb400; flex-shrink: 0; }
.exp-mkt-foot .exp-mkt-sold { font-size: 11px; color: var(--text-muted); margin: 0; }

/* Cascade animation (reuse existing --i var) */
.exp-cascade {
    opacity: 0;
    transform: translateY(18px);
    animation: exp-cascade-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes exp-cascade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Card wrapper ── */
.exp-card-v2 {
    display: block;
    text-decoration: none;
    padding-bottom: 32px;
    /* Thin separator between cards */
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 28px;
}
.exp-card-v2:last-child {
    border-bottom: none;
}

/* Category eyebrow above image */
.exp-card-v2__eyebrow {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 8px;
    opacity: 0.7;
}

/* Image container */
.exp-card-v2__img-wrap {
    position: relative;
    height: 255px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-card);
}

.exp-card-v2__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.exp-card-v2:hover .exp-card-v2__img {
    transform: scale(1.04);
}

/* Bottom gradient overlay on image */
.exp-card-v2__img-wrap::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    pointer-events: none;
}

/* Status badge on image */
.exp-card-v2__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 100px;
    z-index: 1;
    pointer-events: none;
}
.exp-card-v2__badge--hot {
    background: var(--accent-lime, #a6d96a);
    color: #16151d;
    font-weight: 700;
}
.exp-card-v2__badge--limited {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.42);
    color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Card body */
.exp-card-v2__body {
    padding: 14px 2px 0;
}

/* Big event title */
.exp-card-v2__title {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-transform: uppercase;
    margin: 0 0 10px;
    /* Allow 2 lines max */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta row: venue/date LEFT — price RIGHT */
.exp-card-v2__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.exp-card-v2__venue-date {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.exp-card-v2__venue {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exp-card-v2__date {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.exp-card-v2__price-wrap {
    text-align: right;
    flex-shrink: 0;
}

.exp-card-v2__price-label {
    display: block;
    font-family: var(--font-body);
    font-size: 7px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.exp-card-v2__price {
    display: block;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1;
    color: var(--accent-lime);
    letter-spacing: 0.02em;
}

/* Light theme card adjustments */
[data-theme="light"] .exp-card-v2__badge--limited {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.3);
    color: rgba(0, 0, 0, 0.75);
}

/* ─────────────────────────────────────────────────────────────────────────────
   EMPTY STATE
   ───────────────────────────────────────────────────────────────────────────── */
.exp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 60px 20px;
    text-align: center;
    width: 100%;
}

.exp-reset-btn {
    padding: 10px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.exp-reset-btn:hover {
    opacity: 0.75;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHIMMER CARDS
   ───────────────────────────────────────────────────────────────────────────── */
.exp-shimmer-wrap {
    padding-bottom: 28px;
    opacity: 0;
    animation: exp-cascade-in 0.4s ease forwards;
}

/* ─────────────────────────────────────────────────────────────────────────────
   EXPLORE BY GENRE SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.exp-genre-section {
    padding: 4px 20px calc(100px + env(safe-area-inset-bottom, 0px)) 20px;
}

.exp-genre-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding-top: 12px;
}

.exp-genre-chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        border-color 0.18s,
        color 0.18s,
        background 0.18s;
}
.exp-genre-chip:hover,
.exp-genre-chip--on {
    border-color: var(--accent-lime);
    color: var(--accent-lime);
    background: rgba(166, 217, 106, 0.06);
}
.exp-genre-chip--on {
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH OVERLAY  (slide-up from bottom)
   ───────────────────────────────────────────────────────────────────────────── */
.exp-sovl-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: var(--lebar-kolom);
    z-index: 300;
    transform: translateX(-50%) translateY(100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 32px 80px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}
.exp-sovl-wrap--open {
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
[data-theme="light"] .exp-sovl-wrap {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.12),
        0 32px 80px rgba(0, 0, 0, 0.3);
}

/* Backdrop */
.exp-sovl-backdrop {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.exp-sovl-backdrop--open {
    opacity: 1;
    pointer-events: auto;
}
[data-theme="light"] .exp-sovl-backdrop {
    background: rgba(0, 0, 0, 0.32);
}

/* Overlay body */
.exp-sovl {
    position: absolute;
    inset: 0;
    background: var(--bg-base);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header bar */
.exp-sovl-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
    background: var(--bg-base);
    padding-top: max(12px, env(safe-area-inset-top, 12px));
}

/* Back button */
.exp-sovl-back {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
}
.exp-sovl-back:hover {
    background: var(--bg-elevated-2);
}

/* Input wrapper */
.exp-sovl-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-strong);
    border-radius: 12px;
    padding: 0 12px;
    height: 44px;
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
}
.exp-sovl-input-wrap:focus-within {
    border-color: var(--accent-lime);
    box-shadow: 0 0 0 3px rgba(75, 216, 143, 0.12);
}
.exp-sovl-input-wrap svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.exp-sovl-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    min-width: 0;
}
.exp-sovl-input::placeholder {
    color: var(--text-muted);
}

.exp-sovl-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-elevated-2);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}
.exp-sovl-clear:hover {
    color: var(--text-primary);
}

/* Chips inside overlay */
.exp-sovl-chips {
    display: flex;
    gap: 8px;
    padding: 10px 14px 8px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border-soft);
}
.exp-sovl-chips::-webkit-scrollbar {
    display: none;
}

/* Count bar */
/* Bagian "Penyelenggara" (merchant) di hasil pencarian — baris scroll horizontal */
.exp-sovl-merchants {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 16px 2px;
    flex-shrink: 0;
}
.exp-merch-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.exp-merch-row::-webkit-scrollbar { display: none; }
.exp-merch-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    max-width: 220px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color .15s, background .15s;
}
.exp-merch-item:hover { border-color: var(--accent-lime); background: var(--bg-elevated-2); }
.exp-merch-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.exp-merch-avatar--fb {
    font-weight: 800;
    font-size: 15px;
    color: var(--text-on-accent);
    background: var(--accent-blue);
}
.exp-merch-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.exp-merch-verified { color: var(--accent-lime); font-size: 12px; flex: none; }

.exp-sovl-count-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 6px;
    flex-shrink: 0;
}
.exp-sovl-count {
    font-size: 1.1rem;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

/* Scrollable results */
.exp-sovl-results {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px calc(80px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.exp-sovl-results::-webkit-scrollbar {
    display: none;
}

/* ── Body scroll lock ── */
body.body-scroll-locked {
    overflow: hidden !important;
    touch-action: none;
}

/* ── Light theme overrides for overlay ── */
[data-theme="light"] .exp-sovl {
    background: var(--bg-page);
}
[data-theme="light"] .exp-sovl-header {
    background: var(--bg-page);
    border-color: var(--border);
}
[data-theme="light"] .exp-sovl-back {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="light"] .exp-sovl-input-wrap {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="light"] .exp-sovl-input-wrap:focus-within {
    border-color: var(--accent-lime);
}

/* ── "Untuk Kamu": rail rekomendasi (horizontal scroll) ───────────────────── */
.exp-fy-section { padding: 4px 0 10px; }
.exp-fy-head { display: flex; flex-direction: column; gap: 2px; padding: 0 16px 8px; }
.exp-fy-title-h { font-size: 18px; font-weight: 800; margin: 0; color: var(--text-primary); }
.exp-fy-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 16px 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.exp-fy-rail::-webkit-scrollbar { display: none; }
.exp-fy-card {
    flex: 0 0 150px;
    scroll-snap-align: start;
    text-decoration: none;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    transition: transform .16s ease, border-color .16s ease;
}
.exp-fy-card:hover { transform: translateY(-2px); border-color: var(--accent-lime); }
.exp-fy-img-wrap { position: relative; aspect-ratio: 4 / 3; background: var(--bg-elevated); }
.exp-fy-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-fy-live {
    position: absolute; top: 6px; left: 6px;
    font-size: 8.5px; font-weight: 800; letter-spacing: .06em;
    padding: 3px 6px; border-radius: 100px; background: #ff2d55; color: #fff;
}
.exp-fy-body { padding: 8px 9px 10px; }
.exp-fy-title {
    font-size: 12px; font-weight: 600; color: var(--text-primary);
    line-height: 1.3; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.6em;
}
.exp-fy-price { font-size: 13px; font-weight: 800; color: var(--accent-lime); }

/* ── Infinite scroll: kartu shimmer saat memuat chunk berikutnya ──────────── */
.exp-mkt-grid--more {
    margin-top: 12px;
    padding: 0 16px 24px;
}


/* ==== page-home.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   HOME PAGE
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── PAGE WRAPPER ───────────────────────────────────────────────────────────── */
.page {
    position: relative;
    width: 100%;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    background: var(--bg-page);
    min-height: 100dvh;
    padding-bottom: 90px;
}
/* Explore page: header di atas hero — transparan, tidak sticky */
.exp-header {
    position: relative;
    background: transparent;
    border-bottom: none;
}
.page-logo {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 3px;
    color: var(--text-soft-accent);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* ── HOME ───────────────────────────────────────────────────────────────────── */
.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 20px 16px;
    cursor: text;
}
.search-placeholder {
    font-size: 13px;
    color: var(--text-secondary);
}
.search-input-home {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    padding: 0;
}
.search-input-home::placeholder {
    color: var(--text-secondary);
}
/* ── CHIP STRIP (wraps chip-row + quick-purchase-btn) ───────────────────────── */
.chip-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px 16px;
}
.chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}
.chip-row::-webkit-scrollbar {
    display: none;
}

/* Tombol Beli Cepat — sembunyikan di mobile, tampilkan di desktop */
.quick-purchase-btn {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 10px 20px;
    border-radius: 100px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.quick-purchase-btn:hover {
    opacity: 0.88;
}
.chip {
    white-space: nowrap;
    padding: 8px 18px;
    border-radius: 100px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.04em;
    text-decoration: none;
    display: inline-block;
}
.chip--active {
    background: var(--chip-active-bg);
    color: var(--chip-active-text);
    border-color: var(--chip-active-bg);
    font-weight: 700;
}
.hero-event {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    aspect-ratio: 4/3;
    margin: 0 20px 20px;
    border-radius: 16px;
}
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.2) 60%,
        transparent 100%
    );
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.live-badge {
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.12em;
    font-family: var(--font-body);
    margin-bottom: 6px;
}
.hero-name {
    font-family: var(--font-display);
    font-size: 40px;
    color: white;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}
.hero-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}
.hero-price {
    color: var(--accent-lime);
    font-size: 16px;
    font-family: var(--font-body);
    font-weight: 700;
}
.flash-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 20px;
    margin: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.flash-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.flash-icon-wrap {
    width: 32px;
    height: 32px;
    background: rgba(166, 217, 106, 0.12);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flash-label {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}
.cd-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cd-block {
    background: var(--bg-elevated);
    border-radius: 8px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cd-value {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--text-primary);
    line-height: 1;
}
.cd-sep {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--text-muted);
}
.grab-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: white;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.1em;
    cursor: pointer;
    font-weight: 700;
    transition: opacity 0.2s;
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 16px;
    gap: 12px;
}
.section-title {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text-primary);
    letter-spacing: 0.06em;
}
.section-title-xl {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    line-height: 1;
}
.section-title--accent {
    color: var(--accent-lime);
}
.view-all {
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
    white-space: nowrap;
}
.view-all:hover {
    color: var(--accent-lime);
}
.trending-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px;
}
.trending-card {
    display: block;
    text-decoration: none;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
}
.trending-img-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
}
.trending-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.trending-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    gap: 10px;
}
.trending-name {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trending-date {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trending-price {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--accent-lime);
    white-space: nowrap;
    font-weight: 700;
    flex-shrink: 0;
}
.trending-venue-badge {
    display: none;
}
.trending-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

/* ── UPCOMING NEAR YOU ─────────────────────────────────────────────────────── */
.upcoming-section {
    background: var(--bg-base);
}
.upcoming-nav-btns {
    display: none;
    gap: 8px;
}
.upcoming-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.upcoming-nav-btn:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
.upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px;
}
.upcoming-card {
    display: flex;
    gap: 14px;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: background 0.2s;
}
.upcoming-card:hover {
    background: var(--bg-elevated);
}
.upcoming-img-wrap {
    position: relative;
    width: 90px;
    height: 80px;
    flex-shrink: 0;
}
.upcoming-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.upcoming-date-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--accent-blue);
    color: #fff;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 100px;
}
.upcoming-card-body {
    flex: 1;
    padding: 12px 14px 12px 0;
}
.upcoming-card-name {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.upcoming-card-venue {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.upcoming-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.upcoming-card-price {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--accent-lime);
    font-weight: 700;
}
.upcoming-card-arrow {
    font-size: 14px;
    color: var(--text-muted);
}

/* ── RECOMMENDED FOR YOU ──────────────────────────────────────────────────── */
.recommended-section {
    background: var(--bg-base);
}
.recommended-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 20px;
}
.rec-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-decoration: none;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 12px;
    transition: background 0.2s;
}
.rec-card:hover {
    background: var(--bg-elevated);
}
.rec-img-wrap {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.rec-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rec-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.rec-genre {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}
.rec-name {
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rec-meta {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rec-price {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--accent-lime);
    font-weight: 700;
    margin-top: 2px;
}
.upgrade-banner {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-violet) 100%);
    border-radius: 24px;
    padding: 24px 20px;
    margin: 20px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.upgrade-title {
    font-family: var(--font-display);
    font-size: 28px;
    color: white;
    letter-spacing: 0.06em;
}
.upgrade-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
    word-break: break-word;
}
.upgrade-btn {
    align-self: flex-start;
    margin-top: 8px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border: none;
    border-radius: 100px;
    padding: 10px 22px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    cursor: pointer;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════


/* ══════════════════════════════════════════════════════════════════════════════
   HOME PAGE — ADVERTISEMENT HERO BANNER
   Mobile-first, konsisten 20px horizontal padding
   ══════════════════════════════════════════════════════════════════════════════ */

.home-ad-hero {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 0;
}
.home-ad-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}
.home-ad-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(8, 8, 16, 0.95) 0%,
        rgba(8, 8, 16, 0.5) 50%,
        rgba(8, 8, 16, 0.1) 100%
    );
}
.home-ad-hero-content {
    position: relative;
    z-index: 1;
    padding: 24px 20px;
    width: 100%;
}
.home-ad-hero-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.home-ad-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.home-ad-chip--partnership {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}
.home-ad-eyebrow {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    padding: 4px 10px;
}
.home-ad-heading {
    font-family: var(--font-display);
    font-size: 44px;
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 0.92;
    margin: 0 0 10px;
}
.home-ad-desc {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.7;
    margin: 0 0 18px;
}
.home-ad-cta {
    display: inline-flex;
    align-items: center;
    padding: 11px 22px;
    background: var(--accent-lime);
    border: none;
    border-radius: 100px;
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.home-ad-cta:hover {
    opacity: 0.88;
}

/* Modifier khusus mobile (selalu aktif di build mobile-only) */
.search-bar--mobile-only {
    display: flex;
}
.flash-card--mobile-only {
    display: flex;
}
.upgrade-banner--mobile-only {
    display: flex;
}

/* ── HOME SECTIONS ──────────────────────────────────────────────────────────── */
.home-section {
    margin-bottom: 4px;
}

.home-genre-section {
    padding: 28px 20px 0;
}
.home-trending-section {
    padding: 28px 20px 0;
}
.home-recommended-section {
    padding: 28px 20px 0;
}

.home-genre-heading {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0;
}
.home-section-heading {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0;
}
.home-trending-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.home-trending-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    background: rgba(166, 217, 106, 0.1);
    border: 1px solid rgba(166, 217, 106, 0.22);
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.home-rec-sub {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    margin: 3px 0 0;
    letter-spacing: 0.02em;
}

/* ── GENRE GRID — horizontal scroll on mobile ─────────────────────────────── */
.home-genre-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 16px 20px 4px;
    margin: 0 -20px;
    scrollbar-width: none;
}
.home-genre-grid::-webkit-scrollbar {
    display: none;
}
.home-genre-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.2s;
    color: var(--text-secondary);
}
.home-genre-card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(166, 217, 106, 0.2);
    color: var(--text-primary);
}
.home-genre-card--active {
    background: rgba(166, 217, 106, 0.08);
    border-color: rgba(166, 217, 106, 0.28);
    color: var(--accent-lime);
}
.home-genre-icon {
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-genre-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: inherit;
    text-align: center;
}

/* ── HOME EVENT GRID — 2 col responsive ──────────────────────────────────── */
.home-event-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 20px;
    margin-top: 16px;
}
@media (max-width: 360px) {
    .home-event-grid {
        grid-template-columns: 1fr;
    }
}

/* ── HOME NEWSLETTER — mobile vertical stack ──────────────────────────────── */
.home-newsletter {
    margin: 28px 20px 32px;
    background: var(--bg-card);
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    padding: 28px 20px;
}
.home-newsletter-heading {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.05;
}
.home-newsletter-sub {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 20px;
    line-height: 1.7;
}
.home-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.home-newsletter-input {
    width: 100%;
    padding: 13px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.home-newsletter-input:focus {
    border-color: rgba(79, 107, 255, 0.5);
}
.home-newsletter-input::placeholder {
    color: var(--text-muted);
}
.home-newsletter-btn {
    width: 100%;
    padding: 13px;
    background: var(--accent-lime);
    border: none;
    border-radius: 100px;
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.home-newsletter-btn:hover {
    opacity: 0.9;
}

/* ══════════════════════════════════════════════════════════════════════════════
   EXPLORE PAGE — SHARED EventCard (explore-event-card-v2)
   Used on both Home and Explore pages via shared EventCard component
   ══════════════════════════════════════════════════════════════════════════════ */

/* Baris chip kategori — halaman Jelajahi mobile */
.chip-row--mobile-only {
    display: flex;
    gap: 8px;
    padding: 0 20px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.chip-row--mobile-only::-webkit-scrollbar {
    display: none;
}

/* Results header */
.explore-results-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 0 20px;
}
.explore-results-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.explore-results-eyebrow {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent-lime);
    display: block;
}
.explore-results-count {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}
.explore-results-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.explore-sort-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
}
.explore-sort-label {
    white-space: nowrap;
}
.explore-sort-select-v2 {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.explore-sort-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Iklan full-width — sembunyikan di mobile */
.explore-sponsored-fullwidth {
    display: none;
}

/* Two-column event grid */
.explore-events-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 20px 24px;
}
@media (max-width: 360px) {
    .explore-events-grid-v2 {
        grid-template-columns: 1fr;
    }
}

/* Grid event beranda (2 kolom, gaya marketplace) */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 20px 24px;
}

/* Shared EventCard — wraps images + body */
.explore-product-card-v2 {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition:
        transform 0.18s,
        box-shadow 0.18s,
        border-color 0.18s;
}
.explore-product-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: rgba(166, 217, 106, 0.18);
}
.explore-ecard-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.explore-ecard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.explore-product-card-v2:hover .explore-ecard-img {
    transform: scale(1.04);
}
.explore-ecard-cat {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(8, 8, 16, 0.72);
    backdrop-filter: blur(4px);
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
}
.explore-ecard-body {
    padding: 12px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.explore-ecard-title {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}
.explore-ecard-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
}
.explore-ecard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}
.explore-ecard-price {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-lime);
}
.explore-ecard-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: all 0.18s;
}
.explore-product-card-v2:hover .explore-ecard-arrow {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}

/* Show more */
.explore-show-more {
    display: flex;
    justify-content: center;
    padding: 16px 0 8px;
}
.explore-show-more-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 11px 28px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s;
}
.explore-show-more-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPLORE PAGE — Full redesign with banner + waterfall cascade
   ═══════════════════════════════════════════════════════════════════════════ */

.exp-page {
    background: var(--bg-base);
    width: 100%;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    min-height: 100dvh;
    position: relative;
}

/* ── Banner ── */
.exp-banner-wrap {
    margin: 12px 16px 0;
    border-radius: 16px;
    position: relative;
    /* cursor indicates draggable */
    cursor: grab;
}
.exp-banner-wrap:active {
    cursor: grabbing;
}
.exp-banner-shim {
    width: 100%;
    height: 180px;
    border-radius: 16px;
}
/* viewport clips overflowing slides — MUST have overflow:hidden */
.exp-banner-viewport {
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
}
/* track is a flex row as wide as (n * 100%) */
.exp-banner-track {
    display: flex;
    /* width set by content — each slide is 100% of viewport */
    will-change: transform;
}
/* each slide exactly fills the viewport width */
.exp-banner-slide {
    flex: 0 0 100%; /* don't grow, don't shrink, exactly 100% */
    width: 100%;
    min-width: 0;
}
.exp-banner-link {
    display: block;
    width: 100%;
    -webkit-user-drag: none;
}
.exp-banner-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    pointer-events: none; /* prevent browser drag-image ghost */
    -webkit-user-drag: none;
}
.exp-banner-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    padding-bottom: 4px;
}
.exp-bdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition:
        background 0.2s,
        width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.exp-bdot--on {
    background: var(--accent-lime);
    width: 20px;
    border-radius: 3px;
}

/* ── Hero section ── */
.exp-hero {
    overflow: hidden;
    max-height: 400px;
    transition:
        max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease;
    opacity: 1;
}
.exp-hero--collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}
.exp-hero-title-wrap {
    padding: 20px 20px 8px;
}
.exp-hero-title {
    font-family: var(--font-display);
    font-size: 52px;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: 0.02em;
    margin: 0 0 6px;
}
.exp-hero-dot {
    color: var(--accent-lime);
}
.exp-hero-sub {
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin: 0;
}

/* ── Search bar ── */
.exp-search-bar {
    padding: 12px 16px 0;
    transition: padding 0.3s ease;
    position: relative;
    z-index: 20;
}
.exp-search-bar--sticky {
    position: sticky;
    top: 0;
    background: var(--bg-base);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    z-index: 45; /* di bawah header (50) tapi di atas konten */
}
.exp-search-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    padding: 13px 16px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.exp-search-inner:focus-within {
    border-color: var(--accent-lime);
    box-shadow: 0 0 0 3px rgba(166, 217, 106, 0.12);
}
.exp-search-inner svg {
    flex-shrink: 0;
    color: var(--text-muted);
}
.exp-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
}
.exp-search-input::placeholder {
    color: var(--text-muted);
}
.exp-search-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.exp-search-clear:hover {
    color: var(--text-primary);
}

/* ── Category chips ── */
.exp-chips {
    display: flex;
    gap: 8px;
    padding: 14px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.exp-chips::-webkit-scrollbar {
    display: none;
}
.exp-chip {
    flex-shrink: 0;
    padding: 7px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s,
        transform 0.1s;
}
.exp-chip:hover {
    border-color: var(--accent-lime);
    color: var(--text-primary);
}
.exp-chip--on {
    background: var(--accent-lime);
    border-color: var(--accent-lime);
    color: #16151d;
}
.exp-chip:active {
    transform: scale(0.95);
}

/* ── Results bar ── */
.exp-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 10px;
}
.exp-results-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.exp-results-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--accent-lime);
}
.exp-results-count {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.exp-results-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.exp-clear-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(255, 80, 80, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 100px;
    color: #ff6b6b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.15s;
}
.exp-clear-btn:hover {
    background: rgba(255, 80, 80, 0.18);
}


/* ==== page-lives.css ==== */
/* ═════════════════════════════════════════════════════════════════════════
   LIVES — daftar siaran langsung + feed swipe vertikal
   ═════════════════════════════════════════════════════════════════════════ */

.lives-page {
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lives-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--bg-page);
}

.lives-back,
.lives-refresh {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.lives-back:hover,
.lives-refresh:hover { background: var(--bg-elevated-2); }

.lives-title {
    flex: 1;
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

/* ── Status (loading / kosong / error) ─────────────────────────────────── */
.lives-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 16px;
    color: var(--text-muted);
}
.lives-status svg { opacity: 0.5; }
.lives-status-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}
.lives-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--live-green);
    animation: live-spin 0.8s linear infinite;
}

/* ── Grid kartu live ───────────────────────────────────────────────────── */
.lives-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-bottom: 90px;
}

.lives-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-card);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    transition: transform 0.15s, border-color 0.15s;
}
.lives-card:hover { border-color: var(--live-green); }
.lives-card:active { transform: scale(0.97); }

.lives-card-thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 35%, var(--bg-elevated-2), var(--bg-card));
}

.lives-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--live-green);
    color: var(--text-on-accent);
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
}

.lives-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 100px;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.lives-card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: live-pulse 1.2s ease-in-out infinite;
}

.lives-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px 12px;
}
.lives-card-name {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lives-card-viewers {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
}

/* ── Feed fullscreen (swipe vertikal seperti app live lain) ────────────── */
.lives-feed {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #000;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.lives-feed::-webkit-scrollbar { display: none; }

.lives-feed-close {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    left: 14px;
    z-index: 210;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lives-slide {
    height: 100dvh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Viewer di dalam slide → immersive full-bleed, kontrol mengambang di atas video */
.lives-slide .live-viewer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    background: #000;
    display: block;
}
.lives-slide .live-viewer-video-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}
.lives-slide .live-viewer-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lives-slide .live-viewer-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 24px 64px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
}
.lives-slide .live-viewer-merchant { color: #fff; }
.lives-slide .live-viewer-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 24px 16px calc(env(safe-area-inset-bottom, 0px) + 22px);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}
.lives-slide .live-viewer-viewers { color: rgba(255, 255, 255, 0.9); }
.lives-slide .live-viewer-error {
    position: absolute;
    bottom: 90px;
    left: 16px;
    right: 16px;
    z-index: 6;
}

/* Placeholder slide non-aktif */
.lives-slide-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.7);
}
.lives-ph-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--live-green);
    color: var(--text-on-accent);
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
}
.lives-ph-name {
    font-family: var(--font-display);
    font-size: 18px;
    color: #fff;
}
.lives-ph-hint {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}


/* ── Tombol "ketuk untuk suara" di feed fullscreen ────────────────────────
   Di feed, `.live-viewer-controls` menjadi `position:absolute; bottom:0`
   dengan `z-index:5`. Overlay unmute ber-`z-index:3` DAN pil-nya juga
   ditempatkan di tepi bawah (`align-items:flex-end`) — jadi satu-satunya
   kontrol yang menyalakan suara terkubur persis di bawah bilah kontrol:
   tak terlihat, dan ketukannya ditelan bilah itu.
   Akibatnya penonton tak punya cara apa pun menyalakan audio, dan siarannya
   selalu bisu. Autoplay ber-suara diblokir peramban, jadi ketukan ini bukan
   kenyamanan — ia SATU-SATUNYA jalan.

   Dua hal diperbaiki sekaligus:
   1. Pil diangkat melewati bilah kontrol.
   2. Overlay tak lagi menelan ketukan. Ia menutup seluruh video (`inset:0`),
      jadi menaikkan z-index-nya saja akan membuat tombol "Keluar" dan hitungan
      penonton di bawahnya ikut mati. `pointer-events:none` pada overlay +
      `auto` pada pil membuat hanya pil-nya yang menangkap ketukan — dan
      klik pada pil tetap menggelembung ke tombol induknya. */
.lives-slide .live-viewer-unmute-overlay {
    z-index: 6;
    pointer-events: none;
    align-items: flex-end;
    padding-bottom: 104px;
}
.lives-slide .live-viewer-unmute-pill {
    pointer-events: auto;
}

/* ==== page-merchant-event.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   MERCHANT CREATE / EDIT EVENT  (medit-*)
   Covers: MerchantCreateEventPage + MerchantEditEventPage
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Scope box-sizing ──────────────────────────────────────────────────── */
.medit-page,
.medit-page *,
.medit-page *::before,
.medit-page *::after {
    box-sizing: border-box;
}

/* ── Page shell ──────────────────────────────────────────────────────────── */
.medit-page {
    min-height: 100dvh;
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
    /* Pastikan footer fixed tidak terpotong oleh overflow */
    contain: layout paint;
}

/* ── Container (scrollable content area) ────────────────────────────────── */
.medit-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px 16px 100px; /* top padding since header is outside container */
    overflow-x: hidden;
    width: 100%;
    min-width: 0; /* Crucial: allow flex child to shrink below content size */
}

/* ── Header (standard page-header, sticky inside medit-page) ─────────────── */
.medit-page > .page-header,
.medit-page-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-soft);
    width: 100%;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="light"] .medit-page-header {
    background: var(--bg-page);
    border-bottom-color: var(--border);
}

/* ── Skeleton ─────────────────────────────────────────────────────────── */
.medit-skeleton {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* ── Section headers ─────────────────────────────────────────────────────── */
.medit-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(166, 217, 106, 0.12);
    margin-top: 4px;
    width: 100%;
    min-width: 0;
}
.medit-section-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.22em;
    color: var(--accent-lime);
    text-transform: uppercase;
    opacity: 0.85;
    white-space: nowrap;
}

/* ── Field groups ───────────────────────────────────────────────────────── */
.medit-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
}
.medit-field-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.medit-field-label--sale { color: var(--accent-lime); opacity: 0.9; }
.medit-section-hint {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 6px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.medit-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

/* ── Inputs ─────────────────────────────────────────────────────────────── */
.medit-input,
.medit-form-input,
.medit-form-select,
.medit-form-textarea {
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-soft);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-body);
    outline: none;
    width: 100%;
    min-width: 0;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.medit-input:focus,
.medit-form-input:focus,
.medit-form-select:focus,
.medit-form-textarea:focus {
    border-color: rgba(166, 217, 106, 0.55);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(166, 217, 106, 0.1);
}
.medit-input::placeholder,
.medit-form-input::placeholder,
.medit-form-textarea::placeholder {
    color: var(--text-muted);
    font-size: 13px;
}
.medit-input[type="number"]::-webkit-outer-spin-button,
.medit-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.medit-input[type="number"] { -moz-appearance: textfield; }
.medit-input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; filter: invert(0.8); }

.medit-textarea, .medit-form-textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.6;
}

/* Input with trailing icon */
.medit-input-icon-row { 
    position: relative; 
    width: 100%;
    min-width: 0;
}
.medit-input-icon-row > .medit-input { padding-right: 40px; }
.medit-input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    flex-shrink: 0;
}

/* Rp prefix input */
.medit-rp-input-wrap { 
    position: relative; 
    width: 100%;
    min-width: 0;
}
.medit-rp-prefix {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    pointer-events: none;
    z-index: 1;
}
.medit-input--rp { padding-left: 34px; }

/* ── Category grid ─────────────────────────────────────────────────────── */
.medit-category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0;
    width: 100%;
}
.medit-checkbox-label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 100px;
    border: 1.5px solid var(--border-soft);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-elevated);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
    max-width: 100%;
}
.medit-checkbox-label:has(input:checked) {
    border-color: var(--accent-lime);
    color: var(--text-primary);
    background: rgba(166, 217, 106, 0.09);
}
.medit-checkbox-label input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: var(--accent-lime);
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}

/* ── Cover image (file input + preview) ───────────────────────────────── */
.medit-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.medit-cover-card { padding: 0 !important; overflow: hidden; }

.medit-change-img-btn {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-lime);
    cursor: pointer;
    text-transform: uppercase;
    background: none;
    border: none;
    padding: 0;
}

.medit-banner-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16/7;
    background: var(--bg-elevated);
    width: 100%;
}
.medit-banner-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.medit-banner-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 12px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    display: flex; align-items: flex-end;
}
.medit-update-media-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px); border-radius: 8px; padding: 6px 12px;
    color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    cursor: pointer; text-transform: uppercase; transition: background 0.15s;
    white-space: nowrap;
}
.medit-update-media-btn:hover { background: rgba(0,0,0,0.8); }
.medit-img-note { font-size: 11px; color: var(--warning-amber); margin: 0; }
.medit-cover-card .medit-img-note { padding: 10px 16px 12px; margin: 0; border-top: 1px solid var(--border-soft); }

/* Cover card with file upload */
.medit-cover-preview-wrap {
    position: relative; 
    width: 100%; 
    aspect-ratio: 16/9;
    background: var(--bg-elevated); 
    border-radius: 0; 
    overflow: hidden; 
    cursor: pointer;
}
.medit-cover-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.medit-cover-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s ease;
}
.medit-cover-preview-wrap:hover .medit-cover-overlay { opacity: 1; }
.medit-cover-change-btn {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px;
    border-radius: 8px; padding: 10px 18px; cursor: pointer; backdrop-filter: blur(6px); transition: background 0.15s;
    white-space: nowrap;
}
.medit-cover-change-btn:hover { background: rgba(255,255,255,0.25); }
.medit-cover-empty-label {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; width: 100%; height: 100%; cursor: pointer; transition: background 0.15s;
    padding: 24px;
}
.medit-cover-empty-label:hover { background: var(--bg-elevated-2); }
.medit-cover-empty-icon {
    width: 60px; height: 60px; border-radius: 16px;
    background: var(--bg-card); border: 1.5px dashed var(--border-strong);
    display: flex; align-items: center; justify-content: center; color: var(--text-muted); margin-bottom: 4px;
    flex-shrink: 0;
}
.medit-cover-empty-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.medit-cover-empty-sub { font-size: 12px; color: var(--text-muted); }
.medit-cover-upload-chip {
    display: flex; align-items: center; gap: 6px;
    background: var(--accent-lime); color: #16151d;
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    border-radius: 100px; padding: 6px 14px; margin-top: 6px;
    white-space: nowrap;
}
.medit-cover-file-input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.medit-cover-preview {
    margin-top: 8px; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9;
    background: var(--bg-elevated); border: 1px solid var(--border-soft);
    width: 100%;
}
.medit-cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── File input (generic) ─────────────────────────────────────────────── */
.medit-file-input-wrapper {
    position: relative; 
    display: flex; 
    align-items: center; 
    gap: 10px;
    padding: 14px 16px; 
    border: 1.5px dashed var(--border-strong);
    border-radius: 12px; 
    background: var(--bg-elevated);
    cursor: pointer; 
    transition: border-color 0.15s, background 0.15s; 
    overflow: hidden;
    width: 100%;
    min-width: 0;
}
.medit-file-input-wrapper:hover { border-color: var(--accent-lime); background: rgba(166, 217, 106, 0.04); }
.medit-file-input { 
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    cursor: pointer; 
    font-size: 0; 
}
.medit-file-input-label { 
    font-family: var(--font-body); 
    font-size: 10px; 
    font-weight: 800; 
    letter-spacing: 0.12em; 
    text-transform: uppercase; 
    color: var(--accent-lime); 
    pointer-events: none; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Variant cards ─────────────────────────────────────────────────────── */
.medit-variant-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
}
.medit-variant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
}
.medit-variant-cat-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.medit-variant-delete-btn {
    width: 28px; 
    height: 28px; 
    border-radius: 8px;
    background: rgba(255, 79, 107, 0.1); 
    border: 1px solid rgba(255, 79, 107, 0.2);
    color: var(--danger); 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: background 0.15s; 
    flex-shrink: 0;
    padding: 0;
}
.medit-variant-delete-btn:hover { background: rgba(255, 79, 107, 0.22); }

/* Big inline-editable name */
.medit-variant-name-input {
    background: transparent; 
    border: none;
    border-bottom: 1.5px solid var(--border-soft);
    padding: 2px 0 8px; 
    color: var(--text-primary);
    font-size: 19px; 
    font-weight: 800; 
    letter-spacing: -0.01em;
    font-family: var(--font-body); 
    outline: none; 
    width: 100%; 
    min-width: 0;
    transition: border-color 0.2s;
}
.medit-variant-name-input:focus { border-bottom-color: var(--accent-lime); }
.medit-variant-name-input::placeholder { color: var(--text-muted); font-weight: 600; font-size: 15px; }

.medit-sold-badge {
    display: inline-flex; 
    align-items: center; 
    gap: 5px;
    background: rgba(166, 217, 106, 0.07); 
    border: 1px solid rgba(166, 217, 106, 0.15);
    border-radius: 6px; 
    padding: 3px 8px; 
    font-size: 10px; 
    font-weight: 600; 
    color: var(--accent-lime); 
    width: fit-content;
    flex-shrink: 0;
}

/* Active toggle row at bottom of variant card */
.medit-active-row {
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    padding-top: 8px; 
    border-top: 1px solid var(--border-soft); 
    margin-top: 2px;
    width: 100%;
    min-width: 0;
    gap: 12px;
}

/* Add variant button (dashed outline row) */
.medit-add-variant-row {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px;
    width: 100%; 
    padding: 14px 16px;
    background: transparent; 
    border: 1.5px dashed rgba(166, 217, 106, 0.35);
    border-radius: 14px; 
    color: var(--accent-lime);
    font-family: var(--font-body); 
    font-size: 11px; 
    font-weight: 800;
    letter-spacing: 0.14em; 
    text-transform: uppercase;
    cursor: pointer; 
    transition: background 0.15s, border-color 0.15s;
    appearance: none;
    -webkit-appearance: none;
}
.medit-add-variant-row:hover {
    background: rgba(166, 217, 106, 0.06);
    border-color: rgba(166, 217, 106, 0.6);
}
.medit-add-variant-row-icon {
    width: 26px; 
    height: 26px; 
    border-radius: 50%;
    background: var(--accent-lime); 
    color: #0a0a14;
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0; 
    transition: transform 0.15s;
}
.medit-add-variant-row:hover .medit-add-variant-row-icon { transform: scale(1.1); }

/* Empty variants placeholder */
.medit-variants-empty {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 6px;
    padding: 28px 16px; 
    background: var(--bg-elevated);
    border: 1px dashed var(--border-soft); 
    border-radius: 14px; 
    text-align: center;
    width: 100%;
}
.medit-variants-empty p { font-size: 13px; color: var(--text-muted); margin: 0; }
.medit-add-variant-inline-btn {
    font-size: 12px; 
    font-weight: 700; 
    color: var(--accent-lime);
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 4px 0; 
    letter-spacing: 0.05em;
}

/* ── Banners (error / success) ─────────────────────────────────────────── */
.medit-error-banner {
    display: flex; 
    align-items: center; 
    gap: 8px;
    background: rgba(255, 79, 107, 0.1); 
    border: 1px solid rgba(255, 79, 107, 0.25);
    border-radius: 12px; 
    padding: 12px 14px; 
    color: var(--danger); 
    font-size: 13px; 
    font-weight: 500;
    animation: fadeUp 0.25s ease both;
    width: 100%;
    min-width: 0;
}
.medit-success-banner {
    display: flex; 
    align-items: center; 
    gap: 8px;
    background: rgba(166, 217, 106, 0.08); 
    border: 1px solid rgba(166, 217, 106, 0.25);
    border-radius: 12px; 
    padding: 12px 14px; 
    color: var(--accent-lime); 
    font-size: 13px; 
    font-weight: 500;
    animation: fadeUp 0.25s ease both;
    width: 100%;
    min-width: 0;
}

/* ── Sticky footer ──────────────────────────────────────────────────────── */
.medit-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: var(--lebar-kolom);
    z-index: 50;
    padding: 12px 16px max(20px, env(safe-area-inset-bottom, 20px));
    background: var(--bg-page);
    border-top: 1px solid var(--border-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-sizing: border-box;
}

/* ── Action bar (submit + cancel row) ──────────────────────────────────── */
.medit-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    width: 100%;
}

/* Primary action — same visual weight as medit-update-btn */
.medit-submit-btn {
    width: 100%;
    padding: 15px 24px;
    background: var(--accent-lime);
    border: none;
    border-radius: 14px;
    color: #0a0a14;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}
.medit-submit-btn:hover { opacity: 0.9; }
.medit-submit-btn:active { transform: scale(0.98); }
.medit-submit-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* Secondary / cancel */
.medit-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 24px;
    background: transparent;
    border: 1.5px solid var(--border-strong);
    border-radius: 14px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
    text-align: center;
}
.medit-cancel-btn:hover {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .medit-submit-btn { color: #fff; }
[data-theme="light"] .medit-cancel-btn {
    border-color: var(--border-strong);
    color: var(--text-secondary);
}
[data-theme="light"] .medit-cancel-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Publish / Update button */
.medit-update-btn {
    width: 100%;
    max-width: 100%;
    padding: 15px 24px;
    background: var(--accent-lime);
    border: none;
    border-radius: 14px;
    color: #0a0a14;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}
.medit-update-btn:hover { opacity: 0.9; }
.medit-update-btn:active { transform: scale(0.98); }
.medit-update-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* ── Detail image grid ─────────────────────────────────────────────────── */
.detail-img-grid { 
    display: grid; 
    gap: 7px; 
    width: 100%;
}
.detail-img-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-img-grid--4 {
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    overflow-y: hidden;
    gap: 7px; 
    scroll-behavior: smooth; 
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
    width: 100%;
}
.detail-img-grid--4::-webkit-scrollbar { height: 3px; }
.detail-img-grid--4::-webkit-scrollbar-track { background: transparent; }
.detail-img-grid--4::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
.detail-img-grid--4 > div { 
    flex-shrink: 0; 
    width: calc(25% - 5.25px); 
    aspect-ratio: 1; 
    min-width: calc(25% - 5.25px); 
}
.detail-image-caption { 
    font-size: 12px; 
    color: var(--text-muted); 
    margin: 0; 
    line-height: 1.5; 
}

/* ── mhub tier toggle (inside edit event) ──────────────────────────────── */
.mhub-tier-toggle { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    cursor: pointer; 
    flex-shrink: 0;
}
.mhub-tier-check { 
    width: 14px; 
    height: 14px; 
    accent-color: var(--accent-lime); 
    cursor: pointer; 
    flex-shrink: 0;
    margin: 0;
}
.mhub-tier-toggle-label { 
    font-family: var(--font-body); 
    font-size: 9px; 
    letter-spacing: 0.1em; 
    color: var(--text-muted); 
    white-space: nowrap;
}

/* ── Light mode ─────────────────────────────────────────────────────────── */
[data-theme="light"] .medit-section-label { color: var(--accent-lime); }
[data-theme="light"] .medit-input,
[data-theme="light"] .medit-form-input,
[data-theme="light"] .medit-form-textarea { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-primary); }
[data-theme="light"] .medit-input:focus { border-color: rgba(61, 102, 0, 0.5); box-shadow: 0 0 0 3px rgba(61, 102, 0, 0.1); }
[data-theme="light"] .medit-variant-card { background: var(--bg-elevated); border-color: var(--border); }
[data-theme="light"] .medit-variant-name-input { color: var(--text-primary); border-bottom-color: var(--border-strong); }
[data-theme="light"] .medit-variant-name-input:focus { border-bottom-color: var(--accent-lime); }
[data-theme="light"] .medit-checkbox-label { background: var(--bg-elevated); border-color: var(--border); color: var(--text-secondary); }
[data-theme="light"] .medit-checkbox-label:has(input:checked) { border-color: var(--accent-lime); background: rgba(61, 102, 0, 0.08); color: var(--text-primary); }
[data-theme="light"] .medit-file-input-wrapper { border-color: var(--border-strong); background: var(--bg-elevated); }
[data-theme="light"] .medit-file-input-wrapper:hover { border-color: var(--accent-lime); }
[data-theme="light"] .medit-add-variant-row { border-color: rgba(61, 102, 0, 0.35); color: var(--accent-lime); }
[data-theme="light"] .medit-add-variant-row:hover { background: rgba(61, 102, 0, 0.06); border-color: rgba(61, 102, 0, 0.6); }
[data-theme="light"] .medit-add-variant-row-icon { background: var(--accent-lime); color: #fff; }
[data-theme="light"] .medit-sticky-footer { background: var(--overlay-blur); border-color: var(--border); }
[data-theme="light"] .medit-update-btn { color: #fff; }
[data-theme="light"] .medit-rp-prefix { color: var(--text-secondary); }

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════════════
   SHIMMER SKELETON
   ═══════════════════════════════════════════════════════════════════════ */

.medit-shimmer {
    background: linear-gradient(90deg,
        var(--bg-elevated) 0%,
        var(--bg-card) 35%,
        var(--bg-elevated) 70%);
    background-size: 220% 100%;
    border-radius: 8px;
    animation: shimmer-slide 1.3s infinite ease-in-out;
    position: relative;
    overflow: hidden;
}
.medit-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.025), transparent);
    animation: shimmer-gleam 1.3s infinite ease-in-out;
}
@keyframes shimmer-slide {
    0%   { background-position: 220% 0; }
    100% { background-position: -220% 0; }
}
@keyframes shimmer-gleam {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

/* Size variants */
.medit-shimmer--section { height: 11px; width: 110px; border-radius: 3px; }
.medit-shimmer--input   { height: 48px; width: 100%; border-radius: 12px; }
.medit-shimmer--textarea{ height: 96px; width: 100%; border-radius: 12px; }
.medit-shimmer--cover   { height: 190px; width: 100%; border-radius: 12px; }
.medit-shimmer--chip    { height: 36px; width: 76px; border-radius: 100px; }
.medit-shimmer--square  { height: 0; padding-bottom: 100%; width: 100%; border-radius: 10px; }
.medit-shimmer--card    { height: 240px; width: 100%; border-radius: 16px; }
.medit-shimmer--btn     { height: 52px; width: 100%; border-radius: 14px; }

/* Layout helpers */
.medit-shimmer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}
.medit-shimmer-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}
.medit-shimmer-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
}

/* Light mode shimmer */
[data-theme="light"] .medit-shimmer {
    background: linear-gradient(90deg,
        var(--bg-elevated) 0%,
        #e8e8e8 35%,
        var(--bg-elevated) 70%);
}
[data-theme="light"] .medit-shimmer::after {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.03), transparent);
}

/* ═══════════════════════════════════════════════════════════════════
   EventStoryPreviewInline  .esp-*
   Inline 9:16 Instagram-frame preview di form Create Event
   ═══════════════════════════════════════════════════════════════════ */

.esp-section {
  margin-top: 8px;
  margin-bottom: 4px;
}

.esp-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: rgba(166, 217, 106, 0.08);
  border: 1px solid rgba(166, 217, 106, 0.25);
  border-radius: 100px;
  color: var(--accent-lime);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.esp-toggle-btn:hover {
  background: rgba(166, 217, 106, 0.14);
  border-color: rgba(166, 217, 106, 0.45);
}

.esp-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
}

/* Phone shell */
.esp-phone {
  position: relative;
  width: 180px;
  height: 320px;
  border-radius: 22px;
  overflow: hidden;
  background: #0d0d18;
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255,255,255,0.04);
  flex-shrink: 0;
}

/* Story progress bar simulasi */
.esp-progress-bar {
  position: absolute;
  top: 28px;
  left: 8px;
  right: 8px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  z-index: 10;
  overflow: hidden;
}
.esp-progress-fill {
  width: 45%;
  height: 100%;
  background: #fff;
  border-radius: 2px;
}

/* Story header (avatar + username) */
.esp-story-header {
  position: absolute;
  top: 35px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}
.esp-avatar-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a6d96a, #00c6ff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.esp-avatar-inner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1a1a2e;
}
.esp-username {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex: 1;
}
.esp-story-time {
  font-size: 9px;
  color: rgba(255,255,255,0.5);
}

/* Notch */
.esp-notch {
  position: absolute;
  top: 6px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}
.esp-notch-time {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
}
.esp-notch-icons {
  display: flex;
  gap: 3px;
  color: rgba(255,255,255,0.6);
}

/* Canvas */
.esp-canvas {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Cover 70% */
.esp-cover-zone {
  position: relative;
  height: 70%;
  overflow: hidden;
  flex-shrink: 0;
}
.esp-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.esp-cover-empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255,255,255,0.03);
}
.esp-cover-empty span {
  font-size: 8px;
  color: rgba(255,255,255,0.3);
}
.esp-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
.esp-sep {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(166, 217, 106,0) 0%,
    rgba(166, 217, 106,0.8) 50%,
    rgba(166, 217, 106,0) 100%
  );
}

/* Info panel 30% */
.esp-info {
  height: 30%;
  background: linear-gradient(to bottom, rgba(5,5,18,0.97), #0a0a1c);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  text-align: center;
}

/* Badge */
.esp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(166, 217, 106,0.1);
  border: 1px solid rgba(166, 217, 106,0.3);
  border-radius: 100px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-lime);
}
.esp-badge-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-lime);
  box-shadow: 0 0 4px var(--accent-lime);
  flex-shrink: 0;
}

.esp-title {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin: 0;
}
.esp-title:empty::before,
.esp-title:has(:empty)  { opacity: 0.35; }

.esp-desc {
  font-size: 7px;
  color: rgba(255,255,255,0.6);
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin: 0;
}

.esp-cta {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(166, 217, 106,0.8);
  margin-top: 2px;
}

/* Share button */
.esp-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--accent-lime);
  color: #0a0a1c;
  border: none;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.esp-share-btn:hover { opacity: 0.88; }
.esp-share-btn:active { transform: scale(0.97); }

/* Hint text */
.esp-hint {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  padding: 0 16px;
}

/* Light theme overrides */
[data-theme="light"] .esp-phone {
  background: #1a1a2e;
}
[data-theme="light"] .esp-toggle-btn {
  color: var(--accent-lime);
}


/* ==== page-merchant-landing.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   PULSE LANDING PAGE  —  styles/page-pulse-landing.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper — ikuti ukuran .page standar ───────────────────────── */
.pl-page {
    position: relative;
    width: 100%;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    background: var(--bg-page);
    min-height: 100dvh;
    color: var(--text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* ── Nav ────────────────────────────────────────────────────────────────── */
.pl-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-soft);
}
.pl-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
}
.pl-nav-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s;
}
.pl-nav-back:hover {
    background: var(--bg-elevated-2);
}
.pl-nav-logo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 4px;
}
.pl-nav-badge {
    font-family: var(--font-body);
    font-size: 8px;
    letter-spacing: 0.18em;
    color: var(--accent-lime);
    text-transform: uppercase;
    line-height: 1;
}
.pl-nav-title {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    line-height: 1;
}
.pl-contact-btn {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 8px 14px;
    border-radius: 20px;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
}
.pl-contact-btn:hover {
    background: var(--bg-elevated);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.pl-hero {
    padding: 36px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.pl-hero-tagline {
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin: 0;
}
.pl-hero-title {
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: 0.02em;
    margin: 0;
    color: var(--text-primary);
}
.pl-hero-accent {
    color: var(--accent-lime);
    font-style: italic;
}
.pl-hero-sub {
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 300px;
    margin: 0;
}
.pl-hero-ctas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}

/* ── CTA Buttons ────────────────────────────────────────────────────────── */
.pl-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 13px 22px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform 0.18s,
        box-shadow 0.18s,
        background 0.18s;
    white-space: nowrap;
}
.pl-cta-btn--lime {
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-weight: 700;
}
.pl-cta-btn--lime:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(166, 217, 106, 0.3);
}
.pl-cta-btn--ghost {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
}
.pl-cta-btn--ghost:hover {
    background: var(--bg-elevated);
}

/* ── Hero visual ────────────────────────────────────────────────────────── */
.pl-hero-visual {
    position: relative;
    width: 100%;
    margin-top: 20px;
}
.pl-hero-img-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #0b0b1a;
}
.pl-hero-img-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(79, 107, 255, 0.18) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}
.pl-hero-concert {
    display: block;
    width: 100%;
    height: auto;
}
.pl-live-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(8, 8, 16, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}
.pl-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--live-green);
    box-shadow: 0 0 8px var(--live-green);
    animation: pl-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pl-pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* ── Section label ──────────────────────────────────────────────────────── */
.pl-section-label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-lime);
    margin-bottom: 6px;
}

/* ── Features ───────────────────────────────────────────────────────────── */
.pl-features {
    padding: 44px 20px 8px;
}
.pl-features-header {
    text-align: center;
    margin-bottom: 24px;
}
.pl-features-sub {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
.pl-feature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pl-feature-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    transition:
        border-color 0.2s,
        background 0.2s;
}
.pl-feature-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-strong);
}
.pl-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pl-icon--lime {
    background: rgba(166, 217, 106, 0.12);
    color: var(--accent-lime);
}
.pl-icon--blue {
    background: rgba(79, 107, 255, 0.15);
    color: var(--accent-blue);
}
.pl-icon--violet {
    background: rgba(124, 79, 255, 0.15);
    color: var(--accent-violet);
}
.pl-icon--pink {
    background: rgba(255, 107, 157, 0.15);
    color: var(--accent-pink);
}
.pl-feature-body {
    flex: 1;
    min-width: 0;
}
.pl-feature-title {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0 0 5px;
}
.pl-feature-desc {
    font-size: 10px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Calculator ─────────────────────────────────────────────────────────── */
.pl-calc {
    margin: 32px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
}
.pl-calc-header {
    padding: 22px 20px 0;
    text-align: center;
}
.pl-calc-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0 0 14px;
}
.pl-calc-body {
    padding: 0 20px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pl-calc-badge {
    display: inline-flex;
    align-self: flex-start;
    font-size: 9px;
    letter-spacing: 0.14em;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(166, 217, 106, 0.1);
    border: 1px solid rgba(166, 217, 106, 0.3);
    color: var(--accent-lime);
}

/* Sliders */
.pl-slider-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pl-slider-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--text-secondary);
    gap: 8px;
}
.pl-slider-label-row span:first-child {
    flex: 1;
}

/* Number input inline */
.pl-num-input-wrap {
    display: flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.pl-num-input-wrap:focus-within {
    border-color: var(--accent-lime);
    box-shadow: 0 0 0 2px rgba(166, 217, 106, 0.12);
}
.pl-num-prefix {
    font-size: 10px;
    color: var(--text-muted);
    padding: 0 5px 0 8px;
    user-select: none;
    white-space: nowrap;
}
.pl-num-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    width: 72px;
    padding: 6px 8px 6px 0;
    text-align: right;
    appearance: textfield;
}
.pl-num-input::-webkit-outer-spin-button,
.pl-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pl-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: var(--bg-elevated-2);
    outline: none;
    cursor: pointer;
}
.pl-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-lime);
    border: 2px solid var(--bg-page);
    box-shadow: 0 0 6px rgba(166, 217, 106, 0.45);
    cursor: pointer;
}
.pl-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-lime);
    border: 2px solid var(--bg-page);
    cursor: pointer;
    border-style: solid;
}
.pl-slider-range {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--text-muted);
}

/* Result card */
.pl-result-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pl-result-label {
    font-size: 8px;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.pl-result-amount {
    font-family: var(--font-display);
    font-size: 34px;
    color: var(--accent-lime);
    letter-spacing: 0.02em;
    line-height: 1;
}
.pl-result-fees {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pl-fee-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-secondary);
}
.pl-fee-val {
    font-weight: 700;
    color: var(--text-primary);
}
.pl-fee-neg {
    color: var(--danger) !important;
}

/* ── Testimonial ────────────────────────────────────────────────────────── */
.pl-testimonial {
    padding: 0 20px 40px;
}
.pl-testi-card {
    background: linear-gradient(135deg, #1a1a40 0%, #0f0f28 100%);
    border: 1px solid rgba(124, 79, 255, 0.18);
    border-radius: 18px;
    padding: 26px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.pl-testi-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid rgba(124, 79, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-violet);
}
.pl-testi-quote {
    font-size: 11px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
}
.pl-testi-author {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pl-testi-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.pl-testi-role {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.pl-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-soft);
    padding: 32px 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}
.pl-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}
.pl-footer-logo {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    display: block;
}
.pl-footer-desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 240px;
}
.pl-footer-links {
    display: flex;
    gap: 20px;
    list-style: none;
}
.pl-footer-link {
    font-size: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 0.2s;
}
.pl-footer-link:hover {
    color: var(--text-primary);
}
.pl-footer-copy {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin: 0;
}


/* ==== page-merchant-live.css ==== */
/* ═════════════════════════════════════════════════════════════════════════
   MERCHANT LIVE — Go Live page + Live Stream Viewer
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Live button in merchant header ────────────────────────────────────── */
.mhub-live-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 100px;
    background: var(--live-green);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.mhub-live-btn:hover { opacity: 0.88; }
.mhub-live-btn:active { transform: scale(0.94); }

/* ── Merchant Live Page ────────────────────────────────────────────────── */
.merchant-live-page {
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mlive-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--bg-page);
}

.mlive-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mlive-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s;
}
.mlive-back-btn:hover { background: var(--bg-elevated-2); }

.mlive-header-title {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.mlive-live-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 100px;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    animation: live-pulse-bg 2s ease-in-out infinite;
}

.mlive-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: live-pulse 1.2s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes live-pulse-bg {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* ── Preview area ──────────────────────────────────────────────────────── */
.mlive-preview-area {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.mlive-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mlive-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.5);
    color: var(--text-muted);
}
.mlive-overlay svg { opacity: 0.5; }

.mlive-overlay-text {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* ── Stats row ─────────────────────────────────────────────────────────── */
.mlive-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mlive-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mlive-stat-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}

.mlive-stat-value {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

/* ── Error ─────────────────────────────────────────────────────────────── */
.mlive-error {
    background: rgba(255, 79, 107, 0.1);
    border: 1px solid rgba(255, 79, 107, 0.25);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--danger);
}

/* ── Action buttons ────────────────────────────────────────────────────── */
.mlive-actions {
    display: flex;
    justify-content: center;
}

.mlive-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 36px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s, transform 0.15s;
}
.mlive-btn:active { transform: scale(0.95); }

.mlive-btn--start {
    background: var(--live-green);
    color: var(--text-on-accent);
    box-shadow: 0 0 30px rgba(75, 216, 143, 0.3);
}
.mlive-btn--start:hover { opacity: 0.9; }

.mlive-btn--stop {
    background: var(--danger);
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 79, 107, 0.3);
}
.mlive-btn--stop:hover { opacity: 0.9; }

/* ── Tips ──────────────────────────────────────────────────────────────── */
.mlive-tips {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
}

.mlive-tips-title {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.mlive-tips-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mlive-tips-list li {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    padding-left: 16px;
    position: relative;
}

.mlive-tips-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-lime);
}

/* ── Mode streaming penuh layar (immersive, mirip app live lain) ────────── */
.merchant-live-page.is-streaming {
    max-width: none;
    padding: 0;
    gap: 0;
}

/* Header → overlay transparan di atas video */
.merchant-live-page.is-streaming .mlive-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 14px 16px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
    z-index: 70;
}
.merchant-live-page.is-streaming .mlive-header-title { color: #fff; }
.merchant-live-page.is-streaming .mlive-back-btn {
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.25);
}
/* Badge LIVE di header redundan saat fullscreen (sudah ada di overlay video) */
.merchant-live-page.is-streaming .mlive-header .mlive-live-badge { display: none; }

/* Video memenuhi seluruh layar */
.merchant-live-page.is-streaming .mlive-preview-area {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
    border: none;
    border-radius: 0;
    background: #000;
    z-index: 40;
}

/* Sembunyikan elemen non-esensial + bottom nav saat streaming */
.merchant-live-page.is-streaming .mlive-stats-row,
.merchant-live-page.is-streaming .mlive-tips { display: none; }
.merchant-live-page.is-streaming ~ .bottom-nav { display: none; }

/* Tombol STOP mengambang di bawah */
.merchant-live-page.is-streaming .mlive-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
    z-index: 70;
}
.merchant-live-page.is-streaming .mlive-error {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
    z-index: 70;
}

/* Overlay info (LIVE + viewer) di atas video */
.mlive-stream-overlay {
    position: absolute;
    top: 64px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 60;
}
.mlive-stream-live {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    animation: live-pulse-bg 2s ease-in-out infinite;
}
.mlive-stream-viewers {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
}

/* Toast sementara "{nama} telah join" (muncul sekali lalu hilang) */
.mlive-join-toast {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    padding: 8px 16px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    animation: mlive-toast-in 0.25s ease;
}
@keyframes mlive-toast-in {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ═════════════════════════════════════════════════════════════════════════
   LIVE STREAM VIEWER (embedded in event detail)
   ═════════════════════════════════════════════════════════════════════════ */

.live-viewer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.live-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-elevated);
}

.live-viewer-merchant {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.live-viewer-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.live-viewer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: live-pulse 1.2s ease-in-out infinite;
}

.live-viewer-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.live-viewer-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.live-viewer-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* Overlay yang sekaligus tombol (klik di mana saja untuk gabung) */
.live-viewer-overlay--btn {
    border: none;
    width: 100%;
    cursor: pointer;
    transition: background 0.15s;
}
.live-viewer-overlay--btn:hover { background: rgba(0, 0, 0, 0.42); }
.live-viewer-overlay--btn:active { background: rgba(0, 0, 0, 0.6); }

.live-viewer-play {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--live-green);
    color: var(--text-on-accent);
    padding-left: 3px;
    box-shadow: 0 0 26px rgba(75, 216, 143, 0.45);
    transition: transform 0.15s;
}
.live-viewer-overlay--btn:hover .live-viewer-play { transform: scale(1.06); }

.live-viewer-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--live-green);
    animation: live-spin 0.8s linear infinite;
}

@keyframes live-spin {
    to { transform: rotate(360deg); }
}

/* Section live di halaman detail event */
.ed-live-section .live-viewer {
    margin-top: 6px;
}

.live-viewer-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
}

.live-viewer-viewers {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
}

.live-viewer-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s, transform 0.15s;
}
.live-viewer-btn:active { transform: scale(0.94); }
.live-viewer-btn:disabled { opacity: 0.55; cursor: progress; }

.live-viewer-btn--join {
    background: var(--live-green);
    color: var(--text-on-accent);
}

.live-viewer-btn--leave {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.live-viewer-error {
    margin: 0 14px 10px;
    background: rgba(255, 79, 107, 0.1);
    border: 1px solid rgba(255, 79, 107, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--danger);
}

/* ── Light theme adjustments ────────────────────────────────────────────── */
[data-theme="light"] .mlive-btn--start {
    box-shadow: 0 0 20px rgba(10, 112, 53, 0.2);
}
[data-theme="light"] .mlive-btn--stop {
    box-shadow: 0 0 20px rgba(188, 24, 48, 0.2);
}


/* ── Siaran fullscreen tetap di dalam kolom mobile ──────────────────────────
   Aplikasi ini memakai SATU tampilan: kolom var(--lebar-kolom) terpusat, juga di laptop
   (lihat `web/app/router.rs`). Tiga elemen `position: fixed` di bawah memakai
   `left: 0; right: 0`, jadi tanpa pembatas ini merekalah satu-satunya bagian
   yang melar memenuhi layar — kamera selebar 1920px di atas aplikasi selebar
   var(--lebar-kolom), dengan tombol kontrol terlempar jauh ke tepi.

   `position: fixed` mengacu ke viewport, bukan ke kolomnya, jadi pemusatannya
   harus ditulis di sini dan tak bisa diwarisi dari `<main>`.                */
.merchant-live-page.is-streaming .mlive-header,
.merchant-live-page.is-streaming .mlive-preview-area,
.merchant-live-page.is-streaming .mlive-actions {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--lebar-kolom);
}

/* ==== page-merchant.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   MERCHANT HUB PAGE
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   MERCHANT PAGE — MOBILE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
.merchant-page {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
}
.merchant-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}
.merchant-brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.merchant-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
}
.merchant-title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    letter-spacing: 0.05em;
}

.merchant-stats {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.merchant-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    padding: 20px;
}
.merchant-card--earnings {
    background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
}
.merchant-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    display: block;
    margin-bottom: 8px;
}
.merchant-amount {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 12px;
}
.merchant-trend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.merchant-trend {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--live-green);
    font-weight: 700;
}
.merchant-trend-meta {
    font-size: 10px;
    color: var(--text-muted);
}
.merchant-trend-meta--right {
    margin-left: auto;
}

.merchant-tile-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.merchant-tile {
    background: var(--bg-elevated);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.merchant-tile--accent {
    background: var(--accent-blue);
}
.merchant-tile--accent .merchant-label {
    color: rgba(255, 255, 255, 0.7);
}
.merchant-tile--accent .merchant-tile-value {
    color: #fff;
}
.merchant-tile-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.merchant-tile-value {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    line-height: 1;
}

.merchant-velocity {
    margin: 0 16px 16px;
}
.merchant-section-title {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.merchant-section-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 6px 0 14px;
    line-height: 1.6;
}
.merchant-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.merchant-tab {
    padding: 6px 16px;
    border-radius: 100px;
    background: var(--bg-elevated);
    border: none;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s;
}
.merchant-tab--active {
    background: var(--tab-active-bg);
    color: var(--tab-active-text);
    font-weight: 700;
}
.merchant-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100px;
    padding: 10px 0 0;
}
.merchant-bar {
    flex: 1;
    background: var(--bg-elevated-2);
    border-radius: 4px 4px 0 0;
    min-height: 8px;
    transition: background 0.2s;
}
.merchant-bar--peak {
    background: var(--accent-lime);
}
.merchant-bar:hover {
    background: var(--accent-blue);
}

.merchant-recent {
    padding: 0 20px 100px;
}
.merchant-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.merchant-link {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.1em;
    text-decoration: none;
    font-weight: 700;
}
.merchant-sale-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.merchant-sale {
    display: flex;
    align-items: center;
    gap: 14px;
}
.merchant-sale-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--bg-elevated-2) 0%, var(--accent-blue) 100%);
    flex-shrink: 0;
}
.merchant-sale-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.merchant-sale-event {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.merchant-sale-buyer {
    font-size: 11px;
    color: var(--text-secondary);
}
.merchant-sale-tier {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.merchant-sale-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.merchant-sale-price {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--accent-lime);
    font-weight: 700;
}
.merchant-sale-time {
    font-size: 10px;
    color: var(--text-muted);
}
/* Merchant Hub — tampilan mobile */
.mhub-mobile {
    display: block;
}
.mhub-brand {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 4px;
    color: var(--text-primary);
    text-decoration: none;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mhub-brand-sub {
    font-family: var(--font-body);
    font-size: 8px;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    line-height: 1;
}

/* Sidebar nav */
.mhub-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mhub-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s;
    /* button reset */
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}
.mhub-nav-item:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.mhub-nav-item--active {
    background: rgba(166, 217, 106, 0.1);
    color: var(--accent-lime);
    border: 1px solid rgba(166, 217, 106, 0.15);
}
.mhub-nav-item--active svg {
    stroke: var(--accent-lime);
}
.mhub-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
}
.mhub-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}
.mhub-user-avatar--photo {
    background: transparent;
    border-radius: 50%;
    overflow: hidden;
}
.mhub-user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.mhub-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mhub-user-name {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mhub-user-role {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--accent-lime);
    letter-spacing: 0.1em;
}
.mhub-page-title {
    font-family: var(--font-display);
    font-size: 40px;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    line-height: 1;
}
.mhub-page-sub {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mhub-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 10px 18px;
    min-width: 260px;
}
.mhub-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    width: 100%;
}
.mhub-search-input::placeholder {
    color: var(--text-muted);
}
.mhub-search-wrap svg {
    color: var(--text-muted);
    flex-shrink: 0;
}
.mhub-notif-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.mhub-notif-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.mhub-create-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition:
        opacity 0.2s,
        transform 0.2s,
        box-shadow 0.2s;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(79, 107, 255, 0.35);
}
.mhub-create-btn:hover {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(79, 107, 255, 0.45);
}
.mhub-create-btn svg {
    stroke: currentColor;
}

/* Card base */
.mhub-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    padding: 24px;
}
.mhub-badge-pct {
    font-size: 13px;
    letter-spacing: 0.04em;
    line-height: 1;
}
.mhub-badge-sub {
    font-size: 8px;
    letter-spacing: 0.06em;
    opacity: 0.8;
    line-height: 1.2;
}
.mhub-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 120px;
}
.mhub-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    gap: 4px;
}
.mhub-peak-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--accent-blue);
    white-space: nowrap;
    opacity: 0.9;
}
.mhub-bar {
    width: 100%;
    background: var(--bg-elevated);
    border-radius: 6px 6px 0 0;
    min-height: 8px;
    transition: background 0.2s;
}
.mhub-bar--peak {
    background: var(--accent-blue);
}
.mhub-bar:hover {
    background: var(--accent-lime);
    opacity: 0.8;
}

/* Chart outer wrapper with axis labels */
.mhub-chart-outer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mhub-chart-axis {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mhub-axis-label {
    flex: 1;
    text-align: center;
    font-family: var(--font-body);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}

/* Transactions card — row 2, col 1–2 */
.mhub-transactions-card {
    grid-column: 1;
    grid-row: 2;
}

/* Top events card — row 2, col 2 */
.mhub-events-card {
    grid-column: 2;
    grid-row: 2;
}

/* ── CARD HEADER ────────────────────────────────────────────────────────────── */
.mhub-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.mhub-card-title {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}
.mhub-view-all {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    text-decoration: none;
    letter-spacing: 0.06em;
    transition: color 0.2s;
}
.mhub-view-all:hover {
    color: var(--accent-lime);
}
.mhub-more-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

/* ── TRANSACTIONS TABLE ─────────────────────────────────────────────────────── */
.mhub-table-wrap {
    overflow-x: auto;
}
.mhub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.mhub-table th {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    text-align: left;
    padding: 0 12px 14px 0;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 400;
}
.mhub-table td {
    padding: 14px 12px 14px 0;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}
.mhub-table tr:last-child td {
    border-bottom: none;
}
.mhub-td-id {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.mhub-customer {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mhub-customer-name {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}
.mhub-customer-email {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.mhub-td-amount {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 700;
    white-space: nowrap;
}

/* ── TOP EVENTS LIST ────────────────────────────────────────────────────────── */
.mhub-event-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.mhub-event-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mhub-event-thumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--bg-elevated-2) 0%, var(--accent-blue) 100%);
    overflow: hidden;
}
.mhub-event-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mhub-event-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mhub-event-name {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mhub-event-meta {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.mhub-product-progress-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}
.mhub-product-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}
.mhub-product-progress-fill {
    height: 100%;
    background: var(--accent-lime);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.mhub-event-sold {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* ── TRANSACTION STATUS BADGES ──────────────────────────────────────────────── */
.mhub-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.mhub-status-badge--paid {
    background: rgba(75, 216, 143, 0.1);
    color: var(--live-green);
    border: 1px solid rgba(75, 216, 143, 0.22);
}
.mhub-status-badge--pending {
    background: rgba(255, 173, 43, 0.1);
    color: var(--warning-amber);
    border: 1px solid rgba(255, 173, 43, 0.22);
}
.mhub-status-badge--refunded {
    background: rgba(255, 79, 107, 0.1);
    color: var(--danger);
    border: 1px solid rgba(255, 79, 107, 0.22);
}
.mhub-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ── CREATE EVENT MODAL ─────────────────────────────────────────────────────── */
.mhub-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 16, 0.82);
    backdrop-filter: blur(8px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mhub-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 24px;
    padding: 32px;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: 90dvh;
    overflow-y: auto;
}
.mhub-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mhub-modal-title {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    line-height: 1;
}
.mhub-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.mhub-modal-close:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
.mhub-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mhub-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mhub-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.mhub-form-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.mhub-form-input,
.mhub-form-select,
.mhub-form-textarea {
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.04em;
    outline: none;
    width: 100%;
    transition: border-color 0.2s;
}
.mhub-form-input:focus,
.mhub-form-select:focus,
.mhub-form-textarea:focus {
    border-color: rgba(166, 217, 106, 0.4);
}
.mhub-form-input::placeholder,
.mhub-form-textarea::placeholder {
    color: var(--text-muted);
}
.mhub-form-select {
    appearance: none;
    cursor: pointer;
}
.mhub-form-textarea {
    resize: vertical;
    min-height: 80px;
}
.mhub-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}
.mhub-modal-cancel {
    padding: 12px 24px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s;
}
.mhub-modal-cancel:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
.mhub-modal-submit {
    padding: 12px 28px;
    background: var(--accent-lime);
    border: none;
    border-radius: 100px;
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.mhub-modal-submit:hover {
    opacity: 0.88;
}
.mhub-modal-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mhub-modal-cancel:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mhub-form-error {
    margin-top: 10px;
    background: rgba(255, 80, 80, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: #ff5050;
    letter-spacing: 0.04em;
}

/* ─── MOBILE SUB-PAGE TABS ──────────────────────────────────────────────────── */
.mhub-mobile-tabs {
    display: flex;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 4px;
    width: 100%;
    justify-content: stretch;
}
.mhub-mobile-tabs::-webkit-scrollbar {
    display: none;
}
.mhub-mtab {
    flex: 1;
    padding: 13px 0;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -1px;
    text-align: center;
    white-space: nowrap;
}
.mhub-mtab:hover {
    color: var(--text-primary);
}
.mhub-mtab--active {
    color: var(--accent-lime);
    border-bottom-color: var(--accent-lime);
}

/* ─── TICKETS PAGE ──────────────────────────────────────────────────────────── */
.mhub-tickets {
    padding: 24px 36px 0;
}
.mhub-tstat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
}
.mhub-tstat-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    display: block;
    margin-bottom: 8px;
}
.mhub-tstat-value {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    line-height: 1;
    display: block;
}
.mhub-tstat-change {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--live-green);
    display: block;
    margin-top: 4px;
}
.mhub-filter-tabs {
    display: flex;
    gap: 0;
    background: var(--bg-elevated);
    border-radius: 10px;
    padding: 4px;
}
.mhub-ftab {
    padding: 7px 14px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s;
}
.mhub-ftab--active {
    background: var(--bg-card);
    color: var(--text-primary);
}
.mhub-ticket-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}
.mhub-ticket-venue {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.mhub-fill-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mhub-fill-bar {
    width: 70px;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}
.mhub-fill-bar-inner {
    height: 100%;
    border-radius: 2px;
    background: var(--accent-lime);
}
.mhub-fill-pct {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
}
.mhub-event-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.mhub-event-status-badge--live {
    background: rgba(75, 216, 143, 0.1);
    color: var(--live-green);
    border: 1px solid rgba(75, 216, 143, 0.22);
}
.mhub-event-status-badge--upcoming {
    background: rgba(79, 107, 255, 0.1);
    color: var(--accent-blue);
    border: 1px solid rgba(79, 107, 255, 0.22);
}
.mhub-event-status-badge--soldout {
    background: rgba(255, 79, 107, 0.1);
    color: var(--danger);
    border: 1px solid rgba(255, 79, 107, 0.22);
}
.mhub-ticket-action-btn {
    padding: 6px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.mhub-ticket-action-btn:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
.mhub-acard {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}
.mhub-acard-title {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    margin-bottom: 20px;
    display: block;
}
.mhub-donut-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
}
.mhub-donut {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(
        var(--accent-lime) 0% 42%,
        var(--accent-blue) 42% 80%,
        #b482ff 80% 100%
    );
    position: relative;
    flex-shrink: 0;
}
.mhub-donut::after {
    content: "";
    position: absolute;
    inset: 32px;
    border-radius: 50%;
    background: var(--bg-card);
}
.mhub-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    flex-direction: column;
}
.mhub-donut-center-label {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
    line-height: 1;
}
.mhub-donut-center-sub {
    font-family: var(--font-body);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}
.mhub-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.mhub-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mhub-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mhub-legend-name {
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
}
.mhub-legend-pct {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-primary);
    font-weight: 700;
}
.mhub-traffic-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mhub-traffic-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mhub-traffic-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mhub-traffic-name {
    font-size: 13px;
    color: var(--text-secondary);
}
.mhub-traffic-pct {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-primary);
    font-weight: 700;
}
.mhub-traffic-bar {
    width: 100%;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}
.mhub-traffic-fill {
    height: 100%;
    border-radius: 2px;
}
.mhub-audience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.mhub-audience-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mhub-audience-title {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 2px;
}
.mhub-audience-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mhub-audience-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    width: 64px;
    flex-shrink: 0;
}
.mhub-audience-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}
.mhub-audience-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent-lime);
}
.mhub-audience-val {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-secondary);
    width: 30px;
    text-align: right;
}
.mhub-gender-wrap {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    height: 28px;
}
.mhub-gender-male {
    background: var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 9px;
    color: white;
    font-weight: 700;
}
.mhub-gender-female {
    background: rgba(255, 79, 107, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 9px;
    color: white;
    font-weight: 700;
}
.mhub-perf-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 80px;
    margin-top: 8px;
}
.mhub-perf-bar {
    flex: 1;
    background: var(--bg-elevated);
    border-radius: 3px 3px 0 0;
    transition: background 0.2s;
}
.mhub-perf-bar--peak {
    background: var(--accent-lime);
}
.mhub-perf-bar:hover {
    opacity: 0.8;
}
.mhub-perf-labels {
    display: flex;
    gap: 4px;
    margin-top: 5px;
}
.mhub-perf-label {
    flex: 1;
    text-align: center;
    font-family: var(--font-body);
    font-size: 7px;
    color: var(--text-muted);
}
.mhub-withdraw-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mhub-withdraw-title {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.mhub-withdraw-submit {
    padding: 11px;
    background: var(--accent-lime);
    border: none;
    border-radius: 10px;
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.mhub-withdraw-submit:hover {
    opacity: 0.88;
}
.mhub-history-title {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.mhub-history-table {
    width: 100%;
    border-collapse: collapse;
}
.mhub-history-table th {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-align: left;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
}
.mhub-history-table td {
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
    color: var(--text-secondary);
}
.mhub-history-table tr:last-child td {
    border-bottom: none;
}
.mhub-settle-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}
.mhub-settle-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.mhub-settle-bank {
    display: flex;
    align-items: center;
    gap: 16px;
}
.mhub-bank-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--accent-blue);
}
.mhub-bank-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mhub-bank-name {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}
.mhub-bank-num {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}
.mhub-bank-holder {
    font-size: 12px;
    color: var(--text-secondary);
}
.mhub-settle-edit-btn {
    padding: 8px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s;
}
.mhub-settle-edit-btn:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
.mhub-scard {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}
.mhub-scard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
}
.mhub-scard-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-lime);
    flex-shrink: 0;
}
.mhub-scard-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.mhub-scard-sub {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    display: block;
}
/* Toggle switches */
.mhub-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
}
.mhub-toggle-row:last-child {
    border-bottom: none;
}
.mhub-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mhub-toggle-label {
    font-size: 13px;
    color: var(--text-primary);
}
.mhub-toggle-desc {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
}
.mhub-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.mhub-toggle-switch input {
    display: none;
}
.mhub-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--bg-elevated);
    border-radius: 12px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
}
.mhub-toggle-switch input:checked + .mhub-toggle-track {
    background: var(--accent-lime);
    border-color: var(--accent-lime);
}
.mhub-toggle-track::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
}
.mhub-toggle-switch input:checked + .mhub-toggle-track::after {
    transform: translateX(20px);
}
.mhub-add-team-btn {
    width: 100%;
    padding: 10px;
    background: var(--bg-elevated);
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}
.mhub-add-team-btn:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
/* Security */
.mhub-security-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mhub-security-btn {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}
.mhub-security-btn:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
.mhub-security-badge {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.mhub-security-badge--on {
    background: rgba(75, 216, 143, 0.1);
    color: var(--live-green);
}
.mhub-security-badge--off {
    background: rgba(255, 79, 107, 0.1);
    color: var(--danger);
}

/* ══════════════════════════════════════════════════════════════════════════════
   REDESIGN — MERCHANT HUB PAGE  (pixel-matched to screenshot)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────────────── */
.merchant-page.mhub-mobile {
    padding-bottom: 80px;
    min-height: 100dvh;
    background: transparent;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.mhub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-base);
    position: sticky;
    top: 0;
    z-index: 60;
    border-bottom: 1px solid var(--border-soft);
}
.mhub-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mhub-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mhub-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.mhub-header-title {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--text-primary);
}
.mhub-bell-btn {
    position: relative;
    width: 38px;
    height: 38px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition:
        color 0.2s,
        background 0.2s;
}
.mhub-bell-btn:hover {
    color: var(--text-primary);
    background: var(--bg-elevated-2);
}
.mhub-bell-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    border: 2px solid var(--bg-base);
}

/* ── Revenue / Tickets stats strip ──────────────────────────────────────────── */
.mhub-stats-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin: 14px 16px 0;
    overflow: hidden;
}
.mhub-stat-cell {
    padding: 14px 16px;
}
.mhub-stat-divider {
    width: 1px;
    background: var(--border);
}

.mhub-stat-label {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.mhub-stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: 21px;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mhub-stat-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--live-green);
    margin-top: 5px;
}
.mhub-stat-capacity-bar {
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
    margin: 6px 0 4px;
}
.mhub-stat-capacity-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 2px;
}

/* ── Tab bar ─────────────────────────────────────────────────────────────────── */
.mhub-mobile-tabs {
    display: flex;
    padding: 0 4px;
    margin-top: 14px;
    border-bottom: 1px solid var(--border-soft);
    overflow-x: auto;
    scrollbar-width: none;
}
.mhub-mobile-tabs::-webkit-scrollbar {
    display: none;
}
.mhub-mtab {
    flex: 1;
    padding: 10px 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    white-space: nowrap;
    transition:
        color 0.2s,
        border-color 0.2s;
}
.mhub-mtab--active {
    color: var(--accent-lime);
    border-bottom-color: var(--accent-lime);
}

/* ── Events section ──────────────────────────────────────────────────────────── */
.mhub-products-section {
    padding: 16px 16px 100px;
}

.mhub-products-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.mhub-products-title {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin: 0;
}
.mhub-events-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mhub-live-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--live-green);
}
.mhub-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--live-green);
    box-shadow: 0 0 0 0 rgba(75, 216, 143, 0.6);
    animation: mhub-pulse 1.6s ease-in-out infinite;
}
@keyframes mhub-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(75, 216, 143, 0.6);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(75, 216, 143, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(75, 216, 143, 0);
    }
}

/* FAB add button */
.mhub-new-event-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: none;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(79, 107, 255, 0.4);
    transition:
        transform 0.2s,
        opacity 0.2s;
    flex-shrink: 0;
}
.mhub-new-event-btn:hover {
    transform: scale(1.08);
    opacity: 0.9;
}

/* ── Event card ──────────────────────────────────────────────────────────────── */
.mhub-product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
    transition:
        border-color 0.2s,
        transform 0.15s;
}
.mhub-product-card:hover {
    border-color: var(--border-strong);
}

/* Image area */
.mhub-product-card-img-wrap {
    position: relative;
    overflow: hidden;
}
.mhub-product-card-img {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.mhub-product-card:hover .mhub-product-card-img {
    transform: scale(1.02);
}

/* Status badge — sits on image */
.mhub-product-status {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 100px;
    padding: 4px 12px;
    pointer-events: none;
}
.mhub-product-status--sale {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}
.mhub-product-status--sold {
    background: rgba(20, 20, 36, 0.85);
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
}
.mhub-product-status--presale {
    background: var(--accent-violet);
    color: #fff;
}

/* Body */
.mhub-product-card-body {
    padding: 14px 14px 12px;
}

.mhub-product-card-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.mhub-product-card-title {
    font-family: var(--font-display);
    font-size: 19px;
    letter-spacing: 0.4px;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}
.mhub-product-card-price-block {
    text-align: right;
    flex-shrink: 0;
}
.mhub-product-price-label {
    display: block;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.mhub-product-price-value {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    white-space: nowrap;
}

.mhub-product-card-meta {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0 0 12px;
}

/* Progress */
.mhub-product-progress-section {
    margin-bottom: 12px;
}
.mhub-product-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.mhub-product-progress-key {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.mhub-product-progress-val {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.mhub-product-progress-val--sold {
    color: var(--live-green);
    font-weight: 700;
}

.mhub-product-progress-bar {
    height: 5px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}
.mhub-product-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent-blue);
    transition: width 0.6s ease;
}
.mhub-product-progress-fill--lime {
    background: var(--accent-lime);
}
.mhub-product-progress-fill--sold {
    background: var(--live-green);
}

/* Two-row progress (Early Bird / next tier) */
.mhub-event-progress-bar--thin {
    height: 4px;
    margin-bottom: 4px;
}
.mhub-event-progress-bar--faint {
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
    opacity: 0.45;
}

/* Actions row */
/* Baris sisa stok — dipakai kartu produk di hub merchant DAN panel admin.
 *
 * Kelas ini dirujuk markup sejak lama tetapi tak pernah punya aturan, jadi
 * ikonnya dan teksnya jatuh sebagai teks polos rata-kiri di bawah bilah
 * progres: satu baris yang tampak seperti sisa debug, bukan bagian kartu. */
.mhub-product-remaining-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}
.mhub-product-remaining-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 100px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.mhub-product-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mhub-product-manage-btn {
    /* Dipakai pada <button> DAN pada <A> (`Sunting Produk`). CSS lama memberi
     * garis bawah pada `a` polos, sehingga satu tombol dalam baris yang sama
     * tampil bergaris bawah seperti tautan mentah dan dua lainnya tidak. */
    text-decoration: none;
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition:
        background 0.2s,
        border-color 0.2s;
}
.mhub-product-manage-btn:hover {
    background: var(--bg-elevated-2);
    border-color: var(--border-strong);
}

.mhub-event-icon-btn {
    width: 40px;
    height: 40px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        background 0.2s,
        color 0.2s;
}
.mhub-event-icon-btn:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}

/* ── Empty state (no events yet) ─────────────────────────────────────────────── */
.mhub-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px 32px;
    text-align: center;
}
.mhub-empty-icon-wrap {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--accent-blue);
    position: relative;
}
.mhub-empty-icon-wrap::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px dashed rgba(79, 107, 255, 0.25);
    animation: mhub-empty-spin 12s linear infinite;
}
@keyframes mhub-empty-spin {
    to {
        transform: rotate(360deg);
    }
}

.mhub-empty-title {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin: 0 0 8px;
}
.mhub-empty-body {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 260px;
    margin: 0 0 28px;
}
.mhub-empty-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    border: none;
    border-radius: 100px;
    padding: 13px 28px;
    cursor: pointer;
    transition:
        opacity 0.2s,
        transform 0.2s;
    box-shadow: 0 4px 20px rgba(166, 217, 106, 0.25);
}
.mhub-empty-cta:hover {
    opacity: 0.88;
    transform: scale(1.03);
}

.mhub-empty-tips {
    margin-top: 32px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mhub-empty-tip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 12px 14px;
    text-align: left;
}
.mhub-empty-tip-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-blue);
}
.mhub-empty-tip-title {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px;
}
.mhub-empty-tip-sub {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    display: block;
    line-height: 1.5;
}

/* ── FAB fixed ───────────────────────────────────────────────────────────────── */
.mhub-fab {
    position: fixed;
    bottom: 88px;
    right: max(18px, calc(50vw - 240px + 18px));
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: none;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(79, 107, 255, 0.5);
    z-index: 40;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}
.mhub-fab:hover {
    transform: scale(1.07);
    box-shadow: 0 6px 28px rgba(79, 107, 255, 0.65);
}

/* ── Analytics / Finance / Settings re-use existing .merchant-card styles ───── */

/* ── Fix: merchant-velocity di dalam merchant-stats jangan double padding ── */
.merchant-stats .merchant-velocity {
    margin-left: 0;
    margin-right: 0;
}


/* ── Merchant Hub: kartu preview profil publik + editor ────────────────────── */
.mhub-profile-card { position: relative; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
/* Hero preview (reuse .mp-hero look). Tombol edit di kanan-atas hero. */
.mhub-phero { border-radius: 0; }
.mhub-edit-toggle { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.45); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; cursor: pointer; backdrop-filter: blur(4px); transition: background .15s; }
.mhub-edit-toggle:hover { background: rgba(0,0,0,.65); }

/* Form editor (muncul saat toggle) */
.mhub-edit-form { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; }
.mhub-form-msg { font-size: 13px; color: var(--accent-lime); margin: 10px 0 0; }

/* Tile upload gambar */
.mhub-upload-tile { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 6; border: 1px dashed var(--border); border-radius: 12px; background: var(--bg-elevated); overflow: hidden; cursor: pointer; }
.mhub-upload-tile:hover { border-color: var(--accent-lime); }
.mhub-upload-tile--logo { width: 92px; height: 92px; aspect-ratio: 1 / 1; border-radius: 50%; }
.mhub-upload-tile input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mhub-upload-prev { width: 100%; height: 100%; object-fit: cover; display: block; }
.mhub-upload-hint { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); }

/* ==== page-misc.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   ORDER CREATED & PAYMENT SUCCESS
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   ORDER CREATED PAGE  (.oc-*)
   ═══════════════════════════════════════════════════════════════════════════════ */

.oc-page {
    padding-bottom: 120px;
    width: 100%;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    min-height: 100dvh;
    position: relative;
    background: var(--bg-page);
}

/* Hero */
.oc-hero {
    padding: 28px 20px 20px;
    text-align: center;
}
.oc-hero-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #fff;
    box-shadow: 0 0 32px rgba(79, 107, 255, 0.4);
}
.oc-hero-title {
    font-family: var(--font-display);
    font-size: 48px;
    color: var(--text-soft-accent);
    letter-spacing: 0.04em;
    margin: 0 0 8px;
    line-height: 1;
}
.oc-hero-sub {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Main card */
.oc-card {
    margin: 4px 16px 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
}
.oc-card-header {
    background: linear-gradient(135deg, #0a1240 0%, #0d1a3a 50%, #040820 100%);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-soft);
}
.oc-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-lime);
    box-shadow: 0 0 8px rgba(166, 217, 106, 0.8);
    animation: pulse-dot 1.6s infinite;
}
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.85);
    }
}
.oc-live-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-lime);
}
.oc-event-block {
    padding: 16px 16px 0;
}
.oc-product-name {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--accent-blue);
    letter-spacing: 0.02em;
    line-height: 1.05;
    margin: 0;
    word-break: break-word;
}

/* Ticket section */
.oc-ticket-section {
    padding: 16px;
    border-bottom: 1px solid var(--border-soft);
}
.oc-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.oc-section-head {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--text-muted);
}
.oc-section-badge {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-border);
    border-radius: 100px;
    padding: 3px 10px;
}
.oc-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border-radius: 10px;
    margin-bottom: 6px;
}
.oc-ticket-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.oc-ticket-qty {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.oc-ticket-price {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Price section */
.oc-price-section {
    padding: 16px;
    border-bottom: 1px solid var(--border-soft);
}
.oc-price-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.oc-price-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}
.oc-price-total-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.oc-price-total-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.oc-price-total-amt {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--color-primary);
    letter-spacing: 0.02em;
    line-height: 1;
}
.oc-secure-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--live-green);
    background: rgba(75, 216, 143, 0.1);
    border: 1px solid rgba(75, 216, 143, 0.25);
    border-radius: 100px;
    padding: 4px 8px;
}

/* Meta section */
.oc-meta-section {
    padding: 16px;
}
.oc-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.oc-meta-label {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-body);
    letter-spacing: 0.06em;
}
.oc-meta-val {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 700;
}
.oc-expiry {
    color: var(--warning-amber) !important;
}
.oc-status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--warning-amber);
}
.oc-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--warning-amber);
    box-shadow: 0 0 6px rgba(255, 173, 43, 0.7);
}

/* Pay section */
.oc-pay-section {
    margin: 20px 16px 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.oc-pay-head {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--text-muted);
}
.oc-qr-wrap {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.oc-copy-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 700;
    cursor: pointer;
    justify-content: center;
    transition:
        background 0.2s,
        color 0.2s;
}
.oc-copy-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.oc-or-divider {
    position: relative;
    width: 100%;
    text-align: center;
}
.oc-or-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-soft);
}
.oc-or-divider span {
    position: relative;
    background: var(--bg-card);
    padding: 0 12px;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.oc-bank-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.06em;
    font-weight: 700;
    cursor: pointer;
    justify-content: center;
    transition: background 0.2s;
}
.oc-bank-btn:hover:not(:disabled) {
    background: var(--bg-elevated-2);
}
.oc-bank-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.oc-terms {
    margin: 20px 16px 40px;
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.03em;
}

/* Light theme overrides */
[data-theme="light"] .oc-hero-title {
    color: var(--accent-blue);
}
[data-theme="light"] .oc-product-name {
    color: var(--accent-blue);
}
[data-theme="light"] .oc-price-total-amt {
    color: var(--accent-blue);
}
[data-theme="light"] .oc-card-header {
    background: linear-gradient(135deg, #e0e8ff 0%, #ccd6f0 100%);
}
[data-theme="light"] .oc-live-label {
    color: var(--live-green);
}
[data-theme="light"] .oc-live-dot {
    background: var(--live-green);
}
[data-theme="light"] .oc-section-badge {
    color: var(--live-green);
    background: rgba(10, 112, 53, 0.08);
    border-color: rgba(10, 112, 53, 0.25);
}
[data-theme="light"] .oc-secure-badge {
    color: var(--live-green);
    background: rgba(10, 112, 53, 0.08);
    border-color: rgba(10, 112, 53, 0.25);
}
[data-theme="light"] .oc-qr-wrap {
    box-shadow: 0 4px 20px rgba(0, 0, 20, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PAYMENT SUCCESS PAGE  (.ps-*)
   ═══════════════════════════════════════════════════════════════════════════════ */

.ps-page {
    padding-bottom: 60px;
    width: 100%;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    min-height: 100dvh;
    position: relative;
    background: var(--bg-page);
}

/* Hero */
.ps-hero {
    padding: 48px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}
.ps-check-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow:
        0 0 60px var(--color-primary-glow),
        0 0 120px var(--color-primary-soft);
    animation: ps-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes ps-pop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.ps-check-inner {
    color: var(--color-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ps-title {
    font-family: var(--font-display);
    font-size: 52px;
    color: var(--text-soft-accent);
    letter-spacing: 0.01em;
    margin: 0 0 10px;
    line-height: 1;
    animation: ps-slide-up 0.4s 0.15s ease both;
}
.ps-sub {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
    animation: ps-slide-up 0.4s 0.25s ease both;
}
@keyframes ps-slide-up {
    from {
        transform: translateY(12px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Event summary card */
.ps-card {
    margin: 0 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    animation: ps-slide-up 0.4s 0.3s ease both;
}
.ps-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}
.ps-card-label {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--text-muted);
    display: block;
    margin-bottom: 6px;
}
.ps-card-product {
    font-family: var(--font-display);
    font-size: 34px;
    color: var(--text-soft-accent);
    letter-spacing: 0.01em;
    line-height: 1.05;
    margin-bottom: 12px;
    word-break: break-word;
}
.ps-card-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ps-card-date {
    font-size: 13px;
    color: var(--text-secondary);
    font-family: var(--font-body);
}
.ps-ticket-icon {
    flex-shrink: 0;
    color: var(--text-secondary);
}
.ps-card-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.ps-card-price {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--color-primary);
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Meta card */
.ps-meta-card {
    margin: 16px 16px 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 8px 0;
    animation: ps-slide-up 0.4s 0.38s ease both;
}
.ps-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
}
.ps-meta-divider {
    height: 1px;
    background: var(--border-soft);
    margin: 0 20px;
}
.ps-meta-label {
    font-size: 13px;
    color: var(--text-secondary);
}
.ps-meta-val {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}
.ps-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--live-green);
}
.ps-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--live-green);
    box-shadow: 0 0 8px rgba(75, 216, 143, 0.8);
    animation: pulse-dot 1.6s infinite;
}

/* CTA buttons */
.ps-actions {
    margin: 24px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: ps-slide-up 0.4s 0.45s ease both;
}
.ps-primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 17px;
    background: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
    box-shadow: 0 4px 20px var(--color-primary-glow);
}
.ps-primary-btn:hover {
    opacity: 0.88;
}
.ps-secondary-btn {
    width: 100%;
    padding: 17px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s;
}
.ps-secondary-btn:hover {
    background: var(--bg-elevated-2);
}

/* Light overrides */
[data-theme="light"] .ps-title {
    color: var(--accent-blue);
}
[data-theme="light"] .ps-card-product {
    color: var(--accent-blue);
}
[data-theme="light"] .ps-status {
    color: var(--live-green);
}
[data-theme="light"] .ps-status-dot {
    background: var(--live-green);
}


/* ==== page-notifications.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATIONS PAGE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────────────────────── */
/* pulse-dot uses its own animation to avoid conflict with base.css @keyframes pulse */
@keyframes pulse-dot {
    0%   { opacity: 1; transform: scale(1); }
    50%  { opacity: 0.5; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── Notification List ──────────────────────────────────────────────────────── */
.notif-list {
    padding: 12px 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.notif-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notif-section-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    padding-left: 4px;
}

/* ── Notification Card ──────────────────────────────────────────────────────── */
.notif-card {
    display: flex;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s, border-color 0.2s;
}

.notif-card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(166, 217, 106, 0.18);
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */
.notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notif-icon--alert {
    background: rgba(125, 167, 255, 0.12);
}

.notif-icon--success {
    background: rgba(166, 217, 106, 0.12);
}

.notif-icon--promo {
    background: rgba(183, 140, 255, 0.14);
}

.notif-icon--artist {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-lime));
    padding: 0;
}

.notif-avatar {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff6bff, var(--accent-lime));
}

/* ── Content ────────────────────────────────────────────────────────────────── */
.notif-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notif-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.notif-title {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}

.notif-time {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

/* ── Pill ───────────────────────────────────────────────────────────────────── */
.notif-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 9px;
    border-radius: 100px;
    flex-shrink: 0;
}

.notif-pill--live {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}

.pulse-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-on-accent);
    animation: pulse-dot 1.4s infinite;
}

.pulse-dot--green {
    background: var(--live-green);
    box-shadow: 0 0 8px rgba(75, 216, 143, 0.6);
}

/* ── Body Text ──────────────────────────────────────────────────────────────── */
.notif-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.notif-body strong {
    color: var(--text-primary);
    font-weight: 600;
}

.notif-amount {
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-weight: 700;
}

.notif-highlight {
    color: var(--accent-lime);
    font-weight: 600;
}

.notif-meta {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* ── CTA Button (Ghost) ───────────────────────────────────────────────────── */
.notif-cta {
    align-self: flex-start;
    margin-top: 6px;
    padding: 10px 18px;
    min-height: 40px;
    border-radius: 100px;
    background: transparent;
    border: 1.5px solid var(--accent-lime);
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.notif-cta:active { transform: scale(0.97); }

.notif-cta:hover {
    background: rgba(166, 217, 106, 0.12);
}

/* ── Empty State ────────────────────────────────────────────────────────────── */
.notif-empty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px 80px;
    gap: 18px;
}

.notif-empty-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.notif-empty-bell-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.notif-empty-bell-dot {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-lime);
    border: 2px solid var(--bg-page);
}

.notif-empty-title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin: 0;
}

.notif-empty-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 280px;
    margin: 0;
}

/* ── Empty State CTA (Solid Button) ───────────────────────────────────────── */
.notif-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--accent-lime);
    color: #0a0a14;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s;
    margin-top: 4px;
}

.notif-empty-cta:hover {
    opacity: 0.85;
}

/* ── Empty State Tips ───────────────────────────────────────────────────────── */
.notif-empty-tips {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin-top: 8px;
}

.notif-empty-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
}

.notif-empty-tip-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(166, 217, 106, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-lime);
    flex-shrink: 0;
}

.notif-empty-tip-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notif-empty-tip-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.notif-empty-tip-sub {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .notif-cta {
    border-color: #5a8a00;
    color: #3d6600;
    background: rgba(166, 217, 106, 0.08);
}

[data-theme="light"] .notif-cta:hover {
    background: rgba(166, 217, 106, 0.18);
    border-color: #3d6600;
}

[data-theme="light"] .notif-empty-cta {
    color: #0a0a14;
}

[data-theme="light"] .notif-empty-tip-icon {
    background: rgba(61, 102, 0, 0.1);
    color: #3d6600;
}

[data-theme="light"] .notif-card:hover {
    border-color: rgba(61, 102, 0, 0.25);
}

[data-theme="light"] .notif-amount,
[data-theme="light"] .notif-highlight {
    color: #5a8a00;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICATION DETAIL (nd-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.nd-hero {
    padding: 40px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.nd-check-ring {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    padding: 4px;
    background: conic-gradient(
        var(--accent-lime) 0deg,
        var(--accent-blue) 180deg,
        var(--accent-lime) 360deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 50px rgba(166, 217, 106, 0.25);
}

.nd-check-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--accent-lime);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nd-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.16em;
}

.nd-title {
    font-family: var(--font-display);
    font-size: 38px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    line-height: 1;
}

.nd-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 320px;
    margin: 0;
}

.nd-subtitle strong {
    color: var(--accent-lime);
    font-weight: 600;
}

.nd-card {
    margin: 12px 20px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nd-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.nd-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nd-cell--right {
    text-align: right;
    align-items: flex-end;
}

.nd-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.14em;
}

.nd-val {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

.nd-divider {
    height: 1px;
    background: var(--border-soft);
}

.nd-pay {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nd-pay-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(166, 217, 106, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nd-total {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--accent-lime);
    letter-spacing: 0.04em;
}

.nd-venue-card {
    margin: 0 20px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    overflow: hidden;
}

.nd-venue-img {
    height: 130px;
    background: linear-gradient(
        135deg,
        var(--map-bg-1) 0%,
        var(--bg-elevated-2) 60%,
        var(--accent-blue) 100%
    );
    position: relative;
}

.nd-venue-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--map-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--map-grid) 1px, transparent 1px);
    background-size: 28px 28px;
}

.nd-venue-info {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nd-venue-name {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    letter-spacing: 0.03em;
}

.nd-info-banner {
    margin: 0 20px 24px;
    background: rgba(166, 217, 106, 0.06);
    border: 1px solid rgba(166, 217, 106, 0.18);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.nd-info-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(166, 217, 106, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nd-info-banner p {
    font-size: 12px;
    color: var(--text-soft-accent);
    line-height: 1.6;
    margin: 0;
}

.nd-info-banner strong {
    color: var(--accent-lime);
    font-weight: 600;
}

.nd-cta-wrap {
    padding: 0 20px 32px;
}

.nd-cta-btn {
    width: 100%;
    padding: 16px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.08em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}

.nd-cta-btn:hover {
    opacity: 0.9;
}

/* ── Light Mode Detail Overrides ───────────────────────────────────────────── */
[data-theme="light"] .nd-check-circle {
    color: #0a0a14;
}

[data-theme="light"] .nd-cta-btn {
    color: #0a0a14;
}

[data-theme="light"] .nd-total,
[data-theme="light"] .nd-eyebrow,
[data-theme="light"] .nd-subtitle strong,
[data-theme="light"] .nd-info-banner strong {
    color: #5a8a00;
}

[data-theme="light"] .nd-pay-icon {
    background: rgba(61, 102, 0, 0.12);
}


/* ═══════════════════════════════════════════════════════════════════════
   SHIMMER / SKELETON LOADING
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer-bg {
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    border-radius: 8px;
}

/* ── Shimmer Card ───────────────────────────────────────────────────────── */
.notif-card--shimmer {
    pointer-events: none;
    border-color: var(--border-soft);
}

.notif-card--shimmer .notif-content {
    gap: 10px;
}

.shimmer-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
}

.shimmer-section-label {
    width: 60px;
    height: 10px;
    border-radius: 4px;
    margin-left: 4px;
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    opacity: 0.6;
}

.shimmer-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
}

.shimmer-line--short {
    width: 40%;
    height: 14px;
    margin-bottom: 2px;
}

.shimmer-line--medium {
    width: 75%;
    height: 12px;
    opacity: 0.7;
}

.shimmer-line--long {
    width: 55%;
    height: 12px;
    opacity: 0.5;
}

/* Light mode shimmer override */
[data-theme="light"] .shimmer-icon,
[data-theme="light"] .shimmer-line,
[data-theme="light"] .shimmer-section-label {
    background: linear-gradient(
        90deg,
        #e8e8ec 25%,
        #f0f0f5 50%,
        #e8e8ec 75%
    );
    background-size: 200% 100%;
}


/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATION DETAIL — ENHANCEMENTS
   Append SETELAH page-notifications.css (override via cascade).
   Menambah: state ring (success/pending/media), status chip, animasi masuk,
   judul responsif, banner peringatan kedaluwarsa.
   ═══════════════════════════════════════════════════════════════════════ */

/* Palet lokal (tidak bergantung tema eksternal) */
.nd-hero,
.nd-card,
.nd-venue-card,
.nd-info-banner {
    --nd-amber: #ffb020;
    --nd-amber-soft: rgba(255, 176, 32, 0.14);
    --nd-amber-line: rgba(255, 176, 32, 0.30);
    --nd-amber-glow: rgba(255, 176, 32, 0.28);
}

/* ── Judul responsif (nama event panjang tidak overflow) ─────────────────── */
.nd-title {
    font-size: clamp(26px, 8vw, 38px);
    overflow-wrap: anywhere;
    max-width: 320px;
}

.nd-venue-name {
    overflow-wrap: anywhere;
}

/* ── Ring state: PENDING (amber) ─────────────────────────────────────────── */
.nd-check-ring--pending {
    background: conic-gradient(
        var(--nd-amber) 0deg,
        #ff8a3d 180deg,
        var(--nd-amber) 360deg
    );
    box-shadow: 0 0 50px var(--nd-amber-glow);
}

.nd-check-ring--pending .nd-check-circle {
    background: var(--nd-amber);
}

.nd-check-ring--pending + .nd-eyebrow,
.nd-eyebrow--pending {
    color: var(--nd-amber);
}

/* ── Ring state: MEDIA (foto story) ──────────────────────────────────────── */
.nd-check-ring--media {
    padding: 4px;
    background: conic-gradient(
        var(--accent-lime) 0deg,
        var(--accent-blue) 180deg,
        var(--accent-lime) 360deg
    );
}

.nd-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ── Status chip (ganti teks polos) ──────────────────────────────────────── */
.nd-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 3px 10px;
    border-radius: 100px;
    text-transform: uppercase;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-soft);
    width: fit-content;
}

.nd-status--ok {
    background: rgba(166, 217, 106, 0.12);
    color: var(--accent-lime);
    border-color: rgba(166, 217, 106, 0.28);
}

.nd-status--pending {
    background: var(--nd-amber-soft);
    color: var(--nd-amber);
    border-color: var(--nd-amber-line);
}

.nd-status--muted {
    background: var(--bg-elevated);
    color: var(--text-muted);
    border-color: var(--border-soft);
}

/* chip di sel kanan tetap rata kanan */
.nd-cell--right .nd-status {
    align-self: flex-end;
}

/* ── Banner peringatan (mis. batas waktu bayar) ──────────────────────────── */
.nd-info-banner--warn {
    background: var(--nd-amber-soft);
    border-color: var(--nd-amber-line);
}

.nd-info-banner--warn .nd-info-icon {
    background: var(--nd-amber-soft);
}

.nd-info-banner--warn p {
    color: var(--text-secondary);
}

.nd-info-banner--warn strong {
    color: var(--nd-amber);
}

/* ── Animasi masuk (stagger) ─────────────────────────────────────────────── */
@keyframes nd-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nd-hero,
.nd-card,
.nd-venue-card,
.nd-info-banner,
.nd-cta-wrap {
    animation: nd-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nd-card        { animation-delay: 0.06s; }
.nd-venue-card  { animation-delay: 0.12s; }
.nd-info-banner { animation-delay: 0.16s; }
.nd-cta-wrap    { animation-delay: 0.20s; }

@media (prefers-reduced-motion: reduce) {
    .nd-hero,
    .nd-card,
    .nd-venue-card,
    .nd-info-banner,
    .nd-cta-wrap {
        animation: none;
    }
}

/* ── Light mode ──────────────────────────────────────────────────────────── */
[data-theme="light"] .nd-check-ring--pending .nd-check-circle,
[data-theme="light"] .nd-check-circle {
    color: #0a0a14;
}

[data-theme="light"] .nd-status--ok {
    color: #5a8a00;
    border-color: rgba(61, 102, 0, 0.25);
}

[data-theme="light"] .nd-eyebrow--pending,
[data-theme="light"] .nd-check-ring--pending + .nd-eyebrow,
[data-theme="light"] .nd-status--pending,
[data-theme="light"] .nd-info-banner--warn strong {
    color: #9a6300;
}

/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATION DETAIL — STORY (media besar)
   Append SETELAH page-notifications.css + blok ENHANCEMENTS.
   ═══════════════════════════════════════════════════════════════════════ */

.nd-story {
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* Kartu media tinggi (story 9:16), dibatasi tinggi viewport */
.nd-story-media {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 9 / 16;
    max-height: 68vh;
    border-radius: 26px;
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.40);
}

.nd-story-media img,
.nd-story-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradient bawah hanya untuk foto (jangan menutupi kontrol video) */
.nd-story-media--img::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
    pointer-events: none;
}

.nd-story-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 0 20px;
}

.nd-story .nd-cta-wrap {
    width: 100%;
    padding-top: 6px;
}

[data-theme="light"] .nd-story-media {
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
    .nd-story-media {
        animation: nd-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

/* ── Skeleton khusus story (kartu media tinggi) ──────────────────────────── */
.nd-skel-story-media {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 9 / 16;
    max-height: 68vh;
    border-radius: 26px;
}


/* ==== page-order-detail.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   ORDER DETAIL — Verification Page — page-order-detail.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────────────── */
.vp-page { background: var(--bg-page); min-height: 100vh; }

/* ── Header ─────────────────────────────────────────────────────────────────── */
.vp-header { border-bottom: none !important; }
.vp-header-title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Loading shimmer ─────────────────────────────────────────────────────────── */
.vp-loading {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.vp-shimmer {
    background: linear-gradient(90deg, var(--bg-card) 25%, rgba(255,255,255,0.04) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: vp-shimmer 1.4s infinite;
    border-radius: 16px;
}
@keyframes vp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.vp-shimmer--meta  { height: 64px; }
.vp-shimmer--qr    { height: 320px; }
.vp-shimmer--btn   { height: 52px; border-radius: 100px; }

/* ── Error state ─────────────────────────────────────────────────────────────── */
.vp-error {
    margin: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.vp-error-icon { font-size: 36px; }
.vp-error-msg { font-size: 14px; color: var(--text-secondary); }
.vp-back-link { font-size: 13px; color: var(--accent-blue); text-decoration: none; }

/* ── Content wrapper ─────────────────────────────────────────────────────────── */
.vp-content {
    padding: 8px 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── ORDER ID + TIME REMAINING ───────────────────────────────────────────────── */
.vp-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.vp-meta-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vp-meta-block--right { align-items: flex-end; }
.vp-meta-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.vp-order-code {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--accent-blue);
}
.vp-timer {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 2px;
    color: var(--accent-lime, #a6d96a);
    font-variant-numeric: tabular-nums;
}
.vp-timer svg { color: var(--accent-lime, #a6d96a); flex-shrink: 0; }

/* ── Status badge ────────────────────────────────────────────────────────────── */
.vp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    width: fit-content;
}
.vp-status-badge--pending {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-primary);
}
.vp-status-badge--paid {
    background: rgba(75, 216, 143,0.12);
    border: 1px solid rgba(75, 216, 143,0.25);
    color: #4bd88f;
}
.vp-status-badge--cancelled {
    background: rgba(255,80,80,0.1);
    border: 1px solid rgba(255,80,80,0.2);
    color: #ff8a65;
}
.vp-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-lime, #a6d96a);
    flex-shrink: 0;
    animation: vp-pulse 2s infinite;
}
.vp-status-badge--paid    .vp-status-dot { background: #4bd88f; animation: none; }
.vp-status-badge--cancelled .vp-status-dot { background: #ff8a65; animation: none; }
@keyframes vp-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* ── QR card ─────────────────────────────────────────────────────────────────── */
.vp-qr-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.vp-qr-card-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vp-qr-logo {
    width: 34px;
    height: 34px;
    background: #16151d;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vp-gpn-label {
    font-size: 11px;
    font-weight: 700;
    color: #16151d;
    letter-spacing: 0.1em;
}

/* Dark container for QR code with glow */
.vp-qr-container {
    width: 100%;
    background: #16151d;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 200px;
}
.vp-qr-glow {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(ellipse at center,
        rgba(79, 107, 255, 0.18) 0%,
        rgba(124, 79, 255, 0.12) 40%,
        transparent 70%);
    pointer-events: none;
}
.vp-qr-inner {
    position: relative;
    z-index: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(79, 107, 255, 0.35), 0 0 60px rgba(124, 79, 255, 0.2);
}

.vp-scan-label {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}

/* ── Paid card ───────────────────────────────────────────────────────────────── */
.vp-paid-card {
    background: rgba(75, 216, 143,0.06);
    border: 1px solid rgba(75, 216, 143,0.18);
    border-radius: 20px;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.vp-paid-icon { margin-bottom: 4px; }
.vp-paid-title {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 1px;
    color: var(--text-primary);
}
.vp-paid-method {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}
.vp-paid-date {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}
.vp-view-ticket-btn {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    padding: 11px 28px;
    border-radius: 100px;
    background: rgba(79,107,255,0.18);
    color: #8aabff;
    border: 1px solid rgba(79,107,255,0.3);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}
.vp-view-ticket-btn:hover { opacity: 0.85; }

/* ── Total Payment ───────────────────────────────────────────────────────────── */
.vp-total-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.vp-total-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.vp-total-amount {
    font-family: var(--font-display);
    font-size: 40px;
    letter-spacing: 1px;
    color: var(--text-primary);
    line-height: 1;
}

/* ── Save QR button ──────────────────────────────────────────────────────────── */
.vp-save-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border-radius: 100px;
    background: linear-gradient(135deg, #5b7cff 0%, #7c5fff 100%);
    color: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.12s ease;
}
.vp-save-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.vp-save-btn:active { transform: translateY(0); opacity: 1; }

/* ── How to Pay card ─────────────────────────────────────────────────────────── */
.vp-howto-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 18px 18px 20px;
}
.vp-howto-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--text-primary);
}
.vp-howto-header svg { color: var(--text-secondary); }
.vp-howto-title {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.vp-howto-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vp-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.vp-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-lime, #a6d96a);
    color: #16151d;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.vp-step-text {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}
.vp-step-italic { font-style: italic; }

/* ── Secure footer ───────────────────────────────────────────────────────────── */
.vp-secure-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-bottom: 8px;
}
.vp-secure-footer svg { opacity: 0.5; }


/* ── Virtual Account (order menunggu pembayaran) ────────────────────────────
   Nomor VA menggantikan kartu QR untuk kanal transfer. Angkanya dibuat besar,
   berjarak, dan `user-select: all` supaya sekali sentuh sudah tersalin — ini
   satu-satunya hal yang harus dipindahkan pembeli ke aplikasi banknya, dan
   salah satu digit saja membuat pembayarannya tidak terverifikasi.            */
.vp-va-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 18px;
    margin: 16px 0;
    background: var(--bg-card);
    border: 1px dashed var(--border-strong);
    border-radius: 18px;
}
.vp-va-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.vp-va-num {
    font-family: var(--font-mono, monospace);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    user-select: all;
}
.vp-va-hint {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
    margin: 0;
}

/* Instruksi bebas dari kolom `payment_methods.instruction`. */
.vp-howto-text {
    font-size: 12px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 12px 0 0;
}

/* ==== page-order-tickets.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   YOUR TICKETS PAGE — page-order-tickets.css
   Design: dark bg, bold event title, per-ticket cards with left accent bar,
   concert pulse strip at bottom.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page ────────────────────────────────────────────────────────────────────── */
.yt-page {
    background: var(--bg-page);
    min-height: 100vh;
    padding-bottom: 0;
}

/* ── Header ──────────────────────────────────────────────────────────────────── */
.yt-header { border-bottom: none !important; }
.yt-header-title {
    font-family: var(--font-display, "Bebas Neue", sans-serif);
    font-size: 18px;
    letter-spacing: 0.18em;
    color: var(--text-primary);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
}

/* ── Loading shimmer ─────────────────────────────────────────────────────────── */
.yt-loading {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.yt-shim {
    border-radius: 16px;
    background: linear-gradient(
        90deg,
        var(--bg-card) 25%,
        rgba(255,255,255,0.04) 50%,
        var(--bg-card) 75%
    );
    background-size: 200% 100%;
    animation: yt-shim 1.4s infinite;
}
@keyframes yt-shim {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.yt-shim--hero { height: 100px; }
.yt-shim--card { height: 220px; }

/* ── Empty / Error ───────────────────────────────────────────────────────────── */
.yt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 60px 24px;
}
.yt-empty-icon { font-size: 44px; }
.yt-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.yt-empty-sub {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 260px;
}
.yt-back-link {
    font-size: 13px;
    color: var(--accent-blue);
    text-decoration: none;
    margin-top: 10px;
}

/* ── Content wrapper ─────────────────────────────────────────────────────────── */
.yt-content {
    display: flex;
    flex-direction: column;
}

/* ── Event header ────────────────────────────────────────────────────────────── */
.yt-product-header {
    padding: 14px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.yt-product-name {
    font-family: var(--font-display, "Bebas Neue", sans-serif);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0;
}
.yt-order-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.yt-order-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.yt-order-id-label {
    font-size: 11px;
    color: var(--text-secondary);
}
.yt-order-id-val { color: var(--text-primary); }
.yt-ticket-count {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-blue);
    letter-spacing: 0.01em;
}
.yt-order-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.yt-total-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.yt-total-val {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent-lime);
    letter-spacing: 0.01em;
}
.yt-product-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
}
.yt-product-meta svg { flex-shrink: 0; color: var(--text-muted); }
.yt-meta-sep { color: var(--text-muted); }

/* ── Ticket cards list ───────────────────────────────────────────────────────── */
.yt-tickets-list {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Single ticket card ──────────────────────────────────────────────────────── */
.yt-ticket-card {
    display: flex;
    background: var(--bg-card);
    border: 1px solid rgba(79, 107, 255, 0.18);
    border-left: none; /* accent bar takes left edge */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    position: relative;
}

/* Left accent bar — blue gradient strip matching design */
.yt-ticket-accent {
    width: 5px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--accent-blue) 0%, var(--accent-violet) 100%);
    border-radius: 16px 0 0 16px;
}

.yt-ticket-body {
    flex: 1;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ── Top row: ticket# + status badge ────────────────────────────────────────── */
.yt-ticket-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.yt-ticket-num-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.yt-ticket-num-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.yt-ticket-code {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
}

/* Status badge */
.yt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}
.yt-status-badge--active {
    background: rgba(166, 217, 106, 0.12);
    border: 1px solid rgba(166, 217, 106, 0.25);
    color: var(--accent-lime);
}
.yt-status-badge--used {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
}

/* Status dot */
.yt-ticket-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted);
}
.yt-ticket-dot--active {
    background: var(--accent-lime);
    box-shadow: 0 0 6px var(--accent-lime);
    animation: yt-pulse 2s infinite;
}
.yt-ticket-dot--used { background: var(--text-muted); animation: none; }
.yt-ticket-dot--refunded { background: #ff8a65; animation: none; }
@keyframes yt-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* ── Dotted divider ──────────────────────────────────────────────────────────── */
.yt-ticket-divider {
    height: 1px;
    border-top: 1px dashed rgba(255,255,255,0.08);
}

/* ── Section / row-seat row ──────────────────────────────────────────────────── */
.yt-section-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.yt-section-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.yt-section-block--right { align-items: flex-end; }
.yt-field-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.yt-field-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

/* ── Attendee name ───────────────────────────────────────────────────────────── */
.yt-attendee-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 4px;
    border-top: 1px dashed rgba(255,255,255,0.06);
}
.yt-attendee-name {
    font-size: 22px;
    font-weight: 700;
    font-style: italic;
    color: var(--text-primary);
    letter-spacing: 0.01em;
    line-height: 1.2;
}

/* ── VIEW TICKET button ──────────────────────────────────────────────────────── */
.yt-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    border-radius: 100px;
    background: linear-gradient(135deg, #5b7cff 0%, #7c5fff 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 4px;
    transition: opacity 0.18s ease, transform 0.12s ease;
    border: none;
    cursor: pointer;
}
.yt-view-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.yt-view-btn:active {
    transform: translateY(0);
    opacity: 1;
}

/* ── Concert pulse strip ─────────────────────────────────────────────────────── */
.yt-pulse-strip {
    margin-top: 28px;
    position: relative;
    overflow: hidden;
    background: #08080f;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 80px; /* space for bottom nav */
}

/* Light bars at top */
.yt-pulse-lights {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    display: flex;
    gap: 2px;
    padding: 0 16px;
}
.yt-light {
    flex: 1;
    height: 100%;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(180deg, var(--accent-blue) 0%, transparent 100%);
    animation: yt-flicker 1.8s ease-in-out infinite alternate;
}
@keyframes yt-flicker {
    0%   { opacity: 0.3; }
    100% { opacity: 0.9; }
}

/* Stage SVG */
.yt-pulse-scene {
    width: 100%;
    position: absolute;
    bottom: 72px;
    left: 0;
}
.yt-stage-svg {
    width: 100%;
    height: 160px;
    display: block;
}

/* Tagline */
.yt-pulse-tagline {
    position: relative;
    z-index: 2;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.yt-note-icon {
    color: var(--accent-lime);
    font-size: 16px;
}


/* ==== page-orders.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   ORDERS PAGE — page-orders.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Search bar ─────────────────────────────────────────────────────────────── */
.orders-search {
    margin: 14px 20px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 100px;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.orders-search svg { color: var(--text-muted); flex-shrink: 0; }
.orders-search .search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
}
.orders-search .search-input::placeholder { color: var(--text-muted); }

/* ── Filter tabs ─────────────────────────────────────────────────────────────── */
.filter-tabs {
    display: flex;
    gap: 8px;
    padding: 14px 20px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
    flex-shrink: 0;
    padding: 8px 18px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    border: 1px solid var(--border-soft);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.filter-tab:hover {
    border-color: rgba(255,255,255,0.15);
    color: var(--text-primary);
}
.filter-tab--active {
    background: var(--text-primary);
    color: var(--bg-page);
    border-color: var(--text-primary);
    font-weight: 600;
}

/* ── Orders list ────────────────────────────────────────────────────────────── */
.orders-list {
    padding: 16px 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Order card ─────────────────────────────────────────────────────────────── */
.order-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color 0.18s ease;
}
.order-card:hover { border-color: rgba(255,255,255,0.12); }

.order-card-top {
    display: flex;
    gap: 14px;
    padding: 16px 16px 14px;
    align-items: flex-start;
}

/* Thumbnail */
.order-thumb {
    width: 76px;
    height: 76px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-elevated-2, #1e1e30);
}
.order-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.order-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(79,107,255,0.15) 0%, rgba(124,79,255,0.15) 100%);
    color: var(--text-muted);
}

/* Event info column */
.order-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.order-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.order-product-name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.order-date-venue {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.3;
}
.order-date-venue svg { flex-shrink: 0; color: var(--text-muted); }

/* Status badges */
.order-status-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    white-space: nowrap;
}
.order-status-badge--paid {
    background: rgba(75, 216, 143, 0.14);
    color: #4bd88f;
    border: 1px solid rgba(75, 216, 143, 0.28);
}
.order-status-badge--pending {
    background: rgba(180, 130, 255, 0.14);
    color: #c9a0ff;
    border: 1px solid rgba(180, 130, 255, 0.28);
}
.order-status-badge--cancelled {
    background: rgba(255, 138, 101, 0.1);
    border: 1px solid rgba(255, 138, 101, 0.22);
    color: #ff8a65;
    font-size: 10px;
    letter-spacing: 0.06em;
}

/* Divider */
.order-card-divider {
    height: 1px;
    background: var(--border-soft);
    margin: 0 16px;
}

/* Footer: total + action */
.order-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 14px;
    gap: 12px;
}
.order-total-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.order-total-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.order-total-price {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

/* Action buttons */
.order-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s ease, transform 0.12s ease;
    white-space: nowrap;
}
.order-action-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.order-action-btn--view {
    background: rgba(79, 107, 255, 0.14);
    color: #8aabff;
    border: 1px solid rgba(79, 107, 255, 0.3);
}
.order-action-btn--pay {
    background: var(--accent-lime, #a6d96a);
    color: #16151d;
}

/* ── Order card shimmer ──────────────────────────────────────────────────────── */
.shim-order-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    overflow: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.shim-order-card-top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.shim-ord-thumb {
    width: 76px;
    height: 76px;
    border-radius: 14px;
    flex-shrink: 0;
}
.shim-ord-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shim-ord-name { height: 18px; width: 70%; border-radius: 8px; }
.shim-ord-date { height: 13px; width: 55%; border-radius: 6px; }
.shim-ord-divider { height: 1px; margin: 0; border-radius: 1px; }
.shim-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.shim-ord-amount { height: 20px; width: 35%; border-radius: 8px; }
.shim-ord-btn { height: 38px; width: 30%; border-radius: 100px; }


/* ==== page-profile.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   PROFILE PAGE
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── PROFILE ────────────────────────────────────────────────────────────────── */
.profile-glow {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 280px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(100, 200, 100, 0.07) 0%, transparent 70%);
}
.avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 24px;
    position: relative;
    z-index: 1;
}
.avatar-ring {
    position: relative;
    width: 110px;
    height: 110px;
}
.avatar-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 3px solid var(--accent-lime);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow:
        0 0 0 4px rgba(166, 217, 106, 0.08),
        0 0 40px rgba(166, 217, 106, 0.12);
}
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-edit {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-lime);
    border: 2px solid var(--bg-page);
    cursor: pointer;
    color: var(--text-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s, transform 0.1s;
}
.avatar-edit:hover { opacity: 0.9; transform: scale(1.05); }
.profile-name {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    line-height: 1;
}
.profile-email {
    font-size: 13px;
    color: var(--text-secondary);
}
.stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 20px 24px;
}
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stat-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
}
.stat-value {
    font-family: var(--font-display);
    font-size: 44px;
    color: var(--accent-blue);
    line-height: 1;
}
.stat-value--accent {
    color: var(--accent-lime);
}
/* Jarak BAWAH 28px, dan di situlah letak perbaikannya.
 *
 * Nilainya dulu `0 20px` — nol di bawah. Satu-satunya jarak vertikal di
 * halaman ini datang dari `margin-bottom` label, yang memisahkan label dari
 * daftarnya, BUKAN satu bagian dari apa pun yang menyusul. Akibatnya berbeda-
 * beda tergantung apa yang kebetulan ada di bawahnya:
 *
 *   • bagian berikutnya  → labelnya menempel ke kalimat penutup bagian
 *                          sebelumnya ("Belum ada story…" bertumpuk "BELANJA");
 *   • kartu poin ungu    → menempel RAPAT ke kartu "Sign Out" di atasnya,
 *                          karena `.profile-points-card` juga bermargin-atas 0.
 *
 * Diselesaikan di SATU tempat: bagian menu membawa jarak bawahnya sendiri,
 * jadi apa pun yang menyusul otomatis dapat ruang yang sama. Versi sebelumnya
 * memakai selektor tetangga `.menu-section + .menu-section`, dan itu hanya
 * menutup kasus bagian-ke-bagian — kartu poin di ujung daftar tetap menempel. */
.menu-section {
    padding: 0 20px 28px;
}
.menu-section-label {
    display: block;
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    margin-bottom: 12px;
}
.menu-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
    text-align: left;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}
.menu-item:hover {
    background: var(--bg-card-hover);
}
.menu-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.menu-item-icon--danger {
    background: rgba(255, 79, 107, 0.1);
    color: var(--danger);
}
.menu-item-label {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
}
.menu-item--danger {
    border-color: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PROFILE PAGE — misc helpers
   ══════════════════════════════════════════════════════════════════════════════ */
.profile-tier-badge {
    display: inline-block;
    margin-top: 8px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 5px 14px;
    border-radius: 100px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TICKETS PAGE — hero row & filter buttons
   ══════════════════════════════════════════════════════════════════════════════ */
.tickets-hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 20px 12px;
    gap: 16px;
    flex-wrap: wrap;
}
.tickets-title {
    font-family: var(--font-display);
    font-size: 48px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    line-height: 0.9;
}
.tickets-sub {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-top: 6px;
}
.tickets-filter-btns {
    display: flex;
    gap: 8px;
    align-self: flex-start;
    margin-top: 4px;
}
.tk-filter-btn {
    padding: 9px 18px;
    border-radius: 100px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.tk-filter-btn:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
.tk-filter-btn--active {
    background: var(--text-primary);
    color: var(--bg-base);
    border-color: var(--text-primary);
}
.tickets-list--mobile-only {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 20px 24px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PROFILE PAGE — POINTS CARD & EXPERIENCE SECTION
   Style mobile: kartu vertikal penuh, bukan sidebar desktop
   ══════════════════════════════════════════════════════════════════════════════ */

.profile-points-card {
    margin: 0 20px 20px;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-violet) 100%);
    border-radius: 20px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-points-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.65);
}
.profile-points-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.profile-points-num {
    font-family: var(--font-display);
    font-size: 52px;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1;
}
.profile-points-unit {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
}
.profile-redeem-btn {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 100px;
    padding: 10px 20px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.2s;
}
.profile-redeem-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Kalimat "belum ada story" adalah penutup bagian, bukan baris di tengah
 * daftar — beri ruang di bawahnya supaya tak menempel ke apa pun. */
.my-stories-hint {
    font-size: 13px;
    color: var(--text-muted, rgba(255,255,255,0.6));
    padding: 8px 2px 4px;
    line-height: 1.5;
}
.my-stories-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    /* sembunyikan scrollbar (tetap bisa di-geser) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.my-stories-grid::-webkit-scrollbar { display: none; }
.my-story-cell {
    position: relative;
    flex: 0 0 auto;
    width: 92px;
    aspect-ratio: 9 / 16;
    scroll-snap-align: start;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
}
.my-story-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.my-story-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    border-radius: 99px;
    color: #fff;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
}
.my-story-badge--active {
    background: var(--accent-lime, #b6ff3a);
    color: #10240a;
}
.my-story-del {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    color: #fff;
    background: rgba(220, 38, 38, 0.85);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.my-story-del:hover {
    background: rgba(220, 38, 38, 1);
    transform: scale(1.08);
}
.my-story-del:active { transform: scale(0.94); }

/* ==== page-pulse-apply.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   PAGE — PARTNER WITH PULSE (/pulse-apply)
   Prefix: .pa-   |  Dark default + [data-theme="light"] overrides
   ═══════════════════════════════════════════════════════════════════════ */

.pa-page {
    position: relative;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    min-height: 100dvh;
    background: var(--bg-page);
    color: var(--text-primary);
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 12px));
    overflow-x: hidden;
}

/* Glow halus di belakang hero (dark only) */
.pa-page::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(79, 107, 255, 0.16) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

/* ── TOP BAR ─────────────────────────────────────────────────────────────── */
.pa-topbar {
    /* `backdrop-filter` dibuang: latarnya ≥ 95% buram, jadi yang diburamkan
       di belakangnya tak pernah terlihat — yang tersisa hanya biaya baca-balik
       + blur + komposit ulang, pada bilah yang menempel di layar sepanjang
       waktu dan ikut dirasterisasi tiap potretan transisi. */
    position: sticky;
    top: 0;
    z-index: var(--z-header, 40);
    display: flex;
    align-items: center;
    gap: 14px;
    height: 56px;
    padding: 0 18px;
    background: var(--overlay-blur);
    border-bottom: 1px solid var(--border);
}
.pa-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    text-decoration: none;
    width: 28px;
    height: 28px;
}
.pa-topbar-title {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 2.5px;
    color: var(--accent-info);
}
.pa-topbar-spacer {
    flex: 1;
}

/* ── MAIN ────────────────────────────────────────────────────────────────── */
.pa-main {
    position: relative;
    z-index: 1;
    padding: 30px 22px 0;
    animation: fadeUp 0.45s ease both;
}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.pa-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid color-mix(in srgb, var(--accent-lime) 55%, transparent);
    border-radius: 999px;
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.pa-title {
    margin: 18px 0 0;
    font-family: var(--font-display);
    font-size: 62px;
    line-height: 0.9;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-primary);
}
.pa-title-accent {
    color: var(--text-soft-accent);
}

.pa-sub {
    margin: 18px 0 0;
    max-width: 360px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.pa-hl {
    color: var(--accent-lime);
    font-weight: 700;
}

/* ── STATS ───────────────────────────────────────────────────────────────── */
.pa-stats {
    display: flex;
    gap: 52px;
    margin-top: 28px;
}
.pa-stat {
    display: flex;
    flex-direction: column;
}
.pa-stat-num {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1;
    color: var(--text-primary);
}
.pa-stat-num--lime {
    color: var(--accent-lime);
}
.pa-stat-label {
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* ── FORM CARD ───────────────────────────────────────────────────────────── */
.pa-form-card {
    margin-top: 30px;
    padding: 26px 22px;
    border-radius: 26px;
    border: 1px solid var(--border-soft);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.045) 0%,
        rgba(255, 255, 255, 0.012) 100%
    );
}

.pa-field + .pa-field {
    margin-top: 20px;
}
.pa-label {
    display: block;
    margin-bottom: 9px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Input pill */
.pa-input {
    width: 100%;
    height: 56px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}
.pa-input::placeholder {
    color: var(--text-muted);
}
.pa-input:focus,
.pa-input--prefixed:focus-within {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 22%, transparent);
}

/* Input dengan prefix "Rp" */
.pa-input--prefixed {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pa-prefix {
    flex-shrink: 0;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 14px;
}
.pa-input-bare {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
}
.pa-input-bare::placeholder {
    color: var(--text-muted);
}

/* ── AGREEMENT ───────────────────────────────────────────────────────────── */
.pa-agree {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin-top: 22px;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}
.pa-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    border: 1.8px solid var(--border-strong);
    display: grid;
    place-items: center;
    color: transparent;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}
.pa-agree--on .pa-check {
    background: var(--accent-lime);
    border-color: var(--accent-lime);
    color: var(--text-on-accent);
}
.pa-agree-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.pa-agree-link {
    color: var(--text-primary);
    font-weight: 600;
}

/* ── SUBMIT ──────────────────────────────────────────────────────────────── */
.pa-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 60px;
    margin-top: 22px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: #0a1030;
    background: linear-gradient(100deg, #b9c4ff 0%, #5b78ff 55%, #3a5bff 100%);
    box-shadow: 0 12px 32px rgba(79, 107, 255, 0.35);
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}
.pa-submit:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 38px rgba(79, 107, 255, 0.45);
}
.pa-submit:not(:disabled):active {
    transform: translateY(0);
}
.pa-submit:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .pa-page::before {
    display: none;
}
[data-theme="light"] .pa-form-card {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: var(--shadow-card);
}
[data-theme="light"] .pa-input {
    background: #eef0f8;
    border-color: var(--border);
}
[data-theme="light"] .pa-submit {
    color: #ffffff;
    background: linear-gradient(100deg, #2fa563 0%, #268a50 60%, #1f7a45 100%);
    box-shadow: 0 10px 26px rgba(31, 122, 69, 0.28);
}
[data-theme="light"] .pa-check {
    border-color: var(--border-strong);
}


/* ==== page-scan.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   SCAN PAGE
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   SCAN PAGE  /merchant/scan
   ══════════════════════════════════════════════════════════════════════════════ */

/* Scan button di merchant header */
.mhub-scan-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.2s;
}
.mhub-scan-btn:hover {
    opacity: 0.88;
}

/* Page layout */
.scan-page {
    background: var(--bg-page);
    width: 100%;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    min-height: 100dvh;
    position: relative;
}

.scan-header {
    /* `backdrop-filter` dibuang: latarnya ≥ 95% buram, jadi yang diburamkan
       di belakangnya tak pernah terlihat — yang tersisa hanya biaya baca-balik
       + blur + komposit ulang, pada bilah yang menempel di layar sepanjang
       waktu dan ikut dirasterisasi tiap potretan transisi. */
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--overlay-blur);
    border-bottom: 1px solid var(--border);
}
.scan-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.scan-header-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.scan-header-sub {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* Body */
.scan-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 16px 40px;
}

/* Viewfinder */
.scan-viewfinder-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.scan-viewfinder {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    max-height: 320px;
    border-radius: 20px;
    overflow: hidden;
    background: #0a0a0a;
    border: 1.5px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
.scan-viewfinder--active {
    border-color: var(--accent-lime);
}

.scan-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    opacity: 0;
    pointer-events: none;
}
.scan-video--active {
    opacity: 1;
}

/* Corner frame overlay */
.scan-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.scan-frame-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: var(--accent-lime);
    border-style: solid;
    border-width: 0;
}
.scan-frame-corner--tl {
    top: 16px;
    left: 16px;
    border-top-width: 3px;
    border-left-width: 3px;
    border-radius: 4px 0 0 0;
}
.scan-frame-corner--tr {
    top: 16px;
    right: 16px;
    border-top-width: 3px;
    border-right-width: 3px;
    border-radius: 0 4px 0 0;
}
.scan-frame-corner--bl {
    bottom: 16px;
    left: 16px;
    border-bottom-width: 3px;
    border-left-width: 3px;
    border-radius: 0 0 0 4px;
}
.scan-frame-corner--br {
    bottom: 16px;
    right: 16px;
    border-bottom-width: 3px;
    border-right-width: 3px;
    border-radius: 0 0 4px 0;
}

/* Scanning line animation */
.scan-line {
    position: absolute;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--accent-lime);
    box-shadow: 0 0 8px var(--accent-lime);
    animation: scan-sweep 2s ease-in-out infinite;
}
@keyframes scan-sweep {
    0% {
        top: 16px;
    }
    50% {
        top: calc(100% - 16px);
    }
    100% {
        top: 16px;
    }
}

/* Placeholder */
.scan-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px;
}
.scan-placeholder-text {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}

/* Processing overlay */
.scan-processing {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
}
.scan-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-lime);
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Controls */
.scan-controls {
    display: flex;
    justify-content: center;
}
.scan-start-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 32px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: opacity 0.2s;
}
.scan-start-btn:hover {
    opacity: 0.88;
}
.scan-stop-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 100px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1.5px solid var(--border);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: background 0.2s;
}

/* Result card */
.scan-result {
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.scan-result--valid {
    background: rgba(100, 255, 100, 0.1);
    border: 1.5px solid rgba(100, 255, 100, 0.3);
}
.scan-result--used {
    background: rgba(255, 200, 50, 0.1);
    border: 1.5px solid rgba(255, 200, 50, 0.3);
}
.scan-result--invalid {
    background: rgba(255, 80, 80, 0.1);
    border: 1.5px solid rgba(255, 80, 80, 0.3);
}

.scan-result-icon {
    font-size: 40px;
}
.scan-result-title {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.scan-result-detail {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-line;
}
.scan-again-btn {
    margin-top: 4px;
    padding: 10px 28px;
    border-radius: 100px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: background 0.2s;
}
.scan-again-btn:hover {
    background: var(--bg-card-hover);
}

/* Manual input */
.scan-manual-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.scan-manual-label {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-align: center;
}
.scan-manual-row {
    display: flex;
    gap: 8px;
}
.scan-manual-input {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 14px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.scan-manual-input:focus {
    border-color: var(--accent-lime);
}
.scan-manual-input::placeholder {
    color: var(--text-muted);
}
.scan-manual-btn {
    padding: 11px 18px;
    border-radius: 12px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s;
}
.scan-manual-btn:hover {
    opacity: 0.88;
}
.scan-manual-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ==== page-story.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   STORY SYSTEM — Complete CSS
   Story Bar · Story Viewer · Story Creator · Draggable Overlay
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   STORY BAR
   ───────────────────────────────────────────────────────────────────────── */
.story-bar {
    display: flex;
    gap: 4px;
    padding: 14px 16px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.story-bar::-webkit-scrollbar { display: none; }

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.story-add-btn,
.story-user-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* ── Avatar ring base ── */
.story-avatar-ring {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    padding: 2.5px;
    background: conic-gradient(var(--accent-lime) 0%, var(--accent-blue) 50%, var(--accent-violet) 100%);
    transition: transform 0.16s ease, opacity 0.16s ease;
}
.story-add-btn:active .story-avatar-ring,
.story-user-btn:active .story-avatar-ring {
    transform: scale(0.92);
    opacity: 0.8;
}

.story-avatar-ring--add {
    background: linear-gradient(135deg, var(--accent-lime) 0%, var(--accent-blue) 100%);
}

.story-avatar-ring--viewed {
    background: var(--bg-elevated-2);
}

/* ════════════════════════════════════════════════════════════════════════
   UPLOADING RING — Arc spinner + glow (Dark mode default)
   ════════════════════════════════════════════════════════════════════════ */
.story-avatar-ring--uploading {
    background: rgba(255, 255, 255, 0.08);
    animation: none !important;
}

.story-avatar-ring--uploading::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--accent-lime, #a6d96a);
    border-right-color: rgba(166, 217, 106, 0.38);
    animation: story-arc-spin 0.88s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    pointer-events: none;
    z-index: 1;
}

.story-avatar-ring--uploading::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: story-glow-pulse 1.5s ease-in-out infinite;
}

@keyframes story-arc-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes story-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(166, 217, 106, 0); }
    50%       { box-shadow: 0 0 0 5px rgba(166, 217, 106, 0.18); }
}

/* Inner content — must NOT spin */
.story-avatar-ring--uploading > .story-avatar-inner {
    animation: none !important;
    transform: none !important;
}

.story-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-lime, #a6d96a);
    animation: story-upload-icon-breathe 1.4s ease-in-out infinite;
}

@keyframes story-upload-icon-breathe {
    0%, 100% { opacity: 1;    transform: scale(1);    }
    50%       { opacity: 0.60; transform: scale(0.86); }
}

/* Plus badge on "Cerita Anda" */
.story-avatar-ring--add .story-avatar-inner::after {
    content: "+";
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 20px;
    height: 20px;
    background: var(--accent-blue, #0984e3);
    border-radius: 50%;
    border: 2px solid var(--bg-base, #000);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    pointer-events: none;
}

.story-avatar-ring--uploading.story-avatar-ring--add .story-avatar-inner::after {
    display: none;
}

.story-avatar-inner { position: relative; }

.story-avatar-inner,
.story-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    border: 2.5px solid var(--bg-base);
    background: var(--bg-elevated);
    object-fit: cover;
}

.story-avatar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-accent);
    background: linear-gradient(135deg, var(--accent-lime) 0%, var(--accent-blue) 100%);
}

.story-username {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-secondary);
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.story-username--add { transition: color 0.3s ease; }

.story-shim-ring {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    margin: 4px 6px;
}

.story-shim-name {
    width: 44px;
    height: 8px;
    border-radius: 4px;
    margin-top: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────
   STORY VIEWER (sv-*)
   ───────────────────────────────────────────────────────────────────────── */
.sv-portal { display: contents; }

.sv-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: var(--z-story, 900);
}

/* ── Scene: kolom story fixed + perspective utk cube swipe antar-user ──
   Drag horizontal merotasi .sv-cube; face tetangga (preview user sebelah)
   muncul di sisi kubus — persis transisi story Instagram. */
.sv-scene {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    height: 100dvh;
    z-index: var(--z-story-ui, 901);
    perspective: 1400px;
    overflow: hidden;
    background: transparent;
    animation: sv-in 0.22s ease;
    will-change: transform;
}

.sv-cube {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Saat drag aktif (.is-3d), face aktif maju setengah lebar kubus.
   --sv-w di-set dari offsetWidth aktual pada touchstart. */
.sv-cube.is-3d .sv-container {
    transform: rotateY(0deg) translateZ(calc(var(--sv-w, 480px) / 2));
    backface-visibility: hidden;
}

.sv-face-neighbor {
    position: absolute;
    inset: 0;
    background: #000;
    overflow: hidden;
    backface-visibility: hidden;
}
.sv-face-prev { transform: rotateY(-90deg) translateZ(calc(var(--sv-w, var(--lebar-kolom)) / 2)); }
.sv-face-next { transform: rotateY(90deg) translateZ(calc(var(--sv-w, var(--lebar-kolom)) / 2)); }

/* Dim tipis di face tetangga — depth cue ala Instagram */
.sv-face-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
}

.sv-face-id {
    position: absolute;
    top: max(40px, env(safe-area-inset-top, 0px) + 34px);
    left: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}
.sv-face-avatar { width: 42px; height: 42px; }
.sv-face-username {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.sv-container {
    position: absolute;
    inset: 0;
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: none;
}

@keyframes sv-in {
    from { opacity: 0; transform: translateX(-50%) scale(0.97); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ── EXIT ANIMATION ── */
.sv-container.is-exiting {
    animation: sv-out 0.32s cubic-bezier(0.32, 0.94, 0.6, 1.0) forwards;
    pointer-events: none;
}

@keyframes sv-out {
    0%   { opacity: 1; transform: translateX(-50%) scale(1);    filter: blur(0px); }
    60%  { opacity: 0.85; transform: translateX(-50%) scale(0.96); }
    100% { opacity: 0; transform: translateX(-50%) scale(0.92); filter: blur(2px); }
}

.sv-progress-row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    gap: 4px;
    padding: max(12px, env(safe-area-inset-top, 0px) + 8px) 10px 8px;
}

.sv-seg {
    flex: 1;
    height: 2.5px;
    border-radius: 2px;
    background: rgba(255,255,255,0.3);
    overflow: hidden;
}

.sv-seg-fill {
    height: 100%;
    background: var(--accent-lime);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
}

.sv-header {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
}

.sv-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.sv-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Menu ⋮ pemilik story (opsi hapus) ─────────────────────────────── */
.sv-owner {
    position: relative;
    display: flex;
    align-items: center;
}
.sv-owner-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}
.sv-owner-btn:hover { background: rgba(255, 255, 255, 0.14); }
.sv-owner-menu {
    /* `backdrop-filter` dibuang: latarnya ≥ 95% buram, jadi yang diburamkan
       di belakangnya tak pernah terlihat — yang tersisa hanya biaya baca-balik
       + blur + komposit ulang, pada bilah yang menempel di layar sepanjang
       waktu dan ikut dirasterisasi tiap potretan transisi. */
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 30;
    min-width: 168px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(28, 28, 30, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    animation: sv-owner-pop 0.14s ease;
}
@keyframes sv-owner-pop {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sv-owner-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}
.sv-owner-item:hover { background: rgba(255, 255, 255, 0.08); }
.sv-owner-item--danger { color: #ff453a; }
.sv-owner-item--danger:hover { background: rgba(255, 69, 58, 0.14); }

.sv-avatar-ring {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 2px;
    flex-shrink: 0;
    background: conic-gradient(var(--accent-lime) 0%, var(--accent-blue) 50%, var(--accent-violet) 100%);
}

.sv-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #000;
    display: block;
}

.sv-user-info { min-width: 0; overflow: hidden; }

.sv-username {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.sv-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sv-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.sv-close-btn:hover { background: rgba(0,0,0,0.65); }

.sv-media-area {
    flex: 1;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.sv-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* ── Image loading UX ── */
.sv-img-shell {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

@keyframes sv-shimmer-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.sv-shimmer {
    position: absolute;
    inset: 0;
    background: #111118;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    overflow: hidden;
}

.sv-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.06) 40%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.06) 60%,
        transparent 100%
    );
    animation: sv-shimmer-slide 1.4s ease-in-out infinite;
}

.sv-img-loading .sv-shimmer { opacity: 1; }

.sv-img-hidden { opacity: 0; }

@keyframes sv-img-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sv-img-visible {
    opacity: 1;
    animation: sv-img-fadein 0.25s ease-out forwards;
}

.sv-overlay-text {
    position: absolute;
    transform-origin: center;
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
    pointer-events: none;
    user-select: none;
    white-space: pre-wrap;
}

.sv-overlay-sticker {
    position: absolute;
    transform-origin: center;
    font-size: 36px;
    pointer-events: none;
    user-select: none;
}

.sv-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 28px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.sv-actions--readonly {
    padding: 10px 16px 28px;
    /* `flex-end`, bukan `space-between`. Bar ini dulu berisi dua hal —
     * hitungan penonton di kiri, tombol suka di kanan — dan `space-between`
     * yang memisahkannya. Sejak hitungan penontonnya dibuang (angkanya memang
     * dikarang), `space-between` tak lagi memisahkan apa pun: ia hanya
     * menggeser tombol suka ke kiri, jauh dari tempat yang sudah dikenal
     * jempol pengguna. */
    justify-content: flex-end;
}

.sv-pulse-input {
    flex: 1;
    padding: 12px 16px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 14px;
    outline: none;
    backdrop-filter: blur(8px);
}
.sv-pulse-input::placeholder { color: rgba(255,255,255,0.55); }
.sv-pulse-input:focus { border-color: rgba(255,255,255,0.5); }

.sv-action-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    backdrop-filter: blur(6px);
    transition: background 0.15s;
}
.sv-action-btn:hover { background: rgba(255,255,255,0.25); }

.sv-like-btn {
    transition: background 0.2s cubic-bezier(0.22,1,0.36,1),
                transform 0.2s cubic-bezier(0.22,1,0.36,1),
                color 0.2s ease !important;
}
.sv-like-btn:active { transform: scale(0.82) !important; }

.sv-like-btn--active {
    background: rgba(255,59,92,0.35) !important;
    color: #ff3b5c !important;
    border: 1px solid rgba(255,59,92,0.4) !important;
    animation: sv-like-pop 0.4s cubic-bezier(0.22,1,0.36,1);
}

@keyframes sv-like-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); }
    60%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

.sv-tap-zone {
    position: absolute;
    top: 60px;
    bottom: 90px;
    width: 28%;
    z-index: 8;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.sv-tap-zone--left  { left: 0;  justify-content: flex-start; padding-left: 10px; }
.sv-tap-zone--right { right: 0; justify-content: flex-end;   padding-right: 10px; }

.sv-tap-hint {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0);
    transition: background 0.2s ease, color 0.2s ease;
}

.sv-tap-zone:hover .sv-tap-hint {
    background: rgba(0,0,0,0.28);
    color: rgba(255,255,255,0.7);
}

/* ── Instagram-style Event Detail Bottom Sheet ── */
.sv-detail-overlay {
    position: absolute;
    inset: 0;
    z-index: 28;
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    animation: sv-detail-overlay-in 0.22s ease both;
    cursor: pointer;
}

@keyframes sv-detail-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sv-detail-sheet {
    /* `backdrop-filter` dibuang: latarnya ≥ 95% buram, jadi yang diburamkan
       di belakangnya tak pernah terlihat — yang tersisa hanya biaya baca-balik
       + blur + komposit ulang, pada bilah yang menempel di layar sepanjang
       waktu dan ikut dirasterisasi tiap potretan transisi. */
    background: rgba(10,10,20,0.97);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    overflow: hidden;
    cursor: default;
    animation: sv-detail-sheet-up 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sv-detail-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.sv-detail-handle-bar {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.26);
    border-radius: 3px;
    margin: 12px auto 0;
    flex-shrink: 0;
}

.sv-detail-cover-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    margin-top: 16px;
    flex-shrink: 0;
}

.sv-detail-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sv-detail-cover-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 30%, rgba(10,10,20,0.88) 100%);
    pointer-events: none;
}

.sv-detail-body {
    padding: 14px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sv-detail-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-lime, #a6d96a);
}

.sv-detail-title {
    margin: 0;
    font-family: var(--font-display), "Syne", sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.sv-detail-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 14px 24px;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s, transform 0.18s cubic-bezier(0.22,1,0.36,1);
}

.sv-detail-cta:hover  { opacity: 0.88; }
.sv-detail-cta:active { opacity: 0.72; transform: scale(0.96); }

/* ─────────────────────────────────────────────────────────────────────────
   STORY CREATOR (sc-*)
   ───────────────────────────────────────────────────────────────────────── */
.sc-halaman,
.sc-page {
    position: relative;
    width: 100%;
    max-width: var(--lebar-kolom);
    margin: 0 auto;
    height: 100dvh;
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 32px 80px rgba(0,0,0,0.9);
}

/* ── Exit / Dismiss Animation ── */
.sc-halaman.is-exiting { pointer-events: none; }

.sc-halaman.is-exiting .sc-canvas-frame {
    animation: sc-exit-canvas 0.48s cubic-bezier(0.32, 0.94, 0.6, 1.0) forwards;
}

.sc-halaman.is-exiting .sc-appbar,
.sc-halaman.is-exiting .sc-toolbar-atas,
.sc-halaman.is-exiting .sc-toolbar-samping,
.sc-halaman.is-exiting .sc-area-bawah {
    animation: sc-exit-fade 0.22s ease forwards;
}

.sc-halaman.is-exiting .sc-panel-geser {
    animation: sc-exit-panel 0.28s cubic-bezier(0.55, 0, 1, 1) forwards;
}

.sc-halaman.is-exiting .sc-area-pratinjau {
    animation: sc-exit-backdrop 0.50s ease forwards;
}

.sc-halaman.is-exiting .sc-notif-gagal {
    animation: sc-exit-fade 0.15s ease forwards;
}

@keyframes sc-exit-canvas {
    0%   { transform: scale(1) translateY(0);      opacity: 1;    filter: blur(0px); }
    60%  {                                          opacity: 0.85; }
    100% { transform: scale(0.88) translateY(12vh); opacity: 0; filter: blur(2px); }
}

@keyframes sc-exit-fade {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

@keyframes sc-exit-panel {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(40px); }
}

@keyframes sc-exit-backdrop {
    from { opacity: 1; filter: blur(0px) brightness(1); }
    to   { opacity: 0.3; filter: blur(8px) brightness(0.4); }
}

.sc-appbar,
.sc-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(14px, env(safe-area-inset-top, 0px) + 10px) 16px 14px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
}

.sc-tombol-bulat,
.sc-topbar-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.18s cubic-bezier(0.22,1,0.36,1),
                transform 0.18s cubic-bezier(0.22,1,0.36,1);
}
.sc-tombol-bulat:hover { background: rgba(0,0,0,0.65); }
.sc-tombol-bulat:active { transform: scale(0.9); }

.sc-badge-langsung,
.sc-live-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: default;
    backdrop-filter: blur(12px);
}

.sc-dot-merah,
.sc-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 6px rgba(255,59,48,0.8);
    animation: sc-pulse 2s ease infinite;
}

@keyframes sc-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.sc-input-file,
.sc-file-input { display: none; }

.sc-area-pratinjau,
.sc-viewfinder {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000;
    transition: background-color 0.3s ease, background 0.3s ease;
    cursor: pointer;
    container-type: size;
}

/* ── Hero transition ── */
@keyframes sc-hero-fly-in {
    from { transform: scale(1.6) translateY(-15%); opacity: 0.5; filter: blur(4px); }
    to   { transform: scale(1) translateY(0);       opacity: 1;   filter: blur(0); }
}

.sc-hero-transition .sc-product-bg-img,
.sc-hero-transition img.sc-media {
    animation: sc-hero-fly-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sc-canvas-frame {
    position: relative;
    aspect-ratio: 9 / 16;
    width: min(calc(88dvh * 9 / 16), 92%);
    height: auto;
    max-height: 88dvh;
    max-width: 92%;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 20px 60px rgba(0,0,0,0.85),
        0 8px 24px rgba(0,0,0,0.5);
    isolation: isolate;
    container-type: size;
    container-name: story-canvas;
}

.sc-canvas-bg {
    position: absolute;
    inset: -40px;
    background-size: cover;
    background-position: center;
    filter: blur(45px) brightness(0.80) saturate(1.2);
    transform: scale(1.15);
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sc-canvas-bg--solid {
    filter: none;
    transform: none;
    inset: 0;
    border-radius: 0;
    transition: background 0.25s ease, background-color 0.25s ease;
}

.sc-panduan-fokus,
.sc-focus-bracket {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
}

.sc-sudut,
.sc-focus-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: rgba(255,255,255,0.6);
    border-style: solid;
}

.sc-sudut--kiri-atas   { top: 0;    left: 0;  border-width: 2px 0 0 2px; }
.sc-sudut--kanan-atas  { top: 0;    right: 0; border-width: 2px 2px 0 0; }
.sc-sudut--kiri-bawah  { bottom: 0; left: 0;  border-width: 0 0 2px 2px; }
.sc-sudut--kanan-bawah { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.sc-teks-panduan {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}

.sc-teks-panduan p { margin: 0; }

.sc-ikon-kamera {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.65);
    margin-bottom: 8px;
}

.sc-judul-panduan {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin: 0;
    font-family: var(--font-body);
}

.sc-sub-panduan {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin: 0;
    font-family: var(--font-body);
    letter-spacing: 0.06em;
}

.sc-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Layer foto user: baseline "contain" (foto utuh) + letterbox hitam.
   Zoom diatur via transform:scale() dari bg_scale (1.0 = fit, cover_factor = fill).
   Harus SETELAH .sc-media supaya object-fit:contain menang (specificity sama). */
.sc-media--fit {
    object-fit: contain;
    background: #000;
}

.sc-layer-media { position: absolute; inset: 0; z-index: 1; }

.sc-layer-overlays {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    pointer-events: none;
    container-type: size;
    container-name: overlay-stage;
}

.sc-layer-overlays > * { pointer-events: auto; }

/* ── Background picker ── */
.sc-bg-picker {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    gap: 9px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.60);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 100px;
    animation: sc-fade-slide 0.3s cubic-bezier(0.22,1,0.36,1) both;
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    pointer-events: auto;
}

.sc-bg-picker::-webkit-scrollbar { display: none; }

@keyframes sc-fade-slide {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.sc-bg-chip {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), border-color 0.15s;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.4);
}

.sc-bg-chip:hover { transform: scale(1.18); }

.sc-bg-chip--aktif {
    border-color: #fff;
    transform: scale(1.22);
    box-shadow: 0 0 0 2px var(--accent-lime, #a6d96a), inset 0 0 0 1px rgba(255,255,255,0.2);
}

.sc-notif-gagal,
.sc-error-banner {
    position: absolute;
    top: 70px;
    left: 16px;
    right: 16px;
    z-index: 30;
    padding: 10px 14px;
    background: rgba(255,48,64,0.9);
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-tombol-coba-lagi {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.sc-tombol-coba-lagi:hover { background: rgba(255,255,255,0.22); }

/* ── Toolbar samping ── */
.sc-toolbar-samping,
.sc-left-toolbar {
    position: absolute;
    bottom: 116px;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: row;
    gap: 2px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    padding: 6px 10px;
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    animation: sc-toolbar-slide-up 0.3s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes sc-toolbar-slide-up {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.sc-tombol-alat,
.sc-side-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    transition: background 0.18s cubic-bezier(0.22,1,0.36,1),
                transform 0.18s cubic-bezier(0.22,1,0.36,1),
                color 0.15s ease;
}

.sc-tombol-alat:hover { background: rgba(255,255,255,0.12); transform: scale(1.1); }
.sc-tombol-alat:active { transform: scale(0.88); }

.sc-tombol-alat--aktif,
.sc-side-btn--active {
    background: rgba(166, 217, 106,0.18);
    color: var(--accent-lime);
}

.sc-ikon-musik-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-tombol-alat-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: inherit;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
}

.sc-dot-musik {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-lime);
    border: 2px solid #000;
    box-shadow: 0 0 6px rgba(166, 217, 106,0.8);
}

/* Top tiny toolbar */
.sc-toolbar-atas {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 22;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    backdrop-filter: blur(12px);
}

.sc-tombol-alat-kecil {
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
    font-family: var(--font-body);
}

.sc-tombol-alat-kecil:hover { background: rgba(255,255,255,0.12); }

.sc-label-pill {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0 6px;
    white-space: nowrap;
}

/* Music badge */
.sc-badge-musik {
    position: absolute;
    bottom: 174px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    max-width: 75%;
    animation: sc-musik-masuk 0.3s ease both;
}

@keyframes sc-musik-masuk {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.sc-teks-badge-musik {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.sc-hapus-musik {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #fff;
    transition: background 0.15s;
}

.sc-hapus-musik:hover { background: rgba(255,255,255,0.3); }

/* ── Panel geser ── */
.sc-panel-geser,
.sc-panel {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    z-index: 25;
    background: rgba(10,10,18,0.85);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px 20px 0 0;
    padding: 28px 16px 20px;
    max-height: 68dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: sc-spring-up 0.38s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes sc-spring-up {
    0%   { opacity: 0; transform: translateY(60px); }
    60%  { opacity: 1; transform: translateY(-4px); }
    80%  { transform: translateY(1px); }
    100% { opacity: 1; transform: translateY(0); }
}

.sc-panel-header {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    min-height: 32px;
}

.sc-garis-pemisah {
    grid-column: 1;
    width: 0;
    height: 0;
    overflow: hidden;
}

.sc-panel-geser::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    background: rgba(255,255,255,0.22);
    border-radius: 3px;
    pointer-events: none;
}

.sc-judul-panel {
    grid-column: 2;
    text-align: center;
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.06em;
    color: #fff;
    line-height: 1;
}

.sc-tombol-tutup-panel {
    grid-column: 3;
    justify-self: end;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s cubic-bezier(0.22,1,0.36,1),
                transform 0.18s cubic-bezier(0.22,1,0.36,1);
}

.sc-tombol-tutup-panel:hover { background: rgba(255,255,255,0.2); transform: scale(1.12); }
.sc-tombol-tutup-panel:active { transform: scale(0.88); }

/* ── Panel: Text ── */
.sc-text-preview-box {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 14px;
    word-break: break-word;
    line-height: 1.3;
    transition: all 0.15s ease;
}

.sc-text-edit-row { display: flex; gap: 14px; margin-bottom: 14px; }

.sc-size-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 36px;
}

.sc-slider-vertical {
    writing-mode: vertical-lr;
    direction: rtl;
    height: 100px;
    width: 4px;
    accent-color: #fff;
    cursor: pointer;
}

.sc-size-label {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    font-weight: 700;
    font-family: var(--font-body);
}

.sc-text-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sc-font-carousel {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.sc-font-carousel::-webkit-scrollbar { display: none; }

.sc-font-chip {
    white-space: nowrap;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.25);
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.sc-font-chip--aktif { background: #fff; color: #000; border-color: #fff; }

.sc-align-row { display: flex; gap: 8px; }

.sc-align-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: rgba(255,255,255,0.75);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.sc-align-btn--aktif { background: rgba(255,255,255,0.2); color: #fff; }

.sc-bg-toggle {
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.25);
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
    transition: all 0.15s;
}

.sc-bg-toggle--on { background: #fff; color: #000; border-color: #fff; }

.sc-baris-warna {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 4px 0;
    margin-bottom: 14px;
}

.sc-tombol-warna {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
                border-color 0.18s,
                box-shadow 0.18s;
}

.sc-tombol-warna:hover { transform: scale(1.15); }
.sc-tombol-warna:active { transform: scale(0.85); }

.sc-tombol-warna--aktif {
    border-color: #fff;
    box-shadow: 0 0 0 2.5px var(--accent-lime);
    transform: scale(1.2);
}

.sc-area-input-teks { display: flex; align-items: center; gap: 10px; }

.sc-input-teks-besar {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 18px;
    font-family: var(--font-body);
    padding: 10px 0;
    text-align: center;
    outline: none;
    transition: border-color 0.22s cubic-bezier(0.22,1,0.36,1);
}

.sc-input-teks-besar::placeholder { color: rgba(255,255,255,0.4); }
.sc-input-teks-besar:focus { border-bottom-color: var(--accent-lime); }

.sc-tombol-done {
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: 20px;
    border: none;
    background: var(--accent-lime);
    color: #000;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.15s;
}

.sc-tombol-done:hover { opacity: 0.85; }

/* ── Panel: Sticker ── */
.sc-grid-stiker {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.sc-grid-stiker::-webkit-scrollbar { display: none; }

.sc-tombol-stiker {
    aspect-ratio: 1;
    background: rgba(255,255,255,0.07);
    border: none;
    border-radius: 12px;
    font-size: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), background 0.15s;
}

.sc-tombol-stiker:hover { transform: scale(1.2); background: rgba(255,255,255,0.14); }
.sc-tombol-stiker:active { transform: scale(0.88); }

/* ── Panel: Music ── */
.sc-list-musik {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: none;
}

.sc-list-musik::-webkit-scrollbar { display: none; }

.sc-item-musik {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid transparent;
    color: #fff;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s cubic-bezier(0.22,1,0.36,1);
    font-family: var(--font-body);
    animation: sc-fade-slide 0.35s cubic-bezier(0.22,1,0.36,1) both;
}

.sc-item-musik:hover { background: rgba(255,255,255,0.1); }
.sc-item-musik:active { transform: scale(0.97); }

.sc-item-musik--aktif {
    background: rgba(75, 216, 143,0.12);
    border-color: rgba(75, 216, 143,0.35);
}

.sc-cover-musik {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(255,255,255,0.85);
}

.sc-info-musik {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sc-judul-musik {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-artis-musik {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-list-musik .sc-item-musik:nth-child(1) { animation-delay: 0.00s; }
.sc-list-musik .sc-item-musik:nth-child(2) { animation-delay: 0.04s; }
.sc-list-musik .sc-item-musik:nth-child(3) { animation-delay: 0.08s; }
.sc-list-musik .sc-item-musik:nth-child(4) { animation-delay: 0.12s; }
.sc-list-musik .sc-item-musik:nth-child(5) { animation-delay: 0.16s; }
.sc-list-musik .sc-item-musik:nth-child(6) { animation-delay: 0.20s; }

/* ── Panel: Filter ── */
.sc-scroll-filter {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 0 8px;
    scrollbar-width: none;
}

.sc-scroll-filter::-webkit-scrollbar { display: none; }

.sc-item-filter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    color: rgba(255,255,255,0.6);
    font-family: var(--font-body);
    font-size: 11px;
    transition: color 0.2s ease;
}

.sc-item-filter:hover { color: #fff; }
.sc-item-filter--aktif { color: var(--accent-lime); }

.sc-thumb-filter {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid transparent;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-violet) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.25s cubic-bezier(0.22,1,0.36,1);
}

.sc-item-filter--aktif .sc-thumb-filter {
    border-color: var(--accent-lime);
    transform: scale(1.06);
}

.sc-label-normal { font-size: 22px; color: rgba(255,255,255,0.6); }
.sc-nama-filter { font-size: 10px; letter-spacing: 0.06em; white-space: nowrap; }

.sc-thumb-filter.filter-clarendon { filter: contrast(1.2) saturate(1.3); }
.sc-thumb-filter.filter-gingham   { filter: brightness(1.05) hue-rotate(-10deg); }
.sc-thumb-filter.filter-moon      { filter: grayscale(1) contrast(1.1); }
.sc-thumb-filter.filter-lark      { filter: contrast(0.9); }
.sc-thumb-filter.filter-reyes     { filter: sepia(0.5) contrast(0.9); }
.sc-thumb-filter.filter-juno      { filter: contrast(1.1) saturate(1.2); }
.sc-thumb-filter.filter-slumber   { filter: brightness(0.9) saturate(0.8); }
.sc-thumb-filter.filter-crema     { filter: sepia(0.3) contrast(0.95); }
.sc-thumb-filter.filter-ludwig    { filter: saturate(1.1) contrast(1.05); }

.filter-clarendon { filter: contrast(1.2) saturate(1.3); }
.filter-gingham   { filter: brightness(1.05) hue-rotate(-10deg); }
.filter-moon      { filter: grayscale(1) contrast(1.1); }
.filter-lark      { filter: contrast(0.9); }
.filter-reyes     { filter: sepia(0.5) contrast(0.9); }
.filter-juno      { filter: contrast(1.1) saturate(1.2); }
.filter-slumber   { filter: brightness(0.9) saturate(0.8); }
.filter-crema     { filter: sepia(0.3) contrast(0.95); }
.filter-ludwig    { filter: saturate(1.1) contrast(1.05); }

/* ── Bottom controls ── */
.sc-area-bawah,
.sc-bottom {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}

.sc-tombol-galeri,
.sc-gallery-btn {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.4);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}

.sc-tombol-galeri:hover { border-color: rgba(255,255,255,0.6); }

.sc-thumb-galeri,
.sc-gallery-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-ikon-galeri,
.sc-gallery-placeholder {
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-wrap-shutter,
.sc-shutter-wrap { display: flex; align-items: center; justify-content: center; }

.sc-tombol-shutter,
.sc-shutter-btn {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.15s, transform 0.18s cubic-bezier(0.22,1,0.36,1);
}

.sc-lingkaran-dalam {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    pointer-events: none;
}

.sc-tombol-shutter:hover { background: rgba(255,255,255,0.22); transform: scale(1.05); }
.sc-tombol-shutter:active { transform: scale(0.9); }

.sc-tombol-shutter--kirim,
.sc-shutter-btn--publish {
    border-color: var(--accent-lime);
    background: var(--accent-lime);
    color: #000;
    animation: sc-spring-in 0.45s cubic-bezier(0.22,1,0.36,1) both;
}

.sc-tombol-shutter--kirim .sc-lingkaran-dalam { display: none; }

.sc-tombol-shutter--muat,
.sc-shutter-btn--loading { opacity: 0.55; cursor: not-allowed; }

@keyframes sc-spring-in {
    0%   { opacity: 0; transform: scale(0.5); }
    60%  { opacity: 1; transform: scale(1.1); }
    80%  { transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}

.sc-spinner {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid rgba(0,0,0,0.25);
    border-top-color: #000;
    animation: sc-spin 0.7s linear infinite;
}

.sc-spinner--lg {
    width: 36px;
    height: 36px;
    border-width: 3px;
    border-color: rgba(255,255,255,0.2);
    border-top-color: #fff;
}

.sc-prefill-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(0,0,0,0.85);
    z-index: 5;
}

.sc-prefill-loading-text {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    font-family: var(--font-body);
    letter-spacing: 0.04em;
}

@keyframes sc-spin { to { transform: rotate(360deg); } }

/* ── Gradient media overlay ── */
.sc-media-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    border-radius: inherit;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.20) 0%,
        rgba(0,0,0,0)    22%,
        rgba(0,0,0,0)    50%,
        rgba(0,0,0,0.50) 70%,
        rgba(0,0,0,0.75) 100%
    );
}

/* ── Event Prefill Banner ── */
.sc-product-prefill-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.48) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(166, 217, 106,0.25);
    border-left: 2px solid rgba(166, 217, 106,0.5);
    animation: sc-banner-fadein 0.4s ease-out both;
}

@keyframes sc-banner-fadein {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sc-product-prefill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(166, 217, 106,0.15);
    border: 1px solid rgba(166, 217, 106,0.3);
    border-radius: 50%;
    color: var(--accent-lime, #a6d96a);
    flex-shrink: 0;
}

.sc-product-prefill-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.sc-product-prefill-label {
    font-size: 9px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.12em;
    font-weight: 600;
    text-transform: uppercase;
}

.sc-product-prefill-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-product-prefill-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--accent-lime, #a6d96a);
    background: rgba(166, 217, 106,0.12);
    border: 1px solid rgba(166, 217, 106,0.3);
    padding: 3px 8px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   MERCHANT CARD PREVIEW  (share toko → pratinjau kartu profil, mirip /m/{id})
   Bentuk bingkai = halaman merchant public: hero + avatar overlap + nama +
   container FOLLOWERS/EVENTS/RATING + CTA. Ukuran pakai container-query (cqw)
   relatif lebar kartu agar proporsional di frame 9:16.
   ═══════════════════════════════════════════════════════════════════════ */
.sc-mch-preview-frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0d0d18;
    transition: background 0.28s ease;
}
.sc-mch-card {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: #0d0d18;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5cqw;
    overflow: hidden;
    container-type: inline-size;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.70), 0 8px 24px rgba(0, 0, 0, 0.45);
}
.sc-mch-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(120deg, #1c2340, #3b2a63);
    overflow: hidden;
}
.sc-mch-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.92;
}
.sc-mch-hero-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 13, 24, 0) 45%, rgba(13, 13, 24, 1) 100%);
}
.sc-mch-body {
    position: relative;
    padding: 0 6cqw 6cqw;
    margin-top: -9cqw;
}
.sc-mch-avatar-wrap {
    position: relative;
    width: 20cqw;
    height: 20cqw;
}
.sc-mch-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 0.9cqw solid #0d0d18;
    background: #1e1e30;
    display: block;
}
.sc-mch-avatar--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", "Arial Black", sans-serif;
    font-weight: 800;
    font-size: 10cqw;
    color: #100f16;
    background: #a6d96a;
}
.sc-mch-badge {
    position: absolute;
    right: 2%;
    bottom: 6%;
    width: 6cqw;
    height: 6cqw;
    border-radius: 50%;
    background: #a6d96a;
    color: #0d0d18;
    border: 0.7cqw solid #0d0d18;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.4cqw;
    font-weight: 900;
}
.sc-mch-name {
    margin: 3cqw 0 0;
    font-family: "Bebas Neue", "Arial Black", sans-serif;
    font-weight: 800;
    font-size: 9cqw;
    line-height: 1;
    color: #ffffff;
    letter-spacing: 0.01em;
    word-break: break-word;
}
.sc-mch-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 4cqw;
    background: #1b1b2a;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4cqw;
    padding: 3.6cqw 1cqw;
}
.sc-mch-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1cqw;
}
.sc-mch-stat + .sc-mch-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.10);
}
.sc-mch-stat-num {
    font-family: "Space Mono", monospace;
    font-size: 5.4cqw;
    font-weight: 700;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 0.6cqw;
    line-height: 1;
}
.sc-mch-stat-star {
    color: #a6d96a;
    font-size: 3.6cqw;
}
.sc-mch-stat-label {
    font-family: "Space Mono", monospace;
    font-size: 2.5cqw;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.45);
}
.sc-mch-cta {
    margin: 5cqw auto 0;
    width: max-content;
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-size: 3.4cqw;
    letter-spacing: 0.08em;
    color: #0d0d18;
    background: #a6d96a;
    padding: 2.6cqw 5.5cqw;
    border-radius: 999px;
}

/* ═══════════════════════════════════════════════════════════════════════
   EVENT CARD PREVIEW
   ═══════════════════════════════════════════════════════════════════════ */
.sc-product-preview-frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0d0d18;
    transition: background 0.28s ease;
    container-type: size;
    container-name: event-frame;
}

.sc-product-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sc-product-dark-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.52) 100%);
    z-index: 1;
    pointer-events: none;
}

.sc-product-card {
    /* `backdrop-filter` dibuang: latarnya ≥ 95% buram, jadi yang diburamkan
       di belakangnya tak pernah terlihat — yang tersisa hanya biaya baca-balik
       + blur + komposit ulang, pada bilah yang menempel di layar sepanjang
       waktu dan ikut dirasterisasi tiap potretan transisi. */
    position: absolute;
    left: 5%;
    right: 5%;
    top: 50%;
    transform: translateY(-52%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: rgba(10,11,26,0.96);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    box-shadow:
        0 28px 80px rgba(0,0,0,0.70),
        0 8px 24px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.sc-product-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: -apple-system, BlinkMacSystemFont, "Space Grotesk", sans-serif;
    font-size: clamp(10px, 2.6cqw, 14px);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: clamp(10px, 3cqw, 16px);
}

.sc-product-card-dot {
    width: clamp(7px, 1.8cqw, 10px);
    height: clamp(7px, 1.8cqw, 10px);
    border-radius: 50%;
    background: #a6d96a;
    box-shadow: 0 0 6px rgba(166, 217, 106,0.8);
    flex-shrink: 0;
    animation: sc-pulse 2.2s ease infinite;
}

.sc-product-card-title {
    margin: 0 0 clamp(12px, 3.5cqw, 20px);
    font-family: "Syne", "Syne Italic", "Arial Black", sans-serif;
    font-style: italic;
    font-weight: 800;
    font-size: clamp(24px, 7.5cqw, 46px);
    line-height: 1.06;
    color: #8b9fe8;
    word-break: break-word;
    text-shadow: 0 2px 18px rgba(0,0,0,0.55);
    letter-spacing: -0.02em;
}

.sc-product-card-sep {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.20) 30%, rgba(255,255,255,0.20) 70%, rgba(255,255,255,0) 100%);
    margin-bottom: clamp(10px, 3cqw, 16px);
}

.sc-product-card-meta-label {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(9px, 2.2cqw, 13px);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    display: block;
    margin-bottom: clamp(6px, 1.8cqw, 10px);
}

.sc-product-card-meta-row {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: clamp(14px, 4cqw, 22px);
}

.sc-product-card-date {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(18px, 5.2cqw, 30px);
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
}

.sc-product-card-venue {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(13px, 3.6cqw, 20px);
    font-weight: 500;
    color: rgba(255,255,255,0.68);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55%;
}

.sc-product-card-cover-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.sc-product-card-cover-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(to bottom, transparent, rgba(10,11,26,0.88));
    pointer-events: none;
}

.sc-product-card-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sc-product-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(14px, 4cqw, 22px) clamp(16px, 5cqw, 26px) clamp(18px, 5cqw, 28px);
}

.sc-product-card-price-pill {
    display: inline-flex;
    align-items: center;
    padding: clamp(9px, 2.8cqw, 15px) clamp(20px, 6cqw, 32px);
    border-radius: 100px;
    background: #a6d96a;
    box-shadow: 0 4px 24px rgba(166, 217, 106,0.38);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(15px, 4.5cqw, 24px);
    font-weight: 700;
    color: #0a0a14;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.sc-product-card-ticket-label {
    margin-top: clamp(6px, 1.8cqw, 10px);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(11px, 3.2cqw, 16px);
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────────────────────────────
   DRAGGABLE OVERLAYS (drg-*)
   ───────────────────────────────────────────────────────────────────────── */
.drg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(50cqw, 50cqh, 0) translate(-50%, -50%) scale(1);
    will-change: auto;
    transform-origin: center center;
    width: max-content;
    max-width: 80cqw;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    animation: drg-spring-in 0.45s cubic-bezier(0.22,1,0.36,1) both;
    backface-visibility: hidden;
    contain: layout style paint;
}

@keyframes drg-spring-in {
    0%   { opacity: 0; scale: 0.3; }
    60%  { opacity: 1; scale: 1.08; }
    80%  { scale: 0.97; }
    100% { opacity: 1; scale: 1; }
}

.drg-overlay--dragging {
    will-change: transform;
    transition: none !important;
    scale: 1.06;
    opacity: 0.92;
    cursor: grabbing;
    z-index: 50;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,0.55));
}

.drg-overlay--selected {
    filter: drop-shadow(0 0 8px rgba(166, 217, 106,0.4));
}

.drg-overlay--selected .drg-text-content,
.drg-overlay--selected .drg-sticker-content {
    outline: 1.5px solid rgba(255,255,255,0.6);
    outline-offset: 6px;
    border-radius: 4px;
}

.drg-text-content {
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
    text-shadow:
        0 0 20px rgba(0,0,0,0.6),
        0 2px 8px rgba(0,0,0,0.5),
        0 1px 2px rgba(0,0,0,0.8);
    line-height: 1.2;
    padding: 4px 8px;
    transform: translateZ(0);
    min-width: 40px;
    min-height: 1em;
}

.drg-sticker-content {
    font-size: 52px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.drg-kontrol { position: absolute; inset: -16px; pointer-events: none; z-index: 5; }
.drg-kontrol .drg-delete-btn { pointer-events: auto; position: absolute; top: 16px; right: 16px; }

.drg-delete-btn {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.75);
    border: 1.5px solid rgba(255,255,255,0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    animation: drg-spring-in 0.3s cubic-bezier(0.22,1,0.36,1) both;
    transition: background 0.15s, transform 0.15s cubic-bezier(0.22,1,0.36,1);
}

.drg-delete-btn:hover { background: rgba(255,48,64,0.9); transform: scale(1.2); }
.drg-delete-btn:active { transform: scale(0.9); }

/* ── Scale badge + trash + pinch ── */
.drg-scale-badge {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px;
    backdrop-filter: blur(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    white-space: nowrap;
    pointer-events: none;
    animation: drg-spring-in 0.25s cubic-bezier(0.22,1,0.36,1) both;
}

.drg-scale-badge--hide {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px);
    pointer-events: none;
}

.drg-scale-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-lime, #a6d96a);
    box-shadow: 0 0 6px rgba(166, 217, 106,0.8);
    flex-shrink: 0;
}

.drg-scale-badge__text {
    font-family: var(--font-body, monospace);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
}

.drg-overlay--trash .drg-text-content,
.drg-overlay--trash .drg-sticker-content {
    opacity: 0.4;
    filter: grayscale(1) sepia(0.8) hue-rotate(-50deg) saturate(2.5);
    transition: opacity 0.2s ease, filter 0.2s ease;
    transform: scale(0.82);
}

.sc-trash-zone {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 18%;
    background: linear-gradient(to top, rgba(255,48,64,0.22), transparent);
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
    z-index: 14;
    border-radius: 0 0 16px 16px;
}

.sc-trash-zone--active { opacity: 1; }

.sc-trash-zone-icon {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,48,64,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    animation: sc-trash-pulse 0.6s ease infinite alternate;
    box-shadow: 0 0 16px rgba(255,48,64,0.6);
}

@keyframes sc-trash-pulse {
    from { transform: translateX(-50%) scale(0.9); }
    to   { transform: translateX(-50%) scale(1.1); }
}

.drg-overlay--pinching { cursor: zoom-in; }

.drg-delete-btn--ig {
    top: -14px;
    right: -14px;
    width: 28px;
    height: 28px;
    background: rgba(255,48,64,0.85);
    border-color: rgba(255,255,255,0.6);
    box-shadow: 0 2px 8px rgba(255,48,64,0.5);
}

.drg-delete-btn--ig:hover { background: rgba(255,48,64,1); transform: scale(1.25); }

/* ─────────────────────────────────────────────────────────────────────────
   AUDIO PILL (ap-*)
   ───────────────────────────────────────────────────────────────────────── */
.ap-root {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
    backdrop-filter: blur(8px);
    width: 140px;
    justify-content: center;
    box-sizing: border-box;
    transition: background 0.15s;
}

.ap-root:hover { background: rgba(0,0,0,0.65); }
.ap-root:active { transform: scale(0.92); }

.ap-icon-wrap {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-waves {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    height: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ap-waves--active { opacity: 1; }

.ap-bar {
    width: 2.5px;
    border-radius: 2px;
    background: #4bd88f;
    animation: ap-wave 0.8s ease-in-out infinite;
}

.ap-bar:nth-child(1) { height: 6px;  animation-delay: 0.00s; }
.ap-bar:nth-child(2) { height: 10px; animation-delay: 0.15s; }
.ap-bar:nth-child(3) { height: 6px;  animation-delay: 0.30s; }

@keyframes ap-wave {
    0%, 100% { transform: scaleY(0.6); }
    50%      { transform: scaleY(1.0); }
}

.ap-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   INSTAGRAM TEXT STYLES
   ───────────────────────────────────────────────────────────────────────── */
.ig-text-classic {
    font-family: "Bebas Neue", "Arial Black", sans-serif;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    font-weight: 600;
}

.ig-text-modern {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.ig-text-strong {
    font-family: "Arial Black", sans-serif;
    text-transform: uppercase;
    background: rgba(0,0,0,0.8);
    padding: 4px 12px;
    border-radius: 4px;
}

.ig-text-typewriter {
    font-family: "Courier New", monospace;
    background: rgba(0,0,0,0.75);
    padding: 6px 10px;
}

/* ─────────────────────────────────────────────────────────────────────────
   SEARCH OVERLAY (exp-sovl-*)
   ───────────────────────────────────────────────────────────────────────── */
.exp-search-tap {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 0 14px;
    height: 46px;
    width: 100%;
    color: var(--text-muted);
    user-select: none;
    transition: border-color 0.18s, background 0.18s;
}

.exp-search-tap:hover { border-color: var(--accent-lime); background: var(--bg-elevated-2); }

.exp-search-placeholder {
    flex: 1;
    font-size: 0.82rem;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.exp-sovl-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: var(--lebar-kolom);
    z-index: 300;
    transform: translateX(-50%) translateY(100%);
    transition: transform 0.38s cubic-bezier(0.22,1,0.36,1);
    will-change: transform;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 32px 80px rgba(0,0,0,0.9);
}

.exp-sovl-wrap--open { transform: translateX(-50%) translateY(0); }

.exp-sovl {
    position: absolute;
    inset: 0;
    background: var(--bg-base);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.exp-sovl-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: max(12px, env(safe-area-inset-top, 12px)) 14px 10px;
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
    background: var(--bg-base);
}

.exp-sovl-back {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.exp-sovl-back:hover { background: var(--bg-elevated-2); }

.exp-sovl-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-strong);
    border-radius: 12px;
    padding: 0 12px;
    height: 44px;
    transition: border-color 0.18s;
}

.exp-sovl-input-wrap:focus-within { border-color: var(--accent-lime); }

.exp-sovl-input-wrap svg { flex-shrink: 0; color: var(--text-muted); }

.exp-sovl-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    min-width: 0;
}

.exp-sovl-input::placeholder { color: var(--text-muted); }

.exp-sovl-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-elevated-2);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}

.exp-sovl-chips {
    display: flex;
    gap: 8px;
    padding: 10px 14px 8px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border-soft);
}

.exp-sovl-chips::-webkit-scrollbar { display: none; }

.exp-sovl-count-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 6px;
    flex-shrink: 0;
}

.exp-sovl-count {
    font-size: 1.1rem;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.exp-sovl-results {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px calc(80px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exp-sovl-results::-webkit-scrollbar { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .story-avatar-inner,
[data-theme="light"] .story-avatar-img { border-color: var(--bg-page); }

/* Uploading ring — Light Mode */
[data-theme="light"] .story-avatar-ring--uploading {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .story-avatar-ring--uploading::before {
    border-top-color: var(--accent-blue, #0984e3);
    border-right-color: rgba(9, 132, 227, 0.35);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-width: 3.5px;
}

[data-theme="light"] .story-avatar-ring--uploading::after {
    animation: story-glow-pulse-light 1.5s ease-in-out infinite;
}

@keyframes story-glow-pulse-light {
    0%, 100% { box-shadow: 0 0 0 0   rgba(9, 132, 227, 0); }
    50%       { box-shadow: 0 0 0 6px rgba(9, 132, 227, 0.12); }
}

[data-theme="light"] .story-avatar-ring--uploading > .story-avatar-inner {
    color: var(--accent-blue, #0984e3);
}

[data-theme="light"] .story-username--add {
    color: var(--text-secondary, #636e72);
    font-weight: 600;
}


/* ==== page-ticket-detail.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   TICKET DETAIL PAGE  (td-*)
   Clean reimplementation — matches ticket_detail.rs exactly
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.td-page {
    padding-bottom: 0; /* no extra padding — pulse strip handles it */
}

/* ── Page header title (centered between back btn and actions) ─────────────── */
.td-page-title {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
}

/* ── Full-page mobile layout wrapper ─────────────────────────────────────── */
.td-mobile-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ── HERO — full-width cover image with gradient overlay ─────────────────── */
.td-hero {
    position: relative;
    width: 100%;
    height: 280px;
    margin: 0;          /* full-bleed, no side margins */
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.td-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

.td-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8, 8, 16, 0.05)  0%,
        rgba(8, 8, 16, 0.00) 30%,
        rgba(8, 8, 16, 0.60) 70%,
        rgba(8, 8, 16, 0.95) 100%
    );
}

.td-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Status badge (CONFIRMED etc.) */
.td-confirmed {
    display: inline-flex;
    align-self: flex-start;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent-lime);
    background: rgba(0, 0, 0, 0.4);
    padding: 5px 12px;
    border-radius: 100px;
    border: 1px solid rgba(166, 217, 106, 0.35);
}

.td-product-title {
    font-family: var(--font-display);
    font-size: 36px;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.02em;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* ── STUB CARD — connected to hero, rounded bottom ────────────────────────── */
.td-stub {
    margin: 0 16px;                 /* centered with side margins */
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-top: none;               /* flush with hero bottom */
    border-radius: 0 0 24px 24px;
}

.td-stub-top {
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.td-stub-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.td-stub-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.td-stub-cell--right {
    text-align: right;
    align-items: flex-end;
}
.td-stub-cell--full { flex: 1; }

.td-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.td-val {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}
.td-val--accent {
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
}

/* Perforated divider */
.td-perf-divider {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
    margin: 8px 0;
}
.td-notch {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-page);
    z-index: 1;
}
.td-notch--left  { left: -14px; }
.td-notch--right { right: -14px; }
.td-dash {
    flex: 1;
    margin: 0 20px;
    border-top: 2px dashed var(--border-strong);
}

/* Bottom: QR + info */
.td-stub-bottom {
    padding: 20px 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}

.td-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.td-qr {
    background: #fff;
    border-radius: 16px;
    padding: 0;          /* qrcodegen SVG sudah punya quiet-zone sendiri */
    box-shadow: 0 0 40px rgba(166, 217, 106, 0.15);
    border: 1px solid rgba(166, 217, 106, 0.1);
    overflow: hidden;    /* clip SVG corners ke border-radius */
    line-height: 0;      /* hapus spasi inline di bawah SVG */
}
/* SVG yang di-inject via inner_html */
.td-qr > div { line-height: 0; }
.td-qr svg   { display: block; width: 170px; height: 170px; }
.td-qr-ref {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--accent-lime);
    letter-spacing: 0.12em;
    font-weight: 700;
}

/* Pills row (SECTION, ROW/SEAT) */
.td-pill-row {
    display: flex;
    gap: 10px;
    width: 100%;
}
.td-pill {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.td-pill-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.td-pill-val {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

/* Info card (security notes) */
.td-info-card {
    width: 100%;
    background: var(--bg-elevated);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--border-soft);
}
.td-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ── ACTION BUTTONS ─────────────────────────────────────────────────────── */
.td-actions {
    padding: 16px 16px 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.td-btn {
    padding: 14px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.06em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    transition: opacity 0.18s, transform 0.15s;
}
.td-btn:active { transform: scale(0.97); }
.td-btn--primary {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}
.td-btn--ghost {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

/* ── PULSE STRIP ─────────────────────────────────────────────────────────── */
.td-pulse-strip {
    margin: 8px 16px 100px;
    padding: 14px 16px;
    background: rgba(75, 216, 143, 0.06);
    border: 1px solid rgba(75, 216, 143, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--live-green);
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* ── EMPTY / NOT FOUND STATE ─────────────────────────────────────────────── */
.td-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 64px 24px;
    text-align: center;
    min-height: 60dvh;
}
.td-empty-state h2 {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1.1;
}
.td-empty-state p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 260px;
    line-height: 1.65;
}
.td-empty-state .td-btn {
    margin-top: 8px;
    text-decoration: none;
    padding: 14px 28px;
}

/* ── Light mode ────────────────────────────────────────────────────────────── */
[data-theme="light"] .td-hero-gradient {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05)  0%,
        rgba(0, 0, 0, 0.00) 30%,
        rgba(0, 0, 0, 0.50) 70%,
        rgba(0, 0, 0, 0.85) 100%
    );
}
[data-theme="light"] .td-product-title { color: #fff; }
[data-theme="light"] .td-page-title  { color: var(--text-primary); }
[data-theme="light"] .td-qr { border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0,0,20,0.12); }
[data-theme="light"] .td-pulse-strip { background: rgba(10, 112, 53, 0.06); border-color: rgba(10, 112, 53, 0.2); color: var(--live-green); }
[data-theme="light"] .td-stub { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .td-pill { background: var(--bg-elevated); border-color: var(--border); }
[data-theme="light"] .td-info-card { background: var(--bg-elevated); border-color: var(--border); }
[data-theme="light"] .td-btn--primary { background: var(--accent-lime); color: var(--text-on-accent); }
[data-theme="light"] .td-btn--ghost { background: var(--bg-card); border-color: var(--border); color: var(--text-primary); }


/* ==== page-tickets.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   TICKETS LIST PAGE
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TICKETS ────────────────────────────────────────────────────────────────── */
.tickets-title-section {
    padding: 20px 20px 0;
}
.tickets-title {
    font-family: var(--font-display);
    font-size: 52px;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: 0.02em;
}
.tickets-count {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    margin-top: 6px;
}
.count-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--live-green);
    animation: pulse 2s infinite;
}
.filter-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 20px 0;
}
.filter-tab {
    padding: 8px 20px;
    border-radius: 100px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.04em;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.2s;
}
.filter-tab--active {
    background: var(--tab-active-bg);
    color: var(--tab-active-text);
    border-color: var(--tab-active-bg);
    font-weight: 700;
}
.tickets-list {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ticket-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}
.ticket-card--live {
    border-color: rgba(75, 216, 143, 0.3);
}
.live-badge-card {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 100px;
}
.ticket-cover {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.ticket-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ticket-product-title {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    line-height: 1.1;
}
.ticket-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ticket-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.meta-label {
    font-family: var(--font-body);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
}
.meta-val {
    font-size: 12px;
    color: var(--text-primary);
}
.ticket-countdown {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.qr-box {
    background: white;
    border-radius: 12px;
    padding: 12px;
    width: fit-content;
}
.qr-ref {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
}
.ticket-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ticket-venue-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.venue-name-sm {
    font-size: 11px;
    color: var(--text-muted);
}
.ticket-price {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--accent-lime);
    font-weight: 700;
}
.ticket-card--vip {
    background: linear-gradient(135deg, #3a4fff 0%, #6a35ff 100%);
    border: none;
    padding: 20px;
}
.vip-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.vip-icon-wrap {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a6d96a;
}
.vip-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.1em;
}
.vip-title {
    font-family: var(--font-display);
    font-size: 28px;
    color: white;
    letter-spacing: 0.04em;
    line-height: 1.1;
    margin-bottom: 14px;
}
.vip-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.vip-meta-row .meta-label {
    color: rgba(255, 255, 255, 0.5);
}
.vip-meta-row .meta-val {
    color: white;
    font-weight: 600;
}
.vip-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vip-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}
.vip-price {
    font-family: var(--font-body);
    font-size: 16px;
    color: white;
    font-weight: 700;
}
.loading-state {
    display: flex;
    justify-content: center;
    padding: 60px;
}
.loading-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.past-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 20px 20px;
}
.past-cta-text {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}
.past-cta-btn {
    background: none;
    border: none;
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PHONE FRAME — di layar >var(--lebar-kolom) tampilkan mockup perangkat
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 481px) {
    body {
        background: #020208;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .page,
    .auth-page,
    .sc-page {
        min-height: 100dvh;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.06),
            0 32px 80px rgba(0, 0, 0, 0.9);
    }
}
[data-theme="light"] body {
    background: #b8b8d0;
}
[data-theme="light"] .page,
[data-theme="light"] .auth-page,
[data-theme="light"] .sc-page {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.12),
        0 32px 80px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════════════════════════════════════════
   TICKETS PAGE — PAST EXPERIENCES SECTION
   ══════════════════════════════════════════════════════════════════════════════ */

.past-section {
    padding: 24px 20px 12px;
    border-top: 1px solid var(--border-soft);
}
.past-section-title {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    margin: 0 0 14px;
}
.past-list {
    display: flex;
    flex-direction: column;
}
.past-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-soft);
}
.past-item:last-child {
    border-bottom: none;
}
.past-item-date {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 58px;
}
.past-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.past-item-title {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.past-item-venue {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.past-item-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.past-item-price-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-end;
}
.past-item-price-label {
    font-family: var(--font-body);
    font-size: 8px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}
.past-item-price {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}
.past-item-dl,
.past-item-star {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.past-item-dl:hover {
    background: var(--bg-elevated-2);
    color: var(--accent-blue);
}
.past-item-star:hover {
    background: var(--bg-elevated-2);
    color: var(--warning-amber);
}


/* Tiket yang SUDAH DIPAKAI ─────────────────────────────────────────────────
   Dibedakan dengan dua isyarat yang saling menguatkan, bukan satu:
   warna yang meredup DAN garis tepi putus-putus. Warna saja tak cukup —
   sebagian pemakai tak bisa membedakannya, dan layar ponsel di bawah matahari
   meratakan hampir semua perbedaan terang-gelap.

   Kartunya sengaja TIDAK dimatikan (`pointer-events`): tiket terpakai tetap
   boleh dibuka untuk melihat riwayatnya. Yang diubah hanya cara ia terbaca. */
.ticket-card--used {
    opacity: 0.62;
    border-style: dashed;
    border-color: var(--border);
}
/* Foto ikut diredam supaya kartunya tak tetap "berteriak" lewat cover-nya. */
.ticket-card--used img {
    filter: grayscale(0.85);
}

/* ==== profile_premium.css ==== */
.profile-premium-banner {
  display: flex; align-items: center; gap: 12px;
  /* Gutter 20px, MENYAMAI tetangganya di halaman profil.
   *
   * Nilainya dulu 16px, sendirian: `.avatar-section` memakai 20px,
   * `.menu-section` 20px, `.profile-points-card` 20px. Selisih 4px itu tak
   * cukup besar untuk terbaca sebagai keputusan, tetapi cukup untuk terlihat
   * — banner ini melebar sedikit di kedua sisi dibanding semua kartu di
   * atas dan di bawahnya, sehingga tepi kiri halaman tampak bergerigi saat
   * digulir. */
  /* 28px di bawah, menyamai ritme `.menu-section` — banner ini berdiri di
   * aliran vertikal yang sama, dan 20px membuatnya sedikit lebih rapat ke
   * bagian di bawahnya tanpa alasan. */
  margin: 0 20px 28px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1a2a10, #0d1c08);
  border: 1px solid rgba(166, 217, 106,0.25);
  text-decoration: none;
}
.profile-premium-crown { font-size: 28px; }
.profile-premium-text  { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.profile-premium-title { font-size: 14px; font-weight: 700; color: #a6d96a; }
.profile-premium-sub   { font-size: 11px; color: rgba(166, 217, 106,0.6); }
.profile-premium-cta   {
  background: linear-gradient(135deg, #a6d96a 0%, #4bd88f 100%);
  color: #0a0a14;
  font-size: 12px; font-weight: 800;
  padding: 8px 16px; border-radius: 16px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(166, 217, 106, 0.25);
  flex-shrink: 0;
}

.menu-item--premium         { background: rgba(166, 217, 106,0.06) !important;
                               border-color: rgba(166, 217, 106,0.18) !important; }
.menu-item--premium .menu-item-label { color: #a6d96a; }
.menu-item-icon--premium    { background: rgba(166, 217, 106,0.12) !important;
                               color: #a6d96a; font-size:16px; }
.menu-badge-active          { font-size:9px; font-weight:800; padding:2px 7px;
                               border-radius:100px; background:#a6d96a; color:#0a0a14; }
.menu-badge-new             { font-size:9px; font-weight:800; padding:2px 7px;
                               border-radius:100px; background:rgba(166, 217, 106,0.2);
                               color:#a6d96a; }
.story-avatar-ring--upgrade { background: linear-gradient(135deg,#f7b42c,#fc575e); }
.story-username--upgrade    { color: #f7b42c; font-weight: 700; }


/* ==== subscription.css ==== */
/* ─────────────────────────────────────────────────────────────────────────────
   subscription.css  —  Kinetic Premium Subscription Page
   Tambahkan @import ke file CSS utama:
     @import "./subscription.css";
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Page shell ──────────────────────────────────────────────────────────────── */
.sub-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
  background: var(--bg-page);
  color: var(--text-primary);
  padding-bottom: 160px;
  overflow-x: hidden;
  position: relative;
}

/* ── Header (extend .page-header dari components.css) ────────────────────────── */
/* Tidak perlu redefine — .page-header sudah handle sticky, border-bottom, flex.
   Hanya tambahkan bg blur agar konsisten saat scroll */
.sub-page .page-header {
  background: rgba(13, 13, 24, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Title premium dengan gradient khas — modifier opsional di atas .page-title */
.page-title--premium {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #a6d96a 0%, #4bd88f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Hero ────────────────────────────────────────────────────────────────────── */
.sub-hero {
  text-align: center;
  padding: 40px 24px 32px;
  background: linear-gradient(180deg,
    rgba(166, 217, 106, 0.06) 0%,
    transparent 100%);
  position: relative;
}

.sub-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 280px; height: 280px;
  background: radial-gradient(
    ellipse at center,
    rgba(166, 217, 106, 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.sub-hero-crown {
  font-size: 48px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 18px rgba(166, 217, 106,0.4));
  animation: sub-float 3s ease-in-out infinite;
}

@keyframes sub-float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-6px); }
}

.sub-hero-title {
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 12px;
  color: #fff;
}

.sub-hero-accent {
  background: linear-gradient(135deg, #a6d96a 0%, #4bd88f 60%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sub-hero-sub {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.60);
  max-width: 320px;
  margin: 0 auto;
}

.sub-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(166, 217, 106, 0.12);
  border: 1px solid rgba(166, 217, 106, 0.35);
  color: #a6d96a;
  font-size: 13px;
  font-weight: 600;
}

/* ── Sections ────────────────────────────────────────────────────────────────── */
.sub-benefits,
.sub-plans,
.sub-compare,
.sub-testimonials {
  padding: 0 16px 28px;
}

.sub-section-title {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 1.5px;
  margin: 0 0 16px;
  color: var(--text-primary);
}

/* ── Benefit list ────────────────────────────────────────────────────────────── */
.sub-benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sub-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s;
}
.sub-benefit-item:hover {
  background: rgba(255,255,255,0.07);
}

.sub-benefit-emoji {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(166, 217, 106,0.08);
  border-radius: 10px;
}

.sub-benefit-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sub-benefit-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.sub-benefit-desc {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.sub-benefit-check {
  flex-shrink: 0;
  color: #a6d96a;
  margin-top: 2px;
}

/* ── Plan cards ──────────────────────────────────────────────────────────────── */
.sub-plan-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sub-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px 16px 16px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.sub-plan-card:active {
  transform: scale(0.97);
}
.sub-plan-card--selected {
  border-color: #a6d96a;
  background: rgba(166, 217, 106, 0.08);
}

.sub-plan-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  flex-wrap: wrap;
}

.sub-plan-label {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.sub-plan-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 100px;
  background: #a6d96a;
  color: #0a0a14;
  text-transform: uppercase;
}

.sub-plan-price {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  margin-top: 4px;
}

.sub-plan-per-month {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}

.sub-plan-savings {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #a6d96a;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(166, 217, 106,0.12);
  margin-top: 4px;
}

.sub-plan-radio {
  position: absolute;
  top: 14px; right: 14px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}
.sub-plan-card--selected .sub-plan-radio {
  border-color: #a6d96a;
}
.sub-plan-radio-inner {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #a6d96a;
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sub-plan-radio-inner--checked {
  transform: scale(1);
}

/* ── Comparison table ────────────────────────────────────────────────────────── */
.sub-compare-table {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.sub-compare-header {
  display: grid;
  grid-template-columns: 1fr 80px 90px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.50);
}

.sub-compare-tier-col--premium {
  color: #a6d96a;
}

.sub-compare-row {
  display: grid;
  grid-template-columns: 1fr 80px 90px;
  padding: 11px 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  align-items: center;
}

.sub-compare-row:nth-child(odd) {
  background: rgba(255,255,255,0.02);
}

.sub-compare-feature {
  color: rgba(255,255,255,0.75);
}

.sub-compare-free {
  color: rgba(255,255,255,0.35);
  text-align: center;
}

.sub-compare-premium {
  color: #a6d96a;
  text-align: center;
  font-weight: 600;
}

/* ── Testimonials ────────────────────────────────────────────────────────────── */
.sub-testi-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sub-testi-card {
  margin: 0;
  padding: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  position: relative;
}

.sub-testi-card::before {
  content: '"';
  position: absolute;
  top: 10px; left: 16px;
  font-size: 48px;
  line-height: 1;
  color: rgba(166, 217, 106,0.15);
  font-family: Georgia, serif;
  pointer-events: none;
}

.sub-testi-stars {
  font-size: 13px;
  color: #a6d96a;
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.sub-testi-quote {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin: 0 0 10px;
  padding-top: 4px;
}

.sub-testi-user {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.40);
}

/* ── Sticky CTA ──────────────────────────────────────────────────────────────── */
.sub-cta-sticky {
    /* `backdrop-filter` dibuang: latarnya ≥ 95% buram, jadi yang diburamkan
       di belakangnya tak pernah terlihat — yang tersisa hanya biaya baca-balik
       + blur + komposit ulang, pada bilah yang menempel di layar sepanjang
       waktu dan ikut dirasterisasi tiap potretan transisi. */
  position: fixed;
  bottom: 0; left: 50%; right: auto;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--lebar-kolom);       /* ikut lebar page */
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(13, 13, 24, 0.95);
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 30;
}

.sub-cta-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  font-size: 13px;
}

.sub-cta-success {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(166, 217, 106, 0.10);
  border: 1px solid rgba(166, 217, 106, 0.25);
  color: #a6d96a;
  font-size: 13px;
  font-weight: 600;
}

.sub-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #a6d96a 0%, #4bd88f 100%);
  color: #0a0a14;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 24px rgba(166, 217, 106, 0.30);
  -webkit-tap-highlight-color: transparent;
}
.sub-cta-btn:active { transform: scale(0.98); }
.sub-cta-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.sub-cta-btn--loading { opacity: 0.75; }

.sub-cta-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2.5px solid rgba(10,10,20,0.25);
  border-top-color: #0a0a14;
  border-radius: 50%;
  animation: sub-spin 0.7s linear infinite;
}

@keyframes sub-spin { to { transform: rotate(360deg); } }

.sub-cta-already {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(166, 217, 106,0.08);
  border: 1px solid rgba(166, 217, 106,0.20);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
}

.sub-cta-explore-link {
  color: #a6d96a;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.sub-cta-terms {
  font-size: 11px;
  color: rgba(255,255,255,0.30);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.sub-cta-link {
  color: rgba(255,255,255,0.50);
  text-decoration: underline;
}

/* ── Responsive (tablet ke atas) ─────────────────────────────────────────────── */
@media (min-width: 480px) {
  .sub-plan-cards {
    max-width: var(--lebar-kolom);
    margin: 0 auto;
  }
}

/* ── Subscription checkout page ──────────────────────────────────────────────── */
.sub-pay-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
  background: var(--bg-page);
  color: var(--text-primary);
  padding-bottom: 140px;
  overflow-x: hidden;
  position: relative;
}

.sub-pay-page .page-header {
  background: rgba(13, 13, 24, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sub-pay-body {
  padding: 20px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sub-pay-section-title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1.5px;
  margin: 0 0 12px;
  color: var(--text-primary);
}

.sub-pay-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sub-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.sub-pay-label { color: var(--text-secondary); }
.sub-pay-value { color: var(--text-primary); font-weight: 600; }

.sub-pay-row--total {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
  margin-top: 4px;
}

.sub-pay-total {
  font-size: 20px;
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  color: #a6d96a;
}

.sub-pay-row--code { opacity: 0.6; }
.sub-pay-code { font-size: 12px; letter-spacing: 0.05em; color: var(--text-secondary); }

.sub-pay-method-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sub-pay-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}

.sub-pay-method--selected {
  border-color: #a6d96a;
  background: rgba(166, 217, 106,0.06);
}

.sub-pay-method-radio {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
}

.sub-pay-method--selected .sub-pay-method-radio { border-color: #a6d96a; }

.sub-pay-method-radio-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #a6d96a;
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}

.sub-pay-method-radio-dot--on { transform: scale(1); }

.sub-pay-method-text {
  display: flex; flex-direction: column; gap: 2px;
}

.sub-pay-method-label {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
}

.sub-pay-method-sub {
  font-size: 11px; color: var(--text-secondary);
}

.sub-pay-error {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  color: #fca5a5; font-size: 13px;
}

.sub-pay-sticky {
    /* `backdrop-filter` dibuang: latarnya ≥ 95% buram, jadi yang diburamkan
       di belakangnya tak pernah terlihat — yang tersisa hanya biaya baca-balik
       + blur + komposit ulang, pada bilah yang menempel di layar sepanjang
       waktu dan ikut dirasterisasi tiap potretan transisi. */
  position: fixed;
  bottom: 0; left: 50%; right: auto;
  transform: translateX(-50%);
  width: 100%; max-width: var(--lebar-kolom);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(13,13,24,0.95);
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 30;
}

.sub-pay-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 72px 24px; text-align: center;
}

.sub-pay-empty-crown {
  font-size: 52px;
  filter: drop-shadow(0 0 18px rgba(166, 217, 106,0.35));
  animation: sub-float 3s ease-in-out infinite;
  line-height: 1;
}

.sub-pay-empty-title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--text-primary);
  margin: 4px 0 0;
}

.sub-pay-empty-desc {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 260px;
  line-height: 1.6;
  margin: 0;
}

.sub-pay-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 12px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #a6d96a 0%, #4bd88f 100%);
  color: #0a0a14;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.04em;
}

/* ── Hero banner ─────────────────────────────────────────────────────────────── */
.sub-pay-hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 20px 20px;
  background: rgba(166, 217, 106,0.06);
  border: 1px solid rgba(166, 217, 106,0.18);
  border-radius: 22px;
  overflow: hidden;
}

.sub-pay-hero-glow {
  position: absolute;
  top: -40px; left: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(ellipse, rgba(166, 217, 106,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.sub-pay-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sub-pay-hero-crown {
  font-size: 36px;
  filter: drop-shadow(0 0 12px rgba(166, 217, 106,0.5));
  flex-shrink: 0;
}

.sub-pay-hero-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #a6d96a 0%, #4bd88f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 3px;
}

.sub-pay-hero-plan {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.70);
  margin: 0;
}

.sub-pay-hero-amount {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.5px;
  color: #a6d96a;
  margin: 0;
  flex-shrink: 0;
}

/* ── Order code pill ─────────────────────────────────────────────────────────── */
.sub-pay-code-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 100px;
  font-size: 12px;
  color: var(--text-secondary);
  align-self: flex-start;
}

.sub-pay-code-pill svg { opacity: 0.5; flex-shrink: 0; }

/* ── Payment method icon ─────────────────────────────────────────────────────── */
.sub-pay-method-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  transition: background 0.2s, color 0.2s;
}

.sub-pay-method-icon--on {
  background: rgba(166, 217, 106,0.12);
  color: #a6d96a;
}

/* ── Secure note ─────────────────────────────────────────────────────────────── */
.sub-pay-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.30);
  padding: 4px 0 8px;
}

/* ── Light mode: new elements ────────────────────────────────────────────────── */
[data-theme="light"] .sub-pay-hero-banner {
  background: rgba(61,102,0,0.05);
  border-color: rgba(61,102,0,0.18);
}

[data-theme="light"] .sub-pay-hero-glow {
  background: radial-gradient(ellipse, rgba(61,102,0,0.10) 0%, transparent 70%);
}

[data-theme="light"] .sub-pay-hero-tag {
  background: linear-gradient(135deg, #3d6600 0%, #0a7035 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .sub-pay-hero-plan { color: var(--text-secondary); }
[data-theme="light"] .sub-pay-hero-amount { color: #3d6600; }

[data-theme="light"] .sub-pay-code-pill {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="light"] .sub-pay-method-icon { background: var(--bg-elevated); color: var(--text-secondary); }
[data-theme="light"] .sub-pay-method-icon--on { background: rgba(61,102,0,0.10); color: #3d6600; }

[data-theme="light"] .sub-pay-secure { color: var(--text-muted); }

[data-theme="light"] .sub-pay-empty-title { color: var(--text-primary); }
[data-theme="light"] .sub-pay-empty-desc { color: var(--text-secondary); }

[data-theme="light"] .sub-pay-back-link {
  background: linear-gradient(135deg, #3d6600 0%, #0a7035 100%);
  color: #fff;
}

/* Light mode */
[data-theme="light"] .sub-pay-page .page-header {
  background: rgba(243,243,251,0.92);
  border-bottom-color: var(--border);
}

[data-theme="light"] .sub-pay-card {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="light"] .sub-pay-row--total { border-top-color: var(--border); }

[data-theme="light"] .sub-pay-total { color: #3d6600; }

[data-theme="light"] .sub-pay-method {
  background: var(--bg-card);
  border-color: var(--border-strong);
}

[data-theme="light"] .sub-pay-method--selected {
  border-color: #3d6600;
  background: rgba(61,102,0,0.05);
}

[data-theme="light"] .sub-pay-method--selected .sub-pay-method-radio { border-color: #3d6600; }
[data-theme="light"] .sub-pay-method-radio-dot { background: #3d6600; }
[data-theme="light"] .sub-pay-method-radio { border-color: rgba(0,0,20,0.25); }

[data-theme="light"] .sub-pay-sticky {
  background: rgba(243,243,251,0.96);
  border-top-color: var(--border);
}

[data-theme="light"] .sub-pay-back-link { color: #3d6600; }

/* ── Light mode overrides ─────────────────────────────────────────────────────── */
[data-theme="light"] .sub-page .page-header {
  background: rgba(243, 243, 251, 0.92);
  border-bottom-color: var(--border);
}

[data-theme="light"] .sub-hero {
  background: linear-gradient(180deg,
    rgba(61, 102, 0, 0.05) 0%,
    transparent 100%);
}

[data-theme="light"] .sub-hero::before {
  background: radial-gradient(
    ellipse at center,
    rgba(61, 102, 0, 0.08) 0%,
    transparent 70%
  );
}

[data-theme="light"] .sub-hero-title {
  color: var(--text-primary);
}

[data-theme="light"] .sub-hero-sub {
  color: var(--text-secondary);
}

[data-theme="light"] .sub-active-badge {
  background: rgba(61, 102, 0, 0.08);
  border-color: rgba(61, 102, 0, 0.25);
  color: #3d6600;
}

/* Benefit items */
[data-theme="light"] .sub-benefit-item {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="light"] .sub-benefit-item:hover {
  background: var(--bg-card-hover);
}

[data-theme="light"] .sub-benefit-emoji {
  background: rgba(61, 102, 0, 0.08);
}

[data-theme="light"] .sub-benefit-check {
  color: #3d6600;
}

/* Plan cards */
[data-theme="light"] .sub-plan-card {
  background: var(--bg-card);
  border-color: var(--border-strong);
}
[data-theme="light"] .sub-plan-card--selected {
  border-color: #3d6600;
  background: rgba(61, 102, 0, 0.05);
}

[data-theme="light"] .sub-plan-label {
  color: var(--text-primary);
}

[data-theme="light"] .sub-plan-price {
  color: var(--text-primary);
}

[data-theme="light"] .sub-plan-per-month {
  color: var(--text-muted);
}

[data-theme="light"] .sub-plan-savings {
  color: #3d6600;
  background: rgba(61, 102, 0, 0.08);
}

[data-theme="light"] .sub-plan-radio {
  border-color: rgba(0, 0, 20, 0.25);
}
[data-theme="light"] .sub-plan-card--selected .sub-plan-radio {
  border-color: #3d6600;
}
[data-theme="light"] .sub-plan-radio-inner {
  background: #3d6600;
}

[data-theme="light"] .sub-plan-badge {
  background: #3d6600;
  color: #fff;
}

/* Compare table */
[data-theme="light"] .sub-compare-table {
  border-color: var(--border-strong);
}

[data-theme="light"] .sub-compare-header {
  background: var(--bg-elevated);
  color: var(--text-muted);
}

[data-theme="light"] .sub-compare-tier-col--premium {
  color: #3d6600;
}

[data-theme="light"] .sub-compare-row {
  border-top-color: var(--border);
}
[data-theme="light"] .sub-compare-row:nth-child(odd) {
  background: rgba(0, 0, 20, 0.02);
}

[data-theme="light"] .sub-compare-feature {
  color: var(--text-primary);
}

[data-theme="light"] .sub-compare-free {
  color: var(--text-muted);
}

[data-theme="light"] .sub-compare-premium {
  color: #3d6600;
}

/* Testimonials */
[data-theme="light"] .sub-testi-card {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="light"] .sub-testi-card::before {
  color: rgba(61, 102, 0, 0.15);
}

[data-theme="light"] .sub-testi-stars {
  color: #3d6600;
}

[data-theme="light"] .sub-testi-quote {
  color: var(--text-secondary);
}

[data-theme="light"] .sub-testi-user {
  color: var(--text-muted);
}

/* Sticky CTA */
[data-theme="light"] .sub-cta-sticky {
  background: rgba(243, 243, 251, 0.96);
  border-top-color: var(--border);
}

[data-theme="light"] .sub-cta-already {
  background: rgba(61, 102, 0, 0.06);
  border-color: rgba(61, 102, 0, 0.20);
  color: var(--text-primary);
}

[data-theme="light"] .sub-cta-explore-link {
  color: #3d6600;
}

[data-theme="light"] .sub-cta-btn {
  background: linear-gradient(135deg, #3d6600 0%, #0a7035 100%);
  color: #fff;
  box-shadow: 0 4px 24px rgba(61, 102, 0, 0.25);
}

[data-theme="light"] .sub-cta-terms {
  color: var(--text-muted);
}

[data-theme="light"] .sub-cta-link {
  color: var(--text-secondary);
}

[data-theme="light"] .sub-cta-success {
  background: rgba(61, 102, 0, 0.08);
  border-color: rgba(61, 102, 0, 0.25);
  color: #3d6600;
}

/* Title gradient — stay lime on dark, adapt on light */
[data-theme="light"] .page-title--premium {
  background: linear-gradient(135deg, #3d6600 0%, #0a7035 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .sub-hero-accent {
  background: linear-gradient(135deg, #3d6600 0%, #0a7035 60%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* ==== live-viewer-unmute (appended) ==== */
.live-viewer-unmute-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 3;
}
.live-viewer-unmute-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s;
}
.live-viewer-unmute-overlay:active .live-viewer-unmute-pill { transform: scale(0.96); }



/* ===== page-meet.css ===== */
/* page-meet.css — Halaman "Meet" (konferensi P2P mesh, gaya Google Meet). */

.meet-page {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #0a0a0f;
    color: #fff;
    font-family: var(--font-body);
    overflow: hidden;
}

/* ── Top bar (in-meet) ─────────────────────────────────────────────────────── */
.meet-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    flex: 0 0 auto;
    z-index: 5;
}

.meet-topbar-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
}

.meet-topbar-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
}

/* ── Panggung & grid tile ─────────────────────────────────────────────────── */
.meet-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px 96px;
}

.meet-hidden {
    display: none !important;
}

.meet-tiles {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
    align-content: center;
    justify-items: center;
}

/* Green room: hanya tile self, besar & terpusat. */
.meet-tiles--solo {
    grid-template-columns: minmax(0, 720px);
    grid-auto-rows: auto;
}

.meet-tile {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    background: #16161f;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.meet-tiles--solo .meet-tile {
    aspect-ratio: 16 / 9;
    max-height: 60vh;
}

/* Tandai tile sendiri (cincin biru, seperti highlight di Google Meet). */
.meet-tile--self {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

.meet-tile-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #16161f;
}

/* Mirror hanya kamera sendiri (seperti Google Meet); remote tidak di-mirror. */
.meet-tile--self .meet-tile-video {
    transform: scaleX(-1);
}

/* Avatar fallback saat kamera off. */
.meet-tile-avatar {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #1f1f2b;
}

.meet-tile-avatar span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: var(--accent-lime, #c3f53c);
    color: #0a0a14;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 32px;
    text-transform: uppercase;
}

.meet-tile.cam-off .meet-tile-video {
    display: none;
}

.meet-tile.cam-off .meet-tile-avatar {
    display: flex;
}

/* Bar nama + ikon mic di pojok tile. */
.meet-tile-bar {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 20px);
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.meet-tile-name {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ikon mic-off hanya tampil saat peserta mute. */
.meet-tile-mic {
    display: none;
    align-items: center;
    color: #ff5c5c;
}

.meet-tile.mic-off .meet-tile-mic {
    display: inline-flex;
}

.meet-tile.mic-off .meet-tile-bar {
    background: rgba(180, 30, 30, 0.55);
}

/* ── Control bar ──────────────────────────────────────────────────────────── */
.meet-controls {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: rgba(20, 20, 28, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10;
}

.meet-ctrl {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: transform 0.12s, background 0.15s;
}

.meet-ctrl:hover {
    background: rgba(255, 255, 255, 0.2);
}

.meet-ctrl:active {
    transform: scale(0.94);
}

/* Mic/kamera dalam keadaan OFF → merah (gaya Google Meet). */
.meet-ctrl--off {
    background: #ea4335;
}

.meet-ctrl--off:hover {
    background: #f0584a;
}

.meet-ctrl--leave {
    background: #ea4335;
    width: 58px;
}

.meet-ctrl--leave:hover {
    background: #f0584a;
}

.meet-ctrl-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #0a0a14;
    background: var(--accent-lime, #c3f53c);
    border-radius: 9px;
}

/* ── Green room (prejoin) ─────────────────────────────────────────────────── */
.meet-prejoin-mode .meet-stage {
    padding-bottom: 8px;
}

.meet-prejoin {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 28px;
    text-align: center;
}

.meet-prejoin-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
}

.meet-prejoin-sub {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    max-width: 340px;
    margin-top: -4px;
}

.meet-prejoin-toggles {
    display: flex;
    gap: 14px;
    margin: 4px 0;
}

.meet-prejoin-join {
    min-width: 200px;
}

.meet-prejoin-back {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    text-decoration: none;
    padding: 6px;
}

.meet-prejoin-back:hover {
    color: #fff;
}

/* ── Input & tombol ───────────────────────────────────────────────────────── */
.meet-input {
    width: 100%;
    max-width: 340px;
    padding: 12px 14px;
    font-size: 14px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    outline: none;
}

.meet-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.meet-input:focus {
    border-color: var(--accent-lime, #c3f53c);
}

.meet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s, opacity 0.12s;
}

.meet-btn:active {
    transform: scale(0.97);
}

.meet-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.meet-btn--primary {
    background: var(--accent-lime, #c3f53c);
    border-color: var(--accent-lime, #c3f53c);
    color: #0a0a14;
}

.meet-btn--ghost {
    background: transparent;
    color: #ff7a7a;
    border-color: #ff7a7a;
}

.meet-btn--small {
    padding: 8px 14px;
    font-size: 12px;
}

/* ── Panel orang (host): undangan + ruang tunggu ──────────────────────────── */
.meet-people {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 92px;
    width: min(340px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: #15151d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    z-index: 20;
}

.meet-people-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
}

.meet-people-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    cursor: pointer;
}

.meet-people-close:hover {
    color: #fff;
}

.meet-invite-label,
.meet-waitroom-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
}

.meet-invite-row {
    display: flex;
    gap: 8px;
}

.meet-invite-input {
    flex: 1;
    max-width: none;
    font-size: 12px;
}

.meet-waitroom-empty {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
}

.meet-wait-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.meet-wait-item:first-of-type {
    border-top: none;
}

.meet-wait-name {
    font-size: 14px;
    font-weight: 600;
}

.meet-wait-actions {
    display: flex;
    gap: 8px;
}

/* ── Layar status terpusat ────────────────────────────────────────────────── */
.meet-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 24px;
    text-align: center;
    color: #fff;
}

.meet-result-icon {
    font-size: 44px;
}

.meet-waiting-text {
    color: rgba(255, 255, 255, 0.7);
}

.meet-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--accent-lime, #c3f53c);
    border-radius: 50%;
    animation: meet-spin 0.8s linear infinite;
}

@keyframes meet-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Tombol MEET di Merchant Hub (pil terisi, konsisten dgn LIVE & SCAN) ───── */
.mhub-meet-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 100px;
    background: var(--accent-blue);
    color: #fff;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.mhub-meet-btn:hover {
    opacity: 0.88;
}
.mhub-meet-btn:active {
    transform: scale(0.94);
}

/* ── Tombol control aktif (chat/share toggle ON) ──────────────────────────── */
.meet-ctrl--on {
    background: var(--accent-blue);
}
.meet-ctrl--on:hover {
    background: var(--accent-blue);
    opacity: 0.9;
}

/* ── Panel chat dalam meet ────────────────────────────────────────────────── */
.meet-chat {
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 92px;
    width: min(340px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    background: #15151d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    z-index: 20;
    overflow: hidden;
}
.meet-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    flex: 0 0 auto;
}
.meet-chat-msgs {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.meet-chat-msg {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.meet-chat-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-lime, #c3f53c);
}
.meet-chat-text {
    font-size: 14px;
    color: #fff;
    word-break: break-word;
}
.meet-chat-input-row {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}
.meet-chat-input-row .meet-input {
    flex: 1;
    max-width: none;
}

/* Saat berbagi layar, tile sendiri JANGAN di-mirror (teks layar harus normal). */
.meet-tile--self.meet-sharing .meet-tile-video {
    transform: none;
}
.meet-tile--self.meet-sharing .meet-tile-video {
    object-fit: contain;
    background: #000;
}


/* ===== Header Merchant Hub / Pusat Admin — penempatan icon ===================
   Masalah lama: 3 pill (LIVE/MEET/SCAN) padding & gap tak konsisten (tinggi
   pill beda → icon terlihat tak sejajar), .mhub-scan-btn tanpa flex-shrink
   (memendek duluan), dan di layar sempit flex-wrap membuat tombol turun baris
   berantakan. Fix: samakan metrik semua pill, kunci SATU baris (tanpa wrap),
   dan di ≤520px label teks disembunyikan → pill jadi lingkaran 38px yang
   seragam dengan ThemeToggle & tombol lonceng. */

.mhub-header { gap: 10px; }
.mhub-header-left { flex-shrink: 0; min-width: 0; }
.mhub-header-right { flex-shrink: 0; }
.mhub-header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Metrik seragam untuk ketiga pill: tinggi, padding, gap, dan baseline sama. */
.mhub-live-btn,
.mhub-meet-btn,
.mhub-scan-btn {
    height: 34px;
    padding: 0 12px;
    gap: 6px;
    line-height: 1;
    flex-shrink: 0;
    justify-content: center;
}
/* SVG di dalam pill/tombol bulat jangan ikut menyusut. */
.mhub-header-right svg { flex-shrink: 0; }

/* Layar sempit (Android umum): sembunyikan label → icon-only, lingkaran 38px
   seragam dengan .theme-toggle / .mhub-bell-btn — semua muat satu baris. */
@media (max-width: 520px) {
    .mhub-btn-label { display: none; }
    .mhub-live-btn,
    .mhub-meet-btn,
    .mhub-scan-btn {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
    }
    .mhub-header-title { font-size: 18px; }
    .mhub-header-right { gap: 6px; }
}

/* ===== payment-success: judul responsif (override) ===== */
.ps-title { font-size: clamp(32px, 11vw, 46px); line-height: 1.05; }


/* ===== page-event-detail: live PiP ===== */

/* ── Live PiP melayang (merchant sedang siaran) ───────────────────────────── */
.mlpip {
    position: fixed;
    right: 14px;
    bottom: 84px; /* di atas bottom-nav */
    z-index: 120;
    width: 200px;
    max-width: 46vw;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
}
.mlpip-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    cursor: pointer;
}
.mlpip-video .live-viewer,
.mlpip-video .live-viewer-video-wrap,
.mlpip-video .live-viewer-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Mode mini: sembunyikan kontrol/teks viewer penuh. */
.mlpip-video .live-viewer-header,
.mlpip-video .live-viewer-controls,
.mlpip-video .live-viewer-viewers {
    display: none !important;
}
.mlpip-close {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mlpip-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #c0152b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.mlpip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    animation: mlpip-blink 1.2s infinite;
}
@keyframes mlpip-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.mlpip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ===== PiP draggable override ===== */
/* ── PiP override: lebih kecil + draggable ────────────────────────────────── */
.mlpip {
    width: 150px;
    max-width: 42vw;
    cursor: move;
    touch-action: none; /* drag di mobile tidak memicu scroll */
    user-select: none;
    -webkit-user-select: none;
}
.mlpip-video { cursor: move; }
.mlpip-bar { cursor: move; }
.mlpip-grip {
    margin-left: auto;
    opacity: 0.75;
    font-size: 12px;
    letter-spacing: -1px;
}


/* ===== ed-live immersive override ===== */
/* ── Live section di event detail: pemutar imersif (bukan kartu kaku) ──────── */
.ed-live-section .ed-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.ed-live-section .ed-section-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger, #e23744);
    box-shadow: 0 0 0 4px rgba(226, 55, 68, 0.18);
    animation: live-pulse 1.2s ease-in-out infinite;
}
.ed-live-section .live-viewer {
    position: relative;
    gap: 0;
    border: none;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}
/* Header (nama merchant + badge) melayang di atas video, bukan bar kaku. */
.ed-live-section .live-viewer-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 12px 14px 26px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.ed-live-section .live-viewer-merchant {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.ed-live-section .live-viewer-video-wrap {
    aspect-ratio: 16 / 9;
    border-radius: 18px;
}
/* Kontrol (penonton + tombol) melayang di bawah video. */
.ed-live-section .live-viewer-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 26px 14px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0));
}
.ed-live-section .live-viewer-viewers {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.ed-live-section .live-viewer-error {
    margin: 10px 12px;
}

.mlpip { will-change: transform; }


/* ===== ed-more grid ===== */
/* ── Event lain di bawah detail (grid marketplace) ────────────────────────── */
.ed-more { margin-top: 6px; }
.ed-more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}
/* Tetap 2 kolom di semua ukuran (konsisten dgn Explore). */
@media (min-width: 640px) {
    .ed-more-grid { gap: 16px; }
}

/* ── Social proof strip + stock bar (marketplace, data asli variant) ──────── */
.ed-social-proof {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px 0 14px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 6px;
}
.ed-sp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ed-sp-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.ed-sp-item svg { opacity: .8; flex-shrink: 0; }
.ed-sp-item b { color: var(--text-primary); font-weight: 800; }
.ed-sp-verified { color: var(--accent-lime); }
.ed-sp-verified svg { opacity: 1; }
.ed-sp-stock { display: flex; flex-direction: column; gap: 5px; }
.ed-sp-bar {
    height: 6px;
    border-radius: 100px;
    background: var(--bg-elevated);
    overflow: hidden;
}
.ed-sp-bar-fill {
    height: 100%;
    border-radius: 100px;
    background: var(--accent-lime);
    transition: width .5s ease;
}
.ed-sp-bar-fill--low { background: linear-gradient(90deg, #ff8a3d, #ff2d55); }
.ed-sp-remain { font-size: 11.5px; color: var(--text-secondary); }
.ed-sp-remain b { color: var(--text-primary); font-weight: 800; }
.ed-sp-low { color: #ff5b3d; }
.ed-sp-low b { color: #ff5b3d; }

/* ═══ Marketplace polish lintas-halaman (orders • tickets • profile • cart) ═ */
.order-card, .cart-item, .ticket-card {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.order-card:hover, .ticket-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
    border-color: var(--border-strong);
}
.order-status-badge {
    border-radius: 100px;
    font-weight: 700;
    letter-spacing: .02em;
}
.filter-tab {
    border-radius: 100px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.order-action-btn { border-radius: 100px; font-weight: 700; }
.menu-item { transition: background .15s ease; }
.menu-item:hover { background: var(--bg-elevated); }
.confirm-btn:not(:disabled):active { transform: scale(.99); }

/* ── Profil merchant publik (/m/:id) + rating & reviews ─────────────────────
   Prefix: mp-* (profil), mrv-* (reviews). Entry: tombol penyelenggara di
   event detail (ed-organizer) & chip penyelenggara kartu explore (exp-mkt-org). */

/* Page: kolom var(--lebar-kolom) konsisten dengan halaman lain (home/explore/detail).
   Hero full-bleed di dalam kolom → dibatasi 480 via .mp-page max-width. */
/* Kolom OPAQUE + terpusat ≤var(--lebar-kolom) → grid global hanya tampak di gutter (spt /lives).
   border-inline = pembatas tegas antara lebar kolom & area di luar (gutter). */
.mp-page { min-height: 100vh; width: 100%; max-width: var(--lebar-kolom); margin: 0 auto; background: var(--bg-page); border-inline: 1px solid var(--border-soft); position: relative; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
.mp-container { padding: 0 16px; max-width: var(--lebar-kolom); margin: 0 auto; }

/* Hero */
.mp-hero { position: relative; height: 200px; overflow: hidden; background: var(--bg-elevated); }
.mp-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.mp-hero-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 35%, var(--bg-page) 100%); }

/* Kepala profil */
.mp-head { margin: -46px auto 0; padding: 0 16px; position: relative; display: flex; align-items: flex-end; gap: 12px; }
.mp-avatar-wrap { position: relative; flex: none; }
.mp-avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg-page); background: var(--bg-elevated); display: block; }
.mp-avatar-fallback { display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 800; color: var(--text-on-accent); background: var(--accent-lime); }
/* Bingkai story pada avatar — identik dgn .ed-story-ring-circle di event detail
   (gradient lime→blue→violet). Muncul hanya bila merchant punya story aktif;
   .mp-avatar tetap punya border bg-page sebagai pemisah cincin↔logo. */
.mp-avatar-ring { display: block; padding: 3px; border: none; border-radius: 50%; background: linear-gradient(45deg, var(--accent-lime), var(--accent-blue), var(--accent-violet)); cursor: pointer; line-height: 0; -webkit-tap-highlight-color: transparent; }
.mp-avatar-badge { position: absolute; right: 2px; bottom: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-lime); color: var(--text-on-accent); border: 3px solid var(--bg-page); display: flex; align-items: center; justify-content: center; }

.mp-head-actions { margin-left: auto; padding-bottom: 8px; display: flex; align-items: center; gap: 8px; position: relative; }
.mp-follow-btn { padding: 10px 26px; border-radius: 999px; border: 1px solid transparent; background: var(--accent-blue); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; transition: opacity .15s, background .15s; }
.mp-follow-btn:disabled { opacity: .6; }
.mp-follow-btn[data-on="true"] { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); }
.mp-icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; transition: background .15s, border-color .15s; }
.mp-icon-btn:hover { background: var(--bg-elevated-2); border-color: var(--accent-lime); }
.mp-share-toast { position: absolute; top: calc(100% + 8px); right: 0; background: var(--text-primary); color: var(--bg-page); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; white-space: nowrap; z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,.28); }

.mp-name-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.mp-name { font-size: 25px; font-weight: 800; margin: 0; letter-spacing: -.02em; line-height: 1.15; }
.mp-verified { color: var(--accent-lime); display: inline-flex; }
.mp-loc { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }
.mp-loc svg { color: var(--accent-lime); flex: none; }

/* Statistik */
.mp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 6px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 14px 6px; }
.mp-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: inherit; }
.mp-stat + .mp-stat { border-left: 1px solid var(--border); }
.mp-stat-num { font-size: 18px; font-weight: 800; }
.mp-stat-star { color: var(--accent-lime); margin-left: 2px; font-size: 14px; }
.mp-stat-label { font-size: 10px; letter-spacing: .12em; color: var(--text-muted); }
.mp-stat-link:hover .mp-stat-num { color: var(--accent-lime); }

/* Tabs */
/* space-evenly → jarak antar tab & ke tepi kolom sama rata. */
.mp-tabs { display: flex; justify-content: space-evenly; gap: 0; margin: 14px 0 12px; border-bottom: 1px solid var(--border); }
.mp-tab { background: none; border: none; padding: 8px 2px 10px; font-size: 12px; letter-spacing: .12em; font-weight: 700; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; text-decoration: none; }
.mp-tab--on { color: var(--text-primary); border-bottom-color: var(--accent-lime); }

/* Grid event + tentang */
.mp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mp-about-text { color: var(--text-primary); line-height: 1.65; white-space: pre-line; }
.mp-empty { color: var(--text-muted); font-size: 14px; padding: 18px 0; }

/* ── Carousel geser EVENTS · TENTANG · ULASAN · STORY ───────────────────────
   Ke-4 panel selalu dirender. Panel AKTIF `position:relative` → dialah yang
   menentukan tinggi container (tab pendek tak menyisakan ruang kosong dari tab
   panjang); panel lain `position:absolute` (keluar flow) digeser ±100% via
   translateX(calc(N% + Dpx)) sehingga tetangga mengintip saat drag & commit-nya
   meluncur. `touch-action: pan-y` = scroll vertikal native, horizontal ditangani
   pointer handler (axis-lock). */
/* min-height = area swipe minimal: tanpa ini, tab berkonten pendek (mis. "Belum
   ada ulasan") menciutkan container ke tinggi konten → area kosong di bawahnya
   BUKAN bagian .mp-swipe sehingga pointerdown tak tertangkap (tak bisa digeser).
   Handler pointer hanya ada di .mp-swipe, jadi container harus selalu punya
   "strip" yang bisa ditarik. Konten tinggi tetap melebihi floor ini (tak dibatasi). */
.mp-swipe { position: relative; overflow: hidden; touch-action: pan-y; min-height: 340px; }
.mp-panel { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; transition: transform .34s cubic-bezier(.32, .72, 0, 1); }
.mp-panel--active { position: relative; } /* hanya yang aktif menentukan tinggi */
.mp-panel--drag { transition: none; }     /* drag mengikuti jari (60fps) */

/* Panel ULASAN in-page (ringkas; form tulis ada di halaman /m/:id/reviews) */
.mp-reviews { padding-top: 4px; }
.mp-reviews-all { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--accent-lime); text-decoration: none; }
.mp-reviews-all:hover { text-decoration: underline; }

/* Muat lebih banyak (paginasi EVENTS) */
/* Kolom, bukan baris: penanda kemajuan berdiri DI ATAS tombolnya, karena ia
   menjelaskan apa yang akan dilakukan tombol itu. Berdampingan, keduanya
   berebut lebar yang sama dan teksnya terpotong di layar sempit. */
.mp-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 20px 0 8px;
    padding-bottom: 8px;
}
.mp-more-count {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
/* Akhir daftar dinyatakan, bukan dibiarkan senyap: tombol yang lenyap begitu
   saja tak bisa dibedakan dari gagal memuat. */
.mp-more-end {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.7;
    letter-spacing: 0.04em;
}
.mp-more-btn { padding: 10px 22px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-primary); font-size: 12px; letter-spacing: .1em; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
.mp-more-btn:hover:not(:disabled) { border-color: var(--accent-lime); background: var(--bg-elevated-2); }
.mp-more-btn:disabled { opacity: .6; cursor: default; }

/* Panel STORY: grid thumbnail 3 kolom, tap → StoryViewer */
.mp-stories { padding-top: 8px; }
.mp-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mp-story-cell { position: relative; aspect-ratio: 9 / 16; border: none; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--bg-elevated); }
.mp-story-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-story-play { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; }

/* ── Reviews (/m/:id/reviews) ──────────────────────────────────────────────── */
.mrv-store { margin: 16px 0 6px; font-size: 12px; letter-spacing: .1em; color: var(--text-muted); text-transform: uppercase; }

.mrv-summary { margin-bottom: 22px; }
.mrv-big { display: flex; align-items: center; gap: 16px; }
.mrv-avg { font-size: 64px; font-weight: 900; color: var(--accent-lime); line-height: .9; letter-spacing: -.04em; }
.mrv-big-side { display: flex; flex-direction: column; gap: 4px; }
.mrv-big-side .mrv-stars { font-size: 20px; }
.mrv-outof { font-size: 13px; color: var(--text-muted); }
.mrv-total { margin: 8px 0 16px; color: var(--text-secondary, var(--text-muted)); font-size: 14px; font-weight: 600; }

.mrv-stars { display: inline-flex; gap: 2px; font-size: 16px; }
.mrv-star { color: var(--border); }
.mrv-star--on { color: var(--accent-lime); }

.mrv-dist { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 11px; }
.mrv-dist-row { display: flex; align-items: center; gap: 12px; }
.mrv-dist-star { width: 12px; text-align: right; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.mrv-dist-bar { flex: 1; height: 9px; border-radius: 999px; background: var(--border); overflow: hidden; }
.mrv-dist-fill { height: 100%; border-radius: 999px; background: var(--accent-lime); transition: width .4s ease; }
.mrv-dist-cnt { width: 34px; text-align: right; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Daftar ulasan */
.mrv-list-head { margin: 6px 0 10px; }
.mrv-list { display: flex; flex-direction: column; gap: 10px; }
.mrv-item { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.mrv-item-head { display: flex; align-items: center; gap: 10px; }
.mrv-item-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-blue); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.mrv-item-who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.mrv-item-name { font-weight: 700; font-size: 14px; }
.mrv-item-date { font-size: 11px; color: var(--text-muted); }
.mrv-item-text { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-primary); }

/* Form ulasan */
.mrv-form { margin-top: 22px; }
.mrv-form-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.mrv-pick { display: flex; gap: 6px; }
.mrv-pick-star { background: none; border: none; font-size: 30px; line-height: 1; color: var(--border); cursor: pointer; padding: 2px; transition: transform .1s; }
.mrv-pick-star:active { transform: scale(1.2); }
.mrv-pick-star--on { color: var(--accent-lime); }
.mrv-form-msg { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ── Profil publik user (/u/:id) ────────────────────────────────────────────── */
.up-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 16px 4px; }
.up-avatar { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 800; color: var(--text-on-accent); background: var(--accent-blue); border: 3px solid var(--accent-lime); }
.up-name { font-size: 24px; font-weight: 800; margin: 14px 0 0; letter-spacing: -.02em; }

/* Ulasan yang ditulis user = kartu yang bisa diklik ke /m/{merchant} */
.up-review-link { display: block; text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.up-review-link:hover { border-color: var(--accent-lime); background: var(--bg-elevated-2); }

/* Avatar & nama penulis ulasan → tautan ke /u/{id} */
a.mrv-item-avatar { text-decoration: none; cursor: pointer; }
.mrv-item-who--link { text-decoration: none; color: inherit; cursor: pointer; }
.mrv-item-who--link:hover .mrv-item-name { color: var(--accent-lime); }

/* ── Daftar follower (/m/:id/followers) ─────────────────────────────────────── */
.mflw-count-badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border); font-size: 13px; font-weight: 800; color: var(--accent-lime); }

.mflw-search { display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; padding: 0 14px; height: 46px; border-radius: 14px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); }
.mflw-search:focus-within { border-color: var(--accent-lime); }
.mflw-search svg { flex: none; }
.mflw-search-input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 15px; }
.mflw-search-input::placeholder { color: var(--text-muted); }

.mflw-list { display: flex; flex-direction: column; gap: 10px; }
.mflw-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--bg-elevated); border: 1px solid var(--border); text-decoration: none; color: inherit; }
.mflw-item--link { cursor: pointer; transition: border-color .15s, background .15s; }
.mflw-item--link:hover { border-color: var(--accent-lime); background: var(--bg-elevated-2); }
.mflw-avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: var(--text-on-accent); background: var(--accent-blue); }
.mflw-meta { display: flex; flex-direction: column; min-width: 0; margin-right: auto; gap: 3px; }
.mflw-name { font-weight: 700; font-size: 15px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mflw-sub { font-size: 12px; color: var(--text-muted); }
.mflw-tag { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--accent-lime); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }

/* ── Entry point: penyelenggara di event detail & explore ──────────────────── */
.ed-organizer { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated); text-decoration: none; color: inherit; }
.ed-organizer:hover { border-color: var(--accent-lime); }
.ed-org-icon { color: var(--accent-lime); display: inline-flex; flex: none; }
.ed-org-text { font-weight: 700; font-size: 14px; margin-right: auto; }
.ed-org-sub { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); }
.ed-org-arrow { color: var(--text-muted); }

.exp-mkt-org { display: inline-block; margin-top: 4px; font-size: 10px; letter-spacing: .1em; font-weight: 700; color: var(--accent-lime); cursor: pointer; }
.exp-mkt-org:hover { text-decoration: underline; }

/* ===== Bottom sheets event detail (tiket & info merchant) ====================
   Panel SELALU dirender (bukan conditional) supaya transisi CSS berjalan dua
   arah: backdrop fade + panel slide-up dengan easing spring-ish. Buka/tutup
   dikontrol class `edsheet--open` dari signal Leptos. */

.edsheet {
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none; /* saat tertutup, jangan halangi halaman */
}
.edsheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.edsheet-panel {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 0;
    
    /* WIDTH: 100% tapi di-clamp ke max-width page */
    width: 100%;
    max-width: var(--lebar-kolom);      /* ← SAMA DENGAN .page */
    
    /* CLOSED: translateX(-50%) center + translateY(100%) hidden */
    transform: translateX(-50%) translateY(100%);
    
    /* Spring easing */
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
    /* Spring-ish: cepat di awal, mendarat halus — sama dengan easing swipe. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.edsheet--open { pointer-events: auto; }
.edsheet--open .edsheet-backdrop { opacity: 1; }
.edsheet--open .edsheet-panel {
    transform: translateX(-50%) translateY(0);
}

/* Grip bar ala native sheet. */
.edsheet-grip {
    width: 40px;
    height: 4px;
    border-radius: 100px;
    background: var(--border);
    margin: 10px auto 2px;
    flex: none;
}
.edsheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 12px;
    border-bottom: 1px solid var(--border-soft);
    flex: none;
}
.edsheet-title {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}
.edsheet-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.edsheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 22px;
}

/* Isi sheet muncul dengan stagger halus saat sheet terbuka. */
.edsheet--open .edsheet-body > * {
    animation: edsheet-rise 0.42s cubic-bezier(0.32, 0.72, 0, 1) backwards;
}
.edsheet--open .edsheet-body > *:nth-child(2) { animation-delay: 0.05s; }
.edsheet--open .edsheet-body > *:nth-child(3) { animation-delay: 0.1s; }
.edsheet--open .edsheet-body > *:nth-child(4) { animation-delay: 0.15s; }
@keyframes edsheet-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Kartu penyelenggara (kini <button>, dulu <a>) ───────────────────────────
   Button TIDAK inherit font & shrink-to-fit → tanpa override ini teks merchant
   menyusut/terpotong dan kartu tak selebar konten lain. */
button.ed-organizer {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
/* Nama toko bisa panjang: clamp satu baris dengan ellipsis (sub tetap block). */
.ed-org-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Tombol pemicu "Pilih Tiket" di body halaman ─────────────────────────── */
.ed-tickets-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.ed-tickets-trigger:hover { border-color: var(--accent-lime); }
.ed-tickets-trigger-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-weight: 700;
    font-size: 15px;
}
.ed-tickets-trigger-sub {
    font-weight: 500;
    font-size: 12px;
    color: var(--text-secondary);
}
.ed-tickets-trigger-arrow { color: var(--text-secondary); flex: none; }

/* ── Kartu info merchant di dalam sheet ──────────────────────────────────── */
.edsheet-mch { display: flex; flex-direction: column; gap: 12px; }
.edsheet-mch-hero {
    height: 120px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-card);
}
.edsheet-mch-hero img { width: 100%; height: 100%; object-fit: cover; }
.edsheet-mch-head { display: flex; align-items: center; gap: 12px; }
.edsheet-mch-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex: none;
}
.edsheet-mch-avatar--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: #fff;
    font-weight: 800;
    font-size: 20px;
}
.edsheet-mch-name {
    font-family: var(--font-display);
    font-size: 19px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.edsheet-mch-verified {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.edsheet-mch-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}
.edsheet-mch-stats b { color: var(--text-primary); }
.edsheet-mch-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.edsheet-mch-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-decoration: none;
    margin-top: 2px;
}
.edsheet-mch-loading {
    text-align: center;
    color: var(--text-secondary);
    padding: 28px 0;
}

/* Footer sheet (CTA keranjang) — menempel di dasar panel, di luar area scroll. */
.edsheet-foot {
    flex: none;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--border-soft);
    background: var(--bg-elevated);
}
.edsheet-cta--disabled {
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* ── Lingkaran story penyelenggara di event detail (ala story-bar) ────────── */
.ed-story-ring {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Sejajar dengan tetangganya, bukan menempel ke tepi kolom.
     *
     * Induknya (`.ed-main`) tidak punya padding sama sekali — setiap anaknya
     * memasang gutter-nya sendiri. `.section` memakai 20px, dan baris kartu
     * toko + ikon chat di bawah lingkaran ini memakai `px-5` yang juga 20px,
     * persis supaya keduanya berbaris.
     *
     * Lingkaran story ini satu-satunya yang terlewat: dengan `padding: 0` ia
     * mulai dari tepi kolom sementara SEMUA tetangganya menjorok, sehingga
     * saat merchant kebetulan punya story, satu baris tampak melompat keluar
     * dari kelurusan halaman.
     *
     * Angkanya harus tetap sama dengan `.section` di
     * `08-page-event-detail.css` dan `px-5` di `product_detail.rs` — tidak ada
     * yang memaksanya, jadi kalau salah satu diubah, ubah ketiganya.
     *
     * `margin-bottom` 4px menyamai `mb-1` pada baris di bawahnya, supaya jarak
     * vertikal antar-elemen di kolom ini tetap satu irama. */
    margin: 14px 0 4px;
    padding: 0 20px;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--text-primary);
}
.ed-story-ring-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(45deg, var(--accent-lime), var(--accent-blue), var(--accent-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.ed-story-ring-circle img,
.ed-story-ring-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-page);
}
.ed-story-ring-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: #fff;
    font-weight: 800;
    font-size: 20px;
}
.ed-story-ring-label { font-size: 13px; font-weight: 700; }

/* Tombol share ulasan → story (halaman /m/{id}/reviews) */
.mrv-share-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    margin-left: 8px;
}
.mrv-share-btn:hover { color: var(--accent-lime); border-color: var(--accent-lime); }

/* ===== Banner slider explore (tabel `banners`, admin-managed) ==============
   Track digeser via translateX dari signal (auto-advance 5 dtk + dots).
   Rasio dikunci agar tinggi stabil (tanpa CLS) apa pun ukuran gambar.

   HANYA slider PUBLIKNYA. Halaman pengelolanya (tab "Spanduk" di /admin) ada
   di `43-admin-banners.css`, dan memakai rasio 21:9 yang sama seperti
   `.exp-bnr-slide` di bawah supaya pratinjau admin tak pernah berbohong. */

.exp-bnr {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-elevated);
    /* Gulir vertikal halaman tetap milik peramban; gerakan mendatar boleh
       ditangani JS (lihat penangan sentuh di `components/banner_slider.rs`).
       Tanpa ini sebagian peramban menahan event sentuhnya dulu untuk menunggu
       apakah halaman akan digulir, dan gesekan banner terasa tersendat. */
    touch-action: pan-y;
}
.exp-bnr-track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.exp-bnr-slide {
    flex: 0 0 100%;
    display: block;
    aspect-ratio: 21 / 9;
}
.exp-bnr-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.exp-bnr-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.exp-bnr-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.exp-bnr-dot--on {
    background: #fff;
    transform: scale(1.25);
}

/* ═══════════════════════════════════════════════════════════════════════
   TOAST — notifikasi UI global (checkout/order, pesan masuk, dll)
   Host fixed di atas-tengah, di dalam lebar kolom app (≤var(--lebar-kolom)) agar sejajar
   dengan konten. Warna dari token → otomatis ikut tema terang/gelap.
   ═══════════════════════════════════════════════════════════════════════ */
.toast-host {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    width: 100%;
    max-width: var(--lebar-kolom);
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none; /* host tembus klik; tiap toast aktifkan sendiri */
}

.toast {
    pointer-events: auto;
    /* Penampung untuk tombol tutup yang ditumpuk di atas jangkarnya. */
    position: relative;
    border-radius: 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-card);
    color: var(--text-primary);
    animation: toast-in 0.26s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Jangkar yang MEMENUHI kartu. Padding pindah ke sini, bukan di `.toast`:
   wilayah yang bisa ditekan harus sama persis dengan yang terlihat sebagai
   kartu — kalau paddingnya milik pembungkus, tepiannya tampak bagian dari
   kartu tetapi tak menanggapi tekanan, dan itu terbaca sebagai kerusakan. */
.toast-tautan {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* Kanan dilebihkan: tombol tutup menumpang di situ, dan teks yang mengalir
       ke bawahnya akan tertutup. */
    padding: 12px 40px 12px 14px;
    border-radius: inherit;
    color: inherit;
    text-decoration: none;
}

.toast--link {
    cursor: pointer;
}
.toast--link:hover {
    border-color: var(--color-primary-border);
}

/* Ikon bulat, warna per jenis */
.toast-icon {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}
.toast--success .toast-icon {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}
.toast--error .toast-icon {
    background: var(--danger);
    color: #fff;
}
.toast--info .toast-icon {
    background: transparent;
    font-size: 15px;
}

/* Aksen garis kiri sesuai jenis */
.toast--success {
    border-left: 3px solid var(--accent-lime);
}
.toast--error {
    border-left: 3px solid var(--danger);
}
.toast--info {
    border-left: 3px solid var(--accent-blue);
}

.toast-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 3px;
}
.toast-title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
}
.toast-body {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
    word-break: break-word;
    /* Maks 2 baris agar toast tetap ringkas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.toast-x {
    /* Di ATAS jangkar, bukan di dalamnya. Menyarangkan tombol di dalam jangkar
       adalah HTML yang tak sah, dan peramban menanganinya berbeda-beda —
       persis jenis perbedaan yang menghasilkan "kadang bisa diklik, kadang
       tidak". */
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.toast-x:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* ===== Bilah tab + dek konten yang bisa digeser =============================
   Dipakai Merchant Hub dan Pusat Admin lewat `components/swipe_tabs.rs`.
   Berkas ini SENGAJA bernomor lebih tinggi dari `15-page-merchant.css`: bilah
   tab lama didefinisikan di sana (dua kali, malah), dan yang di bawah ini
   menggantikan penanda garis-bawah per-tombolnya dengan satu garis yang
   BERGERAK. Selektor sama, spesifisitas sama → yang belakangan menang. */

.mhub-mobile-tabs {
    position: relative;
    display: block; /* pembungkus penggulir; deretannya ada di .mhub-mtab-track */
    padding: 0;
    margin-top: 14px;
    border-bottom: 1px solid var(--border-soft);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.mhub-mobile-tabs::-webkit-scrollbar {
    display: none;
}

.mhub-mtab-track {
    position: relative;
    display: flex;
    min-width: 100%;
}

/* `flex: 1 1 0` = SEMUA tab selebar sama persis, apa pun panjang labelnya.
   Itu prasyarat garis penanda di bawah, yang lebarnya dihitung sebagai
   `100% / jumlah tab`; dengan `flex-basis: auto` lebar tiap tab mengikuti
   labelnya dan garisnya tak akan pernah sejajar.
   
   ── KENAPA TIDAK ADA `min-width` ─────────────────────────────────────────
   Versi pertama memakai `min-width: 88px`. Untuk empat tab Merchant Hub itu
   tak pernah terlihat, tapi Pusat Admin punya ENAM: 6 x 88px = 528px di dalam
   kolom yang lebarnya dikunci var(--lebar-kolom). Bilahnya jadi menggulir mendatar, dan
   "Pengaturan" terpotong di tepi — bilah tab yang harus digeser dulu untuk
   melihat tab yang ada, padahal seluruh gunanya adalah menampilkan pilihan
   sekaligus.
   
   Tanpa `min-width`, keenamnya berbagi rata lebar yang tersedia (~74px pada
   kolom var(--lebar-kolom)) dan muat tanpa menggulir. Ukuran huruf & jarak antarhuruf
   diturunkan seperlunya agar label terpanjang ("Pengaturan", 10 huruf) tetap
   utuh di lebar itu. `text-overflow: ellipsis` dipasang sebagai jaring
   pengaman untuk layar yang lebih sempit lagi — memotong dengan elipsis masih
   terbaca, sedangkan teks yang meluber merusak tata letak seluruh baris. */
.mhub-mtab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 3px 13px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.mhub-mtab:hover {
    color: var(--text-primary);
}
.mhub-mtab--active {
    color: var(--accent-lime);
    /* Garis-bawah per-tombol dimatikan: penandanya sekarang satu elemen yang
       meluncur, dan dua penanda sekaligus akan tampak berkedip saat berpindah. */
    border-bottom: none;
}

/* Lencana ikut ramping: ia berbagi ruang dengan label di dalam tab yang
   lebarnya sudah pas-pasan, dan lencana lebar akan mendorong labelnya ke
   elipsis justru pada tab yang paling perlu dibaca. */
.mhub-mtab-badge {
    display: inline-block;
    margin-left: 3px;
    padding: 1px 4px;
    border-radius: 99px;
    background: var(--danger);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: middle;
}

.mhub-mtab-ink {
    position: absolute;
    bottom: -1px; /* menimpa border-bottom pembungkus, bukan menumpuk di atasnya */
    height: 2px;
    border-radius: 2px;
    background: var(--accent-lime);
    /* Hanya `left` yang beranimasi. `width` tak pernah berubah (semua tab sama
       lebar), jadi memasukkannya ke transisi cuma menambah kerja tata letak. */
    transition: left 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
}

/* ── Dek konten ───────────────────────────────────────────────────────────── */

.tabdeck {
    position: relative;
    /* `clip`, BUKAN `hidden`. Keduanya memotong panel yang meluncur keluar,
       tapi `hidden` menjadikan elemen ini kontainer gulir — dan itu mematikan
       setiap `position: sticky` di dalam tab (header form, bilah aksi). */
    overflow-x: clip;
    /* Gulir vertikal tetap milik peramban; horizontalnya boleh ditangani JS.
       Tanpa ini sebagian peramban menahan event sentuhnya dulu untuk menunggu
       apakah halaman akan digulir, dan gesekan terasa tersendat. */
    touch-action: pan-y;
}
.tabdeck-inner {
    will-change: transform;
}

.tabdeck-panel--dari-kanan {
    animation: tabdeck-masuk-kanan 0.3s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.tabdeck-panel--dari-kiri {
    animation: tabdeck-masuk-kiri 0.3s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes tabdeck-masuk-kanan {
    from {
        transform: translate3d(38%, 0, 0);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}
@keyframes tabdeck-masuk-kiri {
    from {
        transform: translate3d(-38%, 0, 0);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tabdeck-panel--dari-kanan,
    .tabdeck-panel--dari-kiri {
        animation: none;
    }
    .mhub-mtab-ink {
        transition: none;
    }
    .mhub-mobile-tabs {
        scroll-behavior: auto;
    }
}

/* ===== Tab "Spanduk" di Pusat Admin ========================================
   Aturan `.admin-banner-*` yang lama SUDAH DIBUANG dari `05-page-admin.css`
   dan `40-banner-slider.css` — bukan ditimpa dari sini. Menimpanya akan
   meninggalkan dua definisi untuk satu komponen di tiga berkas, persis pola
   yang sudah sekali menghasilkan bug tata letak di berkas 05 (lihat komentar
   panjang di sana soal `.admin-banner-actions`). Satu komponen, satu tempat.
   `40-banner-slider.css` kini hanya memuat slider publiknya (`.exp-bnr-*`). */

.abn-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.abn-count {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
}
.abn-hint {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ── Bingkai pratinjau 21:9 ────────────────────────────────────────────────
   Rasio ini SENGAJA sama dengan `.exp-bnr-slide` di halaman Jelajah. Itu
   seluruh gunanya: yang dilihat admin di sini harus persis yang dilihat
   pembeli di sana, termasuk bagian gambar yang terpotong. */
.abn-frame {
    position: relative;
    aspect-ratio: 21 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
}
.abn-frame-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.abn-frame-kosong {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
}
/* Nomor urut tayang. Dibaca di atas gambar apa pun, jadi warnanya tidak
   bergantung tema: pelat gelap + teks terang, bukan token permukaan. */
.abn-frame-tanda {
    position: absolute;
    top: 8px;
    left: 8px;
    min-width: 22px;
    padding: 3px 7px;
    border-radius: 99px;
    background: rgba(16, 15, 22, 0.72);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

/* ── Kartu unggah ─────────────────────────────────────────────────────────── */
.abn-new {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px dashed var(--border-strong);
    border-radius: 18px;
    background: var(--bg-surface);
}

/* Input file bawaan peramban tak bisa ditata dan lebarnya berbeda-beda di tiap
   peramban, jadi ia disembunyikan dan `<label>` di sekelilingnya yang jadi
   target ketuk — seluas kartunya sendiri, bukan tombol 90px. `display:none`
   TIDAK dipakai: sebagian peramban menolak memfokuskan input yang tak dirender,
   dan itu mematikan navigasi papan ketik ke kolom ini. */
.abn-file-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.abn-drop {
    display: block;
    cursor: pointer;
}
.abn-drop:focus-within .abn-frame {
    border-color: var(--color-primary-border);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.abn-drop-kaki {
    display: block;
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Kolom & tombol ───────────────────────────────────────────────────────── */
.abn-label {
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.abn-field {
    width: 100%;
    min-width: 0; /* tanpa ini, input di dalam flex menolak menyusut → baris meluber */
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
}
.abn-field:focus {
    outline: none;
    border-color: var(--color-primary-border);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.abn-field::placeholder {
    color: var(--text-muted);
}

.abn-btn {
    flex-shrink: 0;
    padding: 10px 14px;
    border-radius: 100px;
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition:
        opacity 0.15s,
        background 0.15s,
        border-color 0.15s;
}
.abn-btn--primary {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}
.abn-btn--ghost {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border);
}
.abn-btn--ghost:hover {
    background: var(--bg-card-hover);
}
/* Hapus punya DUA rupa dan itu disengaja: yang pertama hanya garis (menawarkan
   aksinya), yang kedua terisi penuh (mengonfirmasinya). Tombol merah penuh
   yang langsung menghapus pada ketukan pertama adalah undangan untuk salah
   tekan — dan penghapusan spanduk tak punya urungkan. */
.abn-btn--danger-ghost {
    background: transparent;
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
.abn-btn--danger-ghost:hover {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.abn-btn--danger {
    background: var(--danger);
    color: #fff;
}
.abn-btn--blok {
    width: 100%;
    padding: 12px 14px;
}
.abn-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Kartu spanduk ────────────────────────────────────────────────────────── */
.abn-card {
    margin-bottom: 14px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--bg-card);
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.abn-card:hover {
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-card);
}
/* Tanpa inset mendatar: `.abn-card` sudah memberi 10px, dan menambah 4px lagi
   di sini membuat kolom teks berdiri 14px dari tepi kartu sementara bingkai
   fotonya berdiri di 10px — dua garis vertikal yang meleset 4px di kartu yang
   sama. */
.abn-body {
    padding: 12px 0 2px;
}
.abn-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.abn-meta-judul {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.abn-meta-urut {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
}

.abn-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.abn-acts {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 12px;
}
.abn-konfirm {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Pesan status ─────────────────────────────────────────────────────────── */
.abn-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-border);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.5;
}
.abn-msg--err {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
    color: var(--danger);
}
.abn-msg-x {
    margin-left: auto;
    padding: 0 4px;
    background: none;
    border: none;
    color: inherit;
    font-size: 13px;
    cursor: pointer;
    opacity: 0.6;
}
.abn-msg-x:hover {
    opacity: 1;
}

/* ===== /lives — pratinjau video di kartu + feed dalam kolom ponsel ==========
   Bernomor lebih tinggi dari `11-page-lives.css` supaya penyempitan di bawah
   menang atas aturan lebar-penuh di sana. */

/* ── Feed: kolom ponsel, bukan selebar layar desktop ───────────────────────
   `.lives-feed` sendiri TETAP menutupi seluruh viewport dan tetap hitam — ia
   yang menjadi latar gelap di kiri-kanan. Yang disempitkan adalah SLIDE-nya.
   Menyempitkan pembungkusnya justru salah: ia kontainer gulir dan pemilik
   scroll-snap, dan menguncinya ke var(--lebar-kolom) membuat area gulir berhenti di tengah
   layar — roda mouse di sisi kiri/kanan tak lagi menggerakkan feed. */
.lives-slide {
    width: 100%;
    max-width: var(--lebar-kolom);
    margin-inline: auto;
}

/* Tombol tutup melayang (`position: fixed`) jadi ia tak tahu apa-apa soal
   kolom var(--lebar-kolom) di tengah. Tanpa perhitungan ini, di desktop ia mendarat di
   pojok kiri layar — jauh terpisah dari video yang ditutupinya.
   `min(240px, 50vw)`: di layar sempit hasilnya kembali ke 14px apa adanya. */
.lives-feed-close {
    left: calc(50% - min(240px, 50vw) + 14px);
}

/* Kelas ini dirender `pages/lives.rs` tetapi tak pernah punya gaya sama
   sekali — jadi petunjuk gesernya selama ini tampil sebagai teks telanjang
   di atas video. */
.lives-swipe-hint {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 210;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-body);
    font-size: 11px;
    pointer-events: none;
    animation: lives-hint-bob 1.8s ease-in-out infinite;
}
@keyframes lives-hint-bob {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .lives-swipe-hint {
        animation: none;
    }
}

/* ── Pratinjau video di dalam kartu daftar ─────────────────────────────────
   Video DITUMPUK di atas inisial, tidak menggantikannya. Inisial tetap
   dirender di bawah sebagai latar, jadi kartu punya isi selama pratinjau
   belum tersambung, saat kartunya di luar plafon `MAX_PRATINJAU`, dan saat
   siarannya gagal — tak pernah ada kotak hitam kosong. */
.live-preview {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
    /* Kartunya sebuah `<button>`; pratinjau tak boleh mencuri ketukannya. */
    pointer-events: none;
}
.live-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Sampai frame pertama ter-render, elemen video menggambar hitam solid dan
       akan menutupi inisial di baliknya. Dimunculkan hanya setelah ada gambar. */
    opacity: 0;
    transition: opacity 0.35s ease;
}
/* Kelas ini dipasang dari Rust saat koneksi benar-benar terjalin
   (`is_playing`). SENGAJA tidak memakai selektor CSS atas keadaan video:
   `paused`, `readyState`, dan kawan-kawannya adalah PROPERTI DOM, bukan
   atribut, sehingga `[paused]` tak akan pernah cocok — aturan yang terlihat
   masuk akal tetapi diam-diam tak pernah menyala. */
.live-preview-video--on {
    opacity: 1;
}
.live-preview-spinner {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    animation: lives-spin 0.8s linear infinite;
}
@keyframes lives-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Inisial tetap mengalir normal (dipusatkan flex oleh `.lives-card-thumb`);
   yang ditumpuk di atasnya adalah `.live-preview` yang absolut. Lencana LIVE
   harus berada di atas keduanya. */
.lives-card-badge {
    z-index: 2;
}

/* ===== Panah geser untuk penunjuk presisi (laptop/desktop) ==================
   Berlaku untuk DUA carousel: galeri foto di detail product (`.ed-hero`) dan
   slider banner admin (`.exp-bnr`, dipakai /explore dan /pulse).

   ── KENAPA HANYA DI DESKTOP ──────────────────────────────────────────────
   Di ponsel keduanya sudah bisa digeser dengan jari, dan panah cuma menutupi
   gambar yang justru ingin dilihat. Di laptop tak ada gerakan setara:
     * `.ed-hero` digulir mendatar — dan roda mouse menggulir HALAMAN, bukan
       galeri, jadi foto kedua dan seterusnya tak pernah terjangkau.
     * `.exp-bnr` bahkan tidak digulir sama sekali; posisinya ditentukan
       `translateX` dari sinyal, sehingga tak ada apa pun yang bisa disentuh
       kursor selain titik indikator yang kecil.

   `hover: hover` DAN `pointer: fine` dua-duanya diperlukan: sebagian tablet
   melaporkan `hover` karena ada pena/stylus, tetapi penunjuk utamanya tetap
   jari. Menguji keduanya menyaring tablet sentuh, bukan cuma "bukan ponsel". */

.ed-hero-nav,
.exp-bnr-nav {
    display: none;
}

/* Meluncur, bukan melompat. Animasinya milik peramban — tak perlu JS, dan
   otomatis dihormati oleh `prefers-reduced-motion` di bagian bawah berkas. */
.ed-hero-scroller {
    scroll-behavior: smooth;
}

@media (hover: hover) and (pointer: fine) {
    .ed-hero-nav,
    .exp-bnr-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.22);
        /* Warna tidak diambil dari token tema: panah ini berdiri DI ATAS foto
           sembarang, jadi kontrasnya harus datang dari pelatnya sendiri, bukan
           dari latar halaman yang tak pernah terlihat di belakangnya. */
        background: rgba(16, 15, 22, 0.55);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: #fff;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.2s, background 0.2s;
    }
    .ed-hero-nav--prev,
    .exp-bnr-nav--prev {
        left: 10px;
    }
    .ed-hero-nav--next,
    .exp-bnr-nav--next {
        right: 10px;
    }

    /* Muncul saat kursor masuk ke carousel-nya, bukan permanen: gambarnya yang
       jadi pokok, panah hanya perkakas. Tetap tampil saat difokuskan papan
       ketik — kalau tidak, pengguna Tab akan memindahkan fokus ke tombol yang
       tak kelihatan sama sekali. */
    .ed-hero:hover .ed-hero-nav,
    .exp-bnr:hover .exp-bnr-nav,
    .ed-hero-nav:focus-visible,
    .exp-bnr-nav:focus-visible {
        opacity: 1;
    }
    .ed-hero-nav:hover,
    .exp-bnr-nav:hover {
        background: rgba(16, 15, 22, 0.78);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ed-hero-scroller {
        scroll-behavior: auto;
    }
    .exp-bnr-track {
        transition: none;
    }
}

/* ── Banner di /pulse ─────────────────────────────────────────────────────
   Selokan 16px — MENYAMAI halaman ini, bukan selokan 20px yang dipakai
   /explore dan sisa aplikasi. `.msg-search-wrap` (margin 12px 16px) dan
   `.msg-convos-section` (padding 0 16px) keduanya 16px di sini, dan banner
   yang dipasang di 20px akan terlihat menjorok masuk dibanding kotak cari
   tepat di atasnya. */
.msg-banner-wrap {
    padding: 4px 16px 12px;
}
.msg-banner-wrap:empty {
    /* Tanpa banner aktif komponennya tak merender apa pun; tanpa aturan ini
       padding di atas tetap menyisakan celah kosong yang tak dijelaskan apa pun. */
    display: none;
}

/* ===== Skeleton kartu produk yang UKURANNYA SAMA dengan kartu asli =========
   `ProductCardShimmer` kini memakai kelas kartu yang sebenarnya
   (`.exp-mkt-*`), bukan pohon kelas tiruan. Berkas ini hanya menambahkan
   perbedaan yang memang perlu: isinya diganti balok abu-abu, dan segala yang
   interaktif dimatikan.

   Kuncinya: TIDAK ada satu pun ukuran yang ditulis ulang di sini. Tinggi
   gambar, padding badan, jarak antar-baris, radius — semuanya tetap datang
   dari aturan kartu aslinya. Itulah yang membuat keduanya mustahil berselisih;
   versi sebelumnya menulis `height: 170px` sendiri dan meleset dari kartu
   sungguhan, sehingga tata letak melompat tepat saat data tiba. */

.exp-mkt-card--shim {
    /* Skeleton bukan tautan. Tanpa ini ia mewarisi kursor & efek hover kartu
       dan terasa bisa diklik padahal tak menuju ke mana pun. */
    cursor: default;
    pointer-events: none;
}
.exp-mkt-card--shim:hover {
    transform: none;
}

/* Gambar: `.exp-mkt-img` sudah membawa ukurannya sendiri dari kartu asli;
   di sini ia cuma perlu berhenti berperilaku sebagai <img>. */
.exp-mkt-card--shim .exp-mkt-img {
    display: block;
}

/* Satu baris teks palsu. Tingginya mengikuti `1em` dari elemen yang
   ditumpanginya, jadi baris judul tetap setinggi baris judul dan baris meta
   setinggi baris meta — tanpa satu pun angka piksel di sini. */
.shim-line {
    display: block;
    width: 100%;
    height: 1em;
    border-radius: 6px;
}
.shim-line--pendek {
    width: 55%;
}

/* Judul dua baris butuh jarak antar-barisnya sendiri; elemen aslinya mengandalkan
   `line-height` teks, yang tak berlaku untuk balok kosong. */
.exp-mkt-card--shim .exp-mkt-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.exp-mkt-card--shim .exp-mkt-meta {
    gap: 6px;
}

/* Ikon di dalam baris meta/footer tak dirender pada skeleton, jadi baris-baris
   itu tak boleh lagi menyisakan ruang untuknya. */
.exp-mkt-card--shim .exp-mkt-meta-row,
.exp-mkt-card--shim .exp-mkt-foot {
    gap: 0;
}

@media (prefers-reduced-motion: reduce) {
    .shim::after {
        animation: none;
    }
}

/* ===== Keranjang kuning di dalam siaran langsung ==========================
   Merchant memilih produk yang dijual; penonton membukanya di sini.

   KUNING, dan sengaja bukan warna aksen aplikasi (`--accent-lime`): tombol ini
   melayang di atas VIDEO SEMBARANG, bukan di atas permukaan bertema. Warnanya
   karena itu tak boleh ikut token tema — ia harus tetap terbaca di atas frame
   terang maupun gelap, dan harus terpisah dari kendali pemutaran di sekitarnya
   supaya "ini untuk belanja" terbaca tanpa dijelaskan. */

.live-bag {
    position: absolute;
    right: 14px;
    /* Di atas bilah kontrol feed (`.live-viewer-controls`, tinggi ±90px).
       Sama seperti pil unmute: apa pun yang duduk di tepi bawah akan tertimbun
       bilah itu dan ketukannya ditelan. */
    bottom: 104px;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: #f5c518;
    color: #1a1400;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s;
}
.live-bag:active {
    transform: scale(0.94);
}
.live-bag-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* ── Lembar produk ───────────────────────────────────────────────────────── */
.live-bag-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    max-height: 60%;
    display: flex;
    flex-direction: column;
    border-radius: 18px 18px 0 0;
    /* Pelat gelapnya sendiri, bukan token permukaan: sama alasannya dengan
       tombolnya — latarnya adalah video, bukan halaman. */
    background: rgba(16, 15, 22, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}
.live-bag-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    flex-shrink: 0;
}
.live-bag-title {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f5c518;
}
.live-bag-x {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
}
.live-bag-info {
    padding: 12px 16px 20px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}
.live-bag-list {
    overflow-y: auto;
    padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 14px);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.live-bag-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: inherit;
}
.live-bag-item:active {
    background: rgba(255, 255, 255, 0.12);
}
.live-bag-img {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.08);
}
.live-bag-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.live-bag-name {
    font-family: var(--font-body);
    font-size: 13px;
    /* Dua baris lalu dipotong: nama produk kerap panjang, dan satu baris
       memotong justru pada kata yang membedakan variannya. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.live-bag-price {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: #f5c518;
}
.live-bag-go {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 99px;
    background: #f5c518;
    color: #1a1400;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
}

/* ── Pemilih produk di halaman merchant (/merchant/live) ─────────────────── */
.mlive-pick {
    margin: 0 16px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-card);
    overflow: hidden;
}
.mlive-pick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}
.mlive-pick-title {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.mlive-pick-count {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.mlive-pick-body {
    padding: 0 12px 14px;
    border-top: 1px solid var(--border-soft);
}
.mlive-pick-list {
    /* Dibatasi tingginya lalu digulir: merchant bisa punya puluhan produk, dan
       daftar yang memanjang tanpa batas mendorong tombol simpan keluar layar —
       tombol yang tak terlihat sama saja dengan tak ada. */
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0;
}
.mlive-pick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 12px;
    cursor: pointer;
}
.mlive-pick-item:hover {
    background: var(--bg-card-hover);
}
.mlive-pick-img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
    background: var(--bg-elevated);
}
.mlive-pick-name {
    flex: 1;
    min-width: 0;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mlive-pick-save {
    width: 100%;
    margin-top: 4px;
}
.mlive-pick-info {
    margin: 10px 2px 0;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
}

/* ===== `color-scheme` — memberi tahu peramban tema aplikasi ini ============
   MASALAH
   Pemilih tanggal `<input type="date">`, dropdown `<select>`, scrollbar, dan
   dialog bawaan lainnya digambar oleh PERAMBAN, bukan oleh CSS kita. Ia tak
   bisa ditata dengan selector apa pun — satu-satunya kendali yang tersedia
   adalah properti ini.

   Tanpa `color-scheme`, peramban menganggap halaman ini terang. Maka kalender
   yang muncul di atas formulir gelap tampil putih menyilaukan dengan teks
   hitam — persis seperti tempelan dari aplikasi lain, dan pada tema gelap ia
   menyilaukan tepat saat orang sedang mengetik.

   Diset di `:root` mengikuti `data-theme`, jadi SATU aturan ini memperbaiki
   seluruh widget bawaan di seluruh aplikasi sekaligus — bukan satu tambalan
   per input, yang pasti terlewat pada input berikutnya yang ditambahkan. */

:root {
    color-scheme: light;
}
:root[data-theme="dark"] {
    color-scheme: dark;
}
/* Tanpa atribut `data-theme` sama sekali (pengguna memakai preferensi sistem),
   ikuti sistemnya. Aturan ini SENGAJA di bawah yang di atas: `data-theme` yang
   eksplisit adalah pilihan yang dinyatakan pengguna dan harus menang. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;
    }
}

/* Tinggi `.page-header`, dinyatakan dari bagian-bagiannya supaya turunannya
   terlihat: 14px padding atas + 40px tombol + 14px padding bawah + 1px garis.
   Dipakai DUA tempat — `min-height` header itu sendiri dan offset bilah lengket
   di bawahnya — sehingga keduanya mustahil berselisih. Menuliskan `69px` di
   satu tempat dan berharap yang lain mengikutinya adalah cara bilah ini
   menyelinap ke bawah header begitu padding header disetel ulang. */
:root {
    --header-h: calc(14px + 40px + 14px + 1px);
}
/* Menjadikan token di atas BENAR, bukan sekadar tebakan. */
.page-header {
    min-height: var(--header-h);
}

/* ===== Bilah lengket halaman merchant: tab + pencarian ====================
   Tab dan kolom cari kini SATU blok yang menempel bersama saat digulir.
   Disatukan, bukan dua elemen sticky bertingkat: dua sticky menuntut yang
   kedua tahu tinggi persis yang pertama (`top: 48px` dan semacamnya), dan
   angka itu meleset begitu ukuran huruf atau padding berubah. Satu blok tak
   punya angka untuk meleset. */
.mp-stickybar {
    position: sticky;
    /* DI BAWAH header, bukan di 0.
     *
     * `.page-header` juga `position: sticky; top: 0`, dan z-index-nya
     * (`--z-header`, 40) lebih tinggi. Dengan `top: 0`, bilah ini menempel di
     * tempat yang sama lalu MENYELINAP di bawah header dan terpotong separuh —
     * kolom cari yang tinggal setengah huruf, persis seperti yang terlihat.
     *
     * Menaikkan z-index-nya BUKAN jawabannya: ia akan menutupi header. Yang
     * benar adalah menempel tepat di bawahnya. */
    top: var(--header-h);
    z-index: 20;
    /* Latar WAJIB legal: tanpa ini isi yang tergulir terlihat menembus dari
       belakang bilah yang menempel. */
    background: var(--bg-page);
    /* Garis bawah menggantikan garis milik `.mp-tabs`, supaya batas bawahnya
       tetap satu garis saat menempel — bukan dua. */
    border-bottom: 1px solid var(--border);
}
.mp-stickybar .mp-tabs {
    margin-bottom: 0;
    border-bottom: none;
}

/* Jarak yang mencegah TABRAKAN.
 *
 * Kolom cari memakai cincin fokus `outline 1px` + `box-shadow 0 0 0 3px`
 * (lihat `02-components.css`). Keduanya digambar DI LUAR kotak elemen dan
 * TIDAK ikut diperhitungkan tata letak — jadi dengan padding lama, cincin itu
 * menabrak garis tab di atasnya dan kartu produk di bawahnya begitu kolomnya
 * difokuskan. Ruang di sini menyediakan tempat untuk cincin yang tak pernah
 * meminta tempat sendiri. */
.mp-stickybar > div:last-child {
    padding-top: 10px;
    padding-bottom: 12px;
}

/* ===== Bilah bawah pembuat story: shutter benar-benar di tengah ===========
   MASALAH
   `.sc-area-bawah` memakai `justify-content: space-between` dengan tiga anak
   yang sisi-sisinya TIDAK sama lebar: tombol galeri 52px di kiri, tombol balik
   kamera 40px di kanan. `space-between` membagi sisa ruang secara merata di
   antara anak-anaknya — jadi anak tengah berhenti di tengah SISA RUANG, bukan
   di tengah bilah. Melesetnya persis (52 − 40) ÷ 2 = 6px ke kanan, cukup untuk
   terlihat justru karena shutter adalah lingkaran besar yang jadi titik pandang
   utama layar.

   KENAPA BUKAN DISAMAKAN LEBARNYA
   Menyamakan kedua sisi jadi 52px akan membesarkan tombol balik kamera tanpa
   alasan, dan menyamakan jadi 40px mengecilkan pratinjau galeri yang memang
   perlu terbaca sebagai gambar. Ukurannya berbeda karena perannya berbeda.

   CARANYA
   Shutter dikeluarkan dari aliran flex dan dipusatkan ke bilahnya sendiri.
   `.sc-area-bawah` sudah `position: absolute`, jadi ia otomatis menjadi blok
   penampung — tak perlu `position: relative` tambahan. Dengan begitu posisinya
   tak lagi bergantung pada lebar apa pun di kiri dan kanannya, sekarang maupun
   nanti bila salah satu tombol berubah ukuran. */

.sc-area-bawah,
.sc-bottom {
    /* Shutter keluar dari aliran, jadi tinggi bilah tak lagi ikut mengikutinya.
       Tanpa ini bilahnya menyusut setinggi tombol samping (52px) dan shutter
       76px menonjol keluar dari gradiennya. */
    min-height: 76px;
}

.sc-wrap-shutter,
.sc-shutter-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* ===== Satu bentuk pesan untuk seluruh aplikasi ===========================
   MASALAH
   Konsep yang sama — "ada yang salah" / "berhasil" — punya EMPAT perlakuan
   visual yang nyaris sama tapi tak pernah persis:

     .error-banner         radius 8px
     .medit-error-banner   radius 12px
     .success-banner       hijau `--live-green`, radius 8px
     .medit-success-banner hijau `--accent-lime`, radius 12px
     .abn-msg / .admin-toast  bentuk ketiga dan keempat

   Selisih 4px radius dan dua hijau berbeda terlalu kecil untuk terbaca sebagai
   keputusan, tapi cukup untuk membuat aplikasi terasa dirakit dari beberapa
   aplikasi. Dan karena tiap halaman memakai kelasnya sendiri, memperbaiki satu
   tak pernah memperbaiki yang lain.

   CARANYA
   Kelas-kelas yang sudah ada TIDAK diganti namanya — itu berarti menyunting
   puluhan tempat di markup dan setiap satu yang terlewat menjadi pesan yang
   tampil berbeda. Yang dilakukan di sini: seluruh nama itu diarahkan ke SATU
   definisi. Berkas ini bernomor lebih tinggi, jadi ia menang tanpa `!important`
   kecuali di satu tempat yang memang sudah memakainya. */

.error-banner,
.medit-error-banner,
.success-banner,
.medit-success-banner,
.abn-msg,
.admin-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px !important;
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.55;
    /* Pesan panjang dari server kerap berupa satu kalimat tanpa spasi panjang
       (URL, id). Tanpa ini ia melebarkan kotaknya dan merusak tata letak. */
    overflow-wrap: anywhere;
}

/* ── Galat ──────────────────────────────────────────────────────────────── */
.error-banner,
.medit-error-banner,
.abn-msg--err,
.admin-toast--err {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
    color: var(--danger);
}

/* ── Berhasil ───────────────────────────────────────────────────────────── */
/* SATU hijau, bukan dua. `--live-green` dipakai untuk "sedang siaran" di
   seluruh aplikasi; memakainya juga untuk "tersimpan" membuat dua keadaan yang
   sama sekali berbeda tampil dengan warna yang sama. Warna berhasil mengikuti
   warna aksi utama aplikasi. */
.success-banner,
.medit-success-banner,
.abn-msg,
.admin-toast--ok {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border);
    color: var(--text-primary);
}

/* Ikon/tombol tutup di dalamnya tak ikut mengecil saat teksnya panjang. */
.error-banner svg,
.medit-error-banner svg,
.success-banner svg,
.medit-success-banner svg {
    flex-shrink: 0;
}

/* ===== Pesan belum dibaca: lencana, pemisah, tombol gulir =================
   Kolom `chats.buyer_read_at` / `merchant_read_at` sudah ada sejak percakapan
   dibuat tetapi TAK PERNAH dibaca maupun ditulis satu baris kode pun. Daftar
   percakapan karena itu tak bisa membedakan yang sudah dibaca dari yang belum,
   dan pesan baru hanya terlihat bila seseorang kebetulan membukanya. */

/* ── Lencana di daftar (/pulse) ──────────────────────────────────────────── */
.msg-convo-badge {
    flex-shrink: 0;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 99px;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}
/* Baris yang punya pesan belum dibaca ditandai HURUFNYA, bukan latarnya.
   Latar berwarna pada baris daftar terbaca sebagai "terpilih", dan di daftar
   yang sebagian besarnya belum dibaca ia berubah jadi blok warna yang justru
   menyembunyikan mana yang penting. */
.msg-convo-row--belum .msg-convo-name {
    font-weight: 700;
    color: var(--text-primary);
}
.msg-convo-row--belum .msg-convo-preview {
    color: var(--text-secondary);
}

/* ── Pemisah "N pesan baru" (/pulse/{id}) ────────────────────────────────── */
.chat-pemisah-baru {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 10px;
    /* Garis di kiri-kanan teks, dibuat dari border elemen semu supaya
       panjangnya mengikuti ruang yang tersisa — bukan lebar tetap yang meleset
       begitu teksnya berubah ("3 pesan baru" vs "12 pesan baru"). */
}
.chat-pemisah-baru::before,
.chat-pemisah-baru::after {
    content: "";
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--danger) 30%, transparent);
}
.chat-pemisah-baru span {
    flex-shrink: 0;
    padding: 3px 12px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ── Tombol ke pesan terbaru ─────────────────────────────────────────────── */
/* `.chat-page` tak pernah punya `position`, jadi tombol absolut di dalamnya
   akan berlabuh ke viewport — melayang di tempat yang tak ada hubungannya
   dengan percakapan, dan tetap di sana saat halaman digulir. Menjadikannya
   blok penampung memperbaiki itu tanpa mengubah tata letak apa pun: `relative`
   tanpa offset tidak menggeser elemen sedikit pun. */
.chat-page {
    position: relative;
}

.chat-ke-bawah {
    position: absolute;
    right: 16px;
    /* Di atas kolom ketik, bukan menempel di dasar layar — kalau tidak ia
       menutupi tombol kirim tepat saat orang hendak membalas. */
    bottom: 86px;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s, background 0.15s;
}
.chat-ke-bawah:hover {
    background: var(--bg-elevated-2);
}
.chat-ke-bawah:active {
    transform: scale(0.92);
}

/* ── Pil "N pesan baru" ──────────────────────────────────────────────────
   Tombol yang sama berubah bentuk menurut ALASANNYA tampil:

     tersesat di tengah riwayat  → lingkaran, panah saja
     ada yang belum terlihat     → pil, panah + hitungannya

   Panah polos menjawab "ada bawah"; yang ditanyakan orang adalah "ada yang
   baru?". Dua pertanyaan berbeda, dan hanya yang kedua yang membuat seseorang
   menoleh. */
.chat-ke-bawah--baru {
    width: auto;
    padding: 0 14px 0 11px;
    gap: 7px;
    border-radius: 99px;
    background: var(--danger);
    border-color: transparent;
    color: #fff;
    /* Sekali, bukan berulang: animasi yang terus berdenyut di sudut layar
       menarik mata sepanjang waktu dan berubah jadi gangguan, bukan kabar. */
    animation: chat-pil-masuk 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.chat-ke-bawah-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
@keyframes chat-pil-masuk {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .chat-ke-bawah--baru {
        animation: none;
    }
}

/* ── Kabar "pesan masuk" di dalam ruangan ──────────────────────────────────
   Kenapa ada, padahal pesannya sudah tertambah di dasar daftar: menambah
   gelembung bukan memberi tahu. Kalau layar memang sudah di dasar, pesan baru
   muncul tanpa suara, tanpa gerak yang menarik mata — orang yang sedang
   menatap kolom ketik atau baru menoleh kembali ke layar tidak punya apa pun
   yang mengabarinya. Selama ini satu-satunya tanda ada pesan baru justru
   terletak di HALAMAN LAIN (daftar /pulse), yang berarti harus meninggalkan
   ruangan untuk tahu ada sesuatu di dalam ruangan itu.

   Melayang, tidak ikut mengalir bersama pesan: kalau ia bagian dari daftar,
   ia tergulir keluar layar persis pada orang yang paling perlu melihatnya. */
.chat-masuk {
    display: flex;
    pointer-events: auto;
    align-items: center;
    gap: 9px;
    max-width: min(88%, 420px);
    padding: 9px 15px 9px 12px;

    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--bg-elevated);
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.16);
    color: var(--text);
    text-align: left;
    cursor: pointer;

    animation: chat-masuk-turun 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chat-masuk-turun {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-masuk:hover  { background: var(--bg-elevated-2); }
.chat-masuk:active { transform: scale(0.97); }

/* Titik yang berdenyut — satu-satunya bagian yang BERGERAK, dan gerak itulah
   yang sebenarnya menangkap mata di penglihatan tepi. */
.chat-masuk-titik {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    animation: chat-masuk-denyut 1.4s ease-in-out infinite;
}

@keyframes chat-masuk-denyut {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.72); }
}

.chat-masuk-teks {
    min-width: 0;               /* prasyarat agar ellipsis anaknya bekerja */
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.chat-masuk-nama {
    flex: none;
    font-size: 13px;
    font-weight: 700;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-masuk-isi {
    min-width: 0;
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Sorotan gelembung yang barusan tiba ───────────────────────────────────
   Kabar di atas menjawab "ada pesan baru"; sorotan menjawab pertanyaan yang
   selalu menyusul sesudahnya — yang mana. Sekali jalan lalu padam: kalau ia
   menetap, ia berhenti berarti "baru" dan berubah jadi hiasan. */
.chat-bubble--sorot {
    animation: chat-sorot 1.6s ease-out;
}

@keyframes chat-sorot {
    0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 55%, transparent); }
    60%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent); }
    100% { box-shadow: 0 0 0 3px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .chat-masuk        { animation: none; }
    .chat-masuk-titik  { animation: none; }
    .chat-bubble--sorot { animation: none; }
}

/* ── Tumpukan kabar di puncak ruangan ──────────────────────────────────────
   Satu wadah untuk keduanya. Sebelumnya masing-masing berlabuh sendiri ke
   `.chat-page` dengan `top` yang sama — yang berarti begitu keduanya tampil
   bersamaan, mereka saling menindih tepat di tengah.

   Tembus klik. Wadah ini selebar layar dan menggantung di atas percakapan;
   tanpa `pointer-events: none` ia akan memakan setiap sentuhan pada pesan yang
   kebetulan lewat di bawahnya — pita tak terlihat yang mustahil ditebak
   penyebabnya. Anaknya mengembalikan `auto` masing-masing. */
.chat-kabar-atas {
    position: absolute;
    left: 50%;
    /* Di bawah header, bukan menempel di puncak: menutupi nama lawan bicara
       dan status "● LIVE" berarti menukar satu informasi dengan informasi
       lain. */
    top: calc(var(--header-h, 56px) + 12px);
    transform: translateX(-50%);
    z-index: 16;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: min(88%, 420px);
    pointer-events: none;
}

/* ── Penanda "N pesan baru" di header ──────────────────────────────────────
   Duduk bersebelahan dengan "● LIVE" / "○ CONNECTING". Keduanya menjawab
   pertanyaan yang sama — apa yang sedang terjadi di ruangan ini — jadi mata
   cukup singgah di satu tempat, dan penandanya tak lagi bersaing dengan pil
   kabar yang tampil bersamaan di puncak.

   `inline-flex`, bukan `block`: induknya (`.chat-header-sub`) adalah baris
   teks, dan elemen blok di dalamnya akan mematahkan barisnya. */
.chat-tanda-baru {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 99px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    /* Header sempit di ponsel; tanpa ini "12 pesan baru" bisa terpatah jadi
       dua baris dan menaikkan tinggi seluruh header. */
    white-space: nowrap;
    /* Sekali berkedip saat muncul — di header ia diam, jadi tanpa isyarat
       kemunculan ia mudah terlewat begitu saja. */
    animation: chat-tanda-muncul 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chat-tanda-muncul {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .chat-tanda-baru { animation: none; }
}

/* ── Lencana pesan belum dibaca di navbar bawah ────────────────────────────
   Kabar pesan masuk selama ini cuma hidup di dua halaman chat. Di halaman
   mana pun selain itu — menjelajah product, memeriksa pesanan — tak ada apa
   pun yang memberi tahu ada pesan menunggu, jadi satu-satunya cara mengetahui
   adalah menengok berkala ke `/pulse`, yang berarti ingatan orangnya sendiri
   yang dijadikan sistem notifikasi. */

/* `.bottom-item` sudah `display: flex` tapi belum pernah punya `position`,
   jadi lencana mutlak di dalamnya akan berlabuh ke `.bottom-nav` — melayang di
   tengah bilah, tak berkaitan dengan ikon mana pun. `relative` tanpa offset
   tidak menggeser tata letaknya sedikit pun. */
.bottom-item {
    position: relative;
}

.bottom-badge {
    position: absolute;
    /* Diikatkan ke ikon, bukan ke kotak tombolnya: kotaknya setinggi ikon +
       label, dan lencana yang berlabuh ke sudut kotak akan mengambang jauh di
       atas ikon dengan celah yang berubah-ubah menurut panjang label. */
    top: 2px;
    left: 50%;
    margin-left: 6px;

    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    box-sizing: border-box;

    border-radius: 99px;
    /* Cincin sewarna bilahnya memisahkan lencana dari ikon di bawahnya tanpa
       menambah garis baru — tanpa itu angka merah di atas ikon gelap terbaca
       seperti bagian dari ikonnya. */
    border: 2px solid var(--bg-elevated, #fff);
    background: var(--danger);
    color: #fff;

    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    /* "99+" tak boleh terpatah dua baris. */
    white-space: nowrap;

    /* Ikonnya bisa diklik menembus lencana — ia penanda, bukan tombol. */
    pointer-events: none;

    animation: bottom-badge-muncul 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bottom-badge-muncul {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .bottom-badge { animation: none; }
}

/* ── Pemberitahuan masa simpan ─────────────────────────────────────────────
   Sengaja tenang — abu-abu, kecil, tanpa ikon peringatan. Ia menyampaikan
   aturan yang berlaku, bukan sesuatu yang perlu ditanggapi; digarap seperti
   peringatan, ia akan mengambil perhatian yang seharusnya jatuh ke pesan yang
   sedang dibaca, setiap kali ruangan dibuka. */
.chat-retensi {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 4px 0 14px;
    padding: 0 4px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.45;
    /* Daftarnya `flex-direction: column`; tanpa ini ia ikut meregang mengisi
       sisa ruang saat percakapannya masih pendek. */
    flex: none;
}

.chat-retensi svg {
    flex: none;
    margin-top: 1px;
    opacity: 0.7;
}

.msg-retensi {
    margin: 14px 4px 4px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
}

/* ── Ruang obrolan: daftar pesannya yang menggulir, bukan halamannya ───────
   ── AKAR MASALAHNYA ────────────────────────────────────────────────────
   `.chat-page` diberi `min-height: 100dvh` — MIN, bukan tinggi tetap. Artinya
   ia boleh tumbuh setinggi isinya. Anaknya `.chat-messages` punya `flex: 1`
   dan `overflow-y: auto`, tapi keduanya tak pernah berlaku: dalam wadah yang
   ikut memanjang, tak ada yang meluap, jadi tak ada yang perlu digulir. Yang
   tergulir selama ini adalah HALAMAN.

   Akibatnya seluruh perkakas gulir di berkas ini menghitung nol:
     `scroll_height() == client_height()`  → `set_scroll_top()` tak berefek
     `sisa = 0` selalu                     → "sudah di dasar" selalu benar

   Itu satu sebab yang menjelaskan semuanya sekaligus — daftar tak menyusul ke
   pesan baru, ruangan tak terbuka di dasar, tombol "ke pesan terbaru" diam.
   Percobaan gulir berulang, pengukuran dari DOM, semuanya bekerja dengan
   benar; yang salah adalah elemen yang mereka suruh menggulir tidak pernah
   bisa menggulir.

   `height`, bukan `min-height`: hanya tinggi TETAP yang memaksa anaknya
   meluap. `overflow: hidden` di induk supaya halamannya sendiri tak ikut
   menggulir — dua batang gulir bersarang membuat orang menggulir yang salah.
   `padding-bottom: 72px` yang sudah ada tetap membebaskan komposer melayang,
   dan karena `box-sizing: border-box` berlaku global, ia ikut terhitung di
   dalam 100dvh — bukan menambahinya. */
.chat-page {
    height: 100dvh;
    overflow: hidden;
}

/* Prasyarat yang mudah terlewat: item flex bawaannya `min-height: auto`, yang
   berarti ia MENOLAK mengecil di bawah tinggi isinya. Tanpa baris ini,
   `height` di induk pun tak menolong — anaknya tetap memanjang melewati
   induknya alih-alih meluap ke dalam dirinya sendiri. */
.chat-messages {
    min-height: 0;
    /* Guliran sentuh yang berhenti di ujung tak lagi merembet menggulir
       halaman di belakangnya. */
    overscroll-behavior: contain;
}

/* Header tak lagi perlu `sticky` — ia kini saudara tetap di atas daftar yang
   menggulir, bukan sesuatu yang harus menempel saat halaman bergerak. */
.chat-header {
    position: relative;
    flex: none;
}

/* ── Gambar dalam percakapan ───────────────────────────────────────────────
   Berkas asli disembunyikan; tombol berikonlah yang memicunya. `<input
   type=file>` bawaan tak bisa digayakan sama sekali dan tampilannya berbeda
   di tiap peramban — satu-satunya cara memberinya bentuk yang konsisten
   adalah menyembunyikannya lalu meneruskan klik dari tombol sendiri.

   `display: none`, bukan `visibility: hidden` atau lebar nol: hanya yang
   pertama yang benar-benar mengeluarkannya dari tata letak, dan komposer ini
   `display: flex` — elemen tersembunyi yang masih mengambil tempat akan
   menyisakan celah yang tak ada penjelasannya. */
.chat-file-input {
    display: none;
}

/* Foto tanpa lapisan gelembung di belakangnya. Bingkai berwarna di sekeliling
   gambar hanya menambah dua sisi yang saling berebut jadi batas bentuknya. */
.chat-gambar {
    display: block;
    max-width: 240px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-elevated);
    text-decoration: none;
}

.chat-gambar img {
    display: block;
    width: 100%;
    height: auto;
    /* Foto sangat tinggi (tangkapan layar panjang) bisa mengisi seluruh layar
       sendirian dan mendorong percakapannya keluar pandangan. */
    max-height: 320px;
    object-fit: cover;
}

.chat-gambar-teks {
    display: block;
    padding: 7px 10px 9px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
}

/* Penanda sedang mengunggah — menggantikan ikon di tombolnya, bukan tampil di
   sebelahnya: lebar komposer tak boleh berubah saat unggahan berjalan. */
.chat-unggah-putar {
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: chat-unggah-putar 700ms linear infinite;
}

@keyframes chat-unggah-putar {
    to { transform: rotate(360deg); }
}

/* ── Kartu produk di dalam gelembung pesan ─────────────────────────────────
   Pesan pertama dari halaman produk membawa konteksnya sebagai teks mentah:
   `[Judul] /products/ea2472c40573d31c94f119a7 pertanyaannya`. Konteksnya
   memang perlu ada — merchant yang menjual puluhan barang tak bisa menebak
   pertanyaan ini tentang yang mana — tapi bentuk mentahnya menempatkan beban
   itu pada mata pembacanya: dua baris alamat acak yang harus dilompati untuk
   sampai ke pertanyaan yang sebenarnya, setiap kali. */

.chat-produk {
    /* Lebar mengikuti gelembungnya, dengan lantai minimum supaya kartu untuk
       judul pendek tak menciut jadi kotak kecil di tengah gelembung lebar. */
    min-width: min(260px, 100%);
    display: flex;
    align-items: center;
    gap: 12px;
    /* Ditarik keluar sedikit dari padding gelembungnya lalu diberi padding
       sendiri, supaya kartunya terbaca sebagai satu keping utuh dan bukan
       sebagai paragraf pertama yang kebetulan berlatar lain. */
    margin: -2px -2px 10px;
    padding: 10px;
    border-radius: 14px;
    /* Diambil dari warna teks gelembungnya sendiri, bukan token tetap: gelembung
       "punya sendiri" dan "punya lawan bicara" berbeda latar, dan satu warna
       tetap akan menghilang di salah satunya. */
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: inherit;
    text-decoration: none;
}

.chat-produk:hover {
    background: color-mix(in srgb, currentColor 13%, transparent);
}

.chat-produk-gambar {
    flex: none;
    /* Diperbesar dari 44px. Gambar produk adalah cara tercepat merchant
       mengenali barang mana yang ditanyakan — pada 44px, produk yang serupa
       (dua kaus hitam dengan sablon berbeda) tak bisa dibedakan sama sekali,
       dan kartunya berhenti menjalankan tugasnya. */
    width: 60px;
    height: 60px;
    border-radius: 11px;
    overflow: hidden;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.chat-produk-gambar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-produk-teks {
    /* Prasyarat ellipsis pada anak-anaknya. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-produk-nama {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    /* Dua baris, lalu potong: judul panjang tak boleh mendorong pertanyaannya
       keluar layar, tapi satu baris terlalu sering memotong di tengah kata
       yang justru membedakan satu varian dari varian lain. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-produk-harga {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    opacity: 0.85;
}

.chat-produk-panah {
    flex: none;
    margin-left: auto;
    opacity: 0.45;
}

/* Pertanyaannya, di bawah kartu. Ia yang sebenarnya ditulis orangnya, jadi ia
   yang mendapat ukuran teks penuh — kartunya keterangan, bukan isinya. */
.chat-produk-tanya {
    display: block;
    white-space: pre-wrap;
}

/* Gelembung yang MEMUAT kartu produk boleh lebih lebar dari 75% biasanya.
   Batas itu tepat untuk kalimat — baris teks yang terlalu panjang memang sulit
   dibaca — tetapi kartu produk bukan kalimat. Pada 75% di layar sempit, nama
   produk terpotong justru pada bagian yang membedakan satu varian dari varian
   lain, dan itu persis keterangan yang membuat kartunya berguna. */
.chat-bubble-wrap:has(.chat-produk) {
    max-width: 88%;
}

/* ── Membalas pesan tertentu ───────────────────────────────────────────────
   Percakapan jual-beli sering berjalan cepat dan bercabang: pembeli bertanya
   soal ukuran, merchant menjawab soal stok, lalu keduanya menulis bersamaan.
   Tanpa kutipan, jawaban "iya ada" bisa berarti tiga hal berbeda, dan
   satu-satunya cara memastikannya adalah bertanya ulang. */

/* Kutipan di dalam gelembung. Garis tebal di kiri, bukan kotak berbingkai
   penuh: yang perlu disampaikan adalah "ini bagian yang dirujuk", dan garis
   tepi menyampaikannya tanpa menambah bentuk kedua yang bersaing dengan
   gelembungnya sendiri. */
.chat-kutip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 6px;
    padding: 5px 9px;
    border-left: 3px solid currentColor;
    border-radius: 5px;
    /* Diturunkan dari warna teks gelembungnya, bukan token tetap — gelembung
       sendiri dan gelembung lawan bicara berlatar berbeda, dan satu warna
       tetap akan lenyap di salah satunya. */
    background: color-mix(in srgb, currentColor 9%, transparent);
    opacity: 0.9;
}

.chat-kutip-nama {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.chat-kutip-isi {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.35;
    opacity: 0.8;
    /* Dua baris lalu potong. Kutipan adalah penunjuk, bukan tempat membaca
       ulang — aslinya ada beberapa baris di atas. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Tombol balas pada tiap gelembung ──────────────────────────────────── */
.chat-balas-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 2px;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    /* Tenang sampai disentuh. Ia ada di SETIAP gelembung; pada kecerahan penuh
       ia akan jadi deretan ikon yang menarik mata di sepanjang percakapan,
       bersaing dengan pesan yang seharusnya dibaca. */
    opacity: 0.35;
    cursor: pointer;
    transition: opacity 0.15s;
}

.chat-balas-btn:hover,
.chat-balas-btn:focus-visible {
    opacity: 1;
}

/* Di layar sentuh tak ada hover — dibuat cukup terlihat untuk ditemukan, dan
   sasaran sentuhnya diperbesar melampaui bentuk tampaknya. */
@media (hover: none) {
    .chat-balas-btn {
        opacity: 0.55;
        width: 28px;
        height: 28px;
    }
}

/* ── Pratinjau di atas kolom ketik ─────────────────────────────────────── */
.chat-balas-pratinjau {
    /* `backdrop-filter` dibuang: latarnya ≥ 95% buram, jadi yang diburamkan
       di belakangnya tak pernah terlihat — yang tersisa hanya biaya baca-balik
       + blur + komposit ulang, pada bilah yang menempel di layar sepanjang
       waktu dan ikut dirasterisasi tiap potretan transisi. */
    position: fixed;
    bottom: 62px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 19;
    width: 100%;
    max-width: var(--lebar-kolom);

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;

    border-top: 1px solid var(--border);
    border-left: 3px solid var(--accent, var(--danger));
    background: var(--overlay-blur);
}

.chat-balas-teks {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: var(--text);
}

.chat-balas-teks .chat-kutip-isi {
    -webkit-line-clamp: 1;
}

.chat-balas-batal {
    flex: none;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.chat-balas-batal:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ── Kartu status server (tab Analitik admin) ──────────────────────────────
   Sebelum ada ini, satu-satunya cara mengetahui mesinnya sedang kehabisan
   memori atau kolam koneksinya jenuh adalah SSH ke VPS. Padahal gejalanya
   sampai lebih dulu ke admin — halaman lambat, unggahan gagal — dan justru
   pada saat itulah ia paling tak sempat membuka terminal. */

.srv-status {
    padding: 20px 16px 8px;
}

.srv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.srv-btn {
    padding: 7px 16px;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.srv-btn:hover:not(:disabled) { background: var(--bg-elevated-2); }
.srv-btn:disabled { opacity: 0.55; cursor: default; }

.srv-galat,
.srv-catatan {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

.srv-galat { color: var(--danger); }

.srv-grid {
    display: grid;
    /* Dua kolom di ponsel, empat begitu ruangnya ada. `auto-fit` + `minmax`
       supaya tak perlu titik henti sendiri. */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.srv-kartu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-elevated);
}

.srv-kartu--lebar {
    grid-column: 1 / -1;
    margin-bottom: 10px;
}

.srv-kartu--awas {
    border-color: var(--danger);
}

.srv-judul {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.srv-nilai {
    font-family: var(--font-display, var(--font-body));
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    /* Angka bergerak tiap penyegaran; tanpa ini lebarnya berubah-ubah dan
       kartunya tampak bergetar. */
    font-variant-numeric: tabular-nums;
}

/* Waktu hidup berbentuk kalimat ("3 hari 4 jam"), bukan angka — pada ukuran
   yang sama dengan persentase ia akan terpotong di ponsel. */
.srv-nilai--kecil { font-size: 15px; }

.srv-sub {
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.srv-awas {
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.45;
    color: var(--danger);
}

/* Satu skala untuk CPU, memori, dan disk — dua kartu bersebelahan tak boleh
   memakai ambang yang berbeda diam-diam. */
.stat-aman   { color: var(--success, #16a34a); }
.stat-sedang { color: var(--text); }
.stat-tinggi { color: var(--warning, #d97706); }
.stat-kritis { color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSISI ANTAR-HALAMAN — geser terarah lewat View Transitions API
   ═══════════════════════════════════════════════════════════════════════════

   ── KENAPA VIEW TRANSITIONS, BUKAN ANIMASI CSS BIASA ──────────────────────
   Geser membutuhkan `transform`, dan `transform` pada `.page` TIDAK BOLEH
   dipakai di aplikasi ini: elemen ber-`position: fixed` (bottom-nav, bilah
   bayar) dirender DI DALAM `.page`, dan ancestor ber-transform menjadikan
   dirinya containing block bagi mereka — bilah yang seharusnya menempel di
   layar ikut menggulir bersama halaman. Catatan itu sudah tertulis di
   `02-components.css` dan masih berlaku.

   View Transitions menghindarinya sepenuhnya: yang dianimasikan adalah
   pseudo-element hasil potretan (`::view-transition-*`), di luar pohon DOM
   yang hidup. Tak satu pun elemen sungguhan menerima `transform`, jadi
   `position: fixed` di dalam halaman tetap berperilaku normal.

   ── SIAPA YANG MENJALANKAN ────────────────────────────────────────────────
   `leptos_router` sendiri, lewat `<FlatRoutes transition=true>`. Ia memasang
   kelas `.router-outlet-0` di `<html>` selama transisi berlangsung, dan
   menambahkan `.router-back` bila arahnya MUNDUR. Arah itu ditentukan router
   dari tumpukan path-nya sendiri — termasuk untuk `popstate`, jadi gesture
   geser-kembali di ponsel ikut mendapat arah yang benar tanpa kode tambahan.

   Berkas ini hanya menyediakan animasinya. Tanpa dukungan peramban, router
   memanggil rebuild-nya langsung dan yang tersisa adalah fade `.page` yang
   sudah ada — tak ada yang rusak.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lebar kolom aplikasi, DITURUNKAN dari `--lebar-kolom` (`00-tokens.css`).
   Angkanya dulu ditulis ulang di sini dan harus dijaga tetap sama dengan
   `max-w-[480px]` di `web/app/router.rs` — dua tempat yang bisa berselisih
   diam-diam, dan selisihnya muncul sebagai klip yang memotong halaman di
   tempat yang salah. Kini `<main>` memakai kelas `.kolom-app` yang membaca
   token yang sama, jadi melebarkan kolom di desktop otomatis ikut membetulkan
   jarak geser dan klip di bawah. */
:root { --pt-kolom: var(--lebar-kolom); }

/* ── URUTAN LAPISAN — hal PERTAMA yang harus benar ─────────────────────────
   Tiap elemen yang diberi `view-transition-name` DIANGKAT keluar dari potretan
   `root` dan, secara bawaan, digambar DI ATASNYA. Urutannya mengikuti urutan
   penggambaran, dan `root` selalu yang pertama — jadi apa pun yang dinamai
   berakhir di lapisan yang lebih tinggi daripada seluruh halaman.

   Untuk `.bottom-nav` dan `.nav-progress` itu memang yang diinginkan: keduanya
   elemen kecil yang sudah melayang di atas isi halaman. Untuk `.grid-bg` itu
   BENCANA, dan inilah yang membuat perpindahan halaman sebelumnya terlihat
   rusak: ia `position: fixed; inset: 0` dengan latar OPAQUE (`--bg-base`), jadi
   begitu terangkat ia menutupi SELURUH viewport selama transisi berlangsung.
   Yang tampak bukan halaman yang bergeser, melainkan halaman yang hilang di
   belakang bidang warna rata lalu muncul lagi.

   `z-index` bekerja di sini karena tiap `::view-transition-group` adalah elemen
   ber-`position: absolute` di dalam `::view-transition`. Menyatakan keempatnya
   secara eksplisit, bukan hanya yang negatif: urutan ini adalah satu keputusan
   utuh, dan membacanya dari satu tempat jauh lebih mudah daripada
   menyimpulkannya dari satu nilai menyimpang. */
::view-transition-group(pt-latar)   { z-index: -1; } /* latar grid: DI BAWAH halaman */
::view-transition-group(root)       { z-index: 0; }  /* halamannya sendiri */
::view-transition-group(pt-nav)     { z-index: 1; }  /* bilah nav bawah */
::view-transition-group(pt-progres) { z-index: 2; }  /* garis progres */

/* ── KLIP KE LEBAR KOLOM — perbaikan latar grid yang BERKEDIP ──────────────
   Menamai `.grid-bg` saja ternyata belum cukup, dan alasannya tak terlihat dari
   berkas mana pun: `body` memasang `background-color: var(--bg-page)`, dan
   latar `body` MERAMBAT ke kanvas dokumen. Kanvas itu ikut terpotret ke dalam
   `root`. Jadi potretan `root` bukan "halaman di atas latar tembus pandang",
   melainkan SATU LEMBAR BURAM SELEBAR VIEWPORT — dan lapisan grid yang sudah
   susah payah dibuat diam di z-index -1 berada tepat DI BAWAHNYA, tertutup
   rapat selama transisi berlangsung. Yang terlihat: grid dan orb di gutter
   lenyap saat halaman berpindah lalu muncul lagi.

   Latar kanvas itu tak bisa dibuang (tanpa latar, peramban memakai putih/hitam
   bawaannya — sama buramnya), jadi yang dipotong adalah POTRETANNYA: grup
   `root` diklip ke kolom var(--lebar-kolom) di tengah. Di dalam klip, halaman bergeser
   seperti biasa; di luarnya tak ada apa pun dari `root`, sehingga lapisan
   `pt-latar` yang diam itulah yang terlihat di gutter — persis seperti saat
   tidak ada transisi.

   Konsekuensi yang diterima: `box-shadow` kolom (60px ke kiri-kanan) ikut
   terpotong selama 300 ms. Itu bayangan lembut ber-alpha 0.35; kehilangannya
   sesaat jauh lebih tenang daripada seluruh grid yang berkedip. */
::view-transition-group(root) {
    clip-path: inset(0 max(0px, calc((100% - var(--pt-kolom)) / 2)));
}

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        /* 300 ms — dua tekanan yang saling melawan, dan ini titik temunya.
           Ke ATAS: geseran sejauh SELEBAR LAYAR yang dipaksa selesai secepat
           geseran 28px milik versi sebelumnya tidak terbaca sebagai gerak,
           hanya sebagai kedipan. Ke BAWAH: selama transisi berlangsung yang
           terlihat adalah POTRET BEKU halaman baru, sementara DOM aslinya di
           belakangnya masih memuat data dan memulihkan posisi gulir. Makin
           panjang animasinya, makin lama potret itu menyimpang dari halaman
           yang sebenarnya — dan simpangan itu muncul sebagai isi yang
           melompat begitu animasinya usai.

           Kurvanya sangat cepat di awal lalu melandai panjang, pola dorongan
           halaman di iOS: yang membuat perpindahan terasa RESPONSIF adalah
           100 ms pertamanya, bukan durasi totalnya. */
        animation-duration: 300ms;
        animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
        animation-fill-mode: both;

        /* WAJIB. Gaya bawaan peramban memakai `plus-lighter` supaya silang-pudar
           dua lapisan tidak menggelap di tengah. Begitu animasinya diganti
           menjadi geser, dua lapisan itu tak lagi saling melengkapi — mereka
           bertumpuk, dan `plus-lighter` membuat daerah tumpangnya MENYALA
           terang seperti kilatan putih. `normal` mengembalikannya menjadi
           halaman baru yang lewat di atas halaman lama. */
        mix-blend-mode: normal;
    }

    /* ── MAJU — halaman baru MENDORONG yang lama ───────────────────────────
       Halaman baru masuk penuh dari kanan; yang lama mundur 24% ke kiri dan
       digelapkan, jadi ia terbaca sebagai lapisan yang tertinggal di belakang
       alih-alih lapisan yang ikut pergi. Itulah seluruh isi kesan "menumpuk"
       yang membuat tombol kembali nanti terasa masuk akal.

       Dua angkanya tidak boleh dipilih bebas: selama yang lama bergerak LEBIH
       PENDEK daripada yang baru, tepi kanan yang lama selalu masih tertutup
       tepi kiri yang baru, dan tak pernah ada celah kosong di antara keduanya
       pada bingkai mana pun.

       Yang meredup dipakai `brightness`, BUKAN `opacity`. Menurunkan opacity
       membuat lapisan di bawahnya — latar grid yang justru sengaja dibuat diam
       — menembus halaman yang sedang ditinggalkan. `brightness` menggelapkan
       tanpa membuatnya tembus. */
    ::view-transition-old(root) { animation-name: pt-dorong-keluar; }
    ::view-transition-new(root) { animation-name: pt-dorong-masuk; }

    /* ── MUNDUR — yang lama DITARIK pergi, membuka yang di bawahnya ────────
       Bukan sekadar arah yang dibalik. Saat kembali, yang harus bergerak adalah
       halaman yang DITINGGALKAN: ia meluncur ke kanan keluar layar dan
       memperlihatkan halaman sebelumnya yang selama ini "ada di bawahnya",
       kembali terang dari 24% di kiri.

       Karena itu `z-index`-nya dibalik. Secara bawaan potretan BARU selalu
       digambar di atas yang LAMA; dibiarkan begitu, gerakan kembali akan tampak
       seperti membuka halaman baru dari arah kiri — bukan seperti kembali. */
    html.router-back::view-transition-old(root) {
        animation-name: pt-tarik-keluar;
        z-index: 1;
    }
    html.router-back::view-transition-new(root) {
        animation-name: pt-tarik-masuk;
        z-index: 0;
    }

    /* ── DUA KEADAAN YANG TIDAK BOLEH BERGESER ─────────────────────────────
       Ditulis PALING AKHIR dengan sengaja: kekhususannya sama dengan aturan
       `.router-back` di atas, jadi urutan berkas inilah yang memenangkannya.
       Keduanya harus menang — arah maju/mundur tak relevan begitu jawabannya
       "jangan bergeser sama sekali".

       ── `pt-tab` — pindah antar-tab bilah bawah ───────────────────────────
       Geser ke samping menyatakan hubungan BERTINGKAT: yang baru menumpuk di
       atas yang lama, dan tombol kembali akan membongkarnya lagi. Antar-tab
       tidak begitu — EXPLORE dan PROFILE sejajar, tak ada yang "di dalam" yang
       lain, dan kembali dari PROFILE tidak membawa siapa pun ke EXPLORE.
       Mendorongnya ke samping menjanjikan struktur yang tak ada, dan arah
       dorongannya pun sewenang-wenang: router menentukan maju/mundur dari
       tumpukan path, bukan dari urutan tab, jadi tab yang sama bisa masuk dari
       kiri sekali dan dari kanan di lain waktu.

       Kelasnya dipasang oleh `BottomNav` pada `click` — SEBELUM router
       memotret keadaan lama. Lihat catatannya di `components/nav.rs`.

       ── `gulir-pulih` — kembali ke halaman yang tadi sudah digulir jauh ────
       Ini penyebab "isi melompat setelah animasi". Saat mundur ke halaman
       panjang, `gulir::pulihkan` tak bisa menyetel posisinya sekali jalan:
       halaman tujuan masih kerangka shimmer setinggi satu layar, jadi ia
       mencoba ulang tiap bingkai sampai isinya cukup tinggi. Sepanjang itu
       posisi gulirnya masih merayap — sementara di layar ada lapisan yang
       meluncur seolah halamannya sudah pada tempatnya. Begitu animasinya
       usai, layar mendarat di posisi yang sama sekali lain.

       Geseran itulah yang berbohong, jadi geseran itu yang dibuang. Pudar
       150 ms tak menyatakan posisi apa pun, sehingga gulir yang mendarat di
       tempat lain tak lagi terbaca sebagai lompatan — dan ia selesai lebih
       cepat dari kejar-kejaran gulirnya. */
    html.pt-tab::view-transition-old(root),
    html.gulir-pulih::view-transition-old(root) {
        animation-name: pt-pudar-keluar;
        animation-duration: 150ms;
        animation-timing-function: ease-out;
        /* Kembali ke bawaan: pada `.router-back` di atas yang lama diangkat ke
           z-index 1. Untuk silang-pudar, yang BARU harus di atas — kalau tidak,
           yang tampak adalah halaman lama memudar memperlihatkan latar, bukan
           halaman baru yang muncul. */
        z-index: 0;
    }
    html.pt-tab::view-transition-new(root),
    html.gulir-pulih::view-transition-new(root) {
        animation-name: pt-pudar-masuk;
        animation-duration: 150ms;
        animation-timing-function: ease-out;
        z-index: 1;
    }
}

/* ── JARAK GESER = SELEBAR KOLOM, BUKAN SELEBAR VIEWPORT ───────────────────
   `translateX(100%)` pada potretan `root` berarti SELEBAR VIEWPORT, karena
   potretan `root` memang seluas viewport. Di ponsel keduanya kebetulan sama
   dan tak ada yang janggal. Di laptop 1440px tidak: kolom var(--lebar-kolom) dipaksa
   menempuh 1440px dalam 300 ms, dan halaman lama mundur 346px — jauh di luar
   kolomnya sendiri. Yang terbaca bukan halaman yang didorong, melainkan
   seluruh JENDELA yang meluncur.

   `min(100%, var(--pt-kolom))` menjadikannya selebar kolom di layar lebar dan
   tetap selebar layar di ponsel sempit (di mana kolomnya memang selebar itu) —
   satu rumus, tanpa media query, tanpa dua angka yang bisa berselisih. */
@keyframes pt-dorong-masuk {
    from { transform: translateX(min(100%, var(--pt-kolom))); }
    to   { transform: translateX(0); }
}
/* ── `filter: brightness()` DIBUANG dari dua bingkai di bawah ──────────────
   Peredupan halaman yang ditinggalkan memang memperkuat kesan menumpuk, tapi
   harganya tak sebanding. `transform` bisa dikerjakan seluruhnya oleh
   compositor: lapisannya dirasterisasi SEKALI lalu digeser tiap bingkai.
   `filter` tidak — nilainya berubah tiap bingkai, jadi lapisannya harus
   DICAT ULANG tiap bingkai. Di sini lapisan itu seluas kolom penuh setinggi
   layar, dan ia dicat ulang enam puluh kali per detik selama 300 ms, tepat
   saat CPU juga sedang sibuk membangun halaman baru dan Leptos menghidrasi
   komponennya. Di situlah bingkai-bingkai yang hilang itu berasal.

   Yang hilang hanya peredupannya. Arah dan hierarkinya tetap terbaca dari
   geseran 24% yang lebih pendek daripada halaman yang masuk — itu memang
   selalu jadi pembawa pesan utamanya. */
@keyframes pt-dorong-keluar {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(min(100%, var(--pt-kolom)) * -0.24)); }
}
@keyframes pt-tarik-masuk {
    from { transform: translateX(calc(min(100%, var(--pt-kolom)) * -0.24)); }
    to   { transform: translateX(0); }
}
@keyframes pt-tarik-keluar {
    from { transform: translateX(0); }
    to   { transform: translateX(min(100%, var(--pt-kolom))); }
}

/* Silang-pudar — dipakai dua keadaan di bawah yang sama-sama TIDAK boleh
   bergeser. Pudar tak menyatakan arah dan tak menyatakan posisi; itulah
   gunanya di sini. */
@keyframes pt-pudar-masuk {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pt-pudar-keluar {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ── Yang TIDAK ikut bergeser ───────────────────────────────────────────────
   Potretan `root` mencakup seluruh viewport, termasuk elemen yang sebenarnya
   tak berganti. Memberi mereka nama sendiri mengeluarkannya dari potretan
   `root` dan menjadikannya lapisan tersendiri yang dipasangkan lama↔baru —
   karena isinya identik, hasilnya terlihat diam. Lapisannya diatur oleh blok
   `z-index` di atas.

   Latar grid harus diam karena ia memang milik seluruh aplikasi, bukan milik
   satu halaman; melihatnya ikut menggeser langsung membocorkan bahwa yang
   bergerak adalah "layar", bukan "halaman".

   Bottom-nav diam karena ia adalah kerangka tetap: pada navigasi antar-tab
   ia ada di kedua sisi dan dipasangkan, sedangkan saat menuju halaman yang
   tak punya nav (misalnya detail produk) ia hanya ada di sisi lama dan
   memudar sendiri — dua perilaku yang benar tanpa aturan tambahan. */
.grid-bg { view-transition-name: pt-latar; }
.bottom-nav { view-transition-name: pt-nav; }

/* ── Jangan menganimasikan dua kali ────────────────────────────────────────
   `.page` punya `page-enter` (fade 0.18s) dari sebelum transisi ini ada.
   Selama transisi berjalan keduanya menumpuk dan hasilnya fade ganda yang
   terlihat seperti kedipan.

   Digate `@supports` DENGAN SENGAJA: `leptos_router` memasang
   `.router-outlet-0` SEBELUM memeriksa dukungan peramban, dan pada peramban
   yang tak mendukung ia tak pernah melepasnya lagi. Tanpa gate ini, kelas
   yang tersangkut itu akan mematikan `page-enter` selamanya di peramban lama
   — persis kebalikan dari yang dimaksud. */
@supports (view-transition-name: none) {
    html.router-outlet-0 .page { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UMPAN BALIK KETUK
   ═══════════════════════════════════════════════════════════════════════════
   Di ponsel, jeda antara mengetuk kartu dan halaman berganti diisi oleh
   permintaan jaringan. Tanpa tanda apa pun, ketukan itu terasa tidak
   terdaftar dan orang mengetuk lagi. Satu penekanan kecil sudah cukup
   menjawabnya, dan ia gratis: murni CSS, tak menunggu apa pun.

   `transform` di sini aman — kartu tak memuat elemen `position: fixed`.

   `-webkit-tap-highlight-color` dimatikan karena kotak biru bawaan iOS/Android
   muncul BERSAMAAN dengan penekanan ini dan membatalkan kesan halusnya. */
.explore-product-card-v2,
.exp-mkt-card,
.ticket-card,
.notif-card,
.menu-item {
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.explore-product-card-v2:active,
.exp-mkt-card:active,
.ticket-card:active,
.notif-card:active,
.menu-item:active {
    /* 0.97, bukan 0.9. Kartu adalah permukaan besar; skala yang sama dengan
       tombol kecil membuatnya tampak melompat, bukan tertekan. */
    transform: scale(0.97);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HORMATI "KURANGI GERAK"
   ═══════════════════════════════════════════════════════════════════════════
   Setelan sistem ini bukan soal selera. Bagi sebagian orang gerak yang
   meluncur memicu pusing dan mual, dan halaman yang mengabaikannya menjadi
   tak terpakai — bukan sekadar kurang nyaman.

   Blok ini berlaku untuk SELURUH aplikasi, bukan hanya transisi di atas:
   sebelum ini baru sebagian komponen yang menghormatinya, dan `.page` sendiri
   tidak. Yang dimatikan adalah PERPINDAHANNYA, bukan informasinya — halaman
   tetap berganti, kartu tetap memberi umpan balik lewat warna bawaannya,
   pemuat tetap berputar (satu-satunya animasi yang memang berarti "tunggu"). */
@media (prefers-reduced-motion: reduce) {
    /* Tanpa animasi pada kedua sisi, transisi selesai seketika: halaman
       bertukar dalam satu bingkai, tanpa geseran. */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
    .page { animation: none; }
    .explore-product-card-v2,
    .exp-mkt-card,
    .ticket-card,
    .notif-card,
    .menu-item {
        transition: none;
    }
    .explore-product-card-v2:active,
    .exp-mkt-card:active,
    .ticket-card:active,
    .notif-card:active,
    .menu-item:active {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GARIS PROGRES NAVIGASI
   ═══════════════════════════════════════════════════════════════════════════
   Lihat `components/nav_progress.rs` untuk alasan keberadaannya. */

.nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    /* Di atas isi halaman, tapi DI BAWAH story viewer/overlay layar penuh —
       garis 2px tak pantas menembus lapisan yang menutupi seluruh layar. */
    z-index: 60;
    pointer-events: none;
    overflow: hidden;

    /* Ikut dikeluarkan dari potretan `root` supaya ia tidak ikut menggeser
       bersama halaman kalau perpindahannya cukup lambat sampai keduanya
       bertumpang. */
    view-transition-name: pt-progres;
}

.nav-progress__bar {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(
        90deg,
        var(--accent-lime) 0%,
        var(--accent-lime) 60%,
        rgba(255, 255, 255, 0.65) 100%
    );
    opacity: 0;
}

/* Jeda 0.15s sebelum apa pun terlihat — perpindahan cepat tak pernah
   menampilkan garis sama sekali. `both` penting: selama jeda, keadaan `from`
   (tak terlihat) yang berlaku, bukan gaya normal elemennya.

   Kurvanya melambat tajam dan berhenti di 90%. Ia TIDAK boleh mencapai 100%:
   100% berarti "selesai", dan garis yang menyatakan selesai sementara
   halamannya belum muncul adalah kebohongan kecil yang langsung terasa. Yang
   dijanjikan hanya "masih jalan" — dan kepastian selesainya disampaikan oleh
   halaman barunya sendiri, bukan oleh garis ini. */
.nav-progress--aktif .nav-progress__bar {
    animation: np-maju 8s cubic-bezier(0.12, 0.72, 0.24, 1) 0.15s both;
}

@keyframes np-maju {
    from { transform: scaleX(0);    opacity: 1; }
    to   { transform: scaleX(0.9);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    /* Garisnya tetap ada — ia informasi, bukan hiasan — tapi berhenti merayap.
       Ia muncul utuh setelah jeda yang sama dan diam di sana. */
    .nav-progress--aktif .nav-progress__bar {
        animation: np-diam 0s linear 0.15s both;
    }
    @keyframes np-diam {
        from { transform: scaleX(0.9); opacity: 1; }
        to   { transform: scaleX(0.9); opacity: 1; }
    }
}

/* ── Gulir programatik tidak boleh dianimasikan ─────────────────────────────
   `01-base.css` menyetel `html { scroll-behavior: smooth }` untuk seluruh
   dokumen. Itu tepat untuk tautan jangkar, tetapi ia juga berlaku pada tiap
   `window.scrollTo` — dan gulir yang dipanggil saat berpindah halaman justru
   harus SEKETIKA. Lihat catatan lengkapnya di `gulir::gulir_instan`
   (`web/app/router.rs`), yang memasang kelas ini persis selama gulir itu
   berlangsung dan melepasnya lagi setelah selesai. */
html.gulir-instan {
    scroll-behavior: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORANG SANDI — penanda keadaan "sandi terlihat / tersembunyi" di /login
   ═══════════════════════════════════════════════════════════════════════════

   Tangannya menutup mata selama sandi tersembunyi, lalu TURUN ke dada saat
   sandinya ditampilkan. Ia bukan hiasan: ia menjawab pertanyaan yang muncul
   tepat sebelum orang menekan tombol mata — "kalau kuketuk ini, sandinya
   kelihatan siapa saja yang lewat?" — dan menjawabnya dari jarak yang bisa
   dilihat sekilas, tidak seperti ikon mata 18px di dalam kolomnya.

   ── KENAPA ORANG, BUKAN MONYET ────────────────────────────────────────────
   Versi sebelumnya memakai monyet yang menutup mata (kiasan 🙈). Kiasannya
   terbaca, tapi yang sedang dibicarakan halaman ini adalah SANDI ORANG YANG
   SEDANG MASUK — dan satu-satunya sosok yang menempatkan pembacanya sebagai
   dirinya sendiri adalah sosok manusia. Monyet menjadikannya lelucon; orang
   menjadikannya cermin.

   ── KENAPA DIGAMBAR, BUKAN EMOJI ──────────────────────────────────────────
   Emoji 🙈 / 🫣 hanya punya satu keadaan: tertutup. Tak ada emoji "mengintip",
   jadi memakai emoji berarti bertukar dua gambar berbeda yang saling
   menggantikan, dan yang terlihat adalah kedipan, bukan tangan yang bergerak.
   Gerakan tangannya justru seluruh isi pesannya.

   Selain itu bentuk emoji ditentukan sistem operasi: yang sama di macOS,
   Windows, dan Android bukan gambar yang sama, dan di sebagian platform
   tangannya bahkan tak terbaca sebagai tangan pada ukuran 76px.

   ── SATU SUMBER WARNA ─────────────────────────────────────────────────────
   Warnanya literal dan TIDAK menarik token tema. Ini ilustrasi, bukan
   kerangka antarmuka: warna kulit dan rambut tak punya padanan di tema
   terang/gelap, dan memaksanya mengikuti token akan membuatnya berubah jadi
   abu-abu pada salah satu tema. Yang dijaga justru kontrasnya terhadap KEDUA
   latar — itu sebabnya ada garis tepi tipis, bukan karena gayanya.
   ═══════════════════════════════════════════════════════════════════════════ */

.pw-orang {
    /* Semua ukuran turunan mengacu ke satu angka ini.
       76px dulu terlalu kecil: pada ukuran itu jari, alis, dan hidungnya
       mengecil sampai di bawah satu piksel perangkat, dan yang tersisa hanya
       siluet — tangannya yang turun pun nyaris tak terbaca sebagai gerakan,
       padahal gerakan itulah seluruh isi pesannya. Kartu ini lebar dalam
       (var(--lebar-kolom) dikurangi padding 24px) sekitar 400px, jadi 120px masih jauh dari
       mendominasi. */
    --orang-ukuran: 120px;

    --orang-kulit: #e8b08a;
    --orang-kulit-tepi: #c98d67;
    --orang-rambut: #3c2f2b;
    /* Tangan SENGAJA lebih terang dari wajah. Itu satu-satunya hal yang
       memisahkan keduanya saat tangan menutup mata: tanpa selisih terang,
       yang terlihat hanyalah satu bidang kulit tanpa bentuk. */
    --orang-tangan: #f3c6a4;
    --orang-baju: #4d5f74;
    --orang-gelap: #3a2b25;

    display: flex;
    justify-content: center;
    margin: 0 0 18px;
}

.pw-orang__svg {
    width: var(--orang-ukuran);
    height: var(--orang-ukuran);
    /* Pengaman, bukan bagian rancangan: pada keadaan terbuka tangannya
       berhenti di sekitar y=116 dari viewBox 120, jadi hari ini tak ada yang
       terpotong. Yang dijaga adalah kalau kelak jaraknya diperbesar — tangan
       yang lolos keluar viewBox akan menumpuki kolom "Nomor HP" di bawahnya,
       dan penyebabnya tidak akan terlihat dari berkas ini. */
    overflow: hidden;
    display: block;
}

.pw-orang__badan {
    fill: var(--orang-baju);
    stroke: none;
}
.pw-orang__leher { fill: var(--orang-kulit-tepi); }
.pw-orang__telinga { fill: var(--orang-kulit-tepi); }
.pw-orang__kepala { fill: var(--orang-kulit); }
.pw-orang__rambut { fill: var(--orang-rambut); }

.pw-orang__hidung,
.pw-orang__mulut {
    fill: none;
    stroke: var(--orang-gelap);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Alis lebih tipis daripada mulut. Disamakan tebalnya, ia berhenti terbaca
   sebagai alis dan mulai terbaca sebagai kerutan marah. */
.pw-orang__alis {
    fill: none;
    stroke: var(--orang-rambut);
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* ── Mata ──────────────────────────────────────────────────────────────────
   Dua keadaan yang dipertukarkan, bukan satu bentuk yang dianimasikan:
   `scaleY` pada bulatan menghasilkan lonjong, bukan mata yang memicing. Yang
   terbaca sebagai "terpejam" adalah GARIS, jadi garisnya digambar sendiri. */
.pw-orang__mata { fill: var(--orang-gelap); }

.pw-orang__mata-pejam {
    fill: none;
    stroke: var(--orang-gelap);
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* Saat tangan masih menutup, mata TERPEJAM yang tampil. Ini penting untuk
   bingkai-bingkai di tengah gerakan: tangan sudah mulai turun sementara
   matanya belum sempat membuka, dan mata bulat yang muncul dari balik tangan
   yang baru bergeser 3px terlihat seperti kaget, bukan seperti mengintip. */
.pw-orang__mata { opacity: 0; }
.pw-orang__mata-pejam { opacity: 1; }

.pw-orang--lihat .pw-orang__mata { opacity: 1; }
.pw-orang--lihat .pw-orang__mata-pejam { opacity: 0; }

/* ── Tangan ────────────────────────────────────────────────────────────────
   Keduanya turun, tapi TIDAK sama jauh dan tidak serentak. Gerakan yang
   simetris sempurna terbaca sebagai satu benda yang dipindahkan; selisih
   kecil inilah yang membuatnya terbaca sebagai dua tangan milik seseorang
   yang sedang mengintip.

   `transform-origin` ada di pangkal masing-masing tangan (sisi luar wajah,
   setinggi bahu), jadi tangannya BERPUTAR turun seperti berporos di siku —
   bukan melorot lurus ke bawah. */
.pw-orang__tangan {
    fill: var(--orang-tangan);
    stroke: var(--orang-kulit-tepi);
    stroke-width: 1.5;
    transition: transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

.pw-orang__tangan--kiri,
.pw-orang__tangan--kanan {
    /* Dinyatakan walau ini memang bawaan untuk elemen SVG: tanpa `view-box`,
       koordinat di bawah diukur dari kotak isi masing-masing tangan, bukan
       dari `viewBox` — dan porosnya pindah ke tempat yang tak dimaksud. */
    transform-box: view-box;
}
.pw-orang__tangan--kiri { transform-origin: 30px 74px; }
.pw-orang__tangan--kanan { transform-origin: 90px 74px; }

/* Jari — hanya guratan, tak perlu bentuk sendiri. Ikut bergerak bersama
   grup tangannya karena berada DI DALAM grup itu. */
.pw-orang__jari {
    fill: none;
    stroke: var(--orang-kulit-tepi);
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* Keadaan TERBUKA: tangan kiri turun lebih jauh dan memutar lebih banyak,
   tangan kanan tertinggal sedikit — sisi itulah yang "mengintip" lebih dulu. */
.pw-orang--lihat .pw-orang__tangan--kiri {
    /* Turunnya sampai DADA, bukan berhenti setinggi leher. Dua alasan, dan
       yang kedua baru terlihat setelah badannya digambar:

       1. Berhenti di tengah, tangannya mendarat tepat di depan mulut — yang
          tampak adalah orang yang menutup MULUTNYA, pesan yang sama sekali
          lain.
       2. Di ketinggian leher tangannya berada di luar siluet badan, dan tanpa
          lengan yang menghubungkannya ia terbaca sebagai dua benda yang
          melayang di sebelah kepala. Begitu ia MENUMPANG di atas bidang baju,
          pertanyaan "ini menempel di mana" tak lagi muncul — persis cara
          ilustrasi datar lain menyembunyikan lengan yang tak digambar. */
    transform: translate(3px, 54px) rotate(-22deg);
}
.pw-orang--lihat .pw-orang__tangan--kanan {
    transform: translate(-2px, 52px) rotate(20deg);
    /* Jeda 40 ms. Cukup untuk terbaca sebagai dua gerakan, terlalu singkat
       untuk terbaca sebagai antrean. */
    transition-delay: 40ms;
}

/* ── Hormati "kurangi gerak" ───────────────────────────────────────────────
   Yang dimatikan hanya PERPINDAHANNYA. Keadaan akhirnya tetap berbeda —
   tangan tetap turun, mata tetap terbuka — karena di situlah informasinya,
   dan informasi itu justru soal keamanan. */
@media (prefers-reduced-motion: reduce) {
    .pw-orang__tangan {
        transition: none;
    }
    .pw-orang--lihat .pw-orang__tangan--kanan {
        transition-delay: 0s;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAMPILAN DESKTOP — rail samping + kolom lebar
   ═══════════════════════════════════════════════════════════════════════════

   Aplikasi ini lahir sebagai satu kolom ponsel dan itu tetap dasarnya. Berkas
   ini TIDAK membongkarnya; ia menambahkan satu lapisan yang hanya menyala di
   layar lebar, dan seluruhnya di dalam `@media (min-width: …)`. Di bawah
   breakpoint, tak satu baris pun di sini berlaku — jadi tampilan ponsel
   mustahil ikut berubah karena sesuatu di berkas ini.

   ── KENAPA NOMOR 60 ───────────────────────────────────────────────────────
   `build.rs` menggabung `styles/parts/*.css` urut nama, jadi yang bernomor
   lebih besar menang. Penyesuaian desktop HARUS bisa menimpa aturan halaman
   (05–39) tanpa perlu `!important`, dan 60 menaruhnya sesudah semuanya.

   ── TIGA BREAKPOINT, DAN ALASANNYA ────────────────────────────────────────
   • 1024px — rail nav ikon muncul, kolom melebar ke 720px.
     Bukan angka sembarang: pada 1024px kolom 720px menyisakan gutter 152px di
     tiap sisi, dan rail selebar 88px muat seluruhnya di dalam gutter kiri
     TANPA menyentuh kolom. Menurunkan breakpoint tanpa menurunkan lebar kolom
     akan membuat rail menimpa isi halaman.
   • 1200px — rail menjadi SIDEBAR BERLABEL selebar 248px, kolom 760px.
   • 1440px — kolom 800px. Sekadar bernapas; bukan tata letak baru.

   Breakpoint 1200 ditambahkan belakangan dan MELANGGAR aturan "sesedikit
   mungkin breakpoint" yang ditulis di sini sebelumnya. Alasannya cukup: rail
   88px hanya memuat ikon dengan label 10px di bawahnya — bentuk navigasi
   PONSEL yang dipindah menyamping, bukan navigasi desktop. Sidebar berlabel
   butuh ~248px, dan 248 + kolom 720 baru menyisakan gutter yang wajar mulai
   sekitar 1200px. Di bawah itu rail ikon tetap bentuk yang benar, jadi
   keduanya memang dua keadaan yang berbeda, bukan satu yang dipaksa melar.

   Bentuk sidebar-nya mengikuti `ppm` (`DesktopSidebar` di
   `src/web/components.rs` + `style/tailwind.css`): panel kiri berisi brand,
   lalu daftar nav ikon+label sebaris, item aktif sebagai pill.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
    /* Satu baris ini yang melebarkan SELURUH aplikasi: kolom utama, tiap bilah
       `position: fixed` yang sejajar dengannya, dan jarak geser + klip transisi
       halaman (`--pt-kolom` diturunkan dari token yang sama). Itulah gunanya
       tokenisasi sebelum ini dikerjakan. */
    :root {
        --lebar-kolom: 720px;
        --rail-lebar: 88px;
    }

    /* ── NAV BAWAH → RAIL KIRI ─────────────────────────────────────────────
       Elemen DOM-nya sama persis (`BottomNav`), hanya tata letaknya yang
       berubah. Tak ada komponen baru, tak ada cabang di Rust, dan tak ada
       kemungkinan kedua versi nav berselisih isi — karena memang cuma ada
       satu.

       `view-transition-name: pt-nav` dari `58-page-transition.css` tetap
       berlaku dan justru makin tepat di sini: rail memang kerangka tetap yang
       tak boleh ikut bergeser saat halaman berpindah. */
    .bottom-nav {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        margin-inline: 0;

        width: var(--rail-lebar);
        max-width: var(--rail-lebar);

        /* Dari kolom mendatar menjadi tumpukan tegak. `align-content: center`
           memusatkan seluruh tumpukan secara vertikal, jadi jumlah tab yang
           berubah (merchant/admin muncul untuk sebagian orang) tak pernah
           membuatnya menempel di tepi atas. */
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-auto-rows: max-content;
        align-content: center;
        gap: 4px;

        border-top: none;
        border-right: 1px solid var(--border-strong);
        /* Padding bawah untuk home indicator iOS tak berlaku di sini. */
        padding: 16px 8px;
    }

    .bottom-item {
        padding: 10px 0;
        gap: 6px;
        border-radius: 12px;
        transition: color 0.2s, background 0.2s;
    }
    /* Desktop punya penunjuk tetikus, dan penunjuk menuntut umpan balik hover
       yang di ponsel tak pernah dibutuhkan. */
    .bottom-item:hover {
        background: var(--bg-elevated);
        color: var(--text-primary);
    }
    .bottom-item--active:hover {
        color: var(--accent-lime);
    }

    .bottom-label {
        font-size: 10px;
        letter-spacing: 0.08em;
    }

    /* Lencana pesan belum dibaca: di bilah mendatar ia digeser dari tengah
       tombol; di rail, tombolnya jauh lebih lebar daripada ikonnya, jadi
       offset yang sama menaruhnya melayang di ruang kosong. */
    .bottom-badge {
        margin-left: 8px;
    }

    /* ── PUSATKAN TERHADAP RUANG YANG TERSISA, BUKAN VIEWPORT ─────────────
       Rail memakan 88px di kiri. Kolom yang tetap dipusatkan ke VIEWPORT
       karena itu berakhir 44px ke kiri dari pusat ruang yang sebenarnya bisa
       dipakai — cukup untuk terbaca sebagai "agak melenceng" tanpa pernah
       jelas kenapa.

       `padding-left` pada `body` menggeser seluruh isi yang mengalir sekaligus,
       jadi kolomnya terpusat dengan sendirinya tanpa satu pun perhitungan.
       Latar grid tak ikut bergeser karena ia `position: fixed` — dan memang
       harus begitu, ia milik seluruh layar. */
    body {
        padding-left: var(--rail-lebar);
    }

    /* Bilah melayang TIDAK terkena padding `body` (mereka mengacu ke viewport),
       jadi titik awalnya digeser sendiri. `right: 0` + `margin-inline: auto`
       yang sudah ada lalu memusatkannya di ruang yang sama dengan kolom.

       Disebut satu per satu, bukan disapu dengan pemilih umum: `.sv-scene`
       (penampil story) memang harus menutupi SELURUH layar termasuk rail, dan
       satu sapuan yang kelewat luas akan menggesernya juga. */
    .pay-bar,
    .sticky-footer,
    .ed-buy-footer,
    .medit-sticky-footer,
    .chat-input-bar,
    .chat-send-hint,
    .chat-readonly-bar,
    .chat-error-toast,
    .chat-balas-pratinjau,
    .sub-cta-sticky,
    .sub-pay-sticky,
    .exp-sovl-wrap,
    .toast-host {
        left: var(--rail-lebar);
    }

    /* ── RUANG UNTUK BILAH YANG SUDAH TAK ADA DI BAWAH ─────────────────────
       Tiap halaman menyisakan 80–100px di bawah supaya isinya tak tertutup nav.
       Begitu nav pindah ke samping, ruang itu berubah menjadi lubang kosong di
       ujung tiap halaman. Dikembalikan ke jarak nafas biasa.

       Yang TIDAK ikut direset: halaman yang punya bilah melayangnya SENDIRI
       (detail produk, keranjang, checkout) — bilah itu tetap di bawah, dan
       ruangnya masih dibutuhkan. Karena itu daftar di bawah menyebut halaman
       satu per satu alih-alih menyapu `.page`. */
    .exp-page,
    .lives-page,
    .merchant-page,
    .mp-page,
    .pl-page,
    .oc-page {
        padding-bottom: 32px;
    }

    /* ── KARTU: 3 KOLOM ───────────────────────────────────────────────────
       Kolom 720px dengan kartu 2-lajur menghasilkan kartu selebar ~350px —
       terlalu besar untuk kartu produk, dan gambarnya jadi meregang. Tiga
       lajur mengembalikannya ke ~230px, dekat dengan proporsi di ponsel. */
    .exp-mkt-grid,
    .explore-product-grid-v2 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    /* ═══════════════════════════════════════════════════════════════════
       ENAM HALAMAN UTAMA
       ═══════════════════════════════════════════════════════════════════
       Sisanya sengaja TIDAK diberi aturan khusus. Kerangka di atas sudah
       membuat semuanya melebar dengan rapi, dan aturan per-halaman yang
       ditulis tanpa melihat data sungguhan lebih sering membuat rusak
       daripada bagus. Halaman yang berikut mendapat perlakuan sendiri karena
       ketiganya punya masalah yang MUNCUL justru karena melebar. */

    /* ── 1. EXPLORE ───────────────────────────────────────────────────────
       Grid tiga lajur sudah diatur di atas. Yang tersisa: kartu marketplace
       tak lagi perlu gambar sebesar di ponsel, karena di sini ada tiga
       berjajar, bukan dua. */
    .exp-mkt-card:hover {
        /* Angkatnya dikurangi: di ponsel `:hover` tak pernah terjadi; di
           desktop ia terjadi tiap kali tetikus lewat, dan 3px terasa gelisah
           pada grid yang rapat. */
        transform: translateY(-2px);
    }

    /* ── 2. DETAIL PRODUK ─────────────────────────────────────────────────
       Sampul produk pada kolom 720–800px menjadi gambar raksasa yang mendorong
       harga dan tombol beli keluar layar — orang harus menggulir untuk
       menemukan hal yang justru ia cari. Tingginya dibatasi, dan
       `object-fit: cover` yang sudah ada menjaga proporsinya. */
    .detail-cover-wrap {
        max-height: 420px;
    }
    .ed-more-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* ── 3. KERANJANG & 4. CHECKOUT — BELUM DIKERJAKAN, DAN ITU DISENGAJA ──
       Keduanya tak punya satu pun kelas struktural: seluruh tata letaknya
       disusun dari utilitas Tailwind langsung di `web/pages/cart.rs` dan
       `checkout.rs` (`flex flex-col gap-4 px-5`, dan seterusnya). Tak ada
       sasaran yang bisa dipegang dari berkas ini.

       Melebarkannya dengan benar berarti menyentuh markup kedua halaman itu —
       memberi pembungkusnya kelas, lalu membatasi lebar baca isinya di sini.
       Itu pekerjaan di berkas Rust, bukan CSS, dan tak pantas diselundupkan ke
       dalam ronde yang seharusnya hanya menambah lapisan desktop.

       Untuk sementara keduanya ikut melebar apa adanya bersama kolom, yang
       masih terbaca — hanya belum rapi. */

    /* ── 5. PESANAN ───────────────────────────────────────────────────────
       Kartu pesanan tinggi dan padat. Dua lajur mengubah "menggulir mencari
       satu pesanan" menjadi "memindai" — dan itulah yang sebenarnya dilakukan
       orang di halaman ini. */
    .orders-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        align-items: start;
    }

    /* ── 6. PROFIL ────────────────────────────────────────────────────────
       Daftar menu satu lajur yang membentang 800px adalah baris teks pendek
       dengan ruang kosong sepanjang layar di kanannya. Dua lajur mengisinya
       tanpa mengubah apa pun tentang tiap barisnya. */
    .menu-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    /* Kecuali yang berbahaya — keluar akun dan hapus akun tetap satu baris
       penuh di bawah, terpisah dari menu biasa. Barisnya tak boleh berakhir
       bersebelahan dengan menu tak berbahaya di lajur sebelahnya, karena di
       situlah tangan yang sedang cepat salah menekan. */
    .menu-item--danger {
        grid-column: 1 / -1;
    }

    /* ── KETUKAN → TETIKUS ────────────────────────────────────────────────
       `:active scale(0.97)` dari `58-page-transition.css` adalah jawaban untuk
       jari yang menunggu halaman berganti. Dengan tetikus, umpan baliknya
       sudah datang lebih dulu lewat hover, dan skala yang menyusut saat klik
       justru terasa seperti tombol yang meleset. */
    .explore-product-card-v2:active,
    .exp-mkt-card:active,
    .ticket-card:active,
    .notif-card:active,
    .menu-item:active {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ≥1200px — RAIL IKON MENJADI SIDEBAR BERLABEL
   ═══════════════════════════════════════════════════════════════════════════
   Elemen DOM-nya TETAP `BottomNav` yang sama, sama seperti pada 1024px. Yang
   berubah hanya arah tata letak tiap itemnya: dari ikon-di-atas-label menjadi
   ikon-di-samping-label. Tak ada komponen kedua, jadi tak ada kemungkinan isi
   nav ponsel dan nav desktop berselisih.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    :root {
        --rail-lebar: 248px;
        /* 1200 - 248 = 952 ruang tersisa; kolom 760 menyisakan gutter 96px di
           tiap sisi. Kolom sengaja TIDAK ikut melebar sebanyak sidebarnya:
           yang dicari di desktop bukan baris teks yang makin panjang. */
        --lebar-kolom: 760px;
    }

    /* Brand di atas, nav mengalir dari atas — bukan lagi dipusatkan tegak.
       Pada rail ikon, memusatkan tumpukan masuk akal karena isinya pendek.
       Pada sidebar berlabel, isinya mengisi sebagian besar tinggi layar, dan
       tumpukan yang "mengambang di tengah" justru terbaca seperti salah
       posisi. */
    .bottom-nav {
        align-content: start;
        gap: 2px;
        padding: 20px 12px;
    }

    /* ── BRAND ────────────────────────────────────────────────────────────
       Hanya ada di sini. Di ponsel bilah nav tak punya ruang untuk nama
       aplikasi, dan header tiap halaman sudah memuatnya (`.page-logo`).

       Perlakuannya sengaja menyalin `.page-logo` di header halaman (weight 900,
       tracking lebar, huruf besar) dan BUKAN memilih gaya sendiri: keduanya
       adalah nama yang sama di layar yang sama, dan dua gaya berbeda untuk satu
       nama terbaca sebagai dua merek. Ukurannya saja yang naik sedikit, karena
       di sini ia berdiri sendiri alih-alih berdampingan dengan tombol header. */
    .nav-brand {
        display: block;
        padding: 6px 14px 18px;
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--text-primary);
    }

    /* ── ITEM: IKON DI SAMPING LABEL ──────────────────────────────────────
       `.bottom-item` di `01-base.css` adalah `flex-direction: column`. Satu
       baris membalikkannya; sisanya hanya jarak. */
    .bottom-item {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border-radius: 12px;
    }

    .bottom-label {
        font-size: 12px;
        letter-spacing: 0.06em;
    }

    /* Item aktif sebagai pill, seperti sidebar ppm. Warna tulisannya tetap
       `--accent-lime` dari `01-base.css` — yang ditambahkan hanya alasnya,
       supaya "halaman yang sedang dibuka" terbaca dari sekali lihat dan bukan
       dari membedakan dua warna teks. */
    .bottom-item--active {
        background: var(--bg-elevated);
    }

    /* ── LENCANA KE UJUNG KANAN BARIS ─────────────────────────────────────
       Pada rail ikon, lencana bergantung di sudut kanan-atas ikon. Pada baris
       selebar 224px, tempat itu berada di tengah-tengah ruang kosong.

       Dipusatkan tegak dengan `margin-top` negatif, BUKAN
       `transform: translateY(-50%)`: lencananya punya animasi kemunculan yang
       memakai `transform: scale()` dan tanpa `animation-fill-mode`. Transform
       dari aturan ini akan tertimpa selama 240 ms animasi itu lalu berlaku
       kembali sesudahnya — yang terlihat sebagai lencana yang melompat. Tinggi
       lencananya pasti 17px, jadi -8.5px tepat dan tak memakai transform sama
       sekali. */
    .bottom-badge {
        top: 50%;
        margin-top: -8.5px;
        left: auto;
        right: 12px;
        margin-left: 0;
    }
}

@media (min-width: 1440px) {
    :root {
        --lebar-kolom: 800px;
    }
}

/* ── HORMATI "KURANGI GERAK" ───────────────────────────────────────────────
   Hover pada rail memakai transisi warna. Kecil, tapi aturannya sama di
   seluruh berkas gaya ini: yang dimatikan adalah PERPINDAHANNYA, keadaan
   akhirnya tetap berbeda. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .bottom-item {
        transition: none;
    }
}


}