/* ============================================================
   LIVEMANIA — Design System
   ------------------------------------------------------------
   Bahasa visual diturunkan dari analisis referensi (portal live
   score modern): permukaan terang & lapang, kartu putih dengan
   border tipis, tipografi padat untuk angka skor, aksen kuning
   keemasan untuk elemen kompetitif, hijau untuk status langsung.
   Ditulis dari nol — tidak ada satupun kelas dari aplikasi lama.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
/*
   Palet gelap. Permukaan dinaikkan bertahap (canvas -> surface ->
   surface-alt) supaya kedalaman terbaca lewat perbedaan terang, bukan
   lewat bayangan — bayangan nyaris tak terlihat di latar gelap.
   Teks memakai tiga tingkat kontras agar hierarki tetap jelas tanpa
   perlu menaikkan ukuran huruf.
*/
:root {
  color-scheme: dark;

  /* Warna dasar */
  --c-canvas: #0b0b12;
  --c-surface: #14141d;
  --c-surface-alt: #1c1c28;
  --c-ink: #f2f4f8;
  --c-ink-soft: #a9b0c0;
  --c-ink-mute: #6e768a;
  --c-line: #262636;
  --c-line-strong: #343548;

  /* Warna merek & status */
  --c-brand: #ffba00;
  --c-brand-deep: #edad00;
  --c-brand-ink: #241900;
  --c-night: #14141d;
  --c-night-soft: #1c1c28;
  --c-live: #35d07f;
  --c-live-soft: rgba(53, 208, 127, .14);
  --c-alert: #f2585b;
  --c-info: #5b9dff;

  /*
   | Alas terang untuk gambar milik pihak lain — logo kompetisi, lambang
   | klub. Warnanya tidak bisa dikendalikan dari sini, dan banyak yang
   | gelap pekat karena diterbitkan untuk dicetak di atas kertas putih.
   | Sedikit di bawah putih murni supaya tidak menyilaukan pada tema gelap.
   */
  --c-plate: #eef1f6;

  /* Bentuk & bayangan */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .5);

  /* Ritme spasi (skala 4px) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* Tipografi */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Barlow Condensed", "Inter", sans-serif;

  /* Layout */
  --shell-max: 1180px;
  --header-h: 60px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  padding-bottom: 68px; /* ruang untuk tab bar mobile */
  /* Jaring pengaman: elemen yang tanpa sengaja melebihi lebar layar
     dipotong, bukan memunculkan geser horizontal. `clip` dipakai
     (bukan `hidden`) agar position: sticky pada header tetap bekerja. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }

:focus-visible { outline: 2px solid var(--c-info); outline-offset: 2px; }

/* ---------- 3. Primitif layout ---------- */
.shell { max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--s-4); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-8); }

.row { display: flex; align-items: center; gap: var(--s-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }

.split {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.scroll-x::-webkit-scrollbar { height: 6px; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--c-line-strong); border-radius: var(--r-pill); }

/* ---------- 4. Tipografi utilitas ---------- */
.t-display { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; }
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.t-soft { color: var(--c-ink-soft); }
.t-mute { color: var(--c-ink-mute); }
.t-sm { font-size: 12.5px; }
.t-xs { font-size: 11.5px; }
.t-up { text-transform: uppercase; letter-spacing: .06em; }

.page-head { padding: var(--s-6) 0 var(--s-2); }
.page-head h1 { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; }
.page-head p { margin: var(--s-2) 0 0; color: var(--c-ink-soft); max-width: 68ch; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.section-head h2 {
  font-family: var(--font-display); font-size: 19px;
  text-transform: uppercase; letter-spacing: .02em;
  padding-left: var(--s-3); border-left: 4px solid var(--c-brand);
}
.section-head a { font-size: 12.5px; color: var(--c-ink-soft); font-weight: 600; }
.section-head a:hover { color: var(--c-ink); }

/* ---------- 5. Permukaan ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card-pad { padding: var(--s-5); }
.card-hover { transition: box-shadow .16s ease, transform .16s ease; }
.card-hover:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

.panel-title {
  font-family: var(--font-display); font-size: 15px; text-transform: uppercase;
  letter-spacing: .04em; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line); background: var(--c-surface-alt);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* ---------- 6. Kontrol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 9px 18px; border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--c-brand); color: var(--c-brand-ink);
  font-weight: 700; font-size: 13px; line-height: 1;
  transition: filter .15s ease;
}
.btn:hover { filter: brightness(.94); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-quiet { background: var(--c-surface-alt); border-color: var(--c-line-strong); color: var(--c-ink); }
.btn-dark { background: var(--c-surface-alt); border-color: var(--c-line-strong); color: var(--c-ink); }
.btn-danger { background: var(--c-alert); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; }

.field { display: block; margin-bottom: var(--s-3); }
.field > span {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--c-ink-soft); margin-bottom: 5px;
}
.input, .select, textarea.input {
  width: 100%; padding: 9px 12px; font: inherit; color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
}
.input:focus, .select:focus { border-color: var(--c-info); outline: none; }
.select { appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-ink-soft) 50%),
                    linear-gradient(135deg, var(--c-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
  font-size: 12.5px; font-weight: 600; color: var(--c-ink-soft);
  white-space: nowrap;
}
.chip:hover { border-color: var(--c-ink-mute); color: var(--c-ink); }
.chip[aria-current="true"], .chip.is-on {
  background: var(--c-brand); border-color: var(--c-brand);
  color: var(--c-brand-ink); font-weight: 700;
}
.chip-count { font-weight: 700; opacity: .7; }

.tabs { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: 2px; }
.tab {
  flex: 0 0 auto; padding: 8px 16px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--c-ink-soft);
  border: 1px solid transparent;
}
.tab:hover { background: var(--c-surface); color: var(--c-ink); }
.tab[aria-current="page"] {
  background: var(--c-surface-alt); border-color: var(--c-line-strong);
  color: var(--c-ink);
}

.daytab {
  flex: 0 0 auto; display: grid; gap: 1px; text-align: center;
  min-width: 74px; padding: 7px 10px; border-radius: var(--r-md);
  background: var(--c-surface); border: 1px solid var(--c-line);
  font-size: 11px; color: var(--c-ink-soft);
}
.daytab b { font-size: 12.5px; color: var(--c-ink); }
.daytab[aria-current="page"] {
  background: var(--c-brand); border-color: var(--c-brand); color: var(--c-brand-ink);
}
.daytab[aria-current="page"] b { color: var(--c-brand-ink); }

/* ---------- 7. Status ---------- */
.status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: var(--c-surface-alt); color: var(--c-ink-soft); text-transform: uppercase;
}
.status-live { background: var(--c-live-soft); color: var(--c-live); }
.status-ft { background: var(--c-surface-alt); color: var(--c-ink-soft); }
.status-soon { background: rgba(255, 186, 0, .14); color: var(--c-brand); }
.status-bad { background: rgba(242, 88, 91, .14); color: var(--c-alert); }

/* Penanda waktu pembaruan otomatis pada halaman laga berjalan. */
.live-stamp { margin-top: var(--s-2); }
.live-stamp b { color: var(--c-live); font-variant-numeric: tabular-nums; }

.blip {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; animation: blip 1.4s ease-in-out infinite;
}
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .blip { animation: none; } }

