/* BEGADUH — "Arena" skin (SITUS PUBLIK saja).
 *
 * Kenapa ada berkas ini:
 * bgd-theme.css adalah turunan langsung tema PSPS — kerangkanya tetap "klub sepak
 * bola": halaman terang, kartu putih membulat, bayangan lembut. Dulu yang diganti
 * hanya WARNANYA (biru -> merah), jadi hasilnya PSPS berbaju merah. Untuk sport
 * entertainment tinju/muay thai, bahasa visualnya harus lain sama sekali:
 *
 *   gelap total  ·  sudut tajam  ·  nol bayangan  ·  garis rambut sebagai pembatas
 *   poster edge-to-edge  ·  tipografi condensed raksasa  ·  aksen merah/emas
 *
 * Semua aturan di sini dikurung `body.bgd-arena` — dimuat HANYA oleh AppAsset,
 * sehingga panel admin (yang butuh tampilan terang & padat data) tak tersentuh.
 */

body.bgd-arena {
  --arena-bg:      #0a0a0b;   /* hitam pekat, bukan abu terang */
  --arena-bg-2:    #101012;   /* selang-seling band */
  --arena-panel:   #141416;   /* "kartu" — nyaris tak terlihat, hanya sedikit naik */
  --arena-line:    rgba(255,255,255,.12);   /* garis rambut, pengganti bayangan */
  --arena-line-2:  rgba(255,255,255,.06);
  --arena-ink:     #f2f0ee;
  --arena-ink-dim: rgba(242,240,238,.62);
  --arena-red:     var(--royal-500);
  --arena-gold:    var(--gold-500);

  background: var(--arena-bg);
  color: var(--arena-ink);
}

/* ── 1. Sudut tajam & nol bayangan ─────────────────────────────────────
   Ini satu perubahan yang paling mengubah "rasa": Bootstrap membulatkan dan
   membayangi hampir segalanya, dan itulah yang membuat situs terasa lembut/korporat. */
body.bgd-arena :where(.card, .btn, .badge, .form-control, .form-select, .alert,
                      .nav-link, .dropdown-menu, .list-group-item, .page-link,
                      .input-group-text, img, .modal-content, .accordion-item,
                      .bgd-card-hover, .bgd-event-row, .bgd-fighter-tile) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── 2. Bidang terang milik PSPS dipadamkan ───────────────────────────
   Banyak view memakai .bg-light/.bg-white/.card bawaan; tanpa ini akan muncul
   kotak-kotak putih di tengah halaman hitam. */
body.bgd-arena :where(.bg-light, .bg-white, .bgd-section-soft, .bgd-sec--soft) {
  background: var(--arena-bg-2) !important;
  color: var(--arena-ink);
}
body.bgd-arena .card {
  background: var(--arena-panel);
  border: 1px solid var(--arena-line-2);
  color: var(--arena-ink);
}
body.bgd-arena .card-body { color: var(--arena-ink); }
body.bgd-arena :where(.text-muted, .text-muted-2, .text-secondary) { color: var(--arena-ink-dim) !important; }
body.bgd-arena :where(.text-dark, .text-black) { color: var(--arena-ink) !important; }
body.bgd-arena hr { border-color: var(--arena-line); opacity: 1; }

/* Band selang-seling: pemisah bagian pakai perubahan value tipis + garis rambut,
   bukan kartu melayang. */
body.bgd-arena .bgd-sec { background: var(--arena-bg); border-top: 1px solid var(--arena-line-2); }
body.bgd-arena .bgd-sec:nth-of-type(even) { background: var(--arena-bg-2); }

/* ── 3. Tipografi: besar, condensed, huruf besar, rapat ───────────────
   K-1 memakai skala tipografi yang ekstrem — judul raksasa, isi kecil. Itu yang
   memberi rasa "poster", bukan "artikel". */
