/*
 * KTC04 · halaman publik
 * Foto stadion siang di atas (hero + jadwal), lalu konten di latar terang dengan kartu putih.
 * Foto yang terang memudar ke latar halaman tanpa lompatan gelap ke terang.
 * Aksen: merah untuk laga berlangsung dan pelanggaran, kuning hanya untuk sorotan perubahan skor.
 * Warna dari palette.css. Judul: League Spartan. Teks: Baloo 2 (sama dengan deck dan poster).
 */
:root {
    /* Warna ada di palette.css (dipakai bersama publik, admin, dan undian). */
    --radius: 16px;
    --wrap: 1200px;
    --head: "League Spartan", system-ui, sans-serif;
    --body: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
}


*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 16px/1.6 var(--body);
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 .75em; }
abbr { text-decoration: none; }
button { font: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
.strong { font-weight: 700; }
.red { color: var(--red); }

.skip {
    position: absolute; left: 8px; top: -60px; z-index: 20;
    background: var(--gold); color: var(--night); padding: 8px 14px; border-radius: 8px;
}
.skip:focus { top: 8px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 22px; border-radius: 999px; border: 0;
    font: 600 15px/1 var(--body); text-decoration: none; cursor: pointer;
}
.btn--small { min-height: 40px; padding: 8px 18px; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-hover); }
.text-link { font-weight: 600; color: var(--ink); }
.text-link:hover { color: var(--muted); }

