:root{
  /* Palet Zuper terang. Lime tetap warna tanda tangan, tapi sekarang jadi
     aksen di atas putih, bukan cahaya di atas hitam. Lime murni terlalu
     silau untuk teks di latar terang, jadi teks/tautan memakai lime-deep
     yang kontrasnya lolos WCAG AA. */
  --lime:#D6FA08; --green:#8DFF29; --navy:#162F63;
  --lime-deep:#5F7000;      /* lime yang cukup gelap untuk teks di atas putih */
  --gold:#D6FA08; --gold-bright:#5F7000; --gold-soft:#3F4A00;
  --ink:#0B0D10;            /* teks utama, nyaris hitam */
  --ink-2:#2B3138;          /* teks sekunder */
  --black:#000000;
  --surface:#FFFFFF;        /* latar utama halaman */
  --surface-2:#F4F6F3;      /* latar section selang-seling */
  --surface-3:#EDEFEA;      /* latar kartu/panel */
  --charcoal:#F4F6F3;       /* alias lama -> kini terang */
  --charcoal-2:#FFFFFF;     /* alias lama -> kini putih */
  --line:rgba(11,13,16,.12);
  --line-kuat:rgba(11,13,16,.22);
  --body:#2B3138; --muted:#6B7480; --white:#FFFFFF;
  --racquet:#5F7000; --sport:#4A7C1F; --wellness:#3F6B12; --social:#5F7000;
  --danger:#C4342B; --ok:#3F6B12;
  --maxw:1180px; --r:14px;
  --font-head:Sora,Inter,system-ui,sans-serif;
  --font-body:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  /* Tipografi display ala poster: rapat, tegak, huruf besar semua. */
  --font-display:'Archivo Black','Arial Black',Sora,Impact,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:74px}
body{
  margin:0;background:var(--surface);color:var(--body);
  font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:2.1rem;font-weight:800}
h2{font-size:1.75rem;font-weight:700}
h3{font-size:1.15rem;font-weight:700}
h4{font-size:1rem;font-weight:600}
p{margin:0 0 1em}
a{color:var(--lime-deep);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
section{padding:88px 0;scroll-margin-top:74px}
.eyebrow{font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lime-deep);margin:0 0 12px}
.lede{font-size:1.05rem;color:var(--ink-2);max-width:62ch}
.muted{color:var(--muted);font-size:.88rem}

/* Judul display raksasa, dipakai di hero dan kepala section besar.
   Huruf dirapatkan supaya blok teksnya padat seperti pada poster. */