body.bgd-arena :where(h1, h2, h3, h4, h5, h6) { color: var(--arena-ink); }
body.bgd-arena :where(h1, h2, .bgd-section-title, .bgd-hero h1, .display-1, .display-2, .display-3) {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -.005em;
  line-height: .92;
}
.arena-hero__title { color: #fff; }
body.bgd-arena .bgd-section-title {
  color: var(--arena-ink);
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  margin-bottom: .15em;
}
body.bgd-arena .bgd-section-title::after { display: none; }   /* garis bawah dekoratif dibuang */

body.bgd-arena .bgd-kicker {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--arena-red);
}

/* Judul bagian: kicker kecil + judul raksasa + garis rambut penuh lebar. */
body.bgd-arena .bgd-sec-head {
  border-bottom: 1px solid var(--arena-line);
  padding-bottom: .8rem;
  margin-bottom: 2rem;
}

/* ── 4. Tombol: kotak, tebal, huruf besar ────────────────────────────── */
body.bgd-arena .btn {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .1em;
  font-size: .8rem;
  padding: .85rem 1.6rem;
  border-width: 1px;
  transition: background var(--motion-fast), color var(--motion-fast);
}
body.bgd-arena .bgd-btn-gold {
  background: var(--arena-gold);
  color: #0a0a0b;
  border-color: var(--arena-gold);
}
body.bgd-arena .bgd-btn-gold:hover { background: #fff; border-color: #fff; color: #0a0a0b; }

body.bgd-arena :where(.btn-primary) {
  background: var(--arena-red);
  border-color: var(--arena-red);
  color: #fff;
}
body.bgd-arena :where(.btn-primary:hover) { background: #fff; border-color: #fff; color: #0a0a0b; }

body.bgd-arena :where(.btn-outline-primary, .btn-outline-secondary, .btn-outline-light, .btn-light) {
  background: transparent;
  border-color: var(--arena-line);
  color: var(--arena-ink);
}
body.bgd-arena :where(.btn-outline-primary:hover, .btn-outline-secondary:hover,
                      .btn-outline-light:hover, .btn-light:hover) {
  background: #fff; border-color: #fff; color: #0a0a0b;
}

/* ── 5. Navigasi: tipis, huruf besar, garis rambut ───────────────────── */
body.bgd-arena .bgd-navbar {
  background: rgba(10,10,11,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--arena-line-2);
}
body.bgd-arena .bgd-navbar .nav-link {
  text-transform: uppercase;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--arena-ink-dim);
}
body.bgd-arena .bgd-navbar .nav-link:hover,
body.bgd-arena .bgd-navbar .nav-link.active { color: #fff; }
body.bgd-arena .dropdown-menu {
  background: #101012;
  border: 1px solid var(--arena-line);
}
body.bgd-arena .dropdown-item { color: var(--arena-ink-dim); }
body.bgd-arena .dropdown-item:hover { background: var(--arena-red); color: #fff; }

/* ── 6. POSTER: pola inti K-1 — gambar edge-to-edge, teks di ATAS gambar ──
   Bukan "kartu berisi gambar lalu keterangan di bawahnya", melainkan gambar penuh
   yang teksnya duduk di atasnya. Inilah yang membuatnya terasa seperti poster
   pertandingan, bukan daftar produk. */
.arena-poster {
  position: relative;
  display: block;
  overflow: hidden;
  background: #000;
  text-decoration: none;
  color: #fff;
  border: 1px solid var(--arena-line-2);
}
.arena-poster > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.85) contrast(1.05);
  transition: transform 600ms var(--ease-standard), filter 400ms;
}
.arena-poster:hover > img { transform: scale(1.05); filter: saturate(1) contrast(1.1); }

/* Gelap di bawah supaya teks selalu terbaca, apa pun fotonya. */
.arena-poster::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,6,7,.95) 0%, rgba(6,6,7,.55) 38%, rgba(6,6,7,0) 72%);
}
.arena-poster__body {
  position: absolute; inset: auto 0 0 0;
  z-index: 2;
  padding: 1.6rem 1.5rem 1.4rem;
}
.arena-poster__date {
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--arena-gold);
  margin-bottom: .45rem;
}
.arena-poster__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.01em;
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  margin: 0 0 .35rem;
}
.arena-poster__meta {
  font-size: .78rem;
  color: rgba(255,255,255,.66);
}
.arena-poster--tall  { aspect-ratio: 3 / 4; }
.arena-poster--wide  { aspect-ratio: 16 / 9; }
.arena-poster--square{ aspect-ratio: 1 / 1; }