.notice {
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  border: 1px solid var(--c-line); background: var(--c-surface);
  font-size: 13px;
}
.notice-ok { border-color: rgba(53, 208, 127, .4); background: var(--c-live-soft); color: #8ae8b6; }
.notice-bad { border-color: rgba(242, 88, 91, .4); background: rgba(242, 88, 91, .12); color: #ffa9ab; }

/* ---------- 8. Lambang tim ---------- */
.badge-img {
  object-fit: contain; border-radius: 3px;
  /* Latar terang tipis: banyak logo klub berwarna gelap dan akan
     lenyap kalau ditaruh langsung di atas permukaan gelap. */
  background: rgba(255, 255, 255, .07);
}
.badge-flag { border: 1px solid var(--c-line); }
.badge-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--badge-size, 40px); height: var(--badge-size, 40px);
  border-radius: 50%; background: var(--c-surface-alt); color: var(--c-brand);
  font-family: var(--font-display); font-size: calc(var(--badge-size, 40px) * .42);
  font-weight: 700;
}

/* ---------- 9. Header & navigasi ---------- */
.masthead {
  background: var(--c-surface); color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0; z-index: 40;
}
/*
   Di layar lebar dipakai grid 1fr-auto-1fr: kolom kiri dan kanan sama
   lebar, sehingga menu di kolom tengah benar-benar berada di titik
   tengah viewport — bukan sekadar "sisa ruang" seperti pada flex.
   Di layar sempit menu disembunyikan, jadi cukup flex biasa.
*/
.masthead-in {
  height: var(--header-h); display: flex; align-items: center;
  gap: var(--s-3); max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--s-4);
}
@media (min-width: 940px) {
  .masthead-in {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-5);
  }
}

/* min-width:0 wajib: tanpa ini brand menolak menyusut dan mendorong
   header melebihi lebar layar di ponsel. */
.brand { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--c-brand);
  display: grid; place-items: center; color: var(--c-brand-ink);
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  flex: 0 0 auto;
}
/* Logo unggahan: tinggi dikunci, lebar mengikuti rasio aslinya, jadi
   logo memanjang maupun bujur sangkar sama-sama aman. */
.brand-logo {
  height: 34px; width: auto; max-width: 190px;
  object-fit: contain; flex: 0 0 auto;
}
@media (max-width: 400px) { .brand-logo { max-width: 132px; } }

.brand-name {
  display: block; font-family: var(--font-display); font-size: 19px;
  letter-spacing: .04em; white-space: nowrap;
}
/* Subjudul disembunyikan di layar sempit — ruangnya dibutuhkan tombol. */
.brand-sub { display: none; }
@media (min-width: 720px) {
  .brand-sub {
    display: block; font-size: 10px; color: var(--c-ink-mute);
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  }
}

.mainnav { display: none; gap: var(--s-1); justify-content: center; }
.mainnav a {
  padding: 7px 13px; border-radius: var(--r-pill); font-size: 13.5px;
  font-weight: 500; color: var(--c-ink-soft);
}
.mainnav a:hover { color: var(--c-ink); background: var(--c-surface-alt); }
.mainnav a[aria-current="page"] { color: var(--c-brand-ink); background: var(--c-brand); font-weight: 700; }
@media (min-width: 940px) { .mainnav { display: flex; } }

.masthead-aside {
  display: flex; align-items: center; gap: var(--s-2);
  margin-left: auto; flex: 0 0 auto;
}
.clock { display: none; font-size: 12px; color: var(--c-ink-mute); }
.clock b { color: var(--c-ink); font-variant-numeric: tabular-nums; }
@media (min-width: 620px) { .clock { display: block; } }

@media (max-width: 400px) {
  .masthead-aside .btn-sm { padding: 6px 10px; font-size: 11.5px; }
  .brand-name { font-size: 17px; }
}

/* Tombol berisi ikon saja — ukuran sentuh dijaga tetap nyaman. */
.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-md);
  border: 1px solid var(--c-line-strong); color: var(--c-ink-soft);
  flex: 0 0 auto;
}
.icon-button:hover { color: var(--c-brand); border-color: var(--c-brand); }
.icon-button svg { width: 17px; height: 17px; }

.burger {
  display: grid; gap: 4px; padding: 8px; background: none;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
}
.burger span { width: 16px; height: 2px; background: var(--c-ink); border-radius: 2px; }
@media (min-width: 940px) { .burger { display: none; } }