.display{
  font-family:var(--font-display);font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;line-height:.92;
  color:var(--ink);margin:0 0 .4em;
}
/* Penanda urutan section: lingkaran berhuruf + label kecil, seperti (A) About. */
.sec-tanda{display:flex;align-items:center;gap:12px;margin-bottom:28px;border-top:1px solid var(--line);padding-top:18px}
.sec-tanda .huruf{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-kuat);
  display:grid;place-items:center;font-family:var(--font-head);font-size:.8rem;font-weight:700;color:var(--ink)
}
.sec-tanda .label{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ---------- top bar + nav ---------- */
.topbar{background:linear-gradient(90deg,#8DFF29,#D6FA08 45%,#8DFF29);color:#000;text-align:center;font-size:.8rem;font-weight:600;padding:7px 16px}
.topbar a{color:#000;text-decoration:underline}
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:16px;height:62px}
.logo{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.logo-mark{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;background:var(--ink)}
.logo-mark img{width:100%;height:100%;object-fit:contain}
.logo-txt{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:.95rem;line-height:1.1}
.logo-txt span{display:block;font-family:var(--font-body);font-weight:500;font-size:.66rem;color:var(--lime-deep);letter-spacing:.09em;text-transform:uppercase}
.nav-links{display:none;gap:22px;margin-left:auto;font-size:.85rem;font-weight:600}
.nav-links a{color:var(--ink-2)}
.nav-links a:hover{color:var(--lime-deep);text-decoration:none}
.nav-cta{margin-left:auto}
@media(min-width:900px){.nav-links{display:flex}.nav-cta{margin-left:22px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:.88rem;padding:12px 20px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
/* Tombol utama: hitam pekat dengan bilah lime di ujung, meniru tombol
   "Book a Lesson" pada referensi. Sudutnya dibuat tegas, bukan bulat penuh. */
.btn-gold{background:var(--ink);color:#fff;border-radius:6px;box-shadow:none}
.btn-gold:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-kuat);border-radius:6px}
.btn-ghost:hover{border-color:var(--ink);background:rgba(11,13,16,.04)}
.btn-danger{background:transparent;color:var(--danger);border-color:rgba(196,52,43,.4);border-radius:6px}
.btn-danger:hover{background:rgba(196,52,43,.08)}
/* Tombol putih, khusus dipakai di atas foto gelap (hero). */
.btn-terang{background:rgba(255,255,255,.95);color:var(--ink);border-radius:6px}
.btn-terang:hover{background:#fff}
.btn-sm{padding:9px 16px;font-size:.8rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
/* Tombol "Kalkulator Mahjong": foto pin ubin ditempel menabrak sudut
   kanan-atas tombol (separuh di luar, separuh di dalam), sedikit
   dimiringkan supaya terasa seperti stiker, bukan ikon rata. Sengaja di
   pojok kanan-atas (bukan kiri) supaya tidak menabrak tombol lain di
   sebelahnya dalam satu baris. */
.btn-mahjong{position:relative;overflow:visible}
.btn-mahjong .badge-mahjong{
  position:absolute;top:0;right:0;
  transform:translate(38%,-42%) rotate(14deg);
  width:52px;height:auto;pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(11,13,16,.35));
  transition:transform .2s ease;
}
.btn-mahjong.btn-sm .badge-mahjong{width:38px}
.btn-mahjong:hover .badge-mahjong{transform:translate(38%,-42%) rotate(4deg) scale(1.08)}

/* Tombol "Score Assistant Badminton": maskot Zuka mengintip di atas
   tombol. Diam-diam bersiap smash saat idle (ada animasi mengambang
   halus), lalu langsung berganti ke pose smash begitu tombol disentuh
   kursor/jari. Dua gambar ditumpuk pas di posisi yang sama dan
   ditukar lewat opacity, bukan sprite animasi beneran, supaya ringan. */
.btn-badminton{position:relative;overflow:visible}
.btn-badminton .zuka{
  position:absolute;left:50%;bottom:100%;
  transform:translateX(-50%) translateY(16px);
  width:132px;height:auto;pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(11,13,16,.4));
  transition:opacity .15s ease;
}
.btn-badminton.btn-sm .zuka{width:96px;transform:translateX(-50%) translateY(12px)}
.btn-badminton .zuka-siap{opacity:1;animation:zukaAmbang 2.6s ease-in-out infinite}
.btn-badminton .zuka-smash{opacity:0}
.btn-badminton:hover .zuka-siap,
.btn-badminton:focus-visible .zuka-siap{opacity:0;animation:none}
.btn-badminton:hover .zuka-smash,
.btn-badminton:focus-visible .zuka-smash{opacity:1}
@keyframes zukaAmbang{
  0%,100%{transform:translateX(-50%) translateY(16px)}
  50%{transform:translateX(-50%) translateY(10px)}
}
/* Zuka cukup tinggi untuk menabrak baris tombol di atasnya kalau
   .btn-row ini membungkus ke baris baru (mis. di kartu profil Badminton
   yang lebih sempit dari hero). Baris-gap diperbesar khusus untuk
   .btn-row yang memuat tombol ini, tanpa mengubah jarak antar tombol
   lain di baris yang sama. */
.btn-row:has(.btn-badminton){row-gap:104px}
.btn-row:has(.btn-badminton.btn-sm){row-gap:76px}

/* ---------- hero ---------- */
/* Foto gedung memenuhi bingkai, judul display raksasa menimpanya.
   Tabir gelap dijaga tipis di bagian atas dan menebal ke bawah supaya
   foto tetap terlihat jelas tapi teks putih di atasnya tetap terbaca. */
.hero{
  position:relative;overflow:hidden;padding:0;
  background:var(--ink);
  border-bottom:0
}
.hero-foto{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,rgba(8,10,14,.42) 0%,rgba(8,10,14,.30) 45%,rgba(8,10,14,.78) 100%),
    image-set(url('/img/arena/hero-bg-1600.webp') 1x, url('/img/arena/hero-bg-2400.webp') 2x) center/cover no-repeat;
}
/* Saat ada video hero, foto latar tidak perlu dirender di bawahnya. */
.hero.punya-video .hero-foto{display:none}
.hero-inner{position:relative;z-index:1;padding:112px 0 48px;min-height:min(88vh,820px);display:flex;flex-direction:column;justify-content:flex-end}
.hero h1{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.4rem,9vw,6.2rem);line-height:.9;letter-spacing:-.03em;
  color:#fff;margin:0 0 auto;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
  max-width:15ch;
}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero .lede{font-size:1.02rem;margin-bottom:22px;color:rgba(255,255,255,.92)}
/* Kartu tagline dan blok aksi berdiri sejajar di dasar hero. */
.hero-grid{display:grid;gap:20px;margin-top:48px;align-items:end}
@media(min-width:940px){
  .hero-grid{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:36px}
}
/* Kartu ringkas di kiri bawah hero, seperti kotak "Since 1998" di referensi. */
.hero-kartu{background:rgba(255,255,255,.94);backdrop-filter:blur(6px);padding:22px 20px;border-radius:8px}
.hero-kartu .eyebrow{color:var(--lime-deep);margin-bottom:8px}
.hero-kartu .lede{color:var(--ink-2);font-size:.93rem;margin-bottom:0}
.hero-aksi{padding-bottom:4px}
.trustline{margin:0 0 14px;font-size:.82rem;color:rgba(255,255,255,.82);line-height:1.5}
.trustline b{color:var(--lime);font-weight:700}
.hero-visual{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hv-card{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:20px 16px;min-height:130px;background:linear-gradient(160deg,rgba(214,250,8,.14),rgba(11,16,32,.92));display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hv-card .ic{font-size:1.5rem;margin-bottom:auto;position:relative;z-index:2}
.hv-card strong{font-family:var(--font-head);color:#fff;font-size:.95rem;display:block;position:relative;z-index:2}
.hv-card span.lbl{font-size:.74rem;color:var(--gold-soft);letter-spacing:.1em;text-transform:uppercase;position:relative;z-index:2}
.hv-card .bg{position:absolute;inset:0;z-index:0}
.hv-card .bg img{width:100%;height:100%;object-fit:cover}
.hv-card .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.85))}

/* ---------- cluster grid ---------- */
.cluster-nav{padding:8px 0 40px;scroll-margin-top:74px}
.cluster-nav .cl-card h2{font-size:1.15rem;font-weight:700;margin-bottom:8px}
.cluster-grid{display:grid;gap:18px}
@media(min-width:700px){.cluster-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1050px){.cluster-grid{grid-template-columns:repeat(4,1fr)}}
.cl-card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);padding:24px 20px;display:flex;flex-direction:column;transition:border-color .18s,transform .18s,background .18s}
.cl-card:hover{border-color:var(--ink);background:#fff;transform:translateY(-3px);text-decoration:none}
.cl-card .tag{font-family:var(--font-head);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
.cl-card h3{margin-bottom:8px}
.cl-card p{font-size:.9rem;color:var(--muted);flex:1}
.cl-card .go{font-family:var(--font-head);font-weight:700;font-size:.82rem;color:var(--lime-deep);margin-top:14px}
.c-racquet .tag{color:var(--racquet)}
.c-sport .tag{color:var(--sport)}
.c-wellness .tag{color:var(--wellness)}
.c-social .tag{color:var(--social)}

/* ---------- section shells ---------- */
.alt{background:var(--surface-2)}
.sec-head{max-width:70ch;margin-bottom:34px}
/* Judul kepala section ikut gaya display, ukurannya menyesuaikan lebar layar. */
.sec-head h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.98;font-size:clamp(1.7rem,5vw,3rem)}
.split{display:grid;gap:28px}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:44px}}
.panel{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:22px}
.panel h3{font-size:1.02rem}
.list{list-style:none;padding:0;margin:0}
.list li{position:relative;padding-left:22px;margin-bottom:9px;font-size:.92rem}
.list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--lime)}
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.kv:last-child{border-bottom:0}
.kv b{color:var(--ink);font-weight:700;white-space:nowrap}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem}
caption{text-align:left;padding:14px 16px 0;color:var(--lime-deep);font-family:var(--font-head);font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
th,td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line)}
thead th{background:var(--surface-3);color:var(--ink);font-family:var(--font-head);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);font-weight:600}
tbody tr:hover{background:rgba(214,250,8,.14)}