/* Kartu poster untuk DAFTAR event: poster utuh di atas, keterangan di bawah.
 * Keterangan sengaja TIDAK ditimpakan ke gambar — poster fight night selalu sudah
 * memuat judul & tanggal di dalamnya, jadi menimpanya lagi = tabrakan teks. */
.arena-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--arena-bg-2);
  border: 1px solid var(--arena-line-2);
  height: 100%;
  transition: border-color var(--motion-fast);
}
.arena-card:hover { border-color: var(--arena-red); color: inherit; }
.arena-card__img {
  display: block; width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #000;
}
.arena-card__body { padding: 1.15rem 1.15rem 1.3rem; }
.arena-card__date {
  font-size: .66rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--arena-gold);
  margin-bottom: .4rem;
}
.arena-card__title {
  font-family: var(--font-display);
  text-transform: uppercase; font-weight: 800;
  font-size: 1.32rem; line-height: 1; letter-spacing: -.005em;
  color: var(--arena-ink);
  margin-bottom: .45rem;
}
.arena-card__meta { font-size: .78rem; color: var(--arena-ink-dim); }

/* Galeri: beri garis rambut supaya keramik gelap tetap terbaca sebagai ubin. */
body.bgd-arena .bgd-gallery-tile { border: 1px solid var(--arena-line-2); background: #000; }

/* Nomor raksasa di sudut — penanda urutan kartu pertandingan. */
.arena-num {
  position: absolute; top: -.15em; right: .3rem; z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: 1;
  color: rgba(255,255,255,.07);
  pointer-events: none;
}

/* ── 7. Hero event: poster DITAMPILKAN sebagai poster, bukan sebagai latar ──
 *
 * Penting: poster fight night SELALU sudah memuat teks (judul, VS, tanggal) —
 * poster asli dari penyelenggara pun begitu. Kalau dipakai sebagai latar lalu
 * ditimpa judul lagi, keduanya bertabrakan dan tak terbaca.
 *
 * Jadi: judul besar di kiri, poster utuh & tajam di kanan. Latarnya memakai
 * poster yang sama tapi di-blur dan digelapkan habis — hanya untuk mengambil
 * warna/atmosfernya, tak ada teks yang tersisa untuk dibaca.
 */
body.bgd-arena .bgd-hero { background: #000; }
.arena-hero {
  position: relative;
  display: flex; align-items: center;
  background: #000;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 6rem) 0;
}
.arena-hero__bg {
  position: absolute; inset: -10%;
  background-size: cover; background-position: center;
  filter: blur(48px) saturate(.7) brightness(.32);
  transform: scale(1.15);
}
.arena-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,6,7,.94) 0%, rgba(6,6,7,.78) 45%, rgba(6,6,7,.55) 100%);
}
.arena-hero__body { position: relative; z-index: 2; width: 100%; }

/* Blok "Fight Night Berikutnya" di beranda memakai poster sebagai latar juga —
   alasan yang sama: buramkan habis, biarkan poster aslinya tampil utuh di kanan. */
body.bgd-arena .bgd-next-event { background: #000; }
body.bgd-arena .ne-bg { filter: blur(48px) saturate(.7) brightness(.3); transform: scale(1.15); }
body.bgd-arena .ne-veil { background: linear-gradient(90deg, rgba(6,6,7,.94), rgba(6,6,7,.6)); }
body.bgd-arena .ne-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  line-height: .9;
  color: #fff;
  font-size: clamp(2.2rem, 5.5vw, 4.6rem);
}

/* Poster: potret, tajam, sedikit dinaungi — dibiarkan bicara sendiri. */
.arena-hero__poster {
  display: block; width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--arena-line);
  background: #000;
}

/* Judul bagian: kembalikan ke blok. bgd-sec-head bawaan tema PSPS memakai flex
   space-between, sehingga kicker terlempar ke kiri dan judul ke kanan. */
