:root {
  --s2-sky: #eaf8ff;
  --s2-sky-2: #d6f1ff;
  --s2-white: #ffffff;
  --s2-blue: #20a9e0;
  --s2-blue-2: #078dca;
  --s2-navy: #12304a;
  --s2-muted: #5d7890;
  --s2-gold: #f4c95d;
  --s2-gold-2: #ffd975;
  --s2-coral: #ff625f;
  --s2-line: #93dcf7;
  --s2-shadow: 0 14px 36px rgba(21, 125, 174, .14);
}

html, body {
  color: var(--s2-navy) !important;
  background:
    radial-gradient(circle at 8% 5%, rgba(255, 217, 117, .20), transparent 18rem),
    radial-gradient(circle at 92% 12%, rgba(32, 169, 224, .18), transparent 22rem),
    linear-gradient(180deg, #f8fdff 0%, var(--s2-sky) 42%, #f4fbff 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .38;
  background-image:
    linear-gradient(rgba(32,169,224,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,169,224,.05) 1px, transparent 1px);
  background-size: 36px 36px;
}

.header, .site-header, .topbar {
  color: var(--s2-navy) !important;
  background: rgba(255,255,255,.94) !important;
  border-bottom: 2px solid var(--s2-gold) !important;
  box-shadow: 0 7px 24px rgba(18,48,74,.08) !important;
  backdrop-filter: blur(16px) !important;
}

.brand-title, .brand-copy strong, h1, h2, h3, h4, h5, h6,
.section-title, .card-title, .team-name, .stat-number {
  color: var(--s2-navy) !important;
}

.brand-subtitle, .brand-copy span, .muted, .subtitle, .section-subtitle,
.hero p, .card p, small {
  color: var(--s2-muted) !important;
}

.logo, .brand-logo, .brand-mark {
  background: var(--s2-white) !important;
  border: 2px solid var(--s2-gold) !important;
  box-shadow: 0 7px 22px rgba(244,201,93,.38) !important;
}

.nav-menu a, .desktop-nav a, .nav a {
  color: var(--s2-navy) !important;
}

.nav-menu a:hover, .nav-menu a[aria-current="page"],
.desktop-nav a:hover, .desktop-nav a.active, .nav a:hover, .nav a.active {
  color: var(--s2-blue-2) !important;
}

.menu-btn, .menu-button, .hamburger-button, .hamburger-btn {
  color: #fff !important;
  background: linear-gradient(145deg, var(--s2-blue), var(--s2-blue-2)) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 8px 20px rgba(7,141,202,.24) !important;
}

.hero {
  color: var(--s2-navy) !important;
  background: transparent !important;
}

.hero-banner-wrap, .hero-banner, .banner-wrap {
  border-color: var(--s2-gold) !important;
  box-shadow: var(--s2-shadow), 0 0 0 4px rgba(255,255,255,.72) !important;
}

.content, main, section {
  color: var(--s2-navy);
}

.card, .panel, .box, .stat-card, .team-card, .group-card, .match-card,
.standing-card, .rule-card, .prize-card, .mvp-card, .savage-card,
.sponsor-box, .sponsor-card, .sponsor-item, .modal-content,
.schedule-card, .bracket-card, .playoff-card {
  color: var(--s2-navy) !important;
  background: linear-gradient(145deg, #fff 0%, #f5fcff 100%) !important;
  border-color: var(--s2-line) !important;
  box-shadow: var(--s2-shadow) !important;
}

.card *, .panel *, .box *, .stat-card *, .team-card *, .group-card *,
.match-card *, .standing-card *, .rule-card *, .prize-card *,
.mvp-card *, .savage-card *, .sponsor-card *, .schedule-card * {
  text-shadow: none;
}

.sponsor-box {
  border: 1px solid var(--s2-line) !important;
  background: rgba(255,255,255,.94) !important;
}

.sponsor-item, .sponsor-card {
  min-height: 76px;
  border-bottom: 3px solid var(--s2-gold) !important;
}

.btn, button, .button, .cta, .nav-card, .menu-card, .detail-btn,
.primary-btn, .action-btn, a.btn {
  color: #fff !important;
  background: linear-gradient(135deg, var(--s2-blue), var(--s2-blue-2)) !important;
  border-color: rgba(255,255,255,.82) !important;
  box-shadow: 0 8px 22px rgba(7,141,202,.22), inset 0 1px rgba(255,255,255,.34) !important;
}

.btn:hover, button:hover, .button:hover, .cta:hover, .nav-card:hover,
.menu-card:hover, .detail-btn:hover, .primary-btn:hover, .action-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.eyebrow, .badge, .tag, .status, .pill, .group-label,
.section-title > span, .rank-badge {
  color: var(--s2-navy) !important;
  background: linear-gradient(135deg, #fff4c7, var(--s2-gold-2)) !important;
  border-color: var(--s2-gold) !important;
}

.danger, .live, .status-danger, .badge-danger, .winner-badge {
  color: #fff !important;
  background: var(--s2-coral) !important;
}

table, thead, tbody, tr, td, th {
  border-color: #bee9fa !important;
}

table {
  color: var(--s2-navy) !important;
  background: #fff !important;
}

thead, th {
  color: #fff !important;
  background: linear-gradient(135deg, var(--s2-blue), var(--s2-blue-2)) !important;
}

tbody tr:nth-child(even) { background: #f0faff !important; }
tbody tr:hover { background: #fff8dc !important; }

input, select, textarea {
  color: var(--s2-navy) !important;
  background: #fff !important;
  border-color: var(--s2-line) !important;
}

.footer, footer {
  color: var(--s2-navy) !important;
  background: linear-gradient(180deg, #dff5ff, #cceeff) !important;
  border-top: 2px solid var(--s2-gold) !important;
}

.footer *, footer * { color: var(--s2-navy) !important; }

/* Kartu gelap lama: dinetralkan menjadi biru muda/putih. */
[style*="background:#0"], [style*="background: #0"],
[style*="background:#1"], [style*="background: #1"] {
  background: #fff !important;
  color: var(--s2-navy) !important;
}

@media (max-width: 760px) {
  .card, .panel, .box, .stat-card, .team-card, .group-card, .match-card,
  .standing-card, .rule-card, .prize-card, .mvp-card, .savage-card {
    border-radius: 16px !important;
  }
  .hero-banner-wrap { border-radius: 15px !important; }
}

/* PLAYOFF — papan terang, rapi, dan mudah diikuti */
.pairing-container {
  gap: 14px !important;
}

.pairing-card {
  color: var(--s2-navy) !important;
  background: linear-gradient(145deg, #fff, #eefaff) !important;
  border: 1px solid var(--s2-line) !important;
  border-top: 4px solid var(--s2-gold) !important;
  box-shadow: var(--s2-shadow) !important;
}

.pairing-number { color: var(--s2-blue-2) !important; }

.bracket-wrapper {
  color: var(--s2-navy) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(234,248,255,.96)) !important;
  border: 1px solid var(--s2-line) !important;
  box-shadow: 0 20px 55px rgba(18,48,74,.12) !important;
  scrollbar-color: var(--s2-gold) #e6f7ff;
}

.bracket-wrapper::-webkit-scrollbar-track { background: #e6f7ff !important; }
.bracket-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--s2-gold), var(--s2-gold-2)) !important;
}

.bracket-board { color: var(--s2-navy) !important; }

.bracket-main-title {
  color: var(--s2-navy) !important;
  background: linear-gradient(135deg, #fff8d9, #fff, #e8f8ff) !important;
  border: 1px solid var(--s2-gold) !important;
  box-shadow: 0 10px 26px rgba(244,201,93,.18) !important;
  text-shadow: none !important;
}

.bracket-section-title {
  color: #fff !important;
  background: linear-gradient(135deg, var(--s2-blue), var(--s2-blue-2)) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: 0 8px 22px rgba(7,141,202,.20) !important;
}

.round-heading {
  overflow: hidden !important;
  color: var(--s2-navy) !important;
  background: #fff !important;
  border: 1px solid var(--s2-line) !important;
  box-shadow: 0 7px 18px rgba(18,48,74,.08) !important;
}

.best-of {
  color: var(--s2-navy) !important;
  background: linear-gradient(135deg, #fff1ad, var(--s2-gold)) !important;
}

.round-name { color: var(--s2-blue-2) !important; }

.match-card {
  overflow: hidden !important;
  color: var(--s2-navy) !important;
  background: #fff !important;
  border: 1px solid var(--s2-line) !important;
  border-left: 4px solid var(--s2-blue) !important;
  box-shadow: 0 10px 25px rgba(18,48,74,.11) !important;
}

.match-label {
  color: #fff !important;
  background: linear-gradient(135deg, var(--s2-blue), var(--s2-blue-2)) !important;
  border-bottom: 2px solid var(--s2-gold) !important;
}

.team-row {
  color: var(--s2-navy) !important;
  background: #fff !important;
  border-color: #d7eff9 !important;
}

.team-row:nth-child(odd) { background: #f2fbff !important; }
.team-row:hover { background: #fff8dc !important; }
.team-name { color: var(--s2-navy) !important; }
.team-name.winner { color: #058755 !important; }
.team-name.placeholder { color: var(--s2-muted) !important; }

.score-input {
  color: var(--s2-navy) !important;
  background: #eefaff !important;
  border: 1px solid var(--s2-line) !important;
}

.score-input:focus {
  color: var(--s2-navy) !important;
  background: #fff8d8 !important;
  border-color: var(--s2-gold) !important;
}

.match-schedule {
  color: var(--s2-navy) !important;
  background: #edf9ff !important;
  border-top: 1px solid var(--s2-line) !important;
}

.match-schedule-date, .match-schedule-time { color: var(--s2-blue-2) !important; }
.match-schedule-note { color: var(--s2-muted) !important; }

.champion-title {
  color: var(--s2-navy) !important;
  background: linear-gradient(135deg, #fff0a7, var(--s2-gold)) !important;
}

.champion-box {
  color: var(--s2-navy) !important;
  background: linear-gradient(145deg, #fffdf4, #fff4c6) !important;
  border: 2px solid var(--s2-gold) !important;
  box-shadow: 0 12px 30px rgba(244,201,93,.28) !important;
}

/* BERANDA — susunan seperti contoh visual yang disetujui */
.home-dashboard {
  width: min(1200px, calc(100% - 28px));
  margin: 20px auto 64px;
}

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

.home-quick-card {
  min-height: 84px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.86);
  border-bottom: 4px solid var(--s2-gold);
  border-radius: 16px;
  background: linear-gradient(135deg, #2cb8ec, #078dca);
  box-shadow: 0 12px 25px rgba(7,141,202,.20);
  transition: transform .2s ease, filter .2s ease;
}

.home-quick-card:hover { transform: translateY(-3px); filter: brightness(1.06); }
.home-quick-card strong { display: block; color: #fff !important; font-size: 15px; }
.home-quick-card small { display: block; margin-top: 5px; color: #e9f9ff !important; font-size: 9px; text-transform: uppercase; }
.home-quick-card > b { color: #fff; font-size: 30px; }
.home-quick-icon { font-size: 30px; color: #fff; }

.home-stats {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.home-stat {
  min-height: 128px;
  padding: 22px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--s2-line);
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, #eefaff);
  box-shadow: var(--s2-shadow);
}

.home-stat > span { color: var(--s2-blue); font-size: 46px; }
.home-stat > strong { color: var(--s2-navy) !important; font-size: 48px; line-height: 1; }
.home-stat > small { color: var(--s2-navy) !important; font-weight: 900; }

.home-team-panel {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--s2-line);
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--s2-shadow);
}

.home-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home-section-head h2 { margin: 0; font-size: 20px; }
.home-section-head a { color: var(--s2-blue-2); font-size: 12px; font-weight: 900; }
.home-team-preview { margin-top: 18px; display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 10px; }
.home-team-mini { padding: 14px 8px; text-align: center; border: 1px solid #c8eaf8; border-bottom: 3px solid var(--s2-gold); border-radius: 14px; background: linear-gradient(145deg,#fff,#f3fbff); }
.home-team-logo { width: 60px; height: 60px; margin: 0 auto 10px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--s2-line); border-radius: 50%; background: #e8f8ff; }
.home-team-logo img { grid-area: 1/1; width: 100%; height: 100%; object-fit: contain; }
.home-team-logo b { grid-area: 1/1; color: var(--s2-blue-2); }
.home-team-mini strong { display: block; color: var(--s2-navy) !important; font-size: 11px; }
.home-team-mini small { display: block; margin-top: 7px; color: var(--s2-blue-2) !important; font-size: 9px; font-weight: 900; }

@media (max-width: 980px) {
  .home-quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-quick-card:last-child { grid-column: 1 / -1; }
  .home-team-preview { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 620px) {
  .home-dashboard { width: calc(100% - 18px); }
  .home-quick-links, .home-stats { grid-template-columns: 1fr; }
  .home-quick-card:last-child { grid-column: auto; }
  .home-stat { min-height: 96px; }
  .home-stat > strong { font-size: 38px; }
  .home-team-preview { grid-template-columns: repeat(2, 1fr); }
  .home-team-panel { padding: 16px; }
}
/* HEADER TITLE FIX START */
.sl-site-title,
.brand-title {
    color: #111111 !important;
    font-weight: 1000 !important;
    text-shadow: none !important;
}

.sl-site-subtitle,
.brand-subtitle {
    color: #D69E00 !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 #FFFFFF, 0 0 8px rgba(244,201,93,.45) !important;
}
/* HEADER TITLE FIX END */
/* GIFT SLOT START */
.home-gift-slot {
    width: 100%;
    min-height: 190px;
    margin-top: 20px;
    border-radius: 22px;
    background: transparent;
}
/* GIFT SLOT END */