/* Bar atas: navy malam (logo KTC04 berhuruf putih butuh latar gelap). --bar-a diatur live.js dari scroll:
   0 di posisi paling atas (menyatu dengan foto hero), naik bertahap sampai 1 (navy solid).
   Tanpa JavaScript nilainya 1, jadi bar tetap solid. */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 10; color: #fff;
    background: rgba(var(--shade), var(--bar-a, 1));
    box-shadow: 0 1px 0 rgba(255, 255, 255, calc(var(--bar-a, 1) * .08));
}
.topbar-inner { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { width: 112px; height: auto; }
.menu { display: none; gap: 4px; margin-left: 28px; }
.menu a { color: rgba(255, 255, 255, .85); text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.menu a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.menu a.is-current { color: #fff; background: rgba(255, 255, 255, .14); }
.topbar-cta { margin-left: auto; }

/* Menu HP: tombol hamburger membuka panel menu di bawah bar atas. */
.menu-toggle {
    display: none; place-items: center; width: 44px; height: 44px; border-radius: 10px; flex: none;
    background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #fff; cursor: pointer; order: 3;
}
.menu-toggle .when-open, .topbar.is-open .menu-toggle .when-closed { display: none; }
.topbar.is-open .menu-toggle .when-open { display: block; }
@media (max-width: 899px) {
    .menu-toggle { display: grid; }
    .topbar.is-open { background: var(--night); }
    .topbar.is-open .menu {
        display: flex; flex-direction: column; gap: 2px; margin: 0;
        position: absolute; top: 64px; left: 0; right: 0; padding: 8px 16px 16px;
        background: var(--night); border-bottom: 1px solid rgba(255, 255, 255, .12);
        animation: menu-in .15s ease-out;
    }
    .topbar.is-open .menu a { padding: 12px; font-size: 17px; }
    .topbar-cta { margin-left: auto; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .topbar.is-open .menu { animation: none; } }
.topbar :focus-visible { outline-color: #fff; }

/* Hero: teks di atas foto stadion (fotonya dipasang di .night). */
.hero {
    position: relative; color: #fff;
    min-height: 600px;
    display: flex; align-items: center;
    padding: 96px 0 140px;
    /* Tanpa latar sendiri: foto ada di .night. Langit di belakang teks sudah gelap, jadi tidak perlu gradasi. */
}
.hero-inner { width: 100%; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 15px; color: rgba(255, 255, 255, .85); }
.eyebrow--live { background: var(--red); color: #fff; padding: 4px 12px; border-radius: 999px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
/* Satu-satunya gerakan berulang di halaman: titik "Berlangsung" berdenyut selama laga sedang dimainkan,
   supaya pengunjung tahu skor itu live. Hilang begitu laga selesai (elemennya tidak dirender lagi). */
.eyebrow--live .dot, .mcard-art--live .dot { animation: live-pulse 1.6s ease-out infinite; }
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .75); }
    70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .eyebrow--live .dot, .mcard-art--live .dot { animation: none; } }
.hero h1 { font-size: clamp(40px, 7vw, 72px); margin: 14px 0 14px; max-width: 12em; }
.hero-sub { font-size: 18px; max-width: 30em; color: rgba(255, 255, 255, .88); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.btn--light { background: #fff; color: var(--night); }
.btn--light:hover { background: var(--soft); }
.text-link--light { color: #fff; }
.text-link--light:hover { color: rgba(255, 255, 255, .8); }

/* Ikon: hanya di tempat yang membantu memindai (info, aksi luar, jam kick-off). Warna mengikuti teks. */
.ico { width: 18px; height: 18px; flex: none; }
.btn .ico, .btn .icon { width: 18px; height: 18px; margin-right: 8px; }
.text-link, .head-link { display: inline-flex; align-items: center; gap: 6px; }
.mcard-state .ico { width: 15px; height: 15px; }

/* Panggung gelap: hero + jadwal. Bagian bawahnya memudar ke warna halaman (180px) supaya menyatu dengan
   bagian terang di bawahnya tanpa garis batas. Kartu laga di sini memakai varian gelap. */
.night {
    color: #fff; padding-bottom: 96px;
    /* Foto stadion malam sudah memudar ke latar halaman di bagian bawahnya, jadi tidak ada gradasi CSS.
       Ditambatkan ke bawah: rumput dan bola selalu di belakang papan skor. Teks kecil diberi panel padat
       tembus pandang (bukan gradasi) hanya di papan skor, karena nama tim jatuh di rumput dekat bagian yang memudar. */
    background: url("../img/hero.webp") center bottom / cover no-repeat, var(--bg);
}

/* Panel tembus pandang di atas foto untuk papan skor (hero tanpa panel, langsung di atas foto). */
.scoreboard {
    padding: 18px 16px 14px; border-radius: 20px;
    background: rgba(var(--shade), .68); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.scoreboard .block-head { margin-bottom: 16px; }
@media (min-width: 900px) {
        .scoreboard { padding: 24px 24px 18px; }
}
.night { position: relative; }
/* Tinggi area ini sering pecahan piksel; strip tipis ini menutup baris terakhir supaya tidak muncul garis. */
.night::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--bg); }
.night + .block { padding-top: 8px; }
.night .block-sub, .night .mcard-meta { color: rgba(255, 255, 255, .85); }
.night .head-link { color: #fff; }
.night .head-link:hover { color: var(--muted-on-dark); }
.night .mcard-title, .night .mcard-meta { color: #fff; text-shadow: 0 1px 3px rgba(var(--shade), .8); } /* terbaca di atas foto rumput */
.night .mcard-vs { color: rgba(255, 255, 255, .7); }
.night .mcard-art { background: rgba(var(--shade), .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } /* foto tetap samar terlihat */
.night .mcard-art--done { background: rgba(255, 255, 255, .08); color: #fff; }
.night .mcard-art--live { background: var(--red); }
.night .empty { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .25); color: var(--muted-on-dark); }
.night :focus-visible { outline-color: #fff; }

/* Blok */
.block { margin-top: 8px; padding-top: 48px; }
.hero + .block { margin-top: -32px; position: relative; }
.block-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; margin-bottom: 20px; }
.block-head > div { flex: 1 1 240px; }
.block-head h2 { font-size: clamp(24px, 4vw, 30px); }
.block-sub { color: var(--muted); margin: 6px 0 0; }
.head-link {
    background: none; border: 0; padding: 4px 0; cursor: pointer;
    font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.head-link:hover { color: var(--muted); }
.sub-title { font-size: 20px; margin: 40px 0 14px; }
.empty { background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 18px 20px; color: var(--muted); }
.empty p { margin: 0; }
.updated { margin-top: 20px; font-size: 13px; color: var(--muted); }
.sync-error { margin-top: 16px; color: var(--red); font-weight: 600; }
.sync-error[hidden] { display: none; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.card-title { font-size: 18px; margin-bottom: 12px; }
.card-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); }
.card-note strong { font-weight: 600; }

/* Kartu laga */
/* Slider satu baris: digeser dengan jari/trackpad, atau tombol panah di desktop. */
.mcards {
    list-style: none; margin: 0; padding: 0 0 12px;
    display: grid; grid-auto-flow: column; grid-auto-columns: min(280px, 78%); gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
@media (prefers-reduced-motion: reduce) { .mcards { scroll-behavior: auto; } }
.block-head > .slide-nav { display: none; flex: none; gap: 8px; }
.mcards[data-more-left] { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px); mask-image: linear-gradient(90deg, transparent 0, #000 40px); }
.mcards[data-more-right] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%); }
.mcards[data-more-left][data-more-right] {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.slide-btn {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .25);
}
.slide-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }
.slide-btn:disabled { opacity: .35; cursor: default; }
.mcard { scroll-snap-align: start; min-width: 0; }
/* Skor yang baru berubah: cincin kuning memudar sekali (1,6 detik), tidak berulang. */
.mcard.is-updated .mcard-art { animation: score-flash 1.6s ease-out; }
@keyframes score-flash { 0% { box-shadow: 0 0 0 4px var(--gold); } 100% { box-shadow: 0 0 0 4px rgba(242, 194, 48, 0); } }
@media (prefers-reduced-motion: reduce) { .mcard.is-updated .mcard-art { animation: none; outline: 3px solid var(--gold); } }
.mcard-art {
    aspect-ratio: 16 / 10; border-radius: 12px; padding: 12px 14px; color: #fff;
    display: grid; grid-template-rows: auto 1fr auto; background: var(--navy);
}
.mcard-art--done { background: var(--soft); color: var(--ink); }
.mcard-art--live { background: var(--red); }
.mcard-stage { font-size: 13px; font-weight: 600; opacity: .8; }
.mcard-big { align-self: center; justify-self: center; font: 600 clamp(32px, 4vw, 40px)/1 var(--head); font-variant-numeric: tabular-nums; padding-top: 4px; }
.mcard-state { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; opacity: .85; }
.mcard-title { margin: 12px 0 0; font-weight: 600; line-height: 1.35; }
.mcard-title .is-win { font-weight: 700; }
.mcard-vs { color: var(--muted); font-weight: 400; margin: 0 4px; }
.mcard-meta { margin: 2px 0 0; font-size: 14px; color: var(--muted); }

/* Peserta */
.teams { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }
.team {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 12px 14px; display: grid; justify-items: center; align-content: start; text-align: center; gap: 2px;
}
.team-name { font-weight: 600; }
.team-meta { font-size: 13px; color: var(--muted); }

.roster { width: 100%; margin-top: 10px; text-align: left; }
.roster summary { cursor: pointer; font-size: 14px; font-weight: 600; text-align: center; color: var(--muted); }
.roster ol { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 14px; }
.roster-no { display: inline-block; min-width: 1.8em; color: var(--muted); font-variant-numeric: tabular-nums; }
.cap { font-size: 11px; font-weight: 700; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 4px; }

/* Klasemen */
.groups { display: grid; gap: 20px; }
.group-name { font-size: 18px; margin-bottom: 10px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); }
tbody tr:last-child > * { border-bottom: 0; }
thead th { font-size: 12px; font-weight: 600; color: var(--muted); }
tbody th { font-weight: 500; }
.num { text-align: right; font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; }
.standings th, .standings td { padding: 11px 8px; }
.standings tr > :first-child { padding-left: 16px; }
.standings tr > :last-child { padding-right: 16px; }
.standings tbody th { white-space: nowrap; min-width: 8em; }
.standings .is-qualified th { font-weight: 700; }
.standings .is-qualified td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.tie { color: var(--red); margin-left: 2px; }
.table-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

.rounds { display: grid; gap: 16px; }
.round { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.round-name { font-size: 16px; margin-bottom: 8px; color: var(--muted); }
.round-list { list-style: none; margin: 0; padding: 0; }
.round-list li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.round-list li:first-child { border-top: 0; }
.round-list li > span:nth-child(3) { text-align: right; }
.round-list .is-win { font-weight: 700; }
.round-score { font: 600 17px/1 var(--head); font-variant-numeric: tabular-nums; color: var(--muted); }
.round-pens { grid-column: 1 / -1; font-size: 13px; color: var(--muted); text-align: center; }

.stats-grid { display: grid; gap: 16px; margin-top: 40px; }
.leader { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.leader li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.leader li:last-child { border-bottom: 0; }
ol.leader li::before { counter-increment: rank; content: counter(rank); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 1.4em; }
.leader-name { flex: 1; font-weight: 500; }
.leader-num { font: 600 18px/1 var(--head); font-variant-numeric: tabular-nums; }
.cards-count { display: flex; gap: 6px; }
.card-chip { display: inline-grid; place-items: center; width: 22px; height: 28px; border-radius: 4px; font-size: 13px; font-weight: 700; }
.card-chip--yellow { background: var(--yellow-card); color: var(--night); }
.card-chip--red { background: var(--red); color: #fff; }

/* Info */
.info-grid { display: grid; gap: 16px; }
.facts { margin: 0; display: grid; padding-top: 8px; padding-bottom: 8px; }
.facts > div { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 36px 1fr; gap: 2px 10px; }
.facts dt, .facts dd { grid-column: 2; }
.fact-ico { grid-row: span 2; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--soft); color: var(--navy); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-size: 13px; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
.facts a { display: block; font-weight: 500; font-size: 15px; color: var(--muted); }
.facts a:hover { color: var(--ink); }

.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stats li { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; gap: 12px; }
.stat-num { font: 600 28px/1 var(--head); font-variant-numeric: tabular-nums; }

/* Aturan */
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rule { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.rule-num { display: block; font: 600 36px/1 var(--head); margin-bottom: 14px; }
.rule h3 { font-size: 16px; margin-bottom: 6px; line-height: 1.25; }
.rule p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.more { margin-top: 16px; }
.more summary { cursor: pointer; font-weight: 600; padding: 8px 0; width: max-content; }
.more .table-wrap { margin-top: 8px; }
.bans-sub { margin: -6px 0 12px; color: var(--muted); }
/* Larangan penonton: satu panel berisi daftar (bukan lima kartu), supaya tidak mengulang bentuk kartu Aturan khusus di atasnya. */
.bans { list-style: none; margin: 0; padding: 0 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; display: grid; }
.bans li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 0; font-weight: 600; line-height: 1.3; }
.bans li + li { border-top: 1px solid var(--line); }
.ban-ico { flex: none; width: 24px; height: 24px; color: var(--red); }
@media (min-width: 900px) {
    .bans { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; }
    .bans li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px; }
    .bans li + li { border-top: 0; border-left: 1px solid var(--line); }
}
.bans-note { margin: 12px 0 0; font-weight: 600; }
.sanctions td:first-of-type { white-space: nowrap; }

/* Footer */
.footer { margin-top: 72px; border-top: 1px solid var(--line); background: var(--card); padding: 28px 0 36px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-org { margin: 0; font-weight: 600; line-height: 1.3; }
.footer-sub { margin: 0; font-size: 14px; color: var(--muted); }
.social { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.social a {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--soft); color: var(--ink);
}
.social a:hover { background: var(--ink); color: #fff; }
.icon { width: 20px; height: 20px; }

@media (min-width: 600px) {
    .teams { grid-template-columns: repeat(3, 1fr); }
    .rules { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .wrap { padding-inline: 32px; }
    .menu { display: flex; }
    .block-head > .slide-nav { display: flex; }
    .block { padding-top: 64px; }
    .hero { min-height: 680px; }
    .hero + .block { margin-top: -72px; }
    .teams { grid-template-columns: repeat(6, 1fr); }
    .groups { grid-template-columns: repeat(2, 1fr); }
    .groups:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
    .rounds { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .info-grid { grid-template-columns: 1fr 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .rules { grid-template-columns: repeat(5, 1fr); }
}