/* Pita berjalan: laga live + jadwal terdekat */
.ribbon {
  background: var(--c-canvas); color: var(--c-ink-soft);
  font-size: 12px; border-bottom: 1px solid var(--c-line);
}
/*
   `safe center` penting: saat isi pita lebih lebar dari layar, center
   biasa akan memotong bagian kiri dan membuatnya mustahil digulir.
   Kata kunci safe otomatis kembali ke rata kiri pada kondisi itu.
*/
.ribbon-in {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 7px var(--s-4); overflow-x: auto;
  justify-content: safe center;
  scrollbar-width: none;
}
.ribbon-in::-webkit-scrollbar { display: none; }
.ribbon-tag {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  color: var(--c-live); font-weight: 700; letter-spacing: .06em;
}
.ribbon-item { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; white-space: nowrap; }
.ribbon-item time { color: var(--c-brand); font-weight: 600; }

/* Laci menu mobile */
.drawer {
  position: fixed; inset: 0 auto 0 0; width: min(300px, 84vw); z-index: 60;
  background: var(--c-surface); transform: translateX(-100%);
  transition: transform .22s ease; padding: var(--s-4); overflow-y: auto;
}
.drawer[data-open="true"] { transform: none; }
.drawer a {
  display: block; padding: 11px var(--s-3); border-radius: var(--r-md);
  font-weight: 500; color: var(--c-ink-soft);
}
.drawer { border-right: 1px solid var(--c-line); }
.drawer a[aria-current="page"] { background: var(--c-surface-alt); color: var(--c-brand); font-weight: 700; }
.drawer hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-3) 0; }
.scrim {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .65);
  z-index: 50; opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

/* Tab bar bawah (mobile) */
.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 45;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--c-surface); border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: grid; gap: 2px; justify-items: center; padding: 8px 2px;
  font-size: 10.5px; color: var(--c-ink-mute); font-weight: 600;
}
.tabbar a[aria-current="page"] { color: var(--c-brand); }
.tabbar svg { width: 19px; height: 19px; }
@media (min-width: 940px) { .tabbar { display: none; } body { padding-bottom: 0; } }

/* ---------- 10. Komponen pertandingan ---------- */

/* 10a. Baris jadwal — dipakai di daftar per liga */
.fixture {
  display: grid; align-items: center; gap: var(--s-3);
  grid-template-columns: 58px minmax(0, 1fr) 62px minmax(0, 1fr);
  padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-line);
}
.fixture:first-of-type { border-top: 0; }
.fixture:hover { background: var(--c-surface-alt); }
.fixture-time { font-size: 12px; color: var(--c-ink-soft); text-align: center; font-variant-numeric: tabular-nums; }
.fixture-side { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.fixture-side span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.fixture-side.is-away { flex-direction: row-reverse; text-align: right; }
.fixture-score {
  text-align: center; font-family: var(--font-display); font-size: 17px;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.fixture-score.is-vs { font-size: 12px; color: var(--c-ink-mute); letter-spacing: .08em; }
.fixture.is-live .fixture-score { color: var(--c-live); }

/* 10b. Kartu pertandingan — grid ringkasan */
.mcard { display: grid; gap: var(--s-3); padding: var(--s-4); }
.mcard-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.mcard-league {
  font-size: 11px; font-weight: 700; color: var(--c-ink-soft);
  text-transform: uppercase; letter-spacing: .05em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mcard-teams { display: grid; gap: var(--s-2); }
.mcard-team { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); }
.mcard-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.mcard-team b { font-family: var(--font-display); font-size: 18px; font-variant-numeric: tabular-nums; }
.mcard-team.is-winner span { font-weight: 700; }
.mcard-team.is-loser { color: var(--c-ink-mute); }

/* 10c. Kartu siaran */
.stream {
  display: grid; gap: 0; overflow: hidden;
}
.stream-stage {
  position: relative; display: grid; place-items: center; gap: var(--s-2);
  padding: var(--s-6) var(--s-4); min-height: 128px;
  background:
    radial-gradient(600px 200px at 50% -30%, rgba(255, 186, 0, .16), transparent 70%),
    linear-gradient(160deg, #191924, #23233180);
  color: var(--c-ink);
}
.stream-row { display: flex; align-items: center; gap: var(--s-4); }
.stream-score { font-family: var(--font-display); font-size: 26px; font-variant-numeric: tabular-nums; }
.stream-flag { position: absolute; top: var(--s-3); left: var(--s-3); }
.stream-meta { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-line); }
.stream-meta b { display: block; font-size: 13.5px; }
.stream-play {
  position: absolute; right: var(--s-3); bottom: var(--s-3);
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-brand); color: var(--c-brand-ink);
  display: grid; place-items: center; font-size: 13px;
}

.countdown { font-family: var(--font-display); font-size: 22px; font-variant-numeric: tabular-nums; }

/* 10d. Pemutar siaran */
.player {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-line);
}
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-empty {
  position: absolute; inset: 0; display: grid; place-content: center;
  gap: var(--s-2); justify-items: center; color: var(--c-ink-mute);
  text-align: center; padding: var(--s-4);
}
.player-mark {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2;
  font-family: var(--font-display); font-size: 13px; letter-spacing: .1em;
  color: rgba(255, 255, 255, .55); pointer-events: none;
}
.player-fs {
  position: absolute; right: var(--s-3); bottom: var(--s-3); z-index: 2;
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: rgba(0, 0, 0, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .25);
}

/* Nama tim yang tertaut ke halamannya. */
.team-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-width: 0; max-width: 100%;
}
.team-link.is-reverse { flex-direction: row-reverse; }
.team-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-link:hover span { color: var(--c-brand); }