/* ---------- price cards ---------- */
.price-grid{display:grid;gap:16px}
@media(min-width:640px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.price-grid{grid-template-columns:repeat(4,1fr)}}
.price-card{border:1px solid var(--line);border-radius:var(--r);padding:22px 18px;background:#fff}
.price-card .lbl{font-family:var(--font-head);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lime-deep);margin-bottom:8px}
/* Angka harga sengaja besar dan tebal, mengambil peran "angka statistik"
   pada referensi. */
.price-card .amt{font-family:var(--font-display);font-size:2.4rem;font-weight:900;color:var(--ink);line-height:.95;letter-spacing:-.02em}
.price-card .amt small{font-family:var(--font-body);font-size:.82rem;font-weight:600;color:var(--muted);letter-spacing:0}
.price-card .sub{font-size:.83rem;color:var(--muted);margin-top:10px}
.price-card .best{display:inline-block;margin-top:10px;font-size:.78rem;font-weight:700;color:var(--ink);background:var(--lime);border-radius:999px;padding:3px 12px}

/* ---------- kartu SBU (per cabang/lokasi) ---------- */
.sbu-grid{display:grid;gap:18px}
@media(min-width:700px){.sbu-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.sbu-grid{grid-template-columns:repeat(2,1fr)}}
.sbu-card{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:22px 20px;display:flex;flex-direction:column;
}
.sbu-card.segera{opacity:.72;border-style:dashed}
.sbu-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.sbu-head .ic{font-size:1.7rem;line-height:1;flex:0 0 auto}
.sbu-head h3{margin:0 0 4px;font-size:1.08rem}
.badge-lokasi,.badge-segera{
  display:inline-block;font-family:var(--font-head);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;border-radius:999px;
}
.badge-lokasi{color:var(--ink);border:1px solid var(--line-kuat);background:var(--surface-3)}
.badge-segera{color:#000;background:var(--lime)}
.sbu-foto{position:relative;border-radius:10px;overflow:hidden;margin-bottom:14px;aspect-ratio:16/9;background:var(--surface-3)}
.sbu-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
/* Foto sedikit membesar saat kartu disentuh, memberi kesan hidup
   tanpa menggeser tata letak. */
.sbu-card:hover .sbu-foto img{transform:scale(1.05)}
/* Gelap di tepi bawah supaya teks di bawah foto tetap terbaca. */
.sbu-foto::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45))}
@media(prefers-reduced-motion:reduce){
  .sbu-foto img,.sbu-card:hover .sbu-foto img{transition:none;transform:none}
}
.sbu-desk{font-size:.9rem;color:var(--muted);margin-bottom:14px}
.sbu-info{margin-bottom:16px}
/* Tombol WhatsApp/Gosport dan Lihat Peta dirapatkan ke tengah kartu,
   supaya ruang kosong di sisi kanan tidak terlalu lebar pada kartu lebar. */
.sbu-cta{margin-top:auto;justify-content:center}

/* daftar lokasi terpisah di section Lokasi */
.lokasi-grid{display:grid;gap:16px}
@media(min-width:700px){.lokasi-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1050px){.lokasi-grid{grid-template-columns:repeat(3,1fr)}}
.lokasi-item.panel{padding:0;overflow:hidden;display:flex;flex-direction:column}
.lokasi-item .lokasi-foto{margin:0}
.lokasi-item .lokasi-foto img{display:block;width:100%;height:150px;object-fit:cover}
.lokasi-item .lokasi-isi{padding:18px 20px 20px}
/* Sama seperti kartu SBU: tombol dirapatkan ke tengah, bukan menempel kiri. */
.lokasi-item .btn-row{justify-content:center}

/* ---------- service grid ---------- */
.svc-grid{display:grid;gap:14px}
@media(min-width:620px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff}
.svc h4{color:var(--lime-deep);margin-bottom:6px}
.svc p{font-size:.86rem;color:var(--muted);margin:0}

.note{border-left:3px solid var(--lime);background:rgba(214,250,8,.16);padding:16px 18px;border-radius:0 10px 10px 0;font-size:.88rem;color:var(--ink-2)}
.note strong{color:var(--ink)}

