/*
 * Nexstadia Hub: portal publik (layouts.hub). Tema terang tetap.
 * Panel admin/owner memakai hub.css dan tidak memuat berkas ini.
 *
 * Merek: Navy #101D35, Electric Blue #246BFD, Blue Strong #1D4ED8 (teks/tombol biru, AA),
 * Cyan #36C5F0 (dekorasi saja), lime #D4F53C (selalu dengan teks navy, hemat).
 * Huruf: Plus Jakarta Sans (judul), Inter (isi), Barlow Condensed (angka besar dan badge).
 *
 * Mix and match referensi (Referensi-UI/redesign-hub-PROMPT.md), tema TERANG:
 * - Fishin: ilustrasi sketsa ukiran yang mengambang di tepi section (di sini
 *   benda olahraga, bukan ikan), garis kontur, doodle panah/bintang, judul per
 *   huruf, foto bertirai, kilau hover, galeri panel, langkah lingkaran, band CTA,
 *   tombol ke atas dengan cincin progres.
 * - Frolic: strip kategori di dasar hero, pencarian + chip saran, meta berikon.
 * - Fuzio: aksen lime, angka condensed, busur lime di foto bundar.
 * - Malic: penghitung carousel bulat. DYAT: kartu turnamen bersudut miring.
 * Gelap hanya aksen (band CTA biru, kartu navy).
 */
:root {
    --px-bg: #F6F8FB;
    --px-surface: #FFFFFF;
    --px-band: #E6EFF9;
    --px-deep: #0A1426;
    --px-deep-2: #111F3A;
    --px-tint: #E3EDF9;
    --px-ease-back: cubic-bezier(.34, 1.56, .64, 1);
    --px-ease-out: cubic-bezier(.16, 1, .3, 1);
    --px-navy: #101D35;
    --px-navy-2: #18294A;
    --px-blue: #246BFD;
    --px-blue-strong: #1D4ED8;
    --px-cyan: #36C5F0;
    --px-lime: #D4F53C;
    --px-lime-2: #C4E62A;
    --px-ink: #172033;
    --px-muted: #5B6478;
    --px-line: #DCE3EE;
    --px-soft: #F1F4F9;
    --px-success: #12805C;
    --px-danger: #C2322F;
    --px-warning: #9A6400;
    --px-r-sm: 12px;
    --px-r: 20px;
    --px-r-lg: 28px;
    --px-shadow: 0 1px 2px rgba(16, 29, 53, .04), 0 12px 32px -18px rgba(16, 29, 53, .28);
    --px-shadow-lg: 0 30px 60px -30px rgba(16, 29, 53, .45);
    --px-font-head: "Plus Jakarta Sans", system-ui, sans-serif;
    --px-font-body: "Inter", system-ui, sans-serif;
    --px-font-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
    --px-header-h: 76px;

    --bs-body-font-family: var(--px-font-body);
    --bs-body-color: var(--px-ink);
    --bs-body-bg: var(--px-bg);
    --bs-primary: var(--px-blue-strong);
    --bs-primary-rgb: 29, 78, 216;
    --bs-link-color: var(--px-blue-strong);
    --bs-link-color-rgb: 29, 78, 216;
    --bs-link-hover-color: var(--px-navy);
    --bs-border-color: var(--px-line);
    color-scheme: light;
}

/* ---------- Dasar ---------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--px-header-h) + 12px); }
body.px-body { background: var(--px-bg); color: var(--px-ink); font-family: var(--px-font-body); font-size: 1rem; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.px-body :is(h1, h2, h3, h4) { font-family: var(--px-font-head); color: var(--px-navy); letter-spacing: -.02em; }
.px-body a { color: var(--px-blue-strong); text-underline-offset: 3px; }
.px-body img { max-width: 100%; }
.px-body :focus-visible { outline: 3px solid var(--px-blue); outline-offset: 2px; border-radius: 6px; }
.px-body .container { --bs-gutter-x: 32px; max-width: 1240px; }
.px-num { font-family: var(--px-font-cond); font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.px-muted { color: var(--px-muted); }
.px-skip { position: absolute; left: 16px; top: -60px; z-index: 2000; padding: 10px 16px; border-radius: 999px; background: var(--px-navy); color: #fff !important; text-decoration: none; }
.px-skip:focus { top: 12px; }
.px-svg-icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: currentColor; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tombol ---------- */
.px-btn { --px-btn-bg: var(--px-navy); --px-btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 6px 8px 6px 22px; border-radius: 999px; border: 1.5px solid transparent; background: var(--px-btn-bg); color: var(--px-btn-fg) !important; font-family: var(--px-font-head); font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.px-btn:not(:has(.px-btn__arrow)) { padding-right: 22px; }
.px-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgba(16, 29, 53, .55); }
.px-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.px-btn__arrow { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--px-lime); color: var(--px-navy); font-size: .85rem; transition: transform .2s ease; }
.px-btn__arrow i.fa-arrow-right, .px-roundarrow i.fa-arrow-right { transform: rotate(-45deg); transition: transform .2s ease; }
.px-btn:hover .px-btn__arrow i.fa-arrow-right, a:hover .px-roundarrow i.fa-arrow-right { transform: rotate(0); }
.px-btn--dark { --px-btn-bg: var(--px-navy); --px-btn-fg: #fff; }
.px-btn--lime { --px-btn-bg: var(--px-lime); --px-btn-fg: var(--px-navy); }
.px-btn--lime .px-btn__arrow { background: var(--px-navy); color: var(--px-lime); }
.px-btn--ghost { --px-btn-bg: transparent; --px-btn-fg: var(--px-navy); border-color: var(--px-navy); }
.px-btn--ghost .px-btn__arrow { background: var(--px-navy); color: var(--px-lime); }
.px-btn--ghost:hover { --px-btn-bg: var(--px-navy); --px-btn-fg: #fff; }
.px-btn { position: relative; overflow: hidden; isolation: isolate; }
.px-btn > * { position: relative; z-index: 1; }
.px-ripple { position: absolute; z-index: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: currentColor; opacity: .18; pointer-events: none; animation: px-ripple .9s var(--px-ease-out) forwards; }
.px-btn--white { --px-btn-bg: #fff; --px-btn-fg: var(--px-navy); }
.px-btn--white .px-btn__arrow { background: var(--px-navy); color: var(--px-lime); }
.px-btn--outline-light { --px-btn-bg: transparent; --px-btn-fg: #fff; border-color: rgba(255, 255, 255, .85); }
.px-btn--outline-light .px-btn__arrow { background: #fff; color: var(--px-navy); }
.px-btn--outline-light:hover { --px-btn-bg: rgba(255, 255, 255, .12); }
.px-btn--sm { min-height: 44px; font-size: .88rem; padding-left: 18px; }
.px-btn--sm:not(:has(.px-btn__arrow)) { padding-right: 18px; }
.px-btn--sm .px-btn__arrow { width: 32px; height: 32px; }
.px-btn--lg { min-height: 54px; }
.px-btn--block { width: 100%; }
.px-link { font-weight: 600; color: var(--px-navy) !important; text-decoration: none; padding: 10px 6px; }
.px-link:hover { color: var(--px-blue-strong) !important; }
.px-iconbtn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--px-line); background: var(--px-surface); color: var(--px-navy) !important; text-decoration: none; }
.px-iconbtn:hover { border-color: var(--px-navy); }
.px-roundarrow { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--px-navy); color: var(--px-lime); transition: background .2s ease, color .2s ease; }

/* ---------- Pil, chip, judul ---------- */
.px-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--px-tint); border: 1px solid transparent; color: var(--px-navy); font-size: .82rem; font-weight: 600; line-height: 1.2; }
.px-band .px-pill:not(.px-pill--glass):not(.px-pill--dark) { background: #fff; }
.px-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--px-lime); box-shadow: 0 0 0 3px var(--px-navy); }
.px-pill--glass { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-shadow: 0 1px 2px rgba(0, 0, 0, .25); padding-left: 14px; }
.px-pill--dark { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.px-pill--dark .px-pill__dot { box-shadow: 0 0 0 3px rgba(212, 245, 60, .25); }
.px-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 16px; border-radius: 999px; background: var(--px-surface); border: 1px solid var(--px-line); color: var(--px-navy) !important; font-weight: 600; font-size: .88rem; text-decoration: none; transition: border-color .15s, background .15s; }
a.px-chip:hover { border-color: var(--px-navy); }
.px-chip.is-active { background: var(--px-navy); border-color: var(--px-navy); color: #fff !important; }
.px-chip i, .px-chip .px-svg-icon { color: var(--px-blue-strong); }
.px-chip.is-active i, .px-chip.is-active .px-svg-icon { color: var(--px-lime); }
.px-chip--sm { min-height: 0; padding: 4px 11px; font-size: .78rem; background: var(--px-soft); border-color: transparent; }
.px-chip--navy { background: var(--px-navy); color: #fff !important; }
.px-chip--more { background: transparent; border: 1px dashed var(--px-line); }
.px-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.px-eyebrow { font-family: var(--px-font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--px-muted); margin: 0 0 6px; }
.px-badge-lime { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--px-lime); color: var(--px-navy); font-family: var(--px-font-cond); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; }

.px-display { font-size: clamp(2.35rem, 5.2vw, 4.1rem); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; margin: 18px 0 16px; text-wrap: balance; }
.px-display--page { font-size: clamp(2rem, 4.2vw, 3.3rem); }
.px-title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; margin: 14px 0 0; text-wrap: balance; }
.px-title--light { color: #fff !important; }
.px-lead { font-size: clamp(1rem, 1.4vw, 1.12rem); color: var(--px-muted); max-width: 54ch; margin: 0 0 24px; }
/* Satu kata hero dengan garis bawah lime tebal (Fuzio). */
.px-mark { position: relative; white-space: nowrap; z-index: 0; }
.px-mark::after { content: ""; position: absolute; z-index: -1; left: -.06em; right: -.06em; bottom: .06em; height: .32em; border-radius: 4px; background: var(--px-lime); transform: skewX(-8deg); }

.px-sec { padding: clamp(56px, 8vw, 96px) 0; position: relative; }
.px-sec--tight { padding: 0 0 clamp(24px, 4vw, 40px); }
/* Dua section polos berurutan: jangan dobel jarak. */
.px-sec:not(.px-band) + .px-sec:not(.px-band):not(.px-sec--tight) { padding-top: clamp(16px, 3vw, 40px); }
.px-sec--first { padding-top: clamp(32px, 5vw, 56px); }
.px-band { background: var(--px-band); }
.px-head { margin-bottom: clamp(28px, 4vw, 44px); }
.px-head--center { text-align: center; }
.px-head--center .px-title { margin-inline: auto; max-width: 22ch; }
.px-sub { margin: 12px auto 0; max-width: 52ch; color: var(--px-muted); }
.px-head--center .px-sub { text-align: center; }
.px-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.px-head--split > p { max-width: 36ch; margin: 0; }
.px-head__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.px-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.px-note { margin: 22px 0 0; color: var(--px-muted); text-align: center; font-size: .93rem; }
.px-note i { color: var(--px-blue-strong); margin-right: 6px; }

/* ---------- Header (terang kaca, selalu menempel di atas) ---------- */
.px-header { position: sticky; top: 0; z-index: 1030; background: rgba(246, 248, 251, .82); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: transform .45s var(--px-ease-out), background .6s ease, box-shadow .6s ease, border-color .6s ease; }
.px-header.is-scrolled { background: rgba(255, 255, 255, .92); border-bottom-color: var(--px-line); box-shadow: 0 18px 40px -30px rgba(16, 29, 53, .35); }
.px-header__bar { display: flex; align-items: center; gap: 20px; min-height: var(--px-header-h); }
.px-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--px-font-head); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; color: var(--px-navy) !important; text-decoration: none; }
.px-logo img { transition: transform .6s var(--px-ease-back); }
/* Logo: versi putih (kaki N putih) hanya di atas latar gelap. */
.px-logo__mark--dark { display: none; }
.px-page-home .px-header:not(.is-scrolled) .px-logo__mark { display: none; }
.px-page-home .px-header:not(.is-scrolled) .px-logo__mark--dark { display: block; }
.px-logo:hover img { transform: rotate(-12deg) scale(1.06); }
.px-nav { margin-left: auto; gap: 4px; }
.px-nav a { position: relative; padding: 10px 14px; color: #3B4660; font-weight: 600; font-size: .93rem; text-decoration: none; white-space: nowrap; transition: color .2s; }
.px-nav a::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--px-lime); box-shadow: 0 0 0 2px var(--px-navy); transform: scale(0); transition: transform .3s var(--px-ease-back); }
.px-nav a:hover { color: var(--px-navy); }
.px-nav a:hover::after { transform: scale(.6); }
.px-nav a.is-active { color: var(--px-navy); }
.px-nav a.is-active::after { transform: scale(1); }
.px-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.px-nav + .px-header__actions { margin-left: 18px; }
.px-account { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1.5px solid var(--px-line); background: var(--px-surface); color: var(--px-navy); font-weight: 600; font-size: .9rem; }
.px-account:hover { border-color: var(--px-navy); }
.px-account__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--px-lime); color: var(--px-navy); font-family: var(--px-font-cond); font-weight: 700; font-size: 1.05rem; }
.px-account__name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-account .fa-chevron-down { font-size: .7rem; color: var(--px-muted); }
.px-dropdown { border-radius: 16px; border-color: var(--px-line); box-shadow: var(--px-shadow); padding: 8px; }
.px-dropdown .dropdown-item { border-radius: 10px; padding: 9px 12px; font-weight: 500; }
.px-dropdown .dropdown-item i { color: var(--px-muted); margin-right: 6px; }