/* ---------- 10e. Kartu kompetisi ---------- */
.comp-card {
  display: flex; flex-direction: column;
  overflow: hidden; min-height: 132px;
}
.comp-card-main {
  position: relative; flex: 1 1 auto;
  display: grid; gap: var(--s-2); align-content: center; justify-items: center;
  padding: var(--s-4) var(--s-3) var(--s-5);
  text-align: center;
}
/*
   Alas logo sengaja terang, bukan mengikuti tema gelap.

   Logo kompetisi hampir selalu diterbitkan dalam versi berlatar putih —
   banyak di antaranya berwarna gelap pekat (Ligue 1, Liga Champions) dan
   akan lenyap kalau ditaruh langsung di atas permukaan gelap. Menaruh
   semuanya di atas alas terang membuat tampilannya seragam dan tidak
   bergantung pada warna berkas yang diunggah admin.
*/
.comp-logo {
  display: grid; place-items: center;
  width: 54px; height: 54px; padding: 7px;
  border-radius: 14px;
  background: var(--c-plate);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .07);
}
.comp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Tanpa logo tidak perlu alas — inisial sudah kontras dengan tema. */
.comp-logo.is-empty {
  padding: 0; background: none; box-shadow: none;
}
.comp-initials {
  display: grid; place-items: center;
  width: 100%; height: 100%; border-radius: 14px;
  background: var(--c-surface-alt); color: var(--c-brand);
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
}
.comp-name {
  font-size: 13px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Lencana cabang olahraga di pojok kanan bawah. */
.comp-sport {
  position: absolute; right: var(--s-2); bottom: var(--s-2);
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; color: var(--c-ink-mute);
  text-transform: uppercase; letter-spacing: .04em;
}
.comp-sport svg { width: 12px; height: 12px; }
.comp-card-link {
  display: block; padding: 7px var(--s-3); text-align: center;
  border-top: 1px solid var(--c-line);
  font-size: 11.5px; font-weight: 600; color: var(--c-ink-soft);
}
.comp-card-link:hover { color: var(--c-brand); background: var(--c-surface-alt); }

.comp-card-more {
  display: grid; place-items: center; gap: var(--s-2);
  padding: var(--s-4); text-align: center; color: var(--c-ink-soft);
}
.comp-card-more:hover { color: var(--c-brand); }
.comp-more-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px dashed var(--c-line-strong); font-size: 20px;
}

/* ---------- 10f. Latar kartu pertandingan ---------- */
/*
   Lapangan digambar dengan CSS, bukan foto.

   Halaman livescore bisa memuat puluhan kartu sekaligus; satu foto per
   kartu berarti puluhan permintaan jaringan, pergeseran tata letak saat
   gambar tiba, dan berat berkas yang langsung memukul waktu muat.
   Gradien tidak membebani apa pun, tajam di resolusi berapa pun, dan
   warnanya bisa dikunci pada tingkat terang yang sudah diuji.

   Ambang yang dipertahankan dari versi sebelumnya: warna dasar dipilih
   segelap permukaan kartu biasa (luminans setara #14141d), sehingga
   teks skor putih tetap lolos WCAG AA. Yang berubah hanya rona-nya —
   hijau dan cokelat, bukan abu-abu — dan garis lapangan yang kini cukup
   terang untuk terbaca.
*/
.sport-bg { position: relative; isolation: isolate; overflow: hidden; }
.sport-bg > * { position: relative; z-index: 1; }
.sport-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; background-color: transparent;
}

/*
   Lapangan sepak bola.

   Empat lapis, dari atas ke bawah: garis lapangan, potongan rumput
   lebar (arah mesin potong), serat rumput halus, lalu warna dasar.
   Dua skala rumput dipakai karena satu skala saja terbaca sebagai
   garis-garis geometris, bukan rumput.
*/
.sport-bg[data-style="pitch"]::before {
  background-image:
    /* Lingkaran tengah */
    radial-gradient(circle at 50% 50%,
      transparent 29px, rgb(255 255 255 / .16) 29px 30.5px, transparent 31px),
    /* Garis tengah */
    linear-gradient(90deg,
      transparent calc(50% - .75px), rgb(255 255 255 / .16) calc(50% - .75px)
      calc(50% + .75px), transparent calc(50% + .75px)),
    /* Potongan rumput */
    repeating-linear-gradient(90deg,
      rgb(255 255 255 / .05) 0 30px, transparent 30px 60px),
    /* Serat halus */
    repeating-linear-gradient(90deg,
      rgb(0 0 0 / .05) 0 2px, transparent 2px 5px),
    /* Warna dasar */
    linear-gradient(165deg, #16371f, #0d2415);
}

/*
   Lapangan basket: papan kayu.

   Serat kayu dibuat dari dua lapis garis vertikal berbeda rapatnya
   ditambah batas papan tiap 44 px, supaya tidak terbaca sebagai kain
   bergaris. Busur tiga angka diletakkan di kedua sisi.
*/
.sport-bg[data-style="court"]::before {
  background-image:
    /* Busur tiga angka kiri dan kanan */
    radial-gradient(circle at 0% 50%,
      transparent 52px, rgb(255 255 255 / .18) 52px 53.5px, transparent 54px),
    radial-gradient(circle at 100% 50%,
      transparent 52px, rgb(255 255 255 / .18) 52px 53.5px, transparent 54px),
    /* Lingkaran & garis tengah */
    radial-gradient(circle at 50% 50%,
      transparent 24px, rgb(255 255 255 / .16) 24px 25.5px, transparent 26px),
    linear-gradient(90deg,
      transparent calc(50% - .75px), rgb(255 255 255 / .16) calc(50% - .75px)
      calc(50% + .75px), transparent calc(50% + .75px)),
    /* Batas papan */
    repeating-linear-gradient(90deg,
      rgb(0 0 0 / .16) 0 1.5px, transparent 1.5px 44px),
    /* Serat kayu */
    repeating-linear-gradient(90deg,
      rgb(255 255 255 / .028) 0 3px, transparent 3px 9px),
    /* Warna dasar */
    linear-gradient(165deg, #4a2f16, #2e1c0d);
}

/* Polos: tidak menggambar apa pun. */
.sport-bg[data-style="plain"]::before { content: none; }

/*
   Kartu siaran punya gradien latarnya sendiri. Kalau lapangan sedang
   dipasang, sorot kuning di baliknya justru mengeruhkan warnanya.
*/
.stream-stage.sport-bg:not([data-style="plain"]) { background: none; }

/*
   Lambang kompetisi.

   Ditaruh utuh di pojok, bukan diredupkan jadi tanda air raksasa.
   Logo yang diberi opasitas rendah kehilangan detail dalamnya dan hanya
   menyisakan siluet — yang justru membuat kompetisi sulit dikenali,
   kebalikan dari gunanya. Ukurannya kecil supaya tidak bersaing dengan
   skor, dan alas terangnya sama dengan yang dipakai kartu kompetisi
   agar logo gelap tetap terbaca.
*/
.card-crest {
  position: absolute; z-index: 1; pointer-events: none;
  top: var(--s-2); right: var(--s-2);
  width: 26px; height: 26px; padding: 3px;
  border-radius: 8px; object-fit: contain;
  background: var(--c-plate);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1), 0 1px 3px rgb(0 0 0 / .35);
}
/* Sebaris dengan teks, dipakai bila pojok kartu sudah terisi. */
.card-crest.is-inline {
  position: static; flex: 0 0 auto;
  width: 22px; height: 22px; padding: 2px; border-radius: 6px;
}

/*
   Sebagian orang menyetel sistemnya untuk menekan efek dekoratif.
   Lapangannya dilepas; lambang kompetisi tetap ada karena ia informasi,
   bukan hiasan.
*/
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sport-bg::before { display: none; }
}


