/* ===========================================================
   TEMA — "Stadium Light"
   Badan terang, hero gelap sinematik. Aksen merah + hijau.
   Dimuatkan selepas app.css.
   =========================================================== */

:root{
  --bg:#F4F5F7; --bg2:#FFFFFF; --surface:#FFFFFF; --surface2:#FAFBFC;
  --line:rgba(10,15,25,.10); --line2:rgba(10,15,25,.16);
  --txt:#0B1220; --muted:#5A6577; --dim:#8A94A6;
  --accent:#E23D2C; --accent2:#0F9D6E; --gold:#C98A0E;
  --silver:#6B7688; --bronze:#A9662B;
  --r:14px; --r-lg:20px;
}

body{background:var(--bg)}
::selection{background:var(--accent); color:#fff}

/* ---------------- NAVBAR ----------------
   Putih pada halaman biasa.
   Putih-atas-gelap hanya di atas hero (body.has-hero, belum skrol).
   ---------------------------------------- */
#sg-nav{background:rgba(255,255,255,.86); backdrop-filter:blur(14px) saturate(140%);
        border-bottom:1px solid var(--line)}
#sg-nav.solid{background:rgba(255,255,255,.92)}
#sg-nav .brand b{color:var(--txt)}
#sg-nav .brand img{filter:invert(1)}
.nav-links a{color:var(--muted)}
.nav-links a:hover{color:var(--txt); background:rgba(10,15,25,.05)}
.nav-links a.is-active{background:var(--txt); color:#fff}
.lang{border-color:var(--line2)}
.lang button{color:var(--muted)}
.lang button.on{background:var(--accent); color:#fff}
.nav-toggle span{background:var(--txt)}

/* di atas hero, sebelum skrol → lut sinar & teks putih */
body.has-hero #sg-nav:not(.solid){background:transparent; backdrop-filter:none; border-bottom-color:transparent}
body.has-hero #sg-nav:not(.solid) .brand b{color:#fff}
body.has-hero #sg-nav:not(.solid) .brand img{filter:none}
body.has-hero #sg-nav:not(.solid) .nav-links a{color:#DDE3EC}
body.has-hero #sg-nav:not(.solid) .nav-links a:hover{color:#fff; background:rgba(255,255,255,.12)}
body.has-hero #sg-nav:not(.solid) .nav-links a.is-active{background:#fff; color:#0B1220}
body.has-hero #sg-nav:not(.solid) .lang{border-color:rgba(255,255,255,.32)}
body.has-hero #sg-nav:not(.solid) .lang button{color:#DDE3EC}
body.has-hero #sg-nav:not(.solid) .lang button.on{background:var(--accent); color:#fff}
body.has-hero #sg-nav:not(.solid) .nav-toggle span{background:#fff}
@media(max-width:900px){
  body.has-hero #sg-nav.open:not(.solid){background:rgba(11,18,32,.96); backdrop-filter:blur(14px)}
}

/* ---------------- HERO ---------------- */
.hero-sticky video{filter:brightness(.58) contrast(1.08) saturate(1.15)}
.hero-vig{
  background:
    radial-gradient(115% 88% at 50% 40%, rgba(6,9,16,.06) 18%, rgba(6,9,16,.58) 62%, rgba(6,9,16,.94) 100%),
    linear-gradient(to bottom,
      rgba(6,9,16,.76) 0%, rgba(6,9,16,.22) 24%, rgba(6,9,16,.30) 58%,
      rgba(6,9,16,.86) 84%, var(--bg) 100%);
}
.hero-title{color:#fff}
.hero-title .l2{background-image:linear-gradient(100deg,#FF8A63,#E23D2C 52%,#D99A16)}
.hero-sub{color:#E8ECF2}
.hero-kicker{color:#fff; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28)}
.hero-kicker .pip{background:#3BE8A8; box-shadow:0 0 12px #3BE8A8}
.hero-chip{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.30); color:#fff}
.hero-scrollhint{color:#C9D2DE}
.btn{color:#fff; border-color:rgba(255,255,255,.28)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:#f04b39; box-shadow:0 12px 30px -12px var(--accent)}

/* butang di luar hero → gaya terang */
.sec .btn, .page-head .btn, .adm-main .btn{
  color:var(--txt); background:#fff; border-color:var(--line2);
  box-shadow:0 1px 2px rgba(10,15,25,.05);
}
.sec .btn:hover{background:#fff; border-color:var(--txt)}
.sec .btn-primary, .page-head .btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}

/* ---------------- SEKSYEN & KAD ---------------- */
.sec-alt{background:linear-gradient(180deg,transparent,#EBEDF1 10%,#EBEDF1 90%,transparent)}
.card{background:#fff; box-shadow:0 1px 2px rgba(10,15,25,.05), 0 14px 34px -24px rgba(10,15,25,.4)}
.card:hover{box-shadow:0 2px 5px rgba(10,15,25,.07), 0 22px 46px -24px rgba(10,15,25,.5)}
.stat{background:#fff; box-shadow:0 1px 2px rgba(10,15,25,.05), 0 14px 34px -26px rgba(10,15,25,.5)}
.stat::after{opacity:.10}
.cd-cell{background:#fff; box-shadow:0 1px 2px rgba(10,15,25,.05)}
.empty{background:rgba(10,15,25,.02); border-color:var(--line2)}
.empty p{color:var(--txt)}

/* ---------------- JADUAL ---------------- */
.table-wrap{background:#fff; box-shadow:0 1px 2px rgba(10,15,25,.05), 0 16px 40px -30px rgba(10,15,25,.5)}
table.sg th{background:#F6F7F9; color:var(--dim)}
table.sg td{border-bottom-color:rgba(10,15,25,.07)}
table.sg tbody tr:hover{background:#F7F8FA}
.rank.top{color:#C98A0E}
.chip{color:#fff; box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}

/* ---------------- PERLAWANAN ---------------- */
.fixture{background:#fff; box-shadow:0 1px 2px rgba(10,15,25,.05)}
.fixture:hover{border-color:var(--line2)}
.fixture.is-live{background:linear-gradient(180deg,rgba(226,61,44,.06),#fff); border-color:rgba(226,61,44,.34)}
.fx-meta{border-top-color:rgba(10,15,25,.08)}
.pill.done{color:#0F9D6E; border-color:rgba(15,157,110,.38)}
.pill.sched{color:var(--muted); border-color:var(--line2)}
.filters button{background:#fff; box-shadow:0 1px 2px rgba(10,15,25,.04)}
.filters button.on{background:var(--txt); color:#fff; border-color:var(--txt)}

/* ---------------- LAIN ---------------- */
.gal figure{background:#fff; box-shadow:0 1px 2px rgba(10,15,25,.05)}
.news-item{background:#fff}
.page-head h1{color:var(--txt)}
.page-head::before{opacity:.10}
#sg-foot{border-top-color:var(--line); color:var(--dim)}

/* tipografi sedikit lebih rapat */
.hero-title{letter-spacing:-.04em}
.sec-title{letter-spacing:-.035em}