.px-offcanvas { background: var(--px-bg); border-left: 0; width: min(380px, 100%) !important; }
.px-offcanvas .offcanvas-header { padding: 18px 20px; border-bottom: 1px solid var(--px-line); }
.px-offnav { display: grid; gap: 6px; }
.px-offnav a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 12px 18px; border-radius: 16px; background: var(--px-surface); border: 1px solid var(--px-line); color: var(--px-navy); font-family: var(--px-font-head); font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.px-offnav a i { transform: rotate(-45deg); color: var(--px-muted); }
.px-offnav a.is-active { background: var(--px-navy); color: #fff; border-color: var(--px-navy); }
.px-offnav a.is-active i { color: var(--px-lime); }
.px-offnav__account { display: grid; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--px-line); }
.px-offnav__account > a:not(.px-btn), .px-offnav__account button { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 8px 4px; background: none; border: 0; color: var(--px-navy); font-weight: 600; text-decoration: none; }

/* ---------- Footer (terang, garis kontur + bintang mengambang di BELAKANG isi) ---------- */
.px-footer { position: relative; overflow: hidden; isolation: isolate; background: #fff url("images/portal/contour-blue.svg") right bottom / min(560px, 70vw) no-repeat; color: var(--px-muted); padding: 72px 0 28px; border-top: 1px solid var(--px-line); }
.px-footer > .container { position: relative; z-index: 1; }
.px-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.px-footer .px-logo { color: var(--px-navy) !important; }
.px-footer__about p { margin: 16px 0 0; max-width: 34ch; }
.px-footer__title { font-family: var(--px-font-head) !important; font-size: 1.08rem !important; font-weight: 800; letter-spacing: -.01em; color: var(--px-navy) !important; margin: 4px 0 16px; }
.px-footer a:not(.px-logo) { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; color: var(--px-muted); text-decoration: none; font-size: .95rem; transition: color .2s, transform .25s var(--px-ease-out); }
.px-footer__grid > div > a:not(.px-logo) { display: flex; width: fit-content; }
.px-footer a:not(.px-logo):hover { color: var(--px-blue-strong); transform: translateX(4px); }
.px-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--px-line); font-size: .88rem; }
.px-footer .px-deco { z-index: 0; }
.px-footer__burst { left: 3%; bottom: 18px; width: 54px; height: 54px; color: var(--px-tint); }
.px-footer__spark { left: 9%; bottom: 76px; width: 26px; height: 26px; color: #BFD3F2; }

/* ---------- Hero beranda (terang, kontur, foto bertirai, ilustrasi mengambang) ---------- */
.px-hero { position: relative; isolation: isolate; padding: clamp(36px, 5vw, 72px) 0 0; overflow: hidden; background: var(--px-bg); }
.px-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(760px 420px at 90% 6%, rgba(36, 107, 253, .12), transparent 70%), radial-gradient(560px 360px at 2% 100%, rgba(212, 245, 60, .22), transparent 70%); pointer-events: none; }
.px-hero::after { content: ""; position: absolute; z-index: -1; right: 0; top: 0; width: min(780px, 72vw); height: 100%; background: url("images/portal/contour-blue.svg") right top / cover no-repeat; transform: scaleY(-1); pointer-events: none; }
.px-hero > .container { position: relative; z-index: 1; }
.px-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.px-hero__copy { min-width: 0; }

/* Pencarian: baris 1 kata kunci, baris 2 kota + cabor + tombol. */
.px-search { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0; align-items: stretch; padding: 8px; border-radius: 24px; background: var(--px-surface); box-shadow: var(--px-shadow-lg); border: 1px solid var(--px-line); }
.px-search__field { display: flex; flex-direction: column; justify-content: center; padding: 8px 16px; border-right: 1px solid var(--px-line); min-width: 0; transition: background .2s; }
.px-search__field--wide { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--px-line); padding-block: 12px; }
.px-search__field label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--px-muted); }
.px-search__field label i { color: var(--px-blue-strong); margin-right: 4px; }
.px-search__field :is(input, select) { width: 100%; min-height: 32px; border: 0; padding: 0; background: transparent; color: var(--px-navy); font-weight: 600; font-size: 1rem; outline: none; text-overflow: ellipsis; }
.px-search__field :is(input, select):focus-visible { outline: 0; }
.px-search__field:focus-within { background: var(--px-soft); border-radius: 16px; }
.px-search__field:nth-child(3) { border-right: 0; }
.px-search__go { align-self: center; margin: 8px 0 0 6px; min-height: 56px; }

.px-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.px-suggest__label { font-family: var(--px-font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--px-navy); margin-right: 4px; display: inline-flex; align-items: center; gap: 8px; }
.px-suggest__label::after { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.px-hero__media { position: relative; min-height: 560px; }
.px-hero__photo { position: absolute; border-radius: var(--px-r-lg); box-shadow: 0 40px 70px -35px rgba(16, 29, 53, .55); }
.px-hero__photo--main { top: 0; right: 0; width: 82%; height: 74%; padding: 20px; display: flex; align-items: flex-start; justify-content: flex-end; box-shadow: inset 0 120px 90px -60px rgba(10, 20, 38, .45), 0 40px 70px -35px rgba(16, 29, 53, .55); }
.px-hero__photo--main .px-pill { position: relative; z-index: 1; }
.px-hero__photo--sub { left: 0; bottom: 0; width: 46%; height: 42%; outline: 6px solid var(--px-bg); z-index: 1; }
.px-hero__round { position: absolute; z-index: 2; right: 4%; bottom: 3%; width: 120px; height: 120px; border-radius: 50%; background: var(--px-navy) var(--px-photo) center / cover; border: 6px solid var(--px-bg); box-shadow: var(--px-shadow); }
/* Busur lime berputar pelan di tepi foto bundar. */
.px-hero__round::after { content: ""; position: absolute; inset: -16px; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--px-lime); border-right-color: var(--px-lime); animation: px-spin 9s linear infinite; }
.px-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 18px; background: var(--px-surface); box-shadow: var(--px-shadow-lg); border: 1px solid var(--px-line); }
.px-float strong { display: block; font-size: 2rem; line-height: 1; color: var(--px-navy); }
.px-float span { font-size: .82rem; color: var(--px-muted); font-weight: 500; }
.px-float--a { left: 4%; top: 14%; flex-direction: column; align-items: flex-start; gap: 2px; }
.px-float--a strong { font-size: 2.6rem; }
.px-float--b { left: 46%; bottom: 28%; }
.px-float__sep { width: 1px; align-self: stretch; background: var(--px-line); }
.px-float__icon { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--px-soft); color: var(--px-blue-strong); }
.px-float__icon--lime { background: var(--px-lime); color: var(--px-navy); }

.px-doodle { position: absolute; color: var(--px-navy); pointer-events: none; }
.px-hero .px-doodle { z-index: 2; }
.px-doodle--arrow { width: 110px; height: 82px; left: -4%; top: 48%; rotate: -12deg; opacity: .8; }
.px-doodle--spark { width: 34px; height: 34px; left: 18%; top: 3%; color: var(--px-blue); }
.px-doodle--burst { width: 46px; height: 46px; left: 10%; top: -2%; color: #BCD0EE !important; }

/* Strip kategori di dasar hero (Frolic). */
.px-strip { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--px-line); }
.px-strip a { position: relative; display: block; padding: 20px 20px 24px; border-left: 1px solid var(--px-line); text-decoration: none; color: var(--px-navy); overflow: hidden; }
.px-strip a::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--px-lime); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--px-ease-out); }
.px-strip a:first-child { border-left: 0; padding-left: 0; }
.px-strip a:hover::before { transform: scaleX(1); }
.px-strip small { display: block; font-family: var(--px-font-cond); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--px-muted); font-size: .82rem; }
.px-strip span { font-family: var(--px-font-head); font-weight: 700; font-size: 1.05rem; transition: color .2s; }
.px-strip a:hover span { color: var(--px-blue-strong); }
/* Panah bulat: penanda bahwa item strip bisa diklik. */
.px-strip a { padding-right: 64px; }
.px-strip__go { position: absolute; right: 18px; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--px-line); color: var(--px-navy); font-size: .8rem; font-style: normal; transition: background .25s, border-color .25s, color .25s, transform .4s var(--px-ease-back); }
.px-strip__go i { transform: rotate(-45deg); transition: transform .3s; }
.px-strip a:hover .px-strip__go { background: var(--px-lime); border-color: var(--px-lime); color: var(--px-navy); transform: translateX(3px); }
.px-strip a:hover .px-strip__go i { transform: none; }

/* ---------- Foto: tirai saat masuk layar + kilau saat hover (Fishin "reveal" & "image-anime") ---------- */
.px-photo { overflow: hidden; isolation: isolate; background: var(--px-navy-2); }
.px-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--px-photo) center / cover no-repeat; transition: transform 1.6s var(--px-ease-out); }
.px-js .px-photo[data-curtain] { clip-path: inset(0 100% 0 0 round var(--px-r-lg)); transition: clip-path 1.4s cubic-bezier(.77, 0, .18, 1); }
.px-js .px-photo[data-curtain]::before { transform: translateX(-30%) scale(1.3); }
.px-js .px-photo[data-curtain].is-in { clip-path: inset(0 0 0 0 round var(--px-r-lg)); }
.px-js .px-photo[data-curtain].is-in::before { transform: none; }
.px-photo:hover::before { transform: scale(1.05); }
.px-shine::after, .px-shinewrap .px-venue__media::after { content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 220%; height: 0; background: rgba(255, 255, 255, .28); transform: translate(-50%, -50%) rotate(-45deg); pointer-events: none; }
.px-shine:hover::after, .px-shinewrap:hover .px-venue__media::after { height: 260%; background: transparent; transition: height .6s linear, background .6s linear; }