/* ---------- 11. Tabel klasemen ---------- */
.table { font-size: 13px; }
.table th {
  text-align: center; font-size: 11px; font-weight: 700; color: var(--c-ink-mute);
  text-transform: uppercase; letter-spacing: .04em;
  padding: var(--s-3) 6px; border-bottom: 1px solid var(--c-line); white-space: nowrap;
}
.table td { text-align: center; padding: 9px 6px; border-bottom: 1px solid var(--c-line); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--c-surface-alt); }
.table .cell-team { text-align: left; }
.table .cell-team a, .table .cell-team div { display: flex; align-items: center; gap: var(--s-2); }
.table .cell-num { font-variant-numeric: tabular-nums; }
.table .cell-points { font-weight: 700; font-variant-numeric: tabular-nums; }
.table .is-me { background: rgba(255, 186, 0, .1); }
.table .is-qualified td:first-child { box-shadow: inset 3px 0 0 var(--c-live); }

.form-dot {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 4px; font-size: 10px; font-weight: 700; color: #fff;
}
.form-dot.w { background: var(--c-live); }
.form-dot.d { background: var(--c-line-strong); }
.form-dot.l { background: var(--c-alert); }

.rank-medal { font-size: 15px; }

/* ---------- 11b. Bantuan & percakapan tiket ---------- */
.faq-item { border-top: 1px solid var(--c-line); padding: var(--s-3) var(--s-4); }
.faq-item summary {
  cursor: pointer; font-weight: 600; font-size: 14px;
  list-style: none; display: flex; gap: var(--s-2); align-items: baseline;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+"; color: var(--c-brand); font-weight: 700; }
.faq-item[open] summary::before { content: "\2013"; }
.faq-answer { padding-top: var(--s-2); color: var(--c-ink-soft); font-size: 13.5px; line-height: 1.7; }
.faq-answer p { margin: 0 0 var(--s-2); }

/* Gelembung percakapan pada tiket. Balasan petugas dibedakan warnanya
   supaya alur percakapan terbaca sekilas tanpa mencari namanya. */
.bubble {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--s-4);
  max-width: 92%;
}
.bubble.is-staff {
  margin-left: auto;
  border-color: rgba(255, 186, 0, .35);
  background: rgba(255, 186, 0, .06);
}
.bubble-head {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap; margin-bottom: var(--s-2);
}
.bubble-body { font-size: 14px; line-height: 1.7; color: var(--c-ink-soft); }
.bubble-body p { margin: 0 0 var(--s-3); }
.bubble-body p:last-child { margin-bottom: 0; }

/* Kolom jebakan penangkal spam.
   Disembunyikan lewat posisi, bukan display:none — sebagian program
   pengirim spam melewati kolom yang display-nya none, tapi tetap
   mengisi kolom yang secara teknis masih terlihat. */