/* ---------- form masukan ---------- */
.masukan-form{max-width:560px}
.masukan-form .field{margin-bottom:16px}
.masukan-form label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px;font-weight:600}
.masukan-form input,.masukan-form select,.masukan-form textarea{
  width:100%;padding:11px 14px;border-radius:8px;border:1px solid var(--line-kuat);
  background:#fff;color:var(--ink);font-family:inherit;font-size:.92rem
}
.masukan-form input:focus,.masukan-form select:focus,.masukan-form textarea:focus{outline:2px solid var(--lime-deep);outline-offset:1px}
.masukan-form textarea{resize:vertical;min-height:110px}
.masukan-form .field-err{color:var(--danger);font-size:.8rem;margin-top:4px}
.masukan-form .hp{position:absolute;left:-9999px;opacity:0}
.alert-form{border-radius:10px;padding:14px 16px;font-size:.9rem;margin-bottom:20px}
.alert-form.ok{background:rgba(63,107,18,.10);border:1px solid rgba(63,107,18,.35);color:#2F5210}
.alert-form.err{background:rgba(196,52,43,.08);border:1px solid rgba(196,52,43,.35);color:#8E2018}

/* ---------- info / contact ---------- */
.info-grid{display:grid;gap:16px}
@media(min-width:620px){.info-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.info-grid{grid-template-columns:repeat(4,1fr)}}
.map-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-3)}
.map-wrap iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(.2) contrast(1.02)}
.social-list{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line-kuat);border-radius:999px;padding:7px 14px;font-size:.83rem;color:var(--ink)}
.chip:hover{border-color:var(--ink);background:var(--surface-3);text-decoration:none}

/* ---------- final CTA ---------- */
/* Satu-satunya blok gelap di halaman terang: penutup yang tegas,
   memakai kontras seperti pita hitam pada referensi. */
.final{text-align:center;background:var(--ink);border-top:0;border-bottom:0}
.final h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;font-size:clamp(1.9rem,6vw,3.4rem);color:#fff}
.final .lede{color:rgba(255,255,255,.82);margin-left:auto;margin-right:auto}
.final .eyebrow{color:var(--lime)}
.final .btn-row{justify-content:center}
.final .btn-gold{background:var(--lime);color:#000}
.final .btn-gold:hover{background:#E4FF4A}
.final .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.final .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.final .muted{color:rgba(255,255,255,.6)}

/* ---------- faq ---------- */
#faq details{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;margin-bottom:0}
#faq details:last-of-type{border-bottom:1px solid var(--line)}
#faq summary{cursor:pointer;padding:20px 4px;font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:12px}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"+";color:var(--lime-deep);font-size:1.3rem;line-height:1}
#faq details[open] summary::after{content:"\2212"}
#faq details p{padding:0 4px 20px;margin:0;font-size:.92rem;color:var(--ink-2)}

/* ---------- footer ---------- */
footer{padding:64px 0 34px;font-size:.85rem;color:var(--muted);background:var(--surface-2);border-top:1px solid var(--line)}
.foot-grid{display:grid;gap:26px;margin-bottom:28px}
@media(min-width:780px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
/* Judul kolom footer naik jadi H2 demi urutan heading yang benar.
   Tampilannya tetap kecil seperti semula, hanya tingkatnya yang berubah. */
footer h4,.foot-judul{color:var(--ink);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;font-family:var(--font-body);font-weight:700}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:7px}
footer a{color:var(--ink-2)}
.foot-bottom{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}

/* sticky mobile CTA */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;padding:10px 14px;background:rgba(255,255,255,.97);border-top:1px solid var(--line-kuat);backdrop-filter:blur(8px)}
.mobile-cta .btn{flex:1}
@media(min-width:900px){.mobile-cta{display:none}}
@media(max-width:899px){.public-page{padding-bottom:70px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* ---------- navigasi 8 section ---------- */
.nav-links{gap:18px;font-size:.82rem;white-space:nowrap}
@media(min-width:1100px){.nav-links{display:flex}.nav-cta{margin-left:20px}}
@media(max-width:1099px){.nav-links{display:none}}
.nav-scroll{display:flex;gap:8px;overflow-x:auto;padding:8px 20px 10px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-scroll a{flex:0 0 auto;font-size:.78rem;font-weight:600;color:var(--ink-2);border:1px solid var(--line-kuat);border-radius:999px;padding:6px 13px}
.nav-scroll a:hover{color:var(--ink);border-color:var(--ink);text-decoration:none}
@media(min-width:1100px){.nav-scroll{display:none}}

/* ---------- dropdown pilih lokasi ---------- */
.pilih{position:relative;display:inline-block}
.pilih-btn .caret{font-size:.7rem;transition:transform .15s ease}
.pilih.buka .pilih-btn .caret{transform:rotate(180deg)}
.pilih-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:70;min-width:260px;background:#fff;border:1px solid var(--line-kuat);border-radius:12px;padding:6px;box-shadow:0 14px 40px rgba(11,13,16,.16)}
.pilih.buka .pilih-menu{display:block}
.pilih-menu a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink-2);font-size:.86rem;line-height:1.35}
.pilih-menu a:hover{background:var(--surface-2);text-decoration:none}
.pilih-menu a strong{display:block;color:var(--ink);font-weight:600}
.pilih-menu a span{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
@media(max-width:520px){.pilih-menu{left:auto;right:0;min-width:min(88vw,300px)}}

/* ---------- halaman menu cafe ---------- */
.menu-grid{display:grid;gap:22px}
@media(min-width:760px){.menu-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.menu-grid{grid-template-columns:repeat(3,1fr)}}
.menu-kat{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:22px 20px}
.menu-kat h2{font-size:1.1rem;margin-bottom:14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.menu-sub{font-family:var(--font-body);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lime-deep);border:1px solid var(--line-kuat);border-radius:999px;padding:2px 10px}
.menu-kat ul{list-style:none;margin:0;padding:0}
.menu-kat li{display:flex;align-items:baseline;gap:8px;padding:7px 0;font-size:.9rem}
.menu-nama{color:var(--ink-2)}
.bintang{color:var(--lime-deep)}
.menu-titik{flex:1;border-bottom:1px dotted var(--line-kuat);transform:translateY(-3px)}
.menu-harga{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700;white-space:nowrap}
.menu-gambar{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-3)}
.menu-gambar img{width:100%;height:auto}

/* =====================================================================
   VIDEO
   ===================================================================== */

/* ---------- pemutar video biasa (klik dulu, baru diunduh) ---------- */
.video{margin:0}
.video-box{
  position:relative;aspect-ratio:var(--rasio,16/9);overflow:hidden;
  border-radius:var(--r);border:1px solid var(--line);background:var(--surface-3);
  cursor:pointer;
}
.video-poster,.video-el{width:100%;height:100%;object-fit:cover;display:block}
.video-el{background:#000}
.video-play{
  position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;
  border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--lime);color:#000;font-size:1.4rem;
  padding-left:4px;box-shadow:0 8px 26px rgba(0,0,0,.28);
  transition:transform .15s ease;
}
.video-box:hover .video-play{transform:scale(1.08)}
.video-play:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.video-durasi{
  position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.78);
  color:#fff;font-size:.74rem;font-weight:600;padding:3px 8px;border-radius:6px;
  font-variant-numeric:tabular-nums;
}
.video figcaption{margin-top:10px;font-size:.88rem}
.video figcaption strong{display:block;color:var(--ink);font-weight:600}
.video figcaption span{display:block;color:var(--muted);font-size:.83rem;margin-top:2px}

/* ---------- video latar hero ---------- */
.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-video-poster,.hero-video-el{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Video mulai tembus pandang, muncul perlahan setelah benar-benar berjalan.
   Tanpa ini akan terlihat kedipan hitam saat berpindah dari poster. */
.hero-video-el{opacity:0;transition:opacity .6s ease}
.hero-video-el.tampil{opacity:1}
/* Tabir gelap supaya teks di atasnya tetap terbaca */
.hero-video-tabir{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.82));
}
/* Isi hero harus di atas video */
.hero.punya-video .hero-grid{position:relative;z-index:1}