/* ---------- Dekorasi mengambang (doodle sudut section) ---------- */
.px-deco { position: absolute; pointer-events: none; color: #B9CDEB; z-index: 0; }
.px-sec--deco { overflow: hidden; isolation: isolate; }
.px-sec--deco > .container { position: relative; z-index: 1; }
.px-deco--tl { left: 2%; top: 40px; width: 110px; height: 110px; rotate: -18deg; }
.px-deco--tr { right: 4%; top: 64px; width: 54px; height: 54px; color: #CFE0F5; }
.px-deco--bl { left: 3%; bottom: 40px; width: 96px; height: 96px; color: #C3D5F0; }
.px-deco--tr2 { right: 5%; top: 56px; width: 130px; height: 66px; color: var(--px-blue); opacity: .55; }

/* ---------- Ilustrasi sketsa olahraga (pengganti ikan Fishin) ----------
   Besar, sebagian keluar dari tepi section, warna senada latar, di BELAKANG isi.
   SVG garis hitam dipakai sebagai mask, warna dari `color`. Gerak: muncul
   membesar saat masuk layar, lalu bob + ayun (px-swim) + parallax dari portal.js. */
.px-ill { position: absolute; z-index: 0; display: block; width: var(--w, 220px); height: auto; pointer-events: none; color: var(--px-ill-c, #A9C1E7); background: currentColor; -webkit-mask: var(--ill) center / contain no-repeat; mask: var(--ill) center / contain no-repeat; opacity: var(--o, 1); }
.px-ill--shuttle { aspect-ratio: 520 / 300; }
.px-ill--ball { aspect-ratio: 380 / 300; }
.px-ill--racket { aspect-ratio: 300 / 530; }
.px-ill--basket { aspect-ratio: 1; }
.px-ill--whistle { aspect-ratio: 380 / 300; }
.px-ill--trophy { aspect-ratio: 320 / 400; }
.px-ill--tennis { aspect-ratio: 320 / 220; }
.px-ill--billiard { aspect-ratio: 440 / 380; }
.px-band { --px-ill-c: #9DB6E2; }
.px-cta { --px-ill-c: rgba(255, 255, 255, .3); }
.px-footer { --px-ill-c: #CFDCF1; }
.px-sec--deco > .container, .px-pagehero > .container, .px-cta > .container { position: relative; z-index: 1; }
/* Posisi per section (desktop). */
.px-ill--hero-a { --w: clamp(220px, 23vw, 340px); right: -2.5%; top: -6px; rotate: -8deg; }
.px-ill--hero-b { --w: clamp(150px, 14vw, 200px); left: -104px; bottom: 120px; rotate: 10deg; }
.px-ill--gal-a { --w: clamp(160px, 17vw, 250px); left: -74px; top: 26px; rotate: -14deg; }
.px-ill--gal-b { --w: clamp(150px, 15vw, 230px); right: 2%; top: 36px; rotate: 10deg; }
.px-ill--tour { --w: clamp(120px, 12vw, 180px); left: -36px; bottom: 6%; rotate: -12deg; }
.px-ill--venue-a { --w: clamp(110px, 11vw, 170px); right: 2.5%; top: 34px; rotate: 30deg; }
.px-ill--venue-b { --w: clamp(150px, 15vw, 230px); right: -40px; bottom: 30px; rotate: -10deg; }
.px-ill--band-a { --w: clamp(200px, 21vw, 310px); left: -64px; top: -40px; rotate: 10deg; }
.px-ill--band-b { --w: clamp(200px, 21vw, 310px); right: -54px; bottom: 30px; rotate: 172deg; }
.px-ill--cta-a { --w: clamp(130px, 13vw, 190px); right: 31%; top: -56px; rotate: 14deg; }
.px-ill--cta-b { --w: clamp(170px, 17vw, 250px); left: -64px; bottom: -84px; }
.px-ill--foot { --w: clamp(100px, 9vw, 130px); right: 4%; top: 28px; rotate: 24deg; }
.px-ill--ph { --w: clamp(170px, 19vw, 280px); right: -40px; top: 18px; rotate: -10deg; }
/* Halaman yang punya art di kanan: ilustrasi masuk dari pojok kanan bawah, di bawah art. */
.px-ill--ph-left { --w: clamp(150px, 15vw, 230px); right: -56px; bottom: -64px; rotate: -12deg; }
.px-ill--ph.px-ill--racket { --w: clamp(110px, 11vw, 160px); right: 3%; top: 10px; rotate: 28deg; }

/* ---------- Ubin cabor ---------- */
.px-sports { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 14px; }
.px-sport { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 230px; padding: 18px; border-radius: var(--px-r); overflow: hidden; color: #fff !important; text-decoration: none; background: var(--px-navy) var(--px-photo) center / cover no-repeat; isolation: isolate; }
.px-sport::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 29, 53, .1) 20%, rgba(16, 29, 53, .82)); transition: background .3s; }
.px-sport--plain { background: radial-gradient(circle at 80% 10%, rgba(54, 197, 240, .45), transparent 55%), linear-gradient(140deg, var(--px-blue-strong), var(--px-navy)); }
.px-sport--plain::before { background: none; }
.px-sport__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--px-navy); font-size: 1.3rem; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); }
.px-sport__name { font-family: var(--px-font-cond); font-weight: 700; font-size: 1.85rem; line-height: 1; letter-spacing: .02em; text-transform: uppercase; padding-right: 50px; text-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.px-sport .px-roundarrow { position: absolute; right: 16px; bottom: 16px; background: var(--px-lime); color: var(--px-navy); }
.px-sport:hover::before { background: linear-gradient(180deg, rgba(29, 78, 216, .2) 10%, rgba(16, 29, 53, .9)); }

/* ---------- Galeri cabor: panel vertikal yang melebar (Fishin) ---------- */
.px-gallery { display: flex; gap: 14px; height: clamp(320px, 32vw, 410px); }
.px-gpanel { position: relative; flex: 0 0 84px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 18px 0 22px; border-radius: var(--px-r); background: var(--px-surface); border: 1px solid var(--px-line); color: var(--px-navy) !important; text-decoration: none; overflow: hidden; isolation: isolate; transition: flex-grow .7s var(--px-ease-out), flex-basis .7s var(--px-ease-out), border-color .3s, box-shadow .3s; }
.px-gpanel::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--px-navy) var(--px-photo) center / cover no-repeat; opacity: 0; transform: scale(1.15); transition: opacity .6s ease, transform 1.2s var(--px-ease-out); }
.px-gpanel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(10, 20, 38, .85)); opacity: 0; transition: opacity .6s ease; }
.px-gpanel--plain::before { background: radial-gradient(circle at 80% 10%, rgba(54, 197, 240, .45), transparent 55%), linear-gradient(140deg, var(--px-blue-strong), var(--px-navy)); }
.px-gpanel__icon { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--px-tint); color: var(--px-blue-strong); font-size: 1.1rem; transition: background .4s, color .4s; }
.px-gpanel__label { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--px-font-head); font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; white-space: nowrap; transition: opacity .3s; }
.px-gpanel__arrow { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--px-navy); color: var(--px-lime); transition: background .3s, color .3s; }
.px-gpanel__arrow i { transform: rotate(-45deg); transition: transform .3s; }
.px-gpanel:hover { border-color: var(--px-navy); }
.px-gpanel.is-open { flex: 1 1 auto; align-items: flex-start; padding: 22px 24px 24px; border-color: transparent; box-shadow: var(--px-shadow-lg); color: #fff !important; }
.px-gpanel.is-open::before { opacity: 1; transform: none; }
.px-gpanel.is-open::after { opacity: 1; }
.px-gpanel.is-open .px-gpanel__icon { background: #fff; color: var(--px-navy); }
.px-gpanel.is-open .px-gpanel__label { writing-mode: horizontal-tb; transform: none; font-size: clamp(1.6rem, 3vw, 2.4rem); padding-right: 56px; animation: px-fadeup .6s var(--px-ease-out); }
.px-gpanel.is-open .px-gpanel__arrow { position: absolute; right: 22px; bottom: 22px; background: var(--px-lime); color: var(--px-navy); }
.px-gpanel.is-open:hover .px-gpanel__arrow i { transform: none; }

/* ---------- Pengumuman ---------- */
.px-announce { display: grid; gap: 12px; margin-bottom: 28px; }
.px-promo { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 20px 24px; border-radius: var(--px-r); background: linear-gradient(115deg, var(--px-navy) 0%, var(--px-navy-2) 60%, var(--px-blue-strong) 140%); color: #fff; }
.px-promo::after { content: ""; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 22px solid rgba(212, 245, 60, .14); }
.px-promo__icon { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--px-lime); color: var(--px-navy); font-size: 1.2rem; }
.px-promo__text { flex: 1 1 280px; min-width: 0; position: relative; z-index: 1; }
.px-promo__tag { font-family: var(--px-font-cond); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .8rem; color: var(--px-lime); }
.px-promo strong { display: block; font-family: var(--px-font-head); font-size: 1.15rem; }
.px-promo p { margin: 2px 0 0; color: #C9D6EE; font-size: .93rem; }
.px-promo .px-btn { position: relative; z-index: 1; }

/* ---------- Carousel + penghitung (Malic) ---------- */
.px-counter { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--px-surface); border: 1px solid var(--px-line); }
.px-counter__btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--px-soft); color: var(--px-navy); display: grid; place-items: center; transition: background .15s; }
.px-counter__btn:hover { background: var(--px-navy); color: var(--px-lime); }
.px-counter__num { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--px-navy); font-family: var(--px-font-cond); font-weight: 700; font-size: 1.15rem; color: var(--px-muted); }
.px-counter__num b { color: var(--px-navy); }
.px-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(360px, 86%), 1fr); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; margin: -4px -4px 0; scrollbar-width: thin; scrollbar-color: var(--px-line) transparent; }
.px-track__item { scroll-snap-align: start; min-width: 0; }

/* ---------- Kartu turnamen (energi DYAT, versi terang) ---------- */
.px-tour { height: 100%; display: flex; flex-direction: column; border-radius: var(--px-r); background: var(--px-surface); border: 1px solid var(--px-line); overflow: hidden; box-shadow: var(--px-shadow); transition: transform .25s ease, box-shadow .25s ease; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.px-tour:hover { transform: translateY(-4px); box-shadow: var(--px-shadow-lg); }
.px-tour--open { border-color: var(--px-navy); box-shadow: 0 0 0 2px var(--px-lime), var(--px-shadow); }
.px-tour__media { position: relative; height: 170px; background: var(--px-navy) var(--px-photo) center / cover; display: flex; justify-content: space-between; align-items: flex-start; padding: 14px; }
.px-tour__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 29, 53, .15), rgba(16, 29, 53, .65)); }
.px-tour__status, .px-tour__sport { position: relative; z-index: 1; font-family: var(--px-font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; padding: 5px 12px; border-radius: 6px; }
.px-tour__status { background: #fff; color: var(--px-navy); transform: skewX(-8deg); }
.px-tour__status.is-open { background: var(--px-lime); }
.px-tour__status.is-live { background: var(--px-blue-strong); color: #fff; }
.px-tour__status.is-live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #fff; margin-right: 6px; vertical-align: 2px; animation: px-pulse 1.4s infinite; }
.px-tour__sport { position: absolute; left: 14px; bottom: 12px; padding: 0; color: #fff; font-size: 1.05rem; }
.px-tour__body { flex: 1; display: flex; flex-direction: column; padding: 18px 20px 20px; }
.px-tour__body h3 { font-size: 1.22rem; font-weight: 800; margin: 10px 0 12px; line-height: 1.25; }
.px-meta { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.px-meta li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--px-ink); }
.px-meta i { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--px-soft); color: var(--px-blue-strong); font-size: .8rem; }
.px-meta small { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--px-muted); }
.px-tour__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--px-line); }
.px-tour__prize small { display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--px-muted); }
.px-tour__prize small i { color: var(--px-warning); }
.px-tour__prize b { font-size: 1.9rem; line-height: 1; color: var(--px-navy); }
.px-tour__prize span { font-weight: 600; }
.px-tours { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 18px; }