body.bgd-arena .bgd-sec-head { display: block; }
.arena-hero__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.015em;
  font-size: clamp(2.6rem, 8.5vw, 7rem);
  margin: .2em 0 .35em;
}

/* Hitung mundur: angka besar, pemisah garis rambut — bukan kartu. */
.arena-count { display: flex; gap: 0; border: 1px solid var(--arena-line); width: max-content; }
.arena-count > div {
  padding: .7rem 1.15rem;
  text-align: center;
  border-right: 1px solid var(--arena-line);
}
.arena-count > div:last-child { border-right: 0; }
.arena-count b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem; font-weight: 800; line-height: 1;
}
.arena-count span {
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--arena-ink-dim);
}

/* ── 8. Baris data (fight card, harga tiket): garis rambut, bukan kartu ── */
.arena-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--arena-line-2);
}
.arena-row:first-child { border-top: 1px solid var(--arena-line-2); }

/* ── 9. Form di atas hitam tetap terbaca ─────────────────────────────── */
body.bgd-arena :where(.form-control, .form-select, .input-group-text) {
  background: #141416;
  border: 1px solid var(--arena-line);
  color: var(--arena-ink);
}
body.bgd-arena :where(.form-control:focus, .form-select:focus) {
  background: #1a1a1d;
  border-color: var(--arena-red);
  color: #fff;
  box-shadow: none !important;
}
body.bgd-arena .form-control::placeholder { color: rgba(255,255,255,.32); }
body.bgd-arena .form-label { color: var(--arena-ink-dim); font-size: .8rem; }

/* Tab/pill: aktifnya BIRU bawaan Bootstrap — biru itu warna PSPS, bukan kita.
   Disetel lewat variabel Bootstrap-nya, bukan lewat selector: `:where()` punya
   spesifisitas NOL, jadi aturan `.nav-pills .nav-link.active` bawaan selalu menang. */
body.bgd-arena {
  --bs-nav-pills-link-active-bg: var(--arena-red);
  --bs-nav-pills-link-active-color: #fff;
}
body.bgd-arena .nav-pills .nav-link.active,
body.bgd-arena .nav-tabs .nav-link.active {
  background: var(--arena-red);
  border-color: var(--arena-red);
  color: #fff;
}
body.bgd-arena .nav-tabs { border-bottom-color: var(--arena-line); }
body.bgd-arena .nav-tabs .nav-link { color: var(--arena-ink-dim); border-color: transparent; }

/* Tombol pilih berkas bawaan browser tampil putih terang di atas hitam. */
body.bgd-arena .form-control::file-selector-button {
  background: #26262a;
  color: var(--arena-ink);
  border: 0;
  border-right: 1px solid var(--arena-line);
}