/* ---------- galeri video ---------- */
.video-grid{display:grid;gap:18px}
@media(min-width:700px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1050px){.video-grid{grid-template-columns:repeat(3,1fr)}}

/* Video di dalam kartu arena */
.sbu-card .video{margin-bottom:14px}

@media(prefers-reduced-motion:reduce){
  .hero-video-el{display:none}
  .video-box:hover .video-play{transform:none}
}

/* ---------- Daftar kontak arena (blok di bawah hero) ---------- */
.kontak-cepat{background:var(--surface);padding:72px 0 40px}
.hero-kontak{border:1px solid var(--line);border-radius:var(--r);background:var(--surface-3);padding:20px 18px}
.hk-judul{font-family:var(--font-head);font-size:.98rem;color:var(--ink);margin:0 0 14px;letter-spacing:.01em}
.hk-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hk-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:16px 0;border-top:1px solid var(--line)}
.hk-item:first-child{border-top:0}
.hk-nama{font-weight:600;color:var(--ink);font-size:1rem}
.hk-aksi{display:flex;gap:8px;flex-shrink:0}
.hk-aksi .btn{padding:7px 13px;font-size:.78rem}
@media(max-width:520px){
  .hk-item{flex-direction:column;align-items:stretch}
  .hk-aksi{display:grid;grid-template-columns:1fr 1fr}
  .hk-aksi .btn{text-align:center}
}

/* ---------- Panel "Details" di kartu arena ---------- */
.sbu-detail{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);overflow:hidden}
.sbu-detail>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;font-family:var(--font-head);font-size:.85rem;font-weight:600;color:var(--lime-deep)}
.sbu-detail>summary::-webkit-details-marker{display:none}
.sbu-detail>summary:hover{background:var(--surface-3)}
.sbu-detail>summary:focus-visible{outline:2px solid var(--lime-deep);outline-offset:-2px}
.sd-isi{padding:4px 14px 16px;border-top:1px solid var(--line)}
.sd-blok{padding-top:16px}
.sd-blok+.sd-blok{margin-top:4px;border-top:1px dashed var(--line-kuat)}
.sd-blok h4{font-family:var(--font-head);font-size:.9rem;color:var(--ink);margin:0 0 10px}
.sd-blok p{font-size:.87rem;margin:0 0 10px}
.sd-blok p:last-child{margin-bottom:0}
.sd-blok .svc-grid{grid-template-columns:1fr;gap:10px}
.sd-blok table{font-size:.82rem}
.sd-harga{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.sd-harga .price-card{padding:13px}
.sd-harga .amt{font-size:1.35rem}

/* Details ada di bawah tombol, jadi dia yang menempel ke dasar kartu. */
.sbu-card .sbu-detail{margin-top:14px}
.sbu-card .sbu-cta:has(+ .sbu-detail){margin-top:auto}

/* ---------- Foto gedung di bagian Dharmahusada ---------- */
.dh-foto{margin:0 0 6px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-3)}
.dh-foto img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.dh-foto figcaption{padding:10px 16px;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);background:#fff}

/* ---------- Panel fasilitas yang punya foto ---------- */
.panel-foto{padding:0;overflow:hidden;display:flex;flex-direction:column}
.panel-foto>img{display:block;width:100%;height:150px;object-fit:cover}
.panel-foto .pf-isi{padding:18px 20px 20px}