/* ---------- Kartu venue ---------- */
.px-venues { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.px-venue { display: flex; flex-direction: column; border-radius: var(--px-r-lg); background: var(--px-surface); border: 1px solid var(--px-line); padding: 10px; color: var(--px-ink) !important; text-decoration: none; box-shadow: var(--px-shadow); transition: transform .25s ease, box-shadow .25s ease; }
.px-venue:hover { transform: translateY(-4px); box-shadow: var(--px-shadow-lg); }
.px-venue__media { position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--px-r-lg) - 8px); overflow: hidden; background: linear-gradient(140deg, var(--px-blue-strong), var(--px-navy)); }
.px-venue__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.px-venue:hover .px-venue__media img { transform: scale(1.04); }
.px-venue__ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .85); font-size: 3rem; }
.px-venue__ph .px-svg-icon { width: 64px; height: 64px; }
.px-venue__city { position: absolute; left: 12px; top: 12px; background: rgba(16, 29, 53, .45); }
.px-venue__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 14px 10px 6px; }
.px-venue__body h3 { font-size: 1.2rem; font-weight: 800; margin: 0; }
.px-venue__addr { margin: -4px 0 0; color: var(--px-muted); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.px-venue__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--px-line); }
.px-venue__price { color: var(--px-muted); font-size: .85rem; }
.px-venue__price b { font-family: var(--px-font-cond); font-size: 1.6rem; color: var(--px-navy); margin: 0 2px; }
.px-venue:hover .px-roundarrow { background: var(--px-lime); color: var(--px-navy); }

/* ---------- Langkah: lingkaran bertumpuk (Fishin "service circles") ---------- */
.px-steps { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.px-step { position: relative; flex: 0 0 calc((100% + 120px) / 4); aspect-ratio: 1; margin-left: -40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; border-radius: 50%; background: rgba(255, 255, 255, .55); border: 1px solid #C8D8EF; transition: background .45s, border-color .45s, transform .6s var(--px-ease-back), box-shadow .45s; }
.px-step:first-child { margin-left: 0; }
.px-step:hover { z-index: 2; background: var(--px-navy); border-color: var(--px-navy); transform: translateY(-8px) scale(1.03); box-shadow: 0 40px 60px -30px rgba(16, 29, 53, .6); }
.px-step__num { position: absolute; top: 12%; left: 50%; translate: -50% 0; font-family: var(--px-font-cond); font-weight: 700; font-size: .95rem; letter-spacing: .1em; color: var(--px-blue-strong); transition: color .4s; }
.px-step__icon { width: 62px; height: 62px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--px-blue-strong); font-size: 1.35rem; margin-bottom: 14px; box-shadow: 0 10px 24px -14px rgba(16, 29, 53, .5); transition: background .4s, color .4s, transform .6s var(--px-ease-back); }
.px-step:hover .px-step__icon { background: var(--px-lime); color: var(--px-navy); transform: rotate(-10deg) scale(1.08); }
.px-step h3 { font-size: 1.12rem; font-weight: 800; margin: 0 0 6px; transition: color .4s; }
.px-step p { margin: 0; color: var(--px-muted); font-size: .9rem; max-width: 24ch; transition: color .4s; }
.px-step:hover h3 { color: #fff; }
.px-step:hover p { color: #C9D6EE; }
.px-step:hover .px-step__num { color: var(--px-lime); }

/* ---------- Band pemilik venue ---------- */
.px-owner { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; padding: clamp(28px, 5vw, 56px); border-radius: var(--px-r-lg); background: var(--px-navy); color: #C9D6EE; isolation: isolate; }
.px-owner__court { position: absolute; z-index: -1; left: -40px; bottom: -50px; width: 520px; height: 312px; color: rgba(255, 255, 255, .07); }
.px-owner__copy { align-self: center; }
.px-owner__copy p { margin: 14px 0 26px; max-width: 46ch; }
.px-owner__media { min-height: 300px; border-radius: var(--px-r); background: var(--px-navy-2) var(--px-photo) center / cover; box-shadow: 0 0 0 6px rgba(212, 245, 60, .9); }

/* ---------- Band CTA penuh (Fishin "Join Our Community") ---------- */
.px-cta { position: relative; overflow: hidden; isolation: isolate; padding: clamp(56px, 7vw, 88px) 0; background: var(--px-blue-strong) url("images/portal/contour-light.svg") right center / auto 160% no-repeat; color: #DCE6FF; }
.px-cta__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr auto; gap: 24px 48px; align-items: center; }
.px-cta p { margin: 14px 0 0; max-width: 52ch; }
.px-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.px-cta .px-deco { color: rgba(255, 255, 255, .28); }
.px-cta__burst { left: 2%; top: 18px; width: 50px; height: 50px; }

/* ---------- Kosong, pemberitahuan ---------- */
.px-empty { text-align: center; padding: clamp(40px, 7vw, 72px) 20px; border-radius: var(--px-r-lg); background: var(--px-surface); border: 1.5px dashed var(--px-line); }
.px-empty--sm { padding: 40px 20px; }
.px-empty__art { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 140px; height: 96px; margin-bottom: 14px; color: var(--px-blue-strong); font-size: 2.6rem; }
.px-empty__art svg { width: 64px; height: 56px; color: var(--px-navy); }
.px-empty__art svg + svg { width: 70px; color: var(--px-blue); transform: rotate(-10deg); }
.px-empty h3 { font-size: 1.35rem; font-weight: 800; margin-bottom: 6px; }
.px-empty p { color: var(--px-muted); max-width: 44ch; margin: 0 auto 22px; }
.px-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; border-radius: 18px; background: #FFF8E6; border: 1px solid #F1D48A; margin-bottom: 18px; }
.px-notice__icon { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--px-warning); }
.px-notice > div { flex: 1 1 240px; }
.px-notice strong { color: var(--px-navy); }
.px-notice p { margin: 2px 0 0; color: var(--px-ink); font-size: .93rem; }
.px-notice--info { background: #EEF4FF; border-color: #C9D8FB; margin: 16px 0 0; }
.px-notice--info .px-notice__icon { color: var(--px-blue-strong); }
.px-notice--info p { margin: 0; flex: 1; }
.px-flashwrap { padding-top: 18px; }
.nx-flash { display: flex; align-items: flex-start; gap: 10px; border-radius: 16px; border-width: 1px; font-weight: 500; }
.nx-flash i { margin-top: 4px; }

/* ---------- Pagination Bootstrap ---------- */
.px-pager { margin-top: 32px; display: flex; justify-content: center; }
.px-pager nav { width: 100%; }
.px-pager .pagination { --bs-pagination-border-color: var(--px-line); --bs-pagination-color: var(--px-navy); --bs-pagination-hover-color: var(--px-navy); --bs-pagination-active-bg: var(--px-navy); --bs-pagination-active-border-color: var(--px-navy); --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(36, 107, 253, .3); gap: 6px; justify-content: center; flex-wrap: wrap; margin: 0; }
.px-pager .page-link { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50% !important; font-weight: 600; }
.px-pager .d-sm-flex > div:first-child p { color: var(--px-muted); font-size: .9rem; }
.px-pager .d-sm-flex { gap: 12px; flex-wrap: wrap; }

/* ---------- Hero halaman dalam (terang, kontur + ilustrasi seperti breadcrumb Fishin) ---------- */
.px-pagehero { position: relative; isolation: isolate; padding: clamp(40px, 6vw, 80px) 0 clamp(36px, 5vw, 56px); overflow: hidden; background: linear-gradient(180deg, #E8F0FB, var(--px-bg)); margin-bottom: clamp(28px, 4vw, 44px); }
.px-pagehero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 320px at 92% 0%, rgba(36, 107, 253, .12), transparent 70%), radial-gradient(500px 280px at 0% 100%, rgba(212, 245, 60, .2), transparent 70%); pointer-events: none; }
.px-pagehero::after { content: ""; position: absolute; z-index: -1; right: 0; top: 0; width: min(640px, 70vw); height: 100%; background: url("images/portal/contour-blue.svg") right top / cover no-repeat; transform: scaleY(-1); pointer-events: none; }
.px-pagehero .px-pill:not(.px-pill--glass) { background: #fff; }
.px-pagehero--slim { padding-bottom: clamp(32px, 4vw, 48px); }
.px-pagehero__grid { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.px-pagehero__art { position: relative; width: 220px; height: 180px; }
.px-pagehero__trophy { position: absolute; left: 40px; top: 20px; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; background: var(--px-lime); color: var(--px-navy); font-size: 3.4rem; box-shadow: 0 0 0 10px #fff, 0 30px 60px -30px rgba(16, 29, 53, .5); }
.px-pagehero__trophy--blue { background: var(--px-blue-strong); color: var(--px-lime); }
.px-doodle--loop { width: 120px; height: 60px; right: -10px; bottom: -6px; color: var(--px-blue) !important; }
.px-doodle--spark2 { width: 30px; height: 30px; left: 0; top: 0; color: var(--px-blue-strong) !important; }
.px-doodle--ball { width: 78px; height: 78px; right: 0; bottom: 0; rotate: 14deg; }
.px-pagebody { padding-bottom: clamp(56px, 8vw, 96px); }
.px-pagehero + .px-main .px-sec--first { padding-top: 0; }
.px-crumb { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; font-size: .88rem; }
.px-crumb { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; font-size: .88rem; }
.px-crumb a { color: var(--px-muted); text-decoration: none; }
.px-crumb a:hover { color: var(--px-navy); text-decoration: underline; }
.px-crumb > *:not(:last-child)::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-top: 1.5px solid var(--px-muted); border-right: 1.5px solid var(--px-muted); transform: rotate(45deg); vertical-align: 1px; }
.px-crumb span { color: var(--px-navy); font-weight: 600; }

/* ---------- Filter bar ---------- */
.px-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 14px; border-radius: 22px; background: var(--px-surface); border: 1px solid var(--px-line); box-shadow: var(--px-shadow); margin-bottom: 28px; }
.px-filter__field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; min-width: 0; }
.px-filter__field--wide { flex-basis: 220px; }
.px-filter__field label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--px-muted); padding-left: 4px; }
.px-filter__field :is(input, select) { min-height: 46px; width: 100%; border-radius: 14px; border: 1.5px solid var(--px-line); background: var(--px-bg); padding: 8px 14px; color: var(--px-navy); font-weight: 600; }
.px-filter__field :is(input, select):focus { outline: 0; border-color: var(--px-blue); box-shadow: 0 0 0 3px rgba(36, 107, 253, .2); }
.px-filter__go { flex: 0 0 auto; }
.px-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 6px; font-weight: 600; color: var(--px-navy); cursor: pointer; }
.px-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.px-toggle__ui { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--px-line); transition: background .2s; }
.px-toggle__ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.px-toggle input:checked + .px-toggle__ui { background: var(--px-navy); }
.px-toggle input:checked + .px-toggle__ui::after { transform: translateX(20px); background: var(--px-lime); }
.px-toggle input:focus-visible + .px-toggle__ui { outline: 3px solid var(--px-blue); outline-offset: 2px; }