.trap {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- 12. Berita ---------- */
.post { overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.post-cover {
  aspect-ratio: 16 / 9; background: var(--c-canvas) center / cover no-repeat;
  display: grid; place-items: center; color: var(--c-ink-mute); font-size: 24px;
}
/*
   Poster berita otomatis.

   Sengaja TIDAK memakai `.sport-bg`. Kartu pertandingan simetris dan
   berpola lapangan; kalau poster memakai bahasa visual yang sama,
   keduanya terbaca sebagai barang yang sama dan halaman berita terasa
   seperti daftar kartu pertandingan yang dipindah tempat.

   Yang membedakan: komposisi asimetris, tipografi jauh lebih besar,
   lambang yang terpotong tepi, dan warna turunan tim. Empat tata letak
   dipilih dari benih id laga (App\Support\PosterStyle), sehingga kartu
   yang berdampingan hampir tidak pernah kembar tanpa perlu satu pun
   berkas gambar.
*/
.poster {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 9; padding: var(--s-4);
  display: grid; align-content: center;
  background-color: var(--c-canvas); background-size: cover;
  color: #fff;
}
/*
   Lapisan poster diatur per elemen, BUKAN lewat `.poster > *`.

   Aturan menyapu seperti itu punya spesifisitas yang sama dengan
   `.card-crest`, dan karena `.card-crest` didefinisikan lebih awal di
   berkas ini, aturan yang belakangan menang — `position: absolute`
   miliknya dibatalkan menjadi `relative`, dan lambang kompetisi
   melompat dari pojok kanan atas ke tengah tulisan. Menargetkan tiap
   elemen secara langsung membuat urutan penulisan tidak lagi menentukan.
*/
.poster-face,
.poster-league,
.poster .card-crest { position: relative; z-index: 2; }
.poster .card-crest { position: absolute; }

/* Lambang besar yang keluar bingkai — pemberat visual tiap poster. */
.poster-bleed {
  position: absolute; z-index: 1; pointer-events: none;
  opacity: .34; filter: saturate(.85);
}
/*
   Alas terang dan sudut membulat pada lambang biasa justru terlihat
   sebagai kotak melayang saat lambangnya diperbesar sampai keluar
   bingkai. Di sini yang diinginkan siluetnya saja.
*/
.poster-bleed :is(img, span) { border-radius: 0; border: 0; background: none; }

.poster-face { display: grid; gap: 2px; }

/* Angka skor sebagai elemen utama, bukan sekadar keterangan. */
.poster-figure {
  font-family: var(--font-display); font-weight: 700;
  font-size: 44px; line-height: .92; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.poster-figure i { font-style: normal; opacity: .5; margin: 0 2px; }

.poster-kicker {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: rgb(255 255 255 / .8);
}
.poster-teams {
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  color: rgb(255 255 255 / .92);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.poster-teams.is-quiet { color: rgb(255 255 255 / .62); font-weight: 500; }
.poster-teams i { font-style: normal; opacity: .55; }

.poster-versus { display: flex; align-items: center; gap: var(--s-3); }
.poster-versus b {
  font-family: var(--font-display); font-size: 26px;
  font-variant-numeric: tabular-nums;
}

.poster-league {
  position: absolute; z-index: 2; left: var(--s-4); bottom: var(--s-3);
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: rgb(255 255 255 / .6);
  max-width: calc(100% - var(--s-8));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Tata letak 1: pemenang membesar di kanan, teks rata kiri --- */
.poster[data-layout="hero"] { justify-items: start; text-align: left; }
/*
   Geseran memakai px, bukan persen.

   Persen dihitung dari lebar wadah, sementara lambangnya berukuran
   tetap. Di kartu kecil -18% berarti sekitar -48px dan lambangnya masih
   terlihat; di poster besar selebar seribu piksel lebih, angka yang
   sama menjadi -200px dan lambangnya terdorong habis keluar bingkai.
*/
.poster[data-layout="hero"] .poster-bleed { right: -26px; top: -20px; }

/* --- Tata letak 2: belah diagonal, dua lambang berhadapan --- */
.poster[data-layout="clash"] { justify-items: center; text-align: center; }
.poster[data-layout="clash"]::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(104deg, rgb(0 0 0 / .28) 49.6%, rgb(255 255 255 / .06) 50.4%);
}
.poster[data-layout="clash"] .poster-bleed { display: none; }

/* --- Tata letak 3: skor mendominasi, lambang samar di kiri bawah --- */
.poster[data-layout="score"] { justify-items: end; text-align: right; }
.poster[data-layout="score"] .poster-bleed { left: -24px; bottom: -28px; opacity: .24; }
.poster[data-layout="score"] .poster-figure { font-size: 56px; }

/* --- Tata letak 4: lambang di tengah belakang, hasil bertumpuk --- */
.poster[data-layout="stack"] { justify-items: start; text-align: left; }
.poster[data-layout="stack"] .poster-bleed {
  left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .16;
}
.poster[data-layout="stack"] .poster-figure { font-size: 38px; }

/* Berita tanpa laga sumber: tidak ada warna atau tim yang bisa dipakai. */
.poster-blank {
  place-content: center; justify-items: center;
  background: var(--c-canvas); color: var(--c-ink-mute);
}
.poster-mark { width: 40px; height: 40px; }

/*
   Versi besar untuk kepala halaman detail berita. Rasionya lebih lebar
   dan angkanya jauh lebih besar — pada ukuran ini poster berfungsi
   sebagai gambar utama artikel, bukan lagi thumbnail.
*/
.poster.is-tall {
  aspect-ratio: 21 / 9; border-radius: var(--r-lg);
  border: 1px solid var(--c-line); padding: var(--s-6);
}
/*
   Pada poster besar, lambang tidak lagi ditempel di sudut melainkan
   diletakkan di paruh kosong seberang teks. Rasio 21:9 menyisakan ruang
   mendatar yang lebar, dan sudut yang menggantung justru membuat
   komposisinya terasa berat sebelah.
*/
.poster.is-tall[data-layout="hero"] .poster-bleed {
  right: 7%; top: 50%; transform: translateY(-50%); opacity: .3;
}
.poster.is-tall[data-layout="score"] .poster-bleed {
  left: 7%; top: 50%; bottom: auto; transform: translateY(-50%); opacity: .26;
}
.poster.is-tall .poster-figure { font-size: 76px; }
.poster.is-tall[data-layout="score"] .poster-figure { font-size: 92px; }
.poster.is-tall .poster-teams { font-size: 16px; }
.poster.is-tall .poster-kicker { font-size: 13px; }
.poster.is-tall .poster-league { font-size: 12px; left: var(--s-6); bottom: var(--s-4); }

@media (max-width: 560px) {
  .poster.is-tall { aspect-ratio: 16 / 9; padding: var(--s-4); }
  .poster.is-tall .poster-figure,
  .poster.is-tall[data-layout="score"] .poster-figure { font-size: 52px; }
}

.post-body { padding: var(--s-4); display: grid; gap: 6px; align-content: start; }
.post-title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.post-meta { font-size: 11.5px; color: var(--c-ink-mute); }

.article { font-size: 15px; line-height: 1.75; color: var(--c-ink-soft); }
.article p { margin: 0 0 var(--s-4); }

/* ---------- 13. Prediksi ---------- */
.predict {
  display: grid; gap: var(--s-3); padding: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
}
.predict-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: 12px; color: var(--c-ink-soft); }
.predict-body {
  display: grid; align-items: center; gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.predict-team { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.predict-team.is-away { flex-direction: row-reverse; }
.predict-inputs { display: flex; align-items: center; gap: 6px; }
.predict-inputs .input {
  width: 52px; text-align: center; font-family: var(--font-display);
  font-size: 18px; padding: 6px 4px;
}

.meter { height: 8px; border-radius: var(--r-pill); background: var(--c-surface-alt); overflow: hidden; }
.meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--c-brand-deep), var(--c-brand)); }

/* ---------- 13b. Carousel & rail ---------- */
/*
   Keduanya memakai scroll-snap alih-alih transform: gestur geser di
   ponsel jadi native (inersia, tanpa JS), dan tanpa JS pun isinya
   tetap bisa diakses seluruhnya.
*/
.carousel { position: relative; }

/*
   Carousel memakai transform, bukan scroll-snap.

   Scroll-snap menyimpan posisi sebagai nilai piksel (scrollLeft), dan
   nilai itu jadi salah begitu lebar track berubah — di ponsel hal ini
   terjadi terus-menerus karena bilah alamat yang muncul-hilang memicu
   resize. Akibatnya track berhenti di antara dua slide dan tetangganya
   ikut terlihat. Dengan transform berbasis persen, posisi slide tidak
   pernah bergantung pada piksel, jadi perubahan lebar tidak merusaknya.
*/
.carousel-viewport {
  overflow: hidden;
  border-radius: var(--r-lg);
  /* Geseran mendatar berhenti di sini, tidak diteruskan jadi gestur
     "kembali" pada peramban ponsel. */
  overscroll-behavior-x: contain;
  touch-action: pan-y;
}

.carousel-track {
  display: flex;
  will-change: transform;
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}
.carousel-track[data-dragging="true"] { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
}

.carousel-slide {
  /* Lebar dikunci tiga kali: flex-basis untuk pembagian ruang, width
     dan min-width sebagai penjamin. Satu saja kurang — flex item bisa
     menyusut di bawah basis-nya kalau isinya lebih sempit. */
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
}

/*
   Tinggi panel memakai aspect-ratio, bukan tinggi tetap.

   Di ponsel dipakai 16/10 — dekat dengan 16/9 yang paling lazim untuk
   foto banner, sehingga bagian yang terpotong tinggal sedikit. Tinggi
   tetap membuat panel jadi hampir 4:3 di layar sempit, dan itulah yang
   memotong sisi kiri-kanan gambar.

   min-height menjamin teks tetap muat pada layar yang sangat sempit.
*/
.carousel-panel {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--c-line);
  aspect-ratio: 16 / 10;
  min-height: 260px;
  display: grid; gap: var(--s-3);
  padding: var(--s-6) var(--s-4);
  /* Nilai bawaan; ditimpa oleh atribut data-align-* di bawah. */
  align-content: center; justify-items: center; text-align: center;
}
@media (min-width: 720px) {
  .carousel-panel {
    aspect-ratio: 21 / 9;
    min-height: 340px;
    padding: var(--s-8) var(--s-6);
  }
}

/* Gambar mengisi bingkai; object-fit & object-position ditetapkan
   sebaris dari pilihan admin. */
.carousel-media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
/* Latar untuk mode "muat seluruh gambar", agar ruang sisa di tepi
   tidak tampak seperti lubang. */
.carousel-panel[data-has-image] { background: #07070c; }

.carousel-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11, 11, 18, .35), rgba(11, 11, 18, .85));
}

