/* =========================================================
   RESPONSIVE STABLE FINAL
   Menyamakan skala halaman pada laptop, tablet, dan ponsel.
   Dimuat terakhir agar CSS internal setiap halaman tidak
   menyebabkan ukuran header/hero berubah saat navigasi.
========================================================= */

:root {
  --stable-max: 1200px;
  --stable-gutter: 24px;
  --stable-header: 76px;
  --stable-radius: 18px;
}

html {
  width: 100%;
  min-width: 320px;
  overflow-x: hidden;
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 320px;
  min-height: 100vh;
  margin: 0 !important;
  overflow-x: hidden !important;
  font-size: 16px !important;
  zoom: 1 !important;
}

*, *::before, *::after { box-sizing: border-box !important; }
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }

/* Lebar konten yang sama di semua halaman */
.container,
.content,
main.content,
.header-container,
.sl-site-header-inner,
.sl-global-footer-inner,
.rules-clean-wrap,
.prizepool-wrap,
.pairing-container,
.action-container {
  width: min(var(--stable-max), calc(100% - (var(--stable-gutter) * 2))) !important;
  max-width: var(--stable-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Header selalu memiliki ukuran identik */
.header,
.site-header,
.sl-site-header {
  width: 100% !important;
  min-height: var(--stable-header) !important;
  height: var(--stable-header) !important;
  padding: 0 !important;
}

.header-container,
.sl-site-header-inner {
  min-height: var(--stable-header) !important;
  height: var(--stable-header) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.logo,
.sl-site-logo,
.brand-logo {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  flex: 0 0 52px !important;
}

.logo img,
.sl-site-logo img,
.brand-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.brand,
.sl-site-brand {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.brand-title,
.sl-site-title {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.brand-subtitle,
.sl-site-subtitle {
  margin: 4px 0 0 !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}

.menu-button,
.sl-menu-button {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  flex: 0 0 46px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
}

.navigation,
.sl-site-nav {
  max-width: min(330px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 90px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Hero halaman biasa: tinggi dan skala seragam */
.hero:not(:has(.hero-banner-wrap)),
.section-title,
.prizepool-hero,
.rules-clean-intro {
  width: 100% !important;
  min-height: 220px !important;
  padding: 42px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.hero h1,
.section-title h1,
.prizepool-title,
.rules-clean-intro h1 {
  max-width: 100% !important;
  margin: 16px auto 0 !important;
  font-size: clamp(34px, 4.2vw, 52px) !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere;
}

.hero p,
.section-title p,
.prizepool-subtitle,
.rules-clean-intro p {
  max-width: 760px !important;
  margin: 12px auto 0 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Beranda dengan banner */
.hero:has(.hero-banner-wrap) {
  width: 100% !important;
  min-height: 0 !important;
  padding: 12px 0 18px !important;
}

.hero-banner-wrap {
  width: min(var(--stable-max), calc(100% - 24px)) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: var(--stable-radius) !important;
}

.hero-banner {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 1 !important;
  object-fit: cover !important;
}

/* Grid dan kartu umum */
.summary-container,
.home-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.home-quick-links {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.summary-card,
.home-stat,
.home-quick-card,
.pairing-card,
.match-card,
.prize-card,
.prize-other,
.leaderboard-panel {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere;
}

/* Tim */
.groups-container,
.tg-team-grid,
.team-grid,
.teams-grid {
  width: 100% !important;
  max-width: 100% !important;
}

.tg-team-card { min-width: 0 !important; }

/* Sponsor tetap dapat digeser tanpa membuat halaman melebar */
.sponsor-box {
  width: min(var(--stable-max), calc(100% - 24px)) !important;
  max-width: var(--stable-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
}

.sponsor-marquee {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
}

.sponsor-marquee::-webkit-scrollbar { display: none !important; }
.sponsor-track { width: max-content !important; min-width: max-content !important; }
.sponsor-item { flex: 0 0 auto !important; }

/* Tabel aman digeser pada perangkat kecil */
.table-container,
.leaderboard-scroll,
.table-wrapper,
.standings-wrapper,
.score-table-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

table { max-width: 100%; }

/* Playoff: jangan mengecilkan bagan sampai tulisan rusak */
.bracket-wrapper {
  width: min(1500px, calc(100% - 24px)) !important;
  max-width: calc(100% - 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.bracket-board {
  width: 1460px !important;
  min-width: 1460px !important;
  max-width: none !important;
}

/* Popup tidak keluar layar */
.modal,
.team-modal,
.tg-modal,
.sponsor-modal,
.match-modal {
  padding: 16px !important;
}

.modal-content,
.team-modal-card,
.tg-modal-card,
.sponsor-modal-card,
.match-modal-card {
  width: min(620px, 100%) !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 32px) !important;
  overflow-y: auto !important;
}

/* Tablet */
@media (max-width: 1024px) {
  :root { --stable-gutter: 18px; --stable-header: 72px; }

  .home-quick-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .home-quick-card:last-child { grid-column: 1 / -1; }

  .pairing-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .prizepool-grid,
  .prize-other-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Ponsel */
@media (max-width: 680px) {
  :root { --stable-gutter: 10px; --stable-header: 68px; --stable-radius: 14px; }

  body { font-size: 15px !important; }

  .logo,
  .sl-site-logo,
  .brand-logo {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    flex-basis: 46px !important;
  }

  .brand-title,
  .sl-site-title { font-size: 11px !important; }

  .brand-subtitle,
  .sl-site-subtitle { font-size: 9px !important; }

  .menu-button,
  .sl-menu-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    flex-basis: 42px !important;
  }

  .navigation,
  .sl-site-nav {
    top: var(--stable-header) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
  }

  .hero:not(:has(.hero-banner-wrap)),
  .section-title,
  .prizepool-hero,
  .rules-clean-intro {
    min-height: 168px !important;
    padding: 28px 14px !important;
  }

  .hero h1,
  .section-title h1,
  .prizepool-title,
  .rules-clean-intro h1 {
    font-size: clamp(28px, 9vw, 38px) !important;
  }

  .hero p,
  .section-title p,
  .prizepool-subtitle,
  .rules-clean-intro p { font-size: 13px !important; }

  .hero:has(.hero-banner-wrap) { padding: 8px 0 12px !important; }
  .hero-banner-wrap { width: calc(100% - 10px) !important; }

  .home-quick-links,
  .home-stats,
  .summary-container,
  .pairing-container,
  .prizepool-grid,
  .prize-other-grid {
    grid-template-columns: 1fr !important;
  }

  .home-quick-card:last-child { grid-column: auto; }

  .summary-card,
  .home-stat { min-height: 88px !important; }

  .groups-container,
  .tg-team-grid,
  .team-grid,
  .teams-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .content,
  main.content { padding-top: 24px !important; padding-bottom: 40px !important; }

  .filter-container,
  .action-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .filter-button,
  .action-button { width: 100% !important; }

  .bracket-wrapper {
    width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    padding: 8px !important;
  }

  .bracket-board {
    width: 1380px !important;
    min-width: 1380px !important;
  }

  .modal,
  .team-modal,
  .tg-modal,
  .sponsor-modal,
  .match-modal { padding: 8px !important; }

  .modal-content,
  .team-modal-card,
  .tg-modal-card,
  .sponsor-modal-card,
  .match-modal-card {
    max-height: calc(100dvh - 16px) !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 390px) {
  .header-container,
  .sl-site-header-inner { gap: 7px !important; }
  .brand-title,
  .sl-site-title { font-size: 10px !important; }
}

/* Printer dan rotasi perangkat */
@media (orientation: landscape) and (max-height: 520px) {
  .navigation,
  .sl-site-nav { max-height: calc(100dvh - 76px) !important; }
}

/* JADWAL-HP-MENYAMPING-START */
@media (max-width: 760px) {

    /* TOTAL TIM, TOTAL GRUP, TOTAL PERTANDINGAN */
    html body main.content > .summary-container {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 6px !important;
        margin: 0 0 14px !important;
    }

    html body main.content > .summary-container > .summary-card {
        width: auto !important;
        min-width: 0 !important;
        min-height: 65px !important;
        padding: 8px 2px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        border-radius: 11px !important;
    }

    html body .summary-number {
        font-size: 20px !important;
        line-height: 1 !important;
    }

    html body .summary-label {
        margin-top: 5px !important;
        font-size: 7px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    /* SEMUA serta GRUP A, B, C, D */
    html body main.content > .filter-container {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 4px !important;
        margin: 0 0 18px !important;
    }

    html body main.content > .filter-container > .filter-button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 1px !important;
        font-size: 7px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        border-radius: 10px !important;
    }
}
/* JADWAL-HP-MENYAMPING-END */