/* ---------- Detail venue ---------- */
.px-vhead { padding: clamp(20px, 3vw, 36px) 0 0; }
.px-vhead__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.px-vhead__media { position: relative; aspect-ratio: 16 / 11; border-radius: var(--px-r-lg); background: linear-gradient(140deg, var(--px-blue-strong), var(--px-navy)) ; background-image: var(--px-photo, linear-gradient(140deg, var(--px-blue-strong), var(--px-navy))); background-size: cover; background-position: center; box-shadow: var(--px-shadow-lg); overflow: hidden; }
.px-vhead__media .px-pill { position: absolute; left: 16px; top: 16px; background: rgba(16, 29, 53, .45); }
.px-vhead__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-vhead__info .px-display { margin: 14px 0 14px; }
.px-vhead__facts { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; color: var(--px-ink); }
.px-vhead__facts i { width: 22px; color: var(--px-blue-strong); }
.px-vhead__facts b { font-family: var(--px-font-cond); font-size: 1.25rem; color: var(--px-navy); }

.px-days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 14px; margin: 0 -4px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--px-line) transparent; }
.px-day { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; min-height: 92px; border-radius: 18px; background: var(--px-surface); border: 1.5px solid var(--px-line); color: var(--px-navy) !important; text-decoration: none; transition: border-color .15s, transform .15s; }
.px-day:hover { border-color: var(--px-navy); transform: translateY(-2px); }
.px-day small { font-size: .74rem; color: var(--px-muted); font-weight: 600; text-transform: capitalize; }
.px-day b { font-size: 1.9rem; line-height: 1.05; }
.px-day.is-active { background: var(--px-navy); border-color: var(--px-navy); color: #fff !important; }
.px-day.is-active small { color: #C9D6EE; }
.px-day.is-active b { color: var(--px-lime); }
.px-day--pick { position: relative; width: 108px; cursor: pointer; border-style: dashed; }
.px-day--pick label { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; color: var(--px-blue-strong); }
.px-day--pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.px-dateline { margin: 6px 0 20px; font-weight: 600; color: var(--px-navy); }
.px-dateline i { color: var(--px-blue-strong); margin-right: 6px; }

.px-schedule { display: grid; gap: 14px; }
.px-schedule__outlet { font-size: 1.15rem; font-weight: 800; margin: 14px 0 0; }
.px-schedule__outlet i { color: var(--px-blue-strong); margin-right: 6px; }
.px-court { padding: 18px; border-radius: var(--px-r); background: var(--px-surface); border: 1px solid var(--px-line); }
.px-court__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.px-court__icon { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--px-soft); color: var(--px-blue-strong); font-size: 1.15rem; }
.px-court__head .px-court__name { font-size: 1.08rem; font-weight: 800; margin: 0; }
.px-court__head small { color: var(--px-muted); }
.px-court__count { margin-left: auto; padding: 4px 12px; border-radius: 999px; background: var(--px-lime); color: var(--px-navy); font-family: var(--px-font-cond); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; white-space: nowrap; }
.px-court__past { margin: -6px 0 10px; font-size: .84rem; color: var(--px-muted); }
.px-court__past i { margin-right: 4px; }
.px-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.px-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 58px; padding: 6px 4px; border-radius: 14px; border: 1.5px solid var(--px-line); background: var(--px-bg); color: var(--px-navy); font-size: .85rem; transition: border-color .15s, background .15s, transform .15s; }
.px-slot b { font-family: var(--px-font-cond); font-size: 1.3rem; line-height: 1; }
.px-slot small { font-size: .72rem; color: var(--px-muted); margin-top: 2px; }
button.px-slot { cursor: pointer; border-color: #BFD0F6; background: #fff; }
button.px-slot:hover { border-color: var(--px-navy); transform: translateY(-1px); }
.px-slot.is-picked { background: var(--px-navy); border-color: var(--px-navy); color: var(--px-lime); }
.px-slot.is-picked small { color: #fff; }
.px-slot.is-closed { opacity: .5; background: repeating-linear-gradient(135deg, var(--px-soft) 0 6px, transparent 6px 12px); cursor: not-allowed; }
.px-slot.is-closed b { text-decoration: line-through; color: var(--px-muted); }

.px-pickbar { position: fixed; z-index: 1040; left: 0; right: 0; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: rgba(16, 29, 53, .96); backdrop-filter: blur(10px); color: #fff; box-shadow: 0 -12px 30px -12px rgba(16, 29, 53, .5); animation: px-up .25s ease; }
.px-pickbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.px-pickbar__text { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.px-pickbar__text small { width: 100%; font-family: var(--px-font-cond); text-transform: uppercase; letter-spacing: .08em; color: var(--px-lime); font-weight: 700; }
.px-pickbar__text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-pickbar__price { font-family: var(--px-font-cond); font-weight: 700; font-size: 1.3rem; }
body.has-pickbar .px-footer { padding-bottom: 110px; }

.px-modal .modal-content { border: 0; border-radius: 24px; box-shadow: var(--px-shadow-lg); }
.px-modal .modal-header { border-bottom: 0; padding: 22px 24px 6px; }
.px-modal .modal-title { font-family: var(--px-font-head); font-weight: 800; font-size: 1.35rem; color: var(--px-navy); }
.px-modal .modal-body { padding: 10px 24px; }
.px-modal .modal-footer { border-top: 0; padding: 12px 24px 22px; gap: 8px; }
.px-summary { margin: 0; border-radius: 18px; background: var(--px-bg); border: 1px solid var(--px-line); padding: 6px 16px; }
.px-summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--px-line); }
.px-summary > div:last-child { border-bottom: 0; }
.px-summary dt { font-weight: 500; color: var(--px-muted); }
.px-summary dd { margin: 0; text-align: right; font-weight: 600; color: var(--px-navy); }
.px-summary__total dd b { display: block; font-family: var(--px-font-cond); font-size: 1.7rem; line-height: 1; }
.px-summary__total dd small { color: var(--px-muted); font-weight: 400; font-size: .76rem; }
.px-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: .92rem; color: var(--px-ink); cursor: pointer; }
.px-check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--px-navy); }

/* ---------- Mabar ---------- */
.px-mabars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 18px; }
.px-mabar { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--px-r); background: var(--px-surface); border: 1px solid var(--px-line); box-shadow: var(--px-shadow); }
.px-mabar__head { display: flex; gap: 12px; align-items: center; }
.px-mabar__icon { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--px-navy); color: var(--px-lime); font-size: 1.25rem; }
.px-mabar__eyebrow { font-family: var(--px-font-cond); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; color: var(--px-blue-strong); }
.px-mabar h2 { font-size: 1.18rem; font-weight: 800; margin: 0; line-height: 1.25; }
.px-mabar__where { margin: 0; color: var(--px-muted); font-size: .92rem; }
.px-mabar__where i { color: var(--px-blue-strong); margin-right: 4px; }
.px-meta3 { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 16px; background: var(--px-bg); border: 1px solid var(--px-line); }
.px-meta3 li { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-left: 1px solid var(--px-line); min-width: 0; }
.px-meta3 li:first-child { border-left: 0; }
.px-meta3 i { color: var(--px-blue-strong); font-size: .95rem; }
.px-meta3 small { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--px-muted); }
.px-meta3 b { font-size: .9rem; color: var(--px-navy); overflow-wrap: anywhere; }
.px-seats__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.px-seats__top b { font-size: 1.7rem; color: var(--px-navy); }
.px-seats__top small { color: var(--px-muted); }
.px-seats__left { font-weight: 700; font-size: .88rem; color: var(--px-navy); }
.px-progress { height: 10px; border-radius: 999px; background: var(--px-soft); overflow: hidden; }
.px-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--px-blue-strong), var(--px-cyan)); }
.px-mabar__form { margin-top: auto; }
.px-mabar > .px-btn { margin-top: auto; }

/* ---------- Paket (Fishin: kartu horizontal bertumpuk) ---------- */
.px-ownerhero { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.px-ownerhero__media { position: relative; min-height: 420px; border-radius: var(--px-r-lg); background: var(--px-navy) var(--px-photo) center / cover; box-shadow: var(--px-shadow-lg); }
.px-doodle--whistle { width: 120px; height: 80px; left: -50px; bottom: -30px; color: var(--px-navy) !important; }
.px-benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.px-benefits li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--px-surface); border: 1px solid var(--px-line); }
.px-benefits li > span { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--px-lime); color: var(--px-navy); }
.px-benefits b { display: block; font-family: var(--px-font-head); color: var(--px-navy); }
.px-benefits div { color: var(--px-muted); font-size: .93rem; }