.carousel-copy {
  position: relative; z-index: 2;
  display: grid; gap: var(--s-2); justify-items: inherit;
  max-width: 100%;
}

/*
   Perataan isi slide, diatur admin per-slide.
   justify-items menempatkan isi pada sumbu mendatar,
   align-content menempatkan tumpukan pada sumbu menegak.
*/
.carousel-panel[data-align-x="left"] { justify-items: start; text-align: left; }
.carousel-panel[data-align-x="right"] { justify-items: end; text-align: right; }
.carousel-panel[data-align-y="top"] { align-content: start; }
.carousel-panel[data-align-y="bottom"] { align-content: end; }

/* Subjudul dibatasi lebarnya agar tetap enak dibaca. `margin: 0 auto`
   akan memaksanya ke tengah, jadi khusus rata kiri/kanan marginnya
   dinolkan supaya benar-benar menempel ke sisi yang diminta. */
.carousel-panel[data-align-x="left"] p { margin-left: 0; margin-right: auto; }
.carousel-panel[data-align-x="right"] p { margin-left: auto; margin-right: 0; }

.hero-title {
  font-size: clamp(22px, 5vw, 44px);
  text-transform: uppercase;
  margin: var(--s-1) 0;
}

/* ---------- Kotak pratinjau gambar (panel admin) ---------- */
.lightbox {
  border: 0; padding: 0; max-width: min(1100px, 94vw); max-height: 92vh;
  background: var(--c-surface); color: var(--c-ink);
  border-radius: var(--r-lg); overflow: hidden;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .82); }