/* ── 10. Tabel & daftar ──────────────────────────────────────────────── */
body.bgd-arena .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--arena-ink);
  --bs-table-border-color: var(--arena-line-2);
  --bs-table-hover-bg: rgba(255,255,255,.04);
  --bs-table-hover-color: var(--arena-ink);
}
body.bgd-arena .table > thead th {
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--arena-ink-dim);
  border-bottom-color: var(--arena-line);
  font-weight: 700;
}
body.bgd-arena :where(.list-group-item, .accordion-item, .accordion-button) {
  background: var(--arena-panel);
  border-color: var(--arena-line-2);
  color: var(--arena-ink);
}
body.bgd-arena .accordion-button:not(.collapsed) { background: #1a1a1d; color: #fff; }

/* ── 11. Footer: garis rambut, bukan blok warna ──────────────────────── */
body.bgd-arena footer { background: #060607 !important; border-top: 1px solid var(--arena-line-2); }

/* ── 12. Aksen: garis merah tipis sebagai penanda, dipakai hemat ──────── */
.arena-rule {
  width: 56px; height: 3px;
  background: var(--arena-red);
  margin-bottom: 1rem;
}

/* ── 13. Bout: satu baris selebar layar, bukan kartu ──────────────────
   Nama petarung adalah bintangnya — jadi dialah yang besar. Metadata (kelas berat,
   ronde) mengecil jadi teks pendukung. Nomor raksasa menandai urutan fight card. */
.arena-bout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.9rem 1.25rem;
  border-bottom: 1px solid var(--arena-line-2);
  transition: background var(--motion-fast);
}
.arena-bout:first-of-type { border-top: 1px solid var(--arena-line-2); }
.arena-bout:hover { background: rgba(255,255,255,.03); }
.arena-bout--main { background: rgba(226,59,46,.06); }

.arena-bout__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(1.05rem, 2.1vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: -.005em;
}
.arena-bout__name--red  { text-align: right; }
.arena-bout__name--blue { text-align: left; }
.arena-bout__vs {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--arena-gold);
  padding: 0 .6rem;
}
.arena-bout__meta {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; flex-wrap: wrap;
  margin-bottom: .9rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arena-ink-dim);
}
.arena-tag {
  display: inline-block;
  padding: .22rem .55rem;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--arena-line);
  color: var(--arena-ink-dim);
}
.arena-tag--main  { background: var(--arena-red); border-color: var(--arena-red); color: #fff; }
.arena-tag--title { background: var(--arena-gold); border-color: var(--arena-gold); color: #0a0a0b; }

/* ── 14. Baris tiket: harga yang besar, bukan kotak-kotak kecil ──────── */
.arena-tier {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1.5rem .25rem;
  border-bottom: 1px solid var(--arena-line-2);
}
.arena-tier:first-of-type { border-top: 1px solid var(--arena-line-2); }
.arena-tier__name {
  font-family: var(--font-display);
  text-transform: uppercase; font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1;
}
.arena-tier__left { min-width: 220px; }
.arena-tier__stock { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--arena-ink-dim); }
.arena-tier__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.arena-tier--out { opacity: .42; }
.arena-tier--out .arena-tier__price { text-decoration: line-through; }

/* ── 15. Meta hero: satu baris, dipisah garis, bukan ikon-ikon kecil ─── */
.arena-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.arena-meta > span { padding: 0 1rem; border-right: 1px solid var(--arena-line); }
.arena-meta > span:first-child { padding-left: 0; }
.arena-meta > span:last-child { border-right: 0; }

/* ── 17. Baris event (jadwal): poster tegak di kiri, teks di kanan ─────
   Sebelumnya ini kartu PUTIH — satu-satunya bidang terang di halaman hitam. */
body.bgd-arena .bgd-event-row {
  background: var(--arena-bg-2);
  border: 1px solid var(--arena-line-2);
  grid-template-columns: minmax(0, 260px) 1fr;
}
body.bgd-arena .bgd-event-row .er-poster { min-height: 320px; }
body.bgd-arena .bgd-event-row .er-title {
  font-family: var(--font-display);
  text-transform: uppercase; font-weight: 800;
  color: var(--arena-ink);
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  line-height: .95;
}
body.bgd-arena .bgd-event-row .er-date { background: var(--arena-red); color: #fff; }

/* ── 18. Petarung: potret penuh, nama menimpa foto ─────────────────────
   Petarung adalah wajah dari produk ini — jangan dikecilkan jadi kartu mungil. */
body.bgd-arena .bgd-fighter-tile {
  background: #000;
  border: 1px solid var(--arena-line-2);
}
body.bgd-arena .bgd-fighter-tile:hover { transform: none; border-color: var(--arena-red); }
body.bgd-arena .bgd-fighter-tile img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

/* ── 19. Berita unggulan: gelapkan bawah supaya judul selalu terbaca ─── */
body.bgd-arena .bgd-feature-news .fn-overlay {
  background: linear-gradient(to top, rgba(6,6,7,.96) 8%, rgba(6,6,7,.35) 55%, rgba(6,6,7,0) 85%);
}
body.bgd-arena .bgd-feature-news .fn-title {
  text-transform: uppercase;
  line-height: .98;
}

/* ── 16. Blok teks panjang (aturan, FAQ): kolom terbaca, tanpa kartu ─── */
.arena-prose {
  border-left: 2px solid var(--arena-line);
  padding-left: 1.4rem;
  color: var(--arena-ink-dim);
  max-width: 70ch;
  line-height: 1.85;
}