.px-plans { display: grid; gap: 18px; max-width: 1080px; margin: 0 auto; }
.px-plan { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; border-radius: var(--px-r-lg); background: var(--px-surface); border: 1.5px solid var(--px-line); box-shadow: var(--px-shadow); overflow: hidden; }
.px-plan--top { border-color: var(--px-navy); box-shadow: 0 0 0 4px var(--px-lime), var(--px-shadow-lg); }
.px-plan__info { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(22px, 3vw, 34px); }
.px-plan__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--px-soft); color: var(--px-blue-strong); font-size: 1.3rem; }
.px-plan--top .px-plan__icon { background: var(--px-navy); color: var(--px-lime); }
.px-plan h3 { font-size: 1.5rem; font-weight: 800; margin: 4px 0 0; }
.px-plan__info p { margin: 0; color: var(--px-muted); }
.px-plan__limit { color: var(--px-navy) !important; font-weight: 600; }
.px-plan__limit i { color: var(--px-blue-strong); margin-right: 6px; }
.px-plan__info .px-btn { margin-top: auto; }
.px-plan__price { padding: clamp(22px, 3vw, 34px); background: var(--px-bg); border-left: 1px dashed var(--px-line); }
.px-plan--top .px-plan__price { background: linear-gradient(180deg, #F4F9DD, var(--px-bg) 55%); }
.px-pricebox { padding: 16px 20px; border-radius: 18px; background: var(--px-surface); border: 1px solid var(--px-line); margin-bottom: 10px; }
.px-pricebox b { font-size: clamp(2.4rem, 4vw, 3.1rem); line-height: 1; color: var(--px-navy); }
.px-pricebox > span { margin-left: 6px; font-weight: 600; color: var(--px-muted); }
.px-pricebox small { display: block; margin-top: 6px; color: var(--px-muted); font-size: .84rem; }
.px-pricebox__extra { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; border: 1px dashed var(--px-line); font-size: .9rem; color: var(--px-muted); }
.px-pricebox__extra b { color: var(--px-navy); white-space: nowrap; }
.px-feats { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: .9rem; }
.px-feats li { display: flex; gap: 8px; align-items: flex-start; color: var(--px-ink); }
.px-feats i { margin-top: 3px; color: var(--px-success); }
.px-feats li.is-off { color: #8A93A6; }
.px-feats li.is-off i { color: #B8C0CE; }
.px-badge-lime { position: absolute; right: 20px; top: 20px; }
.px-plan__info .px-badge-lime { position: static; }
.px-plan--custom { grid-template-columns: 1fr auto; align-items: center; padding-right: clamp(22px, 3vw, 34px); background: repeating-linear-gradient(135deg, #fff 0 14px, var(--px-bg) 14px 28px); border-style: dashed; box-shadow: none; }
.px-plan--custom .px-plan__info { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.px-plan--custom .px-plan__info > div, .px-plan--custom .px-plan__info p { flex: 1 1 320px; }
.px-plan--custom h3 { margin: 0; }

/* FAQ dengan foto samping */
.px-faq { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.px-faq__media { position: sticky; top: calc(var(--px-header-h) + 20px); min-height: 520px; border-radius: var(--px-r-lg); background: var(--px-navy) var(--px-photo) center / cover; display: flex; align-items: flex-end; padding: 18px; box-shadow: var(--px-shadow-lg); }
.px-faq__card { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); }
.px-faq__card b { display: block; color: var(--px-navy); font-family: var(--px-font-head); }
.px-faq__card span { font-size: .88rem; color: var(--px-muted); }
.px-accordion { margin: 24px 0 26px; display: grid; gap: 10px; }
.px-qa { border-radius: 18px; background: var(--px-surface); border: 1px solid var(--px-line); padding: 0 20px; transition: border-color .2s, box-shadow .2s; }
.px-qa[open] { border-color: var(--px-navy); box-shadow: var(--px-shadow); }
.px-qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 14px 0; font-family: var(--px-font-head); font-weight: 700; color: var(--px-navy); }
.px-qa summary::-webkit-details-marker { display: none; }
.px-qa summary::after { content: ""; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--px-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23101D35' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s, background-color .2s; }
.px-qa[open] summary::after { transform: rotate(45deg); background-color: var(--px-lime); }
.px-qa p { margin: 0 0 18px; color: var(--px-muted); }

/* ---------- Tiket fisik ---------- */
.px-ticket { --px-notch: var(--px-bg); position: relative; display: grid; grid-template-columns: 1fr 240px; margin-bottom: 16px; border-radius: 22px; background: var(--px-surface); border: 1px solid var(--px-line); box-shadow: var(--px-shadow); }
.px-ticket::before, .px-ticket::after { content: ""; position: absolute; right: 228px; width: 24px; height: 24px; border-radius: 50%; background: var(--px-notch); border: 1px solid var(--px-line); }
.px-ticket::before { top: -12px; clip-path: inset(50% 0 0 0); }
.px-ticket::after { bottom: -12px; clip-path: inset(0 0 50% 0); }
.px-ticket__main { padding: 22px 26px; border-right: 2px dashed var(--px-line); min-width: 0; }
.px-ticket__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.px-ticket__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--px-soft); color: var(--px-blue-strong); }
.px-ticket__status { padding: 4px 12px; border-radius: 6px; font-family: var(--px-font-cond); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; background: var(--px-soft); color: var(--px-muted); }
.px-ticket.is-active .px-ticket__status { background: var(--px-lime); color: var(--px-navy); }
.px-ticket.st-pending .px-ticket__status { background: #EEF4FF; color: var(--px-blue-strong); }
.px-ticket.st-cancelled .px-ticket__status, .px-ticket.st-no_show .px-ticket__status { background: #FDECEC; color: var(--px-danger); }
.px-ticket h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 12px; }
.px-ticket__meta { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.px-ticket__meta small { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--px-muted); }
.px-ticket__meta b { color: var(--px-navy); font-weight: 600; font-size: .95rem; }
.px-ticket__stub { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 20px; text-align: center; border-radius: 0 22px 22px 0; }
.px-ticket.is-active .px-ticket__stub { background: var(--px-navy); color: #fff; }
.px-ticket__stub small { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--px-muted); }
.px-ticket.is-active .px-ticket__stub small { color: var(--px-lime); }
.px-ticket__code { font-family: var(--px-font-cond); font-size: 2rem; letter-spacing: .12em; line-height: 1.1; word-break: break-all; }
.px-ticket__hint { font-size: .82rem; color: #C9D6EE; }
.px-ticket__wait { font-size: .9rem; color: var(--px-muted); font-weight: 500; }
.px-ticket:not(.is-active) { opacity: .92; }

/* ---------- Masuk / daftar ---------- */
.px-page-auth .px-footer { margin-top: 0; }
.px-auth { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--px-header-h)); }
.px-auth__media { position: relative; display: flex; align-items: flex-end; padding: clamp(24px, 4vw, 48px); background: var(--px-navy) var(--px-photo) center / cover; margin: 24px 0 24px 24px; border-radius: var(--px-r-lg); overflow: hidden; }
.px-auth__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(16, 29, 53, .85)); }
.px-auth__quote { position: relative; max-width: 440px; color: #fff; }
.px-auth__quote p { margin: 14px 0 0; font-family: var(--px-font-head); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.25; text-wrap: balance; }
.px-auth__form { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 5vw, 64px) 24px; }
.px-auth__box { width: min(440px, 100%); }
.px-auth__box .px-title { margin-top: 0; }
.px-auth__box > .px-muted { margin: 8px 0 24px; }
.px-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--px-muted); font-size: .86rem; }
.px-or::before, .px-or::after { content: ""; flex: 1; height: 1px; background: var(--px-line); }
.px-form { display: grid; gap: 14px; }
.px-field { display: grid; gap: 6px; min-width: 0; }
.px-field label { font-weight: 600; font-size: .9rem; color: var(--px-navy); }
.px-field label span { color: var(--px-muted); font-weight: 400; }
.px-field input { width: 100%; min-width: 0; min-height: 50px; border-radius: 14px; border: 1.5px solid var(--px-line); background: var(--px-surface); padding: 10px 16px; font-size: 1rem; color: var(--px-navy); }
.px-field input:focus { outline: 0; border-color: var(--px-blue); box-shadow: 0 0 0 3px rgba(36, 107, 253, .2); }
.px-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* Password: tombol lihat/sembunyikan di dalam kolom + petunjuk langsung di bawahnya. */
.px-pass { position: relative; }
.px-pass input { padding-right: 52px; }
.px-pass__eye { position: absolute; right: 5px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--px-muted); display: grid; place-items: center; cursor: pointer; }
.px-pass__eye:hover { color: var(--px-navy); background: var(--px-soft); }
.px-field__hint { display: flex; align-items: center; gap: 6px; min-height: 1.3em; font-size: .8rem; color: var(--px-muted); transition: color .2s; }
.px-field__hint::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; opacity: .7; }
.px-field__hint.is-ok { color: var(--px-success); }
.px-field__hint.is-bad { color: var(--px-danger); }
.px-form .px-check { margin: 0; }
.px-auth__switch { margin: 20px 0 0; text-align: center; color: var(--px-muted); }
.px-auth__switch a { font-weight: 700; }

/* ---------- Status lama yang masih dipakai ---------- */
.badge-status { font-weight: 600; }

/* ---------- Gerak ---------- */
@keyframes px-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes px-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes px-spin { to { transform: rotate(360deg); } }
@keyframes px-ripple { to { transform: scale(40); opacity: 0; } }
@keyframes px-fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Bob naik-turun (Fishin animate1-4). Parallax mouse/scroll memakai properti `translate`
   dari portal.js, rotasi dasar memakai `rotate`, jadi ketiganya tidak saling menimpa. */
@keyframes px-bob { from { transform: translateY(0); } to { transform: translateY(var(--amp, -18px)); } }
/* Ilustrasi: bob + ayun pelan, seperti ikan Fishin yang "berenang" di tempat. */
@keyframes px-swim { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(calc(var(--amp, -20px) * .55)) rotate(calc(var(--sw, 3deg) * -.4)); } 100% { transform: translateY(var(--amp, -20px)) rotate(var(--sw, 3deg)); } }
[data-float] { animation: px-bob var(--d, 4s) ease-in-out var(--dl, 0s) infinite alternate; will-change: transform, translate; }
.px-ill[data-float] { animation-name: px-swim; }
.px-js .px-ill { opacity: 0; scale: .78; transition: opacity 1.1s ease, scale 1.5s var(--px-ease-back); }
.px-js .px-ill.is-in { opacity: var(--o, 1); scale: 1; }
.px-js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--px-ease-out), transform .8s var(--px-ease-out); }
.px-js [data-reveal].is-in { opacity: 1; transform: none; }
/* Judul per huruf (Fishin text-anime-style-3). */
.px-split__w { display: inline-block; white-space: nowrap; }
.px-split__c { display: inline-block; }
.px-js .is-split:not(.is-in) .px-split__c { opacity: 0; transform: translateX(50px); }
.px-js .is-split .px-split__c { transition: opacity .9s ease, transform 1.4s var(--px-ease-back); transition-delay: calc(var(--i) * 18ms); }
/* Tombol kembali ke atas + cincin progres scroll. */
.px-totop { position: fixed; right: 22px; bottom: 90px; z-index: 1035; width: 50px; height: 50px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: #fff; color: var(--px-navy); box-shadow: 0 12px 30px -12px rgba(16, 29, 53, .45); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s, transform .4s var(--px-ease-back), visibility .3s; }
.px-totop.is-on { opacity: 1; visibility: visible; transform: none; }
.px-totop svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.px-totop circle { fill: none; stroke: var(--px-line); stroke-width: 2.5; }
.px-totop .px-totop__bar { stroke: var(--px-blue-strong); stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 * (1 - var(--p, 0))); stroke-linecap: round; }
.px-totop:hover { background: var(--px-navy); color: var(--px-lime); }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .px-js [data-reveal], .px-js .is-split .px-split__c { opacity: 1 !important; transform: none !important; }
    .px-js .px-photo[data-curtain] { clip-path: none !important; }
    .px-js .px-photo[data-curtain]::before { transform: none !important; }
    .px-js .px-ill { opacity: var(--o, 1) !important; scale: 1 !important; }
    [data-float] { translate: none !important; }
}