.lightbox img { width: 100%; max-height: 78vh; object-fit: contain; background: #07070c; }
.lightbox-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.lightbox-bar b { font-size: 13.5px; }

.thumb-button {
  padding: 0; border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: none; line-height: 0; cursor: zoom-in;
}
.thumb-button:hover { border-color: var(--c-brand); }
.thumb-button img { width: 96px; height: 54px; object-fit: cover; display: block; }

/*
   Pratinjau logo di panel admin.

   `contain`, bukan `cover`: logo yang dipotong menyulitkan admin menilai
   apakah berkas yang diunggah sudah benar. Alas terang dipakai supaya
   logo gelap tetap terlihat, sama seperti tampilannya di halaman publik.
*/
.thumb-button.is-logo { background: var(--c-plate); border-radius: var(--r-md); }
.thumb-button.is-logo img { object-fit: contain; padding: 5px; }

.carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; display: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(11, 11, 18, .72); color: var(--c-ink);
  border: 1px solid var(--c-line-strong);
  align-items: center; justify-content: center; font-size: 15px;
}
.carousel-nav:hover { background: var(--c-brand); color: var(--c-brand-ink); border-color: var(--c-brand); }
.carousel-nav[data-dir="prev"] { left: var(--s-3); }
.carousel-nav[data-dir="next"] { right: var(--s-3); }
@media (min-width: 720px) { .carousel-nav { display: flex; } }

.carousel-dots {
  position: absolute; left: 0; right: 0; bottom: var(--s-3); z-index: 3;
  display: flex; justify-content: center; gap: 7px;
  pointer-events: none;
}
.carousel-dots button { pointer-events: auto; }
.carousel-dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--r-pill);
  background: var(--c-line-strong); transition: width .2s ease, background .2s ease;
}
.carousel-dots button[aria-current="true"] { width: 22px; background: var(--c-brand); }

/* Rail: deretan kartu yang digeser mendatar. */
.rail-wrap { position: relative; }
.rail {
  display: flex; gap: var(--s-4);
  overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding-bottom: var(--s-2); scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 min(300px, 84%); scroll-snap-align: start; }
@media (min-width: 720px) { .rail > * { flex-basis: 320px; } }

.rail-nav {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 2;
  display: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-surface-alt); color: var(--c-ink);
  border: 1px solid var(--c-line-strong);
  align-items: center; justify-content: center; font-size: 14px;
}
.rail-nav:hover { background: var(--c-brand); color: var(--c-brand-ink); border-color: var(--c-brand); }
.rail-nav[disabled] { opacity: 0; pointer-events: none; }
.rail-nav[data-dir="prev"] { left: -14px; }
.rail-nav[data-dir="next"] { right: -14px; }
@media (min-width: 900px) { .rail-nav { display: flex; } }

/* ---------- 14. Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  color: #fff;
  background:
    radial-gradient(700px 260px at 78% -10%, rgba(255, 186, 0, .26), transparent 62%),
    radial-gradient(520px 240px at 12% 115%, rgba(91, 157, 255, .22), transparent 62%),
    linear-gradient(140deg, #101019, #1d1d2b);
}
.hero-kicker {
  display: inline-block; padding: 4px 14px; border-radius: var(--r-sm);
  background: var(--c-alert); font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
}
.hero h1 {
  font-family: var(--font-display); font-size: clamp(28px, 6vw, 52px);
  text-transform: uppercase; margin: var(--s-3) 0 var(--s-2);
}
.hero h1 em { font-style: normal; color: var(--c-brand); }
.hero p { margin: 0 auto; max-width: 54ch; color: var(--c-ink-soft); font-size: 13.5px; }
.hero-cta { margin-top: var(--s-5); }
.carousel .hero-cta, .carousel .hero-count { margin-bottom: var(--s-3); }

.hero-count { display: flex; justify-content: center; gap: var(--s-3); margin-top: var(--s-5); }
.hero-count div {
  min-width: 62px; padding: var(--s-2); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--c-line-strong);
}
.hero-count b { display: block; font-family: var(--font-display); font-size: 24px; font-variant-numeric: tabular-nums; }
.hero-count span { font-size: 10px; letter-spacing: .1em; color: var(--c-ink-mute); }

/* ---------- 15. Bagan knock out ---------- */
.bracket { display: flex; gap: var(--s-4); overflow-x: auto; padding-bottom: var(--s-3); }
.bracket-col { flex: 0 0 240px; display: grid; gap: var(--s-3); align-content: start; }
.bracket-tie { padding: var(--s-3); display: grid; gap: 6px; }
.bracket-side { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); font-size: 13px; }
.bracket-side.is-winner { font-weight: 700; }

/* ---------- 16. Footer ---------- */
.sitefoot {
  margin-top: var(--s-10); background: var(--c-surface);
  border-top: 1px solid var(--c-line); color: var(--c-ink-soft);
}
.sitefoot-in { max-width: var(--shell-max); margin: 0 auto; padding: var(--s-8) var(--s-4) var(--s-6); }
.sitefoot h4 { color: var(--c-ink); font-family: var(--font-display); font-size: 14px; text-transform: uppercase; margin-bottom: var(--s-3); }
.sitefoot a { display: block; padding: 3px 0; font-size: 13px; }
.sitefoot a:hover { color: var(--c-brand); }
.sitefoot-bar {
  border-top: 1px solid var(--c-line); margin-top: var(--s-6);
  padding-top: var(--s-4); font-size: 12px;
}

/* ---------- 17. Admin ---------- */
.admin-shell { display: grid; gap: var(--s-5); }
@media (min-width: 960px) { .admin-shell { grid-template-columns: 210px minmax(0, 1fr); align-items: start; } }
.admin-nav { display: grid; gap: 2px; padding: var(--s-2); }
.admin-nav a { padding: 9px var(--s-3); border-radius: var(--r-md); font-size: 13px; font-weight: 500; color: var(--c-ink-soft); }
.admin-nav a[aria-current="page"] { background: var(--c-brand); color: var(--c-brand-ink); font-weight: 700; }

.stat-tiles { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat-tile { padding: var(--s-4); display: grid; gap: 2px; }
.stat-tile b { font-family: var(--font-display); font-size: 26px; }
.stat-tile span { font-size: 11.5px; color: var(--c-ink-mute); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- 18. Utilitas ---------- */
.empty { padding: var(--s-8) var(--s-4); text-align: center; color: var(--c-ink-mute); }
.divider { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-6) 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media print { .masthead, .ribbon, .tabbar, .sitefoot { display: none; } }