/* ---------- Ulasan pelanggan ---------- */
.ulasan-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.ulasan-kartu{margin:0;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:20px 18px;display:flex;flex-direction:column}
.ul-bintang{color:var(--lime-deep);letter-spacing:2px;font-size:.9rem;margin-bottom:10px}
.ul-bintang .mati{color:rgba(11,13,16,.18)}
.ulasan-kartu blockquote{margin:0 0 14px;font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.ulasan-kartu figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px;font-size:.85rem}
.ulasan-kartu figcaption b{color:var(--ink)}
.ulasan-kartu figcaption .muted{font-size:.8rem}

/* ---------- Navigasi bersama (partials/nav.blade.php) ---------- */
/* Tombol dropdown di bar nav tampil sebagai tautan biasa, bukan tombol,
   supaya sebaris rata dengan tautan di sebelahnya. */
.nav-pilih .pilih-btn{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:inherit;font-weight:600;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:5px
}
.nav-pilih .pilih-btn:hover{color:var(--lime-deep)}
.nav-pilih .pilih-btn:focus-visible{outline:2px solid var(--lime-deep);outline-offset:3px;border-radius:3px}
.nav-links a.aktif{color:var(--lime-deep)}
.nav-links a.aktif::after{
  content:"";display:block;height:2px;background:var(--lime-deep);
  border-radius:2px;margin-top:3px
}
.nav-scroll a.aktif{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Tautan staf di footer: ada kalau dicari, tidak menarik perhatian. */
.foot-tautan{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.foot-staf{color:var(--muted);opacity:.6;font-size:.78rem}
.foot-staf:hover{opacity:1;color:var(--ink-2)}

/* ---------- Band kategori utama di beranda ----------
   Beranda punya belasan section. Tanpa penanda tingkat atas, semua
   eyebrow terbaca sama penting dan pembaca kehilangan arah. Band ini
   yang menyebut kategori besarnya, eyebrow di dalamnya jadi sub-judul. */
.grup{
  border-top:2px solid var(--ink);
  padding:26px 0 0;margin:0;scroll-margin-top:74px
}
.grup .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.grup-nama{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.25rem,3vw,1.7rem);color:var(--ink);margin:0;line-height:1
}
.grup-isi{
  font-family:var(--font-head);font-size:.74rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0
}
/* Section pertama sesudah band menempel ke bandnya, bukan mengambang. */
.grup + section{padding-top:30px}

/* Eyebrow di dalam band turun pangkat jadi sub-kategori. */
.eyebrow.sub{
  color:var(--muted);font-size:.68rem;letter-spacing:.14em;
  display:flex;align-items:center;gap:8px
}
.eyebrow.sub::before{
  content:"";width:14px;height:2px;background:var(--lime-deep);
  border-radius:2px;flex:none
}

/* Hero berlatar gelap: tombol garis-luar memakai putih supaya terbaca,
   sama seperti perlakuan di section .final. Tanpa ini tombolnya hilang
   karena warna bawaannya ink di atas latar yang juga gelap. */
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.38)}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- Referensi Combo Mahjong (/mahjong/combo) ---------- */
.combo-kontrol{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;margin-bottom:14px}
.combo-filter{display:flex;flex-wrap:wrap;gap:10px}
.combo-chip{
  font-family:var(--font-head);font-weight:600;font-size:.8rem;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line-kuat);background:#fff;color:var(--ink-2);cursor:pointer;transition:.15s
}
.combo-chip:hover{border-color:var(--ink)}
.combo-chip.aktif{background:var(--ink);color:#fff;border-color:var(--ink)}
.combo-urut{
  font-family:var(--font-head);font-weight:600;font-size:.8rem;padding:8px 14px;border-radius:8px;
  border:1px solid var(--line-kuat);background:#fff;color:var(--ink-2);cursor:pointer;white-space:nowrap
}
.combo-urut:not(:disabled):hover{border-color:var(--ink)}
.combo-urut.aktif{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.combo-urut:disabled{opacity:.4;cursor:not-allowed}
.combo-ket-filter{margin:0 0 30px;font-size:.85rem}

.combo-kategori{margin-bottom:36px}
.combo-kategori-judul{font-size:1.05rem;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.combo-tabel{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}
.combo-tabel thead th{
  text-align:left;padding:9px 14px;border-bottom:1px solid var(--line-kuat);
  font-family:var(--font-head);font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)
}
.combo-tabel tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.combo-tabel tbody tr:last-child td{border-bottom:0}
.combo-tabel tbody tr:hover{background:var(--surface-2)}
.combo-tabel b{color:var(--ink);font-family:var(--font-head);font-size:.92rem}
.combo-ket{display:block;color:var(--muted);font-size:.8rem;line-height:1.5;margin-top:2px;max-width:46ch}
.combo-contoh{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-top:9px}
.combo-grup{display:flex;gap:1px;background:var(--surface-3);border-radius:6px;padding:3px}
.combo-ubin{width:19px;height:25px;flex:none;border-radius:3px;overflow:hidden;box-shadow:0 1px 2px rgba(11,13,16,.18)}
.combo-pisah{width:6px;flex:none}
.combo-nilai{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
.combo-nilai small{color:var(--muted);font-size:.72rem;margin-left:3px}
.combo-strip{color:var(--line-kuat)}
.combo-kosong{text-align:center;padding:40px 0}

.combo-situ-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:24px}
.combo-situ-kartu{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.combo-situ-kartu h3{font-size:.98rem;margin-bottom:10px}
.combo-situ-kartu ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.combo-situ-kartu li{font-size:.86rem;color:var(--ink-2);line-height:1.5}

/* ---------- Halaman Mahjong (/mahjong) ---------- */
/* Foto asli meja mahjong Zuper sebagai latar hero, dengan gradasi gelap
   yang sama seperti hero beranda supaya judul putih tetap terbaca di
   atas foto ramai. */
.hero-mahjong{position:relative;overflow:hidden;background:var(--ink)}
.hero-mahjong-foto{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,rgba(8,10,14,.55) 0%,rgba(8,10,14,.45) 45%,rgba(8,10,14,.85) 100%),
    image-set(url('/img/arena/mahjong-hero-1600.webp') 1x, url('/img/arena/mahjong-hero-2400.webp') 2x) center/cover no-repeat;
}
.hero-mahjong > .wrap{position:relative;z-index:1}
/* h1/.lede sudah diputihkan oleh aturan umum .hero di atas; eyebrow
   belum ada versi gelapnya, jadi ditimpa di sini saja. */
.hero-mahjong .eyebrow{color:var(--lime)}
.mj-podium{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.mj-pod{
  display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:18px 20px
}
.mj-pod.juara{border-color:var(--lime-deep);background:#FBFEE8}
.mj-pos{
  font-family:var(--font-head);font-weight:800;font-size:.78rem;color:var(--lime-deep);
  letter-spacing:.1em
}
.mj-nama{font-family:var(--font-head);font-weight:700;font-size:1.12rem;color:var(--ink)}
.mj-skor{
  font-family:var(--font-display);font-size:1.9rem;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums
}
.mj-pod.juara .mj-skor{font-size:2.3rem}
.mj-main{font-size:.82rem;color:var(--muted)}

.mj-tabel{width:100%;border-collapse:collapse;font-size:.9rem;min-width:420px}
.mj-tabel th{
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--line-kuat);
  font-family:var(--font-head);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)
}
.mj-tabel td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.mj-tabel tr:last-child td{border-bottom:0}

/* ---------- Artikel (daftar + detail) ---------- */
.artikel-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:24px}
.artikel-kartu{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.artikel-kartu:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(11,13,16,.1);text-decoration:none}
.artikel-kartu-foto{aspect-ratio:16/10;overflow:hidden;background:var(--surface-3)}
.artikel-kartu-foto img{width:100%;height:100%;object-fit:cover}
.artikel-kartu-isi{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px}
.artikel-kartu-isi h2{font-size:1.05rem;margin:0}
.artikel-kartu-isi p{margin:0;font-size:.88rem;color:var(--ink-2)}

.artikel-sampul{width:100%;border-radius:var(--r);margin-bottom:28px;aspect-ratio:16/9;object-fit:cover}
.artikel-isi h2{font-size:1.4rem;margin-top:1.6em}
.artikel-isi h3{font-size:1.18rem;margin-top:1.4em}
.artikel-isi h4{font-size:1.02rem;margin-top:1.2em}
.artikel-isi p{color:var(--ink-2);line-height:1.75}
.artikel-gambar{margin:26px 0}
.artikel-gambar img{width:100%;border-radius:var(--r)}
.artikel-link{margin:24px 0}

/* ---------- Video YouTube di bagian Tentang ---------- */
.tentang-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.yt{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-3)}
.yt-tombol{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;aspect-ratio:16/9;position:relative}
.yt-tombol img{width:100%;height:100%;object-fit:cover;display:block}
/* Hanya sampul cadangan (hqdefault) yang punya bilah hitam di atas dan
   bawah. Gambarnya diperbesar lalu dipangkas supaya bingkainya penuh. */