/* ---------- Responsif ---------- */
@media (max-width: 1199.98px) {
    .px-search { grid-template-columns: 1fr 1fr; }
    .px-search__field:nth-child(2) { border-right: 1px solid var(--px-line); }
    .px-search__go { grid-column: 1 / -1; margin: 8px 0 0; width: 100%; }
    .px-steps { flex-wrap: wrap; gap: 18px; }
    .px-step { flex-basis: min(340px, calc(50% - 9px)); margin-left: 0; padding: 36px; }
    .px-cta__whistle { right: 6%; }
}
@media (max-width: 991.98px) {
    :root { --px-header-h: 68px; }
    .px-hero__grid, .px-vhead__grid, .px-ownerhero, .px-faq { grid-template-columns: 1fr; }
    .px-hero__media { min-height: 440px; max-width: 640px; width: 100%; margin: 0 auto; }
    .px-strip { grid-template-columns: repeat(2, 1fr); }
    .px-strip a:nth-child(3) { border-left: 0; padding-left: 0; }
    .px-strip a:nth-child(n+3) { border-top: 1px solid var(--px-line); }
    .px-cta__grid { grid-template-columns: 1fr; }
    .px-gallery { height: 340px; }
    .px-gpanel { flex-basis: 66px; }
    .px-gpanel__label { font-size: 1.15rem; }
    .px-deco--tl { width: 70px; height: 70px; top: 20px; }
    .px-footer__grid { grid-template-columns: 1fr 1fr; }
    .px-footer__about { grid-column: span 2; }
    .px-plan { grid-template-columns: 1fr; }
    .px-plan__price { border-left: 0; border-top: 1px dashed var(--px-line); }
    .px-faq__media { position: relative; top: 0; min-height: 300px; }
    .px-ownerhero__media { min-height: 280px; }
    .px-doodle--whistle { left: auto; right: 10px; bottom: -36px; }
    .px-pagehero__art { width: 160px; height: 140px; }
    .px-pagehero__trophy { left: 20px; top: 10px; width: 104px; height: 104px; font-size: 2.6rem; }
    .px-auth { grid-template-columns: 1fr; min-height: 0; }
    .px-auth__media { margin: 16px 16px 0; min-height: 150px; padding: 20px; }
    .px-auth__media { min-height: 120px; }
    .px-auth__quote p { display: none; }
    .px-ticket { grid-template-columns: 1fr; }
    .px-ticket::before, .px-ticket::after { display: none; }
    .px-ticket__main { border-right: 0; border-bottom: 2px dashed var(--px-line); }
    .px-ticket__stub { border-radius: 0 0 22px 22px; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
    .px-ticket__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .px-pagehero__grid { grid-template-columns: 1fr; }
    .px-pagehero__art { display: none; }
    .px-hero__media { min-height: 360px; }
    .px-float--b { left: auto; right: 0; bottom: 0; }
    .px-hero__round { display: none; }
    .px-doodle--arrow, .px-doodle--burst { display: none; }
    .px-step { flex-basis: min(300px, 100%); padding: 40px; }
    /* HP: galeri jadi ubin 2 kolom, semua panel terbuka. */
    .px-gallery { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .px-gpanel, .px-gpanel.is-open { flex: none; min-height: 170px; align-items: flex-start; padding: 16px; color: #fff !important; border-color: transparent; }
    .px-gpanel::before, .px-gpanel::after { opacity: 1; transform: none; }
    .px-gpanel .px-gpanel__icon { background: #fff; color: var(--px-navy); }
    .px-gpanel .px-gpanel__label, .px-gpanel.is-open .px-gpanel__label { writing-mode: horizontal-tb; transform: none; font-size: 1.25rem; padding-right: 44px; white-space: normal; animation: none; }
    .px-gpanel .px-gpanel__arrow { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; background: var(--px-lime); color: var(--px-navy); }
    .px-deco--tl, .px-deco--tr2, .px-cta__whistle { display: none; }
    .px-totop { right: 18px; bottom: 84px; width: 46px; height: 46px; }
    .px-feats { grid-template-columns: 1fr; }
    .px-plan--custom { grid-template-columns: 1fr; padding: 0 22px 22px 0; }
    .px-plan--custom .px-btn { margin-left: 22px; }
    .px-filter__go { width: 100%; }
    .px-court__count { display: none; }
}
@media (max-width: 575.98px) {
    .px-body .container { --bs-gutter-x: 32px; }
    .px-header__bar { gap: 10px; }
    .px-logo span { font-size: 1.08rem; }
    .px-header .px-btn--sm { padding-left: 14px; }
    .px-search { grid-template-columns: 1fr; padding: 6px; }
    .px-search__field, .px-search__field--wide, .px-search__field:nth-child(2) { grid-column: auto; border-right: 0; border-bottom: 1px solid var(--px-line); padding: 10px 12px; }
    .px-search__field:nth-child(3) { border-bottom: 0; }
    .px-search__go { grid-column: auto; }
    .px-hero__media { min-height: 300px; }
    .px-hero__photo--main { width: 100%; height: 76%; }
    .px-hero__photo--sub { width: 42%; height: 36%; }
    .px-float--a { left: auto; right: 10px; top: auto; bottom: 26%; padding: 10px 14px; }
    .px-float--a strong { font-size: 2rem; }
    .px-float--b { display: none; }
    .px-footer { background-size: 90vw; }
    .px-footer__burst, .px-footer__spark { display: none; }
    .px-footer__shuttle { width: 56px; height: 56px; top: 20px; }
    .px-doodle--shuttle { width: 64px; height: 64px; right: 2%; top: auto; bottom: -4%; }
    .px-strip { grid-template-columns: 1fr 1fr; }
    .px-strip a { padding: 14px 12px 16px; }
    .px-strip span { font-size: .95rem; }
    .px-sport { min-height: 170px; }
    .px-sport__name { font-size: 1.5rem; }
    .px-sports { grid-template-columns: 1fr 1fr; gap: 10px; }
    .px-sport__icon { width: 44px; height: 44px; font-size: 1.1rem; }
    .px-sport .px-roundarrow { width: 36px; height: 36px; right: 12px; bottom: 12px; }
    .px-footer__grid { grid-template-columns: 1fr; }
    .px-footer__about { grid-column: auto; }
    .px-head__tools { width: 100%; justify-content: space-between; }
    .px-meta3 { grid-template-columns: 1fr 1fr 1fr; }
    .px-meta3 li { padding: 10px 8px; }
    .px-field-row { grid-template-columns: 1fr; }
    .px-ticket__main { padding: 18px; }
    .px-pricebox__extra { flex-direction: column; gap: 2px; }
    .px-pickbar__text strong { white-space: normal; }
    .px-btn { white-space: normal; text-align: center; }
}
@media (max-width: 380px) {
    .px-sports { grid-template-columns: 1fr; }
    .px-header .px-btn--sm .px-btn__arrow { display: none; }
    .px-header .px-btn--sm { padding-right: 14px; }
}

/* Ilustrasi di layar sempit: lebih kecil, lebih terpotong di tepi, lebih pudar, sebagian disembunyikan
   supaya tidak menabrak teks. */
@media (max-width: 991.98px) {
    .px-ill--hero-a { --w: 230px; right: -64px; top: -14px; }
    .px-ill--cta-a { right: 8%; top: -60px; }
    .px-ill--tour { display: none; }
}
@media (max-width: 767.98px) {
    .px-ill { --o: .8; }
    .px-ill--hero-a { --w: 170px; right: -56px; top: -22px; }
    .px-ill--hero-b, .px-ill--gal-b, .px-ill--venue-b, .px-ill--band-a { display: none; }
    .px-ill--gal-a { --w: 130px; left: -62px; top: 8px; }
    .px-ill--venue-a { --w: 84px; right: -14px; top: 14px; }
    .px-ill--band-b { --w: 170px; right: -76px; top: 10px; bottom: auto; }
    .px-ill--cta-a { --w: 110px; right: -24px; top: -44px; }
    .px-ill--cta-b { --w: 150px; left: -74px; bottom: -74px; }
    .px-ill--foot { --w: 76px; right: 2%; top: 14px; }
    .px-ill--ph { --w: 140px; right: -54px; top: 6px; }
    .px-ill--ph.px-ill--racket { --w: 80px; right: -10px; top: 6px; }
    .px-ill--ph-left { --w: 140px; right: -54px; top: 6px; bottom: auto; }
}

/* ---------- Hero beranda dengan foto penuh (pola "sport center website") ----------
   Foto aula olahraga di belakang, lapisan navy gradien dari kiri supaya teks terbaca,
   foto bergerak pelan (ken burns). Kartu angka dan ilustrasi mengambang di atas foto. */
.px-hero--photo { background: var(--px-deep); color: #C9D6EE; --px-ill-c: rgba(255, 255, 255, .62); }
/* Beranda: hero naik ke belakang navbar supaya navbar menyatu dengan foto. */
.px-hero--photo .px-ill--hero-a { top: calc(var(--px-header-h) + 6px); }
.px-hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--px-deep) var(--px-photo) center 40% / cover no-repeat; transform-origin: 70% 40%; animation: px-kenburns 24s ease-in-out infinite alternate; }
.px-hero--photo::before { background: linear-gradient(90deg, rgba(8, 16, 32, .94) 0%, rgba(8, 16, 32, .84) 36%, rgba(8, 16, 32, .5) 66%, rgba(8, 16, 32, .32) 100%), linear-gradient(180deg, rgba(8, 16, 32, .7), rgba(8, 16, 32, .2) 160px, transparent 30%, transparent 62%, rgba(8, 16, 32, .85)); }
.px-hero--photo::after { background-image: url("images/portal/contour-hero.svg"); opacity: 1; }
.px-page-home .px-hero--photo::after { top: var(--px-header-h); height: calc(100% - var(--px-header-h)); }
.px-hero--photo .px-display { color: #fff; }
.px-hero--photo .px-lead { color: #C3CEE2; }
.px-hero--photo .px-mark { color: var(--px-lime); }
.px-hero--photo .px-mark::after { height: .12em; bottom: -.06em; }
.px-hero--photo .px-search { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .75); border-color: transparent; }
.px-hero--photo .px-suggest__label { color: #fff; }
.px-hero--photo .px-chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); color: #fff !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.px-hero--photo .px-chip i, .px-hero--photo .px-chip .px-svg-icon { color: var(--px-lime); }
.px-hero--photo a.px-chip:hover { border-color: var(--px-lime); background: rgba(212, 245, 60, .12); }
.px-hero--photo .px-chip.is-active { background: var(--px-lime); border-color: var(--px-lime); color: var(--px-navy) !important; }
.px-hero--photo .px-chip.is-active i, .px-hero--photo .px-chip.is-active .px-svg-icon { color: var(--px-navy); }
.px-hero--photo .px-strip { border-top-color: rgba(255, 255, 255, .16); }
.px-hero--photo .px-strip a { border-left-color: rgba(255, 255, 255, .16); color: #fff; }
.px-hero--photo .px-strip small { color: #9FB0CE; }
.px-hero--photo .px-strip a:hover span { color: var(--px-lime); }
.px-hero--photo .px-strip__go { border-color: rgba(255, 255, 255, .35); color: var(--px-lime); }
/* Sisi kanan tetap komposisi kolase awal (foto bertirai, foto bundar, kartu angka, doodle); warnanya disesuaikan ke latar gelap. */
.px-hero--photo .px-hero__media { min-height: 500px; }
.px-hero--photo .px-hero__photo--sub { outline-color: rgba(10, 20, 38, .92); }
.px-hero--photo .px-hero__round { border-color: rgba(10, 20, 38, .92); }
.px-hero--photo .px-float { box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .75); border-color: transparent; }
.px-hero--photo .px-doodle { color: rgba(255, 255, 255, .92); }
.px-hero--photo .px-doodle--spark { color: var(--px-lime); }
.px-hero--photo .px-doodle--burst { color: rgba(255, 255, 255, .5) !important; }
/* Setinggi layar: isi di tengah, strip pintasan menempel di dasar hero. */
.px-page-home .px-hero--photo { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-bottom: 12px; }
.px-page-home .px-hero--photo > .px-hero__grid { flex: 1 0 auto; }
.px-page-home .px-hero--photo > .container:last-child { margin-top: auto; }
/* Muat dalam satu layar: jarak atas, judul, dan strip dirapatkan. */
.px-page-home .px-hero--photo { margin-top: calc(-1 * var(--px-header-h) - 1px); padding-top: calc(var(--px-header-h) + 1px + clamp(24px, 3vw, 40px)); }
.px-hero--photo .px-display { font-size: clamp(2.3rem, 4.8vw, 3.8rem); margin: 0 0 clamp(26px, 3vw, 36px); }
.px-hero--photo .px-lead { margin-bottom: 20px; }
.px-hero--photo .px-suggest { margin-top: 14px; }
.px-hero--photo .px-strip { margin-top: clamp(24px, 3vw, 36px); }
.px-hero--photo .px-strip a { padding-top: 16px; padding-bottom: 18px; }
@keyframes px-kenburns { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
@media (max-width: 991.98px) {
    .px-hero--photo::before { background: linear-gradient(180deg, rgba(8, 16, 32, .9), rgba(8, 16, 32, .78) 55%, rgba(8, 16, 32, .9)); }
    .px-hero--photo .px-hero__media { min-height: 420px; }
}
@media (max-width: 575.98px) {
    .px-hero--photo .px-hero__media { min-height: 320px; }
    .px-strip a { padding-right: 42px; }
    .px-strip__go { right: 6px; width: 30px; height: 30px; margin-top: -15px; font-size: .7rem; }
}
/* ---------- Navbar beranda: transparan di atas foto hero, putih setelah digulir ---------- */
.px-page-home .px-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: rgba(255, 255, 255, .14); box-shadow: none; }
.px-header .px-logo, .px-header .px-nav a, .px-header .px-link { transition: color .6s ease; }
.px-page-home .px-header:not(.is-scrolled) .px-logo, .px-page-home .px-header:not(.is-scrolled) .px-link { color: #fff !important; }
.px-page-home .px-header:not(.is-scrolled) .px-nav a { color: rgba(255, 255, 255, .8); }
.px-page-home .px-header:not(.is-scrolled) .px-nav a:hover, .px-page-home .px-header:not(.is-scrolled) .px-nav a.is-active { color: #fff; }
.px-page-home .px-header:not(.is-scrolled) .px-nav a::after { box-shadow: none; }
.px-page-home .px-header:not(.is-scrolled) .px-btn--dark { --px-btn-bg: var(--px-lime); --px-btn-fg: var(--px-navy); }
.px-page-home .px-header:not(.is-scrolled) .px-btn--dark .px-btn__arrow { background: var(--px-navy); color: var(--px-lime); }
.px-page-home .px-header:not(.is-scrolled) .px-btn--ghost { --px-btn-fg: #fff; border-color: rgba(255, 255, 255, .55); }
.px-page-home .px-header:not(.is-scrolled) .px-iconbtn { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff !important; }
.px-page-home .px-header:not(.is-scrolled) .px-account { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; }
.px-page-home .px-header:not(.is-scrolled) .px-account .fa-chevron-down { color: rgba(255, 255, 255, .7); }
/* ---------- Halaman Masuk / Daftar (mandiri, tanpa navbar & footer) ---------- */
.px-authpage__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100vh; min-height: 100svh; }
.px-authpage__main { display: flex; flex-direction: column; min-width: 0; padding: 22px clamp(20px, 5vw, 64px); }
.px-authpage__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.px-authpage__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--px-line); background: var(--px-surface); color: var(--px-navy) !important; font-weight: 600; font-size: .9rem; text-decoration: none; transition: border-color .2s; }
.px-authpage__back:hover { border-color: var(--px-navy); }
.px-authpage__back i { transition: transform .3s var(--px-ease-back); }
.px-authpage__back:hover i { transform: translateX(-3px); }
.px-authpage__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(28px, 6vh, 64px) 0; }
.px-authpage__body .px-title { margin-top: 0; }
.px-authpage__body .px-auth__box > .px-muted { margin: 8px 0 24px; }
.px-authpage__legal { margin: 0; text-align: center; font-size: .84rem; color: var(--px-muted); }
.px-authpage__media { position: sticky; top: 16px; align-self: start; height: calc(100vh - 32px); height: calc(100svh - 32px); margin: 16px 16px 16px 0; display: flex; align-items: flex-end; padding: clamp(28px, 4vw, 52px); border-radius: var(--px-r-lg); overflow: hidden; isolation: isolate; background: var(--px-navy) var(--px-photo) center / cover no-repeat; --px-ill-c: rgba(255, 255, 255, .6); }
.px-authpage__media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 16, 32, .2) 25%, rgba(8, 16, 32, .9)); }
.px-authpage__media::after { content: ""; position: absolute; z-index: -1; right: 0; top: 0; width: 70%; height: 100%; background: url("images/portal/contour-hero.svg") right top / cover no-repeat; transform: scaleY(-1); opacity: .8; }
.px-authpage__quote { position: relative; z-index: 1; max-width: 460px; color: #fff; }
.px-authpage__quote p { margin: 14px 0 0; font-family: var(--px-font-head); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.px-ill--auth { --w: clamp(180px, 17vw, 270px); right: -26px; top: 36px; rotate: -10deg; }
/* HP/tablet: foto jadi latar penuh di belakang formulir, formulir dalam kartu kaca hitam. */
@media (max-width: 991.98px) {
    body.px-authpage { background: var(--px-deep); color: #C9D6EE; }
    .px-authpage__grid { grid-template-columns: 1fr; }
    .px-authpage__media { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100vh; height: 100lvh; margin: 0; padding: 0; border-radius: 0; }
    .px-authpage__media::before { background: linear-gradient(180deg, rgba(8, 16, 32, .55), rgba(8, 16, 32, .8) 45%, rgba(8, 16, 32, .92)); }
    .px-authpage__quote { display: none; }
    .px-ill--auth { --w: 170px; right: -40px; top: 70px; }
    .px-authpage__main { position: relative; z-index: 1; }
    .px-authpage .px-logo { color: #fff !important; }
    .px-authpage .px-logo__mark { display: none; }
    .px-authpage .px-logo__mark--dark { display: block; }
    .px-authpage__back { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .px-authpage .px-auth__box { padding: 24px 20px; border-radius: 24px; background: rgba(10, 18, 34, .55); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
    .px-authpage .px-title { color: #fff; }
    .px-authpage .px-auth__box > .px-muted, .px-authpage .px-or { color: #AEBBD4; }
    .px-authpage .px-or::before, .px-authpage .px-or::after { background: rgba(255, 255, 255, .16); }
    .px-authpage .px-field label { color: #fff; }
    .px-authpage .px-field label span { color: #AEBBD4; }
    .px-authpage .px-field input { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
    .px-authpage .px-field input::placeholder { color: #8FA0BF; }
    .px-authpage .px-field input:focus { border-color: var(--px-lime); box-shadow: 0 0 0 3px rgba(212, 245, 60, .2); }
    .px-authpage .px-pass__eye { color: #AEBBD4; }
    .px-authpage .px-pass__eye:hover { color: #fff; background: rgba(255, 255, 255, .1); }
    .px-authpage .px-field__hint { color: #AEBBD4; }
    .px-authpage .px-field__hint.is-ok { color: #6FE3A8; }
    .px-authpage .px-field__hint.is-bad { color: #FF9C9C; }
    .px-authpage .px-check { color: #DCE6FF; }
    .px-authpage .px-btn--dark { --px-btn-bg: var(--px-lime); --px-btn-fg: var(--px-navy); }
    .px-authpage .px-btn--ghost { --px-btn-fg: #fff; border-color: rgba(255, 255, 255, .6); }
    .px-authpage .px-btn--ghost:hover { --px-btn-bg: rgba(255, 255, 255, .12); }
    .px-authpage .px-auth__switch { color: #AEBBD4; }
    .px-authpage .px-auth__switch a { color: var(--px-lime); }
    .px-authpage__legal { color: #8FA0BF; }
    .px-authpage input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px rgba(20, 30, 50, 1) inset; caret-color: #fff; }
}
@media (max-width: 575.98px) {
    .px-authpage__main { padding: 16px; }
    .px-authpage__body { align-items: flex-start; padding-top: 32px; }
}


/* ---------- G5 Klub ---------- */
.px-clubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.px-club { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--px-surface, #fff); border: 1px solid var(--px-line, #e4e8f0); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.px-club:hover { border-color: var(--px-ink, #101d35); transform: translateY(-2px); }
.px-club--row { margin-bottom: 10px; }
.px-club__logo { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--px-soft); overflow: hidden; font-size: 1.3rem; }
.px-club__logo img { width: 100%; height: 100%; object-fit: cover; }
.px-club__logo--lg { flex-basis: 76px; width: 76px; height: 76px; font-size: 1.8rem; }
.px-club__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.px-club__body b { font-size: 1.02rem; }
.px-club__body small { color: var(--px-muted, #5b6478); }
.px-clubhead { display: flex; gap: 18px; align-items: center; margin-top: 10px; }
.px-duelist { list-style: none; padding: 0; margin: 10px 0 0; }
.px-duelist li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--px-line, #e4e8f0); flex-wrap: wrap; }
.px-duelist li.is-paid { box-shadow: inset 3px 0 0 var(--px-success); }
.px-duelist li.is-unpaid { box-shadow: inset 3px 0 0 #c2322f; }
.px-duelist li.is-paid span:last-child { color: var(--px-success); font-weight: 600; }
.px-duelist li.is-unpaid span:last-child { color: #c2322f; font-weight: 600; }
.px-cform { display: grid; gap: 12px; }
.px-cfield label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--px-muted); margin-bottom: 6px; }
.px-cfield input, .px-cfield select, .px-cfield textarea { width: 100%; border: 1px solid var(--px-line); border-radius: 12px; padding: 11px 14px; background: var(--px-surface); color: var(--px-ink); font: inherit; }
.px-cfield input:focus, .px-cfield select:focus, .px-cfield textarea:focus { outline: 2px solid var(--px-blue); outline-offset: 1px; }
.px-cfield-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .px-cfield-row { grid-template-columns: 1fr; } }
.px-cbox { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 20px; padding: 20px; }

.px-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.px-photos form { display: grid; gap: 4px; }
.px-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }

/* G7: Featured Venue & hasil pencarian jam kosong */
.px-venue__media { position: relative; }
.px-venue__featured { position: absolute; top: 12px; right: 12px; z-index: 2; font-weight: 700; font-size: .78rem; padding: 4px 10px; border-radius: 999px; }
.px-venue.is-featured { box-shadow: 0 0 0 2px var(--px-lime); }
.px-venue__slots { margin-top: 8px; }

.px-paypick { border: 0; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.px-paypick label { display: flex; gap: 8px; align-items: center; }
.px-fnb { margin-top: 12px; }
.px-fnb__list { display: grid; gap: 6px; margin-top: 8px; max-height: 220px; overflow: auto; }
.px-fnb__item { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.px-fnb__item input { width: 70px; border: 1px solid var(--px-line); border-radius: 8px; padding: 4px 8px; }

.px-nexpoints { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 14px; border-radius: 999px; background: var(--px-surface); border: 1px solid var(--px-line); }

/* G7 Chat Asisten portal */
.px-asst { position: fixed; right: 18px; bottom: 18px; z-index: 1040; }
.px-asst__fab { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--px-navy); color: var(--px-lime); font-size: 1.3rem; box-shadow: 0 10px 30px rgba(16, 29, 53, .3); cursor: pointer; }
.px-asst__panel { position: absolute; right: 0; bottom: 68px; width: min(360px, calc(100vw - 32px)); background: var(--px-surface); border: 1px solid var(--px-line); border-radius: 20px; box-shadow: 0 20px 50px rgba(16, 29, 53, .2); overflow: hidden; display: flex; flex-direction: column; max-height: min(520px, 70vh); }
.px-asst__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--px-navy); color: #fff; }
.px-asst__close { background: none; border: 0; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.px-asst__log { padding: 12px; overflow: auto; display: grid; gap: 8px; flex: 1; }
.px-asst__msg { margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--px-soft); font-size: .9rem; }
.px-asst__msg.is-me { background: var(--px-navy); color: #fff; justify-self: end; }
.px-asst__item { display: block; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--px-surface); border: 1px solid var(--px-line); color: inherit; text-decoration: none; }
.px-asst__item small { display: block; color: var(--px-muted); }
.px-asst__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--px-line); }
.px-asst__form input { flex: 1; border: 1px solid var(--px-line); border-radius: 999px; padding: 8px 14px; }

/* G7: pencarian dengan tanggal & jam (2 x 2 + tombol) */
@media (min-width: 576px) {
    .px-search { grid-template-columns: 1fr 1fr; }
    .px-search__field:nth-child(2), .px-search__field:nth-child(4) { border-right: 1px solid var(--px-line); }
    .px-search__field:nth-child(3), .px-search__field:nth-child(5) { border-right: 0; }
    .px-search__field:nth-child(2), .px-search__field:nth-child(3) { border-bottom: 1px solid var(--px-line); }
    .px-search__go { grid-column: 1 / -1; margin: 8px 0 0; width: 100%; }
}