.yt-tombol img.yt-hq{transform:scale(1.35)}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:var(--gold);color:#000;display:grid;place-items:center;font-size:1.4rem;padding-left:4px;transition:transform .18s ease}
.yt-tombol:hover .yt-play{transform:translate(-50%,-50%) scale(1.08)}
.yt-tombol:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.yt iframe{display:block;width:100%;aspect-ratio:16/9;border:0}

@media(max-width:860px){
  .tentang-grid{grid-template-columns:1fr;gap:26px}
}
@media(prefers-reduced-motion:reduce){
  .yt-play,.yt-tombol:hover .yt-play{transition:none}
}

/* ---------- Bagian Zuper Club Dharmahusada ----------
   Gedung pusat dibingkai jadi satu blok bergaris emas supaya pembaca
   tahu isinya membicarakan satu tempat yang sama. Garis vertikal di kiri
   menyambung dari sub-bagian pertama sampai terakhir. */
.dh{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dh-head{max-width:70ch;margin-bottom:8px}
.dh-head h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.98;font-size:clamp(1.8rem,5.5vw,3.2rem)}
.dh-alamat{margin-top:10px;font-size:.88rem;color:var(--lime-deep);font-weight:600}

/* Nav masih menaut ke #fasilitas dan #lokasi yang kini berupa div, jadi
   jarak sundulan header perlu ditulis ulang di sini. */
.dh-blok{position:relative;padding:30px 0 0 22px;margin-top:22px;border-left:2px solid var(--line-kuat);scroll-margin-top:74px}
.dh-blok:last-child{padding-bottom:4px}
/* Titik penanda di pangkal tiap sub-bagian. */
.dh-blok::before{content:"";position:absolute;left:-6px;top:34px;width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px var(--surface-2)}
.dh-sub{font-family:var(--font-head);font-size:1.12rem;color:var(--ink);margin:0 0 18px}
.dh-cta .lede{margin-bottom:20px}

@media(max-width:640px){
  .dh-blok{padding-left:16px;margin-top:16px}
  .dh-blok::before{left:-5px;width:8px;height:8px}
}

/* ---------- Pendaftaran Mabar Mahjong (/mahjong/mabar) ---------- */
.mabar-hero{padding:56px 0 52px}
.mabar-hero-grid{display:grid;gap:34px;align-items:center}
@media(min-width:900px){.mabar-hero-grid{grid-template-columns:1.15fr .85fr;gap:48px}}
.mabar-hero h1{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.02em;line-height:.95;font-size:clamp(2.1rem,6.5vw,3.6rem);margin:0 0 16px}
.mabar-tanggal{
  display:inline-flex;flex-direction:column;gap:2px;margin-top:6px;padding:14px 18px;
  border-radius:10px;background:rgba(214,250,8,.12);border:1px solid rgba(214,250,8,.45)
}
.mabar-tanggal-lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);font-weight:700}
.mabar-tanggal strong{font-family:var(--font-head);font-size:clamp(1.15rem,3.6vw,1.45rem);color:#fff}
.mabar-tanggal-sub{font-size:.82rem;color:rgba(255,255,255,.75)}
.mabar-poster{margin:0 auto;max-width:360px;width:100%;transform:rotate(1.5deg)}
.mabar-poster img{width:100%;height:auto;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12)}
@media(min-width:900px){.mabar-poster{max-width:420px;margin-right:0}}

.mabar-info-sec{padding:40px 0 48px}
.mabar-info{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:800px){.mabar-info{grid-template-columns:repeat(4,1fr)}}
.mabar-info-item{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-3)}
.mabar-info-item .lbl{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-deep);font-weight:700}
.mabar-info-item b{font-family:var(--font-head);color:var(--ink);font-size:1rem;line-height:1.3}
.mabar-info-item .sub{font-size:.8rem;color:var(--muted)}

/* Seksi form: foto meja mahjong yang sama dengan hero, ditutup lebih gelap
   supaya kartu form putih jadi titik fokus. */
.mabar-daftar{position:relative;overflow:hidden;background:var(--ink);padding:72px 0}
.mabar-daftar-foto{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,rgba(8,10,14,.88),rgba(8,10,14,.78) 50%,rgba(8,10,14,.92)),
    url('/img/arena/mahjong-hero-1600.webp') center/cover no-repeat;
}
.mabar-daftar > .wrap{position:relative;z-index:1}
.mabar-daftar-grid{display:grid;gap:32px;align-items:start}
@media(min-width:900px){.mabar-daftar-grid{grid-template-columns:1fr 1fr;gap:48px}}
.mabar-langkah .eyebrow{color:var(--lime)}
.mabar-langkah h2{color:#fff}
.mabar-langkah ol{list-style:none;counter-reset:l;padding:0;margin:22px 0 26px;display:grid;gap:16px}
.mabar-langkah li{counter-increment:l;display:grid;grid-template-columns:36px 1fr;column-gap:14px;color:rgba(255,255,255,.75);font-size:.9rem}
.mabar-langkah li::before{
  content:counter(l);grid-row:span 2;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--lime);color:#000;font-family:var(--font-head);font-weight:800
}
.mabar-langkah li b{color:#fff;font-family:var(--font-head);font-size:.98rem}
.mabar-rek{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.mabar-rek .lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);font-weight:700}
.mabar-rek-baris{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mabar-rek strong{font-family:var(--font-display);font-size:clamp(1.5rem,5vw,1.9rem);color:#fff;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.mabar-rek .sub{font-size:.88rem;color:rgba(255,255,255,.8)}

.mabar-kartu{background:#fff;border-radius:16px;padding:26px 22px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
@media(min-width:600px){.mabar-kartu{padding:32px 30px}}
.mabar-kartu h3{font-size:1.3rem;margin-bottom:4px}
.mabar-form{max-width:none}
.mabar-unggah{
  position:relative;display:flex !important;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:22px 16px;border:2px dashed var(--line-kuat);border-radius:12px;background:var(--surface-2);
  cursor:pointer;transition:border-color .15s,background .15s;margin:0 !important
}
.mabar-unggah:hover{border-color:var(--lime-deep)}
.mabar-unggah.terisi{border-style:solid;border-color:var(--ok);background:rgba(63,107,18,.06)}
.mabar-unggah input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0;border:0}
.mabar-unggah-ikon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--lime);font-weight:800}
.mabar-unggah-teks{color:var(--ink);font-weight:600;font-size:.92rem;word-break:break-all}
.mabar-unggah-sub{font-size:.78rem;color:var(--muted);font-weight:400}
.mabar-kirim{width:100%;padding:15px 20px;font-size:.95rem}

.mabar-sukses{padding:64px 0 80px}
.mabar-sukses-kartu{max-width:560px;margin:0 auto;text-align:center}
.mabar-sukses-kartu h1{font-size:clamp(1.6rem,5vw,2.1rem)}
.mabar-centang{
  display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:50%;
  background:var(--lime);color:#000;font-size:1.6rem;font-weight:800
}
.mabar-grup{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px;padding:20px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.mabar-grup b{font-family:var(--font-head);color:var(--ink)}
.mabar-grup > span:not(.muted){font-size:.88rem;color:var(--ink-2)}
.mabar-grup .btn{margin:6px 0 2px;width:100%;max-width:320px;background:#1F8F4E}
.mabar-grup .btn:hover{background:#18763F}

/* ---------- Harga sewa lapangan (panel Details arena) ---------- */
.hl-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.hl-kartu .kv span{white-space:nowrap}
.hl-kartu{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:#fff}
.hl-nama{font-family:var(--font-head);font-weight:700;color:var(--ink);margin:0 0 6px}
.hl-hari{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lime-deep);font-weight:700;margin:10px 0 2px}
.hl-hari:first-of-type{margin-top:0}
.hl-kartu .kv b{font-variant-numeric:tabular-nums}
.hl-kartu .kv small{font-size:.75em;font-weight:500;color:var(--muted);margin-left:2px}

.mj-mabar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;border-left:3px solid var(--lime)}
.mj-mabar h3{margin-bottom:4px}