/* ==========================================================================
   SUPERSKOR — style.css
   Pengganti Tailwind CSS dari versi React. Mode gelap memakai class
   `dark` pada <html>, sama seperti aplikasi lama.
   Breakpoint: sm 640px · md 768px · lg 1024px · xl 1280px
   ========================================================================== */

/* ---------- 1. Token warna ---------- */
:root {
  --brand: #1b3bbb;
  --brand-dark: #132c93;
  --navy: #0b1c30;
  --navy-border: #162a42;

  --page: #f4f6fb;
  --text: #0b1c30;
  --card: #ffffff;
  --border: #e2e8f0;        /* slate-200 */
  --border-strong: #cbd5e1; /* slate-300 */
  --divider: #f1f5f9;       /* slate-100 */
  --heading: #0f172a;       /* slate-900 */
  --body: #334155;          /* slate-700 */
  --muted: #64748b;         /* slate-500 */
  --muted-2: #475569;       /* slate-600 */
  --faint: #94a3b8;         /* slate-400 */
  --soft: #f8fafc;          /* slate-50 */
  --subtle: #f1f5f9;        /* slate-100 */
  --hover: #f1f5f9;
  --link: #1d4ed8;          /* blue-700 */
  --link-hover: #1d4ed8;
  --chip-blue-bg: #eff6ff;  /* blue-50 */
  --chip-blue-border: #bfdbfe;
  --chip-blue-text: #1e40af;
  --input-bg: #ffffff;
  --ad-bg: #f8fafc;
  --ad-border: #cbd5e1;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .1), 0 2px 4px -2px rgba(15, 23, 42, .1);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, .15), 0 8px 10px -6px rgba(15, 23, 42, .1);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  color-scheme: light;
}

html.dark {
  --page: #090d16;
  --text: #f1f5f9;
  --card: #0f172a;
  --border: #1e293b;
  --border-strong: #334155;
  --divider: #1e293b;
  --heading: #ffffff;
  --body: #cbd5e1;
  --muted: #94a3b8;
  --muted-2: #94a3b8;
  --faint: #64748b;
  --soft: #080e18;
  --subtle: #1e293b;
  --hover: rgba(30, 41, 59, .6);
  --link: #60a5fa;
  --link-hover: #60a5fa;
  --chip-blue-bg: rgba(23, 37, 84, .6);
  --chip-blue-border: #1e3a8a;
  --chip-blue-text: #93c5fd;
  --input-bg: #1e293b;
  --ad-bg: rgba(15, 23, 42, .4);
  --ad-border: #1e293b;
  color-scheme: dark;
}

/* ---------- 2. Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  background: var(--page);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background-color .15s, color .15s;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
input { font: inherit; }
h1, h2, h3, h4, h5, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

.icon { width: 1em; height: 1em; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-1, .clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }
.mono { font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 1rem; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeIn .25s ease-out; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 3. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  width: 100%;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  color: var(--heading);
}
.header-bar { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.header-left, .header-right { display: flex; align-items: center; gap: .75rem; }
.header-right { gap: .5rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem; border-radius: 999px; color: var(--body);
  transition: background-color .15s;
}
.icon-btn:hover { background: var(--subtle); }
.icon-btn .icon { width: 20px; height: 20px; }
.theme-btn .icon { width: 16px; height: 16px; }
html.dark .theme-btn .icon { color: #fbbf24; }
.menu-toggle { border-radius: 6px; padding: 6px; }

.logo { display: flex; align-items: center; user-select: none; }
.logo img { height: 28px; width: auto; object-fit: contain; transition: transform .2s; }
.logo:hover img { transform: scale(1.05); }
html.dark .site-header .logo img,
.site-footer .logo img { filter: brightness(1.5) contrast(1.25) drop-shadow(0 0 8px rgba(59, 130, 246, .5)); }
.logo-fallback { display: none; align-items: center; gap: 4px; font-weight: 900; }
.logo.is-fallback img { display: none; }
.logo.is-fallback .logo-fallback { display: flex; }
.logo-fallback .super {
  background: linear-gradient(90deg, #2563eb, #dc2626); color: #fff;
  padding: 2px 8px; border-radius: 4px; font-size: 14px; letter-spacing: .05em;
}
.logo-fallback .skor { color: #dc2626; font-size: 20px; letter-spacing: -.04em; }

.search-trigger {
  display: none; flex: 1; max-width: 28rem;
  align-items: center; gap: .5rem;
  font-size: 12px; padding: .5rem .875rem;
  border-radius: 999px;
  background: var(--subtle); border: 1px solid var(--border);
  color: var(--muted); text-align: left;
  transition: background-color .15s;
}
.search-trigger:hover { background: #e2e8f0; }
html.dark .search-trigger { background: #16273b; border-color: rgba(51, 65, 85, .8); color: #cbd5e1; }
html.dark .search-trigger:hover { background: #1d324b; }
.search-trigger .icon { width: 14px; height: 14px; color: var(--faint); }
.search-trigger:hover .icon { color: var(--link); }

.btn-login {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand); color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, .2);
  box-shadow: var(--shadow-xs);
  transition: background-color .15s;
}
.btn-login:hover { background: #1d4ed8; }
.btn-login .icon { width: 14px; height: 14px; color: #dbeafe; }

/* Navigasi kategori */
.cat-nav { display: none; position: relative; z-index: 40; border-top: 1px solid var(--border); background: #f8fafc; }
html.dark .cat-nav { background: #070d16; border-color: #182436; }
.cat-nav-inner { overflow-x: auto; }
.cat-nav nav { display: flex; align-items: center; gap: 4px; padding: 4px 0; min-width: max-content; font-size: 12px; font-weight: 600; letter-spacing: .025em; }
.nav-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .5rem .75rem; border-radius: 4px; white-space: nowrap;
  color: var(--body);
  transition: background-color .15s, color .15s;
}
.nav-item:hover { color: #1d4ed8; background: rgba(226, 232, 240, .6); }
html.dark .nav-item:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.nav-item.active { background: var(--brand); color: #fff; font-weight: 700; box-shadow: var(--shadow-xs); }
.nav-item .icon { width: 14px; height: 14px; }
.nav-badge { font-size: 9px; font-weight: 700; padding: 0 4px; border-radius: 3px; text-transform: uppercase; background: #e2e8f0; color: var(--body); }
html.dark .nav-badge { background: #1e293b; }
.nav-item.active .nav-badge { background: rgba(0, 0, 0, .2); color: #fff; }
.nav-sep { width: 1px; height: 16px; background: #cbd5e1; margin: 0 4px; }
html.dark .nav-sep { background: rgba(51, 65, 85, .6); }

/* Drawer mobile */
.mobile-drawer { display: none; border-top: 1px solid var(--border); background: #fff; padding: 1rem; }
html.dark .mobile-drawer { background: #0a1420; }
.mobile-drawer.open { display: block; animation: fadeIn .2s ease-out; }
.drawer-group + .drawer-group { margin-top: 1rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.drawer-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .5rem; }
.drawer-item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; padding: .5rem .75rem; border-radius: 4px;
  font-size: 14px; font-weight: 600; color: var(--body);
}
.drawer-item + .drawer-item { margin-top: 4px; }
.drawer-item:hover { background: var(--subtle); }
.drawer-item.active { background: var(--brand); color: #fff; font-weight: 700; }
.drawer-item > span { display: flex; align-items: center; gap: .5rem; }
.drawer-item .icon { width: 16px; height: 16px; }
.drawer-item .nav-badge { padding: 2px 6px; background: var(--subtle); }
.drawer-item.active .nav-badge { background: rgba(0, 0, 0, .2); color: #fff; }

/* ---------- 4. Ticker hasil pertandingan ---------- */
.ticker { width: 100%; background: var(--navy); border-bottom: 1px solid var(--navy-border); color: #fff; box-shadow: var(--shadow-xs); }
html.dark .ticker { background: #0f172a; border-color: #1e293b; }
.ticker-inner { display: flex; align-items: center; gap: .75rem; padding-top: 10px; padding-bottom: 10px; }
.ticker-label { display: none; align-items: center; gap: .5rem; padding-right: .75rem; border-right: 1px solid rgba(51, 65, 85, .6); flex-shrink: 0; }
.ticker-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #34d399; margin-right: 4px; }
.ticker-title .icon { width: 14px; height: 14px; }
.ticker-title span { display: none; color: #fff; font-weight: 900; white-space: nowrap; }
.ticker-pills { display: flex; gap: 4px; overflow-x: auto; max-width: 380px; padding: 2px 0; }
.ticker-pill {
  font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  background: rgba(30, 41, 59, .9); color: #cbd5e1; transition: background-color .15s;
}
.ticker-pill:hover { background: #334155; }
.ticker-pill.active { background: var(--brand); color: #fff; }
.ticker-arrow { display: none; padding: 4px; border-radius: 4px; color: #cbd5e1; }
.ticker-arrow:hover { background: rgba(51, 65, 85, .6); color: #fff; }
.ticker-arrow .icon { width: 16px; height: 16px; }
.ticker-track { flex: 1; display: flex; gap: 10px; overflow-x: auto; padding: 2px 0; cursor: grab; scroll-behavior: smooth; }
.ticker-track.dragging { cursor: grabbing; scroll-behavior: auto; }
.ticker-empty { font-size: 12px; color: var(--faint); font-style: italic; padding: .5rem 1rem; }
.score-card {
  flex-shrink: 0; min-width: 175px; max-width: 195px;
  padding: 10px; border-radius: 6px;
  background: rgba(15, 23, 42, .9); border: 1px solid #1e293b;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: left; user-select: none;
  transition: transform .15s, border-color .15s;
}
.score-card:hover { transform: scale(1.02); border-color: #334155; }
.score-head { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 10px; font-weight: 600; }
.score-league { font-family: var(--font-mono); text-transform: uppercase; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-status { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: rgba(30, 41, 59, .9); color: #34d399; border: 1px solid #334155; white-space: nowrap; }
.score-status.is-live { color: #f87171; border-color: rgba(248, 113, 113, .4); }
.score-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 2px 0; }
.score-team { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; margin-right: 8px; }
.team-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.score-name { font-weight: 700; color: #cbd5e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-val { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: #e2e8f0; flex-shrink: 0; }
.score-row.lead .score-name { color: #fff; }
.score-row.lead .score-val { color: #fbbf24; font-weight: 800; }

/* ---------- 5. Layout utama ---------- */
.main { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.stack > * + * { margin-top: 1.5rem; }
.card { background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }

/* Judul halaman (Jadwal, Klasemen, Kategori, dll.) */
.page-head { display: flex; flex-direction: column; gap: .75rem; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: .75rem; }
.page-title { display: flex; align-items: center; gap: .5rem; font-size: 24px; line-height: 1.25; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--heading); }
.title-bar { width: 10px; height: 24px; flex-shrink: 0; background: var(--brand); border-radius: 2px; }
.back-link { font-size: 12px; font-weight: 700; color: var(--link); white-space: nowrap; }
.back-link:hover { text-decoration: underline; }

/* Beranda: grid 3 kolom */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.col-side { display: none; }

/* Kategori: sidebar 300px + konten */
.cat-layout { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.cat-side { display: none; }
.cat-main { flex: 1; min-width: 0; width: 100%; }

/* ---------- 6. Kartu berita ---------- */
.tag {
  display: inline-block; font-size: 9px; font-weight: 700; color: #fff;
  padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em;
  box-shadow: var(--shadow-xs);
}
.media { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: var(--subtle); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.media .tag { position: absolute; top: 10px; left: 10px; }
.zoom:hover .media img { transform: scale(1.05); }

.card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.news-card {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-xs);
  transition: border-color .15s, box-shadow .15s;
}
.news-card:hover { border-color: #3b82f6; box-shadow: var(--shadow-md); }
.news-card-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px; }
.news-card-title { font-size: 14px; font-weight: 700; line-height: 1.375; color: var(--heading); transition: color .15s; }
.news-card.lg .news-card-title { font-size: 16px; }
.news-card:hover .news-card-title { color: var(--link); }
.news-card-foot {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 11px; color: var(--muted);
}
.read-more { color: var(--link); font-weight: 700; flex-shrink: 0; white-space: nowrap; transition: transform .15s; }
.news-card:hover .read-more { transform: translateX(2px); }

/* Hero */
.feed > * + * { margin-top: 1.75rem; }
/* h1 sr-only di awal feed: elemen sesudahnya (hero) tetap rata atas dengan kolom samping */
.feed > h1:first-child + * { margin-top: 0; }
.hero-card { display: block; position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-xs); transition: box-shadow .15s; }
.hero-card:hover { box-shadow: var(--shadow-md); }
.hero-card .media { background: #0f172a; }
.hero-card .media img { opacity: .9; transition-duration: .5s; }
.hero-card:hover .media img { transform: scale(1.05); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .95), rgba(0, 0, 0, .5) 50%, transparent); }
.hero-badges { position: absolute; top: 1rem; left: 1rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.badge-brand { background: var(--brand); color: #fff; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 4px; }
.badge-glass { background: rgba(0, 0, 0, .7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .2); }
.hero-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 999px;
  background: rgba(27, 59, 187, .9); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xl); transition: transform .2s;
}
.hero-card:hover .hero-play { transform: translate(-50%, -50%) scale(1.1); }
.hero-play .icon { width: 24px; height: 24px; fill: #fff; margin-left: 4px; }
.hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; color: #fff; }
.hero-text h2 { font-size: 20px; font-weight: 700; line-height: 1.375; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: color .15s; }
.hero-card:hover .hero-text h2 { color: #93c5fd; }
.hero-meta { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 12px; color: #cbd5e1; }

/* Slot iklan */
.ad-slot {
  background: var(--ad-bg); color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; user-select: none;
}
.ad-banner { width: 100%; border-radius: var(--radius-xl); padding: 1.5rem; }
.ad-banner.compact { padding: 1.25rem; }
.ad-billboard { width: 100%; max-width: 970px; min-height: 90px; margin: 0 auto 1.5rem; padding: .75rem 1rem; border-radius: var(--radius-xl); }
.ad-billboard .ad-row { margin-bottom: 2px; }
.ad-row { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 6px; flex-wrap: wrap; }
.ad-row .icon { width: 20px; height: 20px; color: var(--faint); }
.ad-chip { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; background: #e2e8f0; color: var(--muted-2); }
html.dark .ad-chip { background: #1e293b; color: #cbd5e1; }
.ad-note { font-size: 12px; font-weight: 500; color: var(--faint); }
.ad-box { justify-content: space-between; padding: 1rem; border-radius: var(--radius-xl); }
.ad-box-head, .ad-box-foot {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint);
}
.ad-box-head { padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.ad-box-foot { justify-content: center; padding-top: .5rem; border-top: 1px solid var(--border); font-weight: 400; font-size: 9.5px; }
.ad-close { color: var(--faint); padding: 2px; }
.ad-close:hover { color: var(--body); }
.ad-close .icon { width: 14px; height: 14px; }
.ad-center { margin: auto 0; padding: 3rem 0; display: flex; flex-direction: column; align-items: center; }
.ad-center > .icon { width: 48px; height: 48px; color: var(--faint); opacity: .6; margin-bottom: .75rem; }
.ad-center strong { font-size: 14px; font-weight: 600; color: var(--muted); }
.ad-center small { font-size: 12px; color: var(--faint); margin-top: 4px; }
.ad-center em { font-style: normal; font-size: 11px; color: var(--faint); margin-top: .75rem; max-width: 200px; }
.ad-half { width: 100%; max-width: 320px; min-height: 480px; margin: 0 auto; }
/* slot native di grid jadwal: tinggi setara blok .versus (logo + nama + kode tim) */
.ad-sched { margin: .75rem 0; min-height: 94px; padding: .5rem; border-radius: var(--radius-lg); }
.ad-sched .ad-row { margin-bottom: 4px; }
.ad-sky { width: 160px; height: 600px; margin: 0 auto; border-radius: var(--radius-lg); padding: .75rem; }
.ad-sky .ad-box-head { font-size: 9px; padding-bottom: 6px; }
.ad-sky .ad-box-foot { font-size: 8.5px; padding-top: 6px; }
.ad-sky .ad-center { padding: 1.5rem 0; }
.ad-sky-ico { padding: .75rem; border-radius: 999px; background: rgba(226, 232, 240, .5); margin-bottom: .75rem; }
html.dark .ad-sky-ico { background: rgba(30, 41, 59, .6); }
.ad-sky-ico .icon { width: 28px; height: 28px; color: var(--faint); opacity: .75; }
.ad-sky b { display: block; font-size: 12px; font-weight: 700; color: var(--muted-2); text-transform: uppercase; letter-spacing: .025em; }
html.dark .ad-sky b { color: #cbd5e1; }
.ad-sky .ad-center span { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.ad-sky .ad-center small { font-family: var(--font-mono); font-size: 10px; }
.ad-sky p { font-size: 9.5px; line-height: 1.25; color: var(--faint); padding: 0 4px; margin-top: .75rem; }
.ad-300 { width: 300px; border-radius: var(--radius-xl); padding: 1rem; }
.ad-300 .ad-box-head { margin-bottom: .75rem; }
.ad-300 .ad-center { padding: 2rem 0; }
.ad-300 .ad-center > .icon { width: 32px; height: 32px; margin-bottom: .5rem; }
.ad-300 .ad-center strong { font-size: 12px; }
.ad-300 .ad-center small { font-size: 10px; margin-top: 2px; }
.ad-closed { padding: .75rem; border-radius: var(--radius-lg); border: 1px dashed var(--border-strong); display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
.ad-closed button { font-size: 11px; font-weight: 700; color: var(--link); }
.ad-closed button:hover { text-decoration: underline; }

/* Island per cabang olahraga (warna dari variabel inline) */
.island { padding: 1.25rem; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.island-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.island-head h3 { font-size: 18px; font-weight: 700; color: var(--heading); }
.island-head .note { display: none; font-size: 11px; font-weight: 600; color: var(--faint); }
.island-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--acc-l); }
.island-link:hover { text-decoration: underline; }
.island-link .icon { width: 14px; height: 14px; }
html.dark .island-link { color: var(--acc-d); }
.island-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.island-feature { display: block; }
.island-feature .media { border-radius: var(--radius-lg); background: #0f172a; }
.island-feature .media .tag { top: 8px; left: 8px; font-size: 10px; letter-spacing: normal; }
.island-feature .media .tag.upper { letter-spacing: .05em; }
.island-feature h4 { margin-top: .75rem; font-size: 18px; font-weight: 700; line-height: 1.375; color: var(--heading); transition: color .15s; }
.island-feature:hover h4 { color: var(--acc-l); }
html.dark .island-feature:hover h4 { color: var(--acc-d); }
.island-feature:hover .media img { transform: scale(1.05); }
.island-list { border-top: 1px solid var(--border); padding-top: .75rem; }
.island-list > * + * { margin-top: .5rem; }
.bullet { display: block; padding: 10px; border-radius: var(--radius); transition: background-color .15s; }
.bullet:hover { background: var(--subtle); }
html.dark .bullet:hover { background: rgba(30, 41, 59, .6); }
.bullet-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: 4px; }
.bullet-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 4px; background: var(--tag-bg-l); color: var(--tag-tx-l); }
html.dark .bullet-tag { background: var(--tag-bg-d); color: var(--tag-tx-d); }
.bullet-time { font-size: 10px; font-weight: 500; color: var(--muted); }
.bullet h5 { font-size: 12px; font-weight: 700; line-height: 1.375; color: var(--heading); transition: color .15s; }
html.dark .bullet h5 { color: #e2e8f0; }
.bullet:hover h5 { color: var(--acc-l); }
html.dark .bullet:hover h5 { color: var(--acc-d); }

/* Rekomendasi */
.rec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.rec-card { display: flex; flex-direction: column; justify-content: space-between; border-radius: var(--radius-lg); overflow: hidden; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); transition: transform .15s, border-color .15s; }
html.dark .rec-card { background: rgba(15, 23, 42, .9); }
.rec-card:hover { transform: translateY(-2px); border-color: #818cf8; }
html.dark .rec-card:hover { border-color: rgba(99, 102, 241, .5); }
.rec-card .media { background: #e2e8f0; }
html.dark .rec-card .media { background: #1e293b; }
.rec-card:hover .media img { transform: scale(1.05); }
.rec-card .media .tag { background: rgba(67, 56, 202, .9); font-size: 10px; font-weight: 900; letter-spacing: normal; }
.rec-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: .75rem; padding: 14px; }
.rec-meta { display: flex; align-items: center; gap: .5rem; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.rec-meta b { color: #4f46e5; }
html.dark .rec-meta b { color: #818cf8; }
.rec-body h4 { font-size: 14px; font-weight: 700; line-height: 1.375; color: var(--heading); transition: color .15s; }
.rec-card:hover h4 { color: #4338ca; }
html.dark .rec-card:hover h4 { color: #818cf8; }
.rec-body p { font-size: 12px; line-height: 1.625; color: var(--muted); margin-top: 6px; }
.rec-foot { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: #4338ca; }
html.dark .rec-foot { color: #818cf8; }
.rec-foot span:last-child { transition: transform .15s; }
.rec-card:hover .rec-foot span:last-child { transform: translateX(4px); }

/* ---------- 7. Widget sidebar ---------- */
.sidebar > * + * { margin-top: 1.25rem; }
.cat-side .sidebar > * + * { margin-top: 1rem; }
.widget { width: 300px; max-width: 100%; padding: .75rem; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); color: var(--heading); user-select: none; }
.widget-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .5rem; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.widget-head h3 { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.widget-head .bar { width: 6px; height: 14px; border-radius: 999px; background: var(--brand); }
.widget-head .left { display: flex; align-items: center; gap: 6px; }
.epl-chip { font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; background: rgba(147, 51, 234, .1); color: #9333ea; }
html.dark .epl-chip { background: rgba(168, 85, 247, .2); color: #d8b4fe; }
.pill-switch { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius); background: var(--subtle); margin-bottom: 10px; overflow-x: auto; }
html.dark .pill-switch { background: rgba(30, 41, 59, .8); }
.pill-switch button { padding: 4px 10px; font-size: 10.5px; font-weight: 700; border-radius: 6px; white-space: nowrap; color: var(--muted-2); }
html.dark .pill-switch button { color: #cbd5e1; }
.pill-switch button:hover { color: var(--heading); }
.pill-switch button.active { background: var(--brand); color: #fff; box-shadow: var(--shadow-xs); }
.widget-sub { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 700; color: var(--muted); margin-bottom: .5rem; }
.widget-sub .right { font-size: 9px; font-weight: 600; text-transform: uppercase; color: var(--faint); flex-shrink: 0; margin-left: 4px; }
.widget-sub .wib { color: #059669; }
html.dark .widget-sub .wib { color: #34d399; }
.mini-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: 12px; }
.mini-row { display: flex; align-items: center; padding: 6px .5rem; transition: background-color .15s; }
.mini-row + .mini-row { border-top: 1px solid var(--divider); }
.mini-row:not(.mini-head):hover { background: var(--soft); }
html.dark .mini-row:not(.mini-head):hover { background: rgba(30, 41, 59, .4); }
.mini-head { background: var(--subtle); color: var(--muted-2); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
html.dark .mini-head { background: rgba(30, 41, 59, .8); color: #94a3b8; }
.mini-club { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding-right: 4px; }
.mini-club .name { font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-nums { display: flex; align-items: center; text-align: center; flex-shrink: 0; font-size: 10px; color: var(--muted); }
.mini-head .mini-nums { font-size: 9.5px; color: inherit; font-weight: 700; }
.mini-nums span { display: inline-block; }
.mini-nums .pts { font-weight: 700; color: var(--heading); }
.mini-head .mini-nums .pts { font-weight: 900; color: inherit; }
.w17 { width: 17px; } .w20 { width: 20px; } .w22 { width: 22px; } .w24 { width: 24px; } .w26 { width: 26px; } .w28 { width: 28px; }
.rank-dot { width: 14px; height: 14px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex-shrink: 0; background: var(--subtle); color: var(--muted); }
.rank-dot.top { background: #d1fae5; color: #047857; }
html.dark .rank-dot.top { background: rgba(2, 44, 34, .6); color: #34d399; }
.rank-dot.releg { background: #ffe4e6; color: #be123c; }
html.dark .rank-dot.releg { background: rgba(76, 5, 25, .6); color: #fb7185; }
.crest { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.crest-fb { width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 7.5px; font-weight: 900; color: #fff; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, .3); }
.mini-legend { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; padding: 0 4px; font-size: 9px; color: var(--muted); }
.mini-legend span { display: flex; align-items: center; gap: 6px; }
.mini-legend i { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.widget-cta {
  margin-top: 10px; width: 100%; padding: .5rem; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--brand);
  background: var(--subtle); border: 1px solid var(--border);
  transition: background-color .15s;
}
.widget-cta:hover { background: #eff6ff; }
html.dark .widget-cta { background: rgba(30, 41, 59, .8); color: #60a5fa; border-color: #334155; }
html.dark .widget-cta:hover { background: rgba(23, 37, 84, .4); }
.widget-cta .icon { width: 12px; height: 12px; }

.epl-list > * + * { margin-top: .5rem; }
.epl-match { padding: .5rem; border-radius: var(--radius); border: 1px solid rgba(226, 232, 240, .9); background: rgba(248, 250, 252, .8); transition: background-color .15s, border-color .15s; }
.epl-match:hover { background: rgba(239, 246, 255, .5); border-color: #bfdbfe; }
html.dark .epl-match { background: rgba(30, 41, 59, .4); border-color: #1e293b; }
html.dark .epl-match:hover { background: rgba(30, 41, 59, .8); border-color: #334155; }
.epl-date { display: flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.epl-date .icon { width: 12px; height: 12px; color: var(--brand); }
html.dark .epl-date .icon { color: #60a5fa; }
.epl-teams { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.epl-team { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.epl-team.away { justify-content: flex-end; text-align: right; }
.epl-team span { font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-pill { flex-shrink: 0; display: flex; align-items: center; gap: 4px; padding: 2px .5rem; border-radius: 6px; font-size: 10px; font-weight: 800; background: rgba(27, 59, 187, .1); color: var(--brand); border: 1px solid rgba(59, 130, 246, .2); }
html.dark .time-pill { background: rgba(59, 130, 246, .2); color: #93c5fd; }
.time-pill .icon { width: 10px; height: 10px; }
.epl-venue { margin-top: 4px; font-size: 8.5px; color: var(--faint); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.panel { padding: 1rem; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: .75rem; border-bottom: 1px solid var(--border); }
.panel-head h3, .panel > h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--heading); }
.panel > h3 { margin-bottom: 10px; }
.panel-head .panel-chip { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--link); }
.popular > * + * { margin-top: .75rem; }
.popular-item { display: flex; align-items: flex-start; gap: .75rem; padding-bottom: 10px; border-bottom: 1px solid var(--divider); }
.popular-item:last-child { border-bottom: 0; padding-bottom: 0; }
.popular-num { width: 20px; flex-shrink: 0; padding-top: 2px; text-align: center; font-family: var(--font-mono); font-weight: 900; font-size: 18px; line-height: 1; color: var(--link); }
.popular-item:hover .popular-num { color: #2563eb; }
html.dark .popular-item:hover .popular-num { color: #93c5fd; }
.popular-meta { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); margin-bottom: 2px; }
.popular-item h4 { font-size: 12px; font-weight: 700; line-height: 1.375; color: var(--heading); transition: color .15s; }
html.dark .popular-item h4 { color: #f1f5f9; }
.popular-item:hover h4 { color: var(--link); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; transition: background-color .15s; }
.tag-chip:hover { background: #dbeafe; }
html.dark .tag-chip { background: #1e293b; color: #93c5fd; border-color: #334155; }
html.dark .tag-chip:hover { background: rgba(23, 37, 84, .6); }

/* ---------- 8. Paginasi ---------- */
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 1.5rem 0 .5rem; margin-top: 1.5rem; border-top: 1px solid var(--border); }
.page-btn {
  width: 32px; height: 32px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--card); border: 1px solid var(--border); color: var(--body);
  box-shadow: 0 1px rgba(15, 23, 42, .05);
  transition: background-color .15s, transform .15s;
}
html.dark .page-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.page-btn:hover:not(:disabled) { background: var(--subtle); }
html.dark .page-btn:hover:not(:disabled) { background: #334155; }
.page-btn .icon { width: 16px; height: 16px; }
.page-btn:disabled { opacity: .4; background: var(--subtle); color: var(--faint); border-color: transparent; box-shadow: none; }
.page-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(27, 59, 187, .3); transform: scale(1.05); }

/* ---------- 9. Filter & chip (Jadwal, Klasemen, Berita) ---------- */
.seg { display: flex; align-items: center; gap: 4px; padding: 4px; align-self: flex-start; background: var(--subtle); border: 1px solid var(--border); border-radius: var(--radius-lg); }
html.dark .seg { background: rgba(30, 41, 59, .8); border-color: rgba(51, 65, 85, .6); }
.seg button { padding: 6px .75rem; border-radius: var(--radius); font-size: 12px; font-weight: 700; color: var(--muted-2); transition: color .15s, background-color .15s; }
html.dark .seg button { color: #cbd5e1; }
.seg button:hover { color: var(--heading); }
.seg button.active { background: var(--brand); color: #fff; box-shadow: var(--shadow-xs); }
.count-badge { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--chip-blue-bg); color: #1d4ed8; border: 1px solid var(--chip-blue-border); }
html.dark .count-badge { color: #93c5fd; }
.filter-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.filter-btn { padding: 6px 14px; border-radius: var(--radius); font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--subtle); color: var(--body); transition: background-color .15s; }
.filter-btn:hover { background: #e2e8f0; }
html.dark .filter-btn:hover { background: #334155; }
.filter-btn.active { background: var(--brand); color: #fff; box-shadow: var(--shadow-xs); }
.chip-row { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; }
.chip { padding: .5rem 1rem; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--card); color: #1e293b; border: 1px solid var(--border); transition: background-color .15s; }
html.dark .chip { background: #1e293b; color: #e2e8f0; border-color: #334155; }
.chip:hover { background: var(--subtle); }
html.dark .chip:hover { background: #334155; }
.chip.active { background: #0f172a; color: #fff; border-color: #0f172a; box-shadow: var(--shadow-xs); }
html.dark .chip.active { background: #2563eb; border-color: #2563eb; }
.chip.sm { padding: 6px .75rem; }
.chip.sm.active { background: var(--brand); border-color: var(--brand); }
/* chip-bar: chip di dalam kartu berlabel (Klasemen) */
.chip-bar { display: flex; align-items: center; gap: .75rem; padding: 5px 5px 5px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.chip-bar-label { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--brand); }
html.dark .chip-bar-label { color: #93c5fd; }
.chip-bar-label svg { width: 14px; height: 14px; opacity: .6; }
.chip-bar .chip-row { flex: 1; min-width: 0; gap: 4px; padding-bottom: 0; }
.chip-bar .chip { padding: 6px .875rem; border-radius: var(--radius); font-size: 13px; font-weight: 500; background: transparent; border-color: transparent; color: var(--body); }
.chip-bar .chip:hover { background: var(--subtle); color: var(--heading); }
.chip-bar .chip.active { background: #0f172a; border-color: #0f172a; color: #fff; font-weight: 600; }
html.dark .chip-bar .chip.active { background: #2563eb; border-color: #2563eb; }
/* panah geser chip-bar (dibuat superskor.js); tetap makan tempat saat hidden agar chip tidak loncat */
.chip-bar .chip-row { cursor: grab; }
.chip-bar .chip-row.dragging { cursor: grabbing; scroll-behavior: auto; }
.chip-bar .chip-row.dragging .chip { pointer-events: none; }
.chip-scroll { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 -6px; border-radius: 999px; background: var(--subtle); border: 1px solid var(--border); color: var(--heading); cursor: pointer; transition: background-color .15s; }
.chip-scroll:hover { background: var(--border); }
.chip-scroll .icon { width: 16px; height: 16px; }
.chip-scroll[hidden] { display: inline-flex; visibility: hidden; }
html.dark .chip-scroll { background: #1e293b; border-color: #334155; color: #e2e8f0; }
@media (hover: none) { .chip-scroll, .chip-scroll[hidden] { display: none; } }

/* ---------- 10. Jadwal ---------- */
.sched-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.sched-card { display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--border); transition: box-shadow .15s, border-color .15s; }
.sched-card:hover { box-shadow: var(--shadow-xl); border-color: #60a5fa; }
html.dark .sched-card:hover { border-color: #3b82f6; }
.sched-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-bottom: 10px; margin-bottom: .75rem; border-bottom: 1px solid var(--divider); }
.sched-top .left { display: flex; align-items: center; gap: .5rem; overflow: hidden; }
.sched-tourney { padding: 2px .5rem; border-radius: 4px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; background: #dbeafe; color: #1e40af; }
html.dark .sched-tourney { background: rgba(30, 58, 138, .6); color: #93c5fd; }
.sched-round { font-size: 11px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remind-btn { flex-shrink: 0; display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius); font-size: 12px; font-weight: 700; background: var(--subtle); color: var(--body); transition: background-color .15s, color .15s; }
.remind-btn:hover { background: #eff6ff; color: #1d4ed8; }
.remind-btn .icon { width: 14px; height: 14px; }
.remind-btn.on { background: #d1fae5; color: #065f46; }
.remind-btn.on .icon { color: #059669; }
html.dark .remind-btn.on { background: #022c22; color: #6ee7b7; }
html.dark .remind-btn.on .icon { color: #34d399; }
.race-box { margin: .5rem 0; padding: 14px; border-radius: var(--radius-lg); background: var(--soft); border: 1px solid var(--divider); }
html.dark .race-box { background: rgba(15, 23, 42, .8); border-color: rgba(30, 41, 59, .8); }
.race-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.race-head b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 900; text-transform: uppercase; color: var(--heading); }
.race-head b .icon { width: 16px; height: 16px; color: #f59e0b; }
.race-time { font-size: 12px; font-weight: 800; color: #2563eb; background: #eff6ff; padding: 2px .5rem; border-radius: 4px; white-space: nowrap; }
html.dark .race-time { color: #60a5fa; background: #172554; }
.grid-label { display: block; margin: .5rem 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.riders { display: flex; flex-wrap: wrap; gap: 6px; }
.rider-chip { padding: 2px .5rem; border-radius: 4px; font-size: 11px; font-weight: 600; background: var(--card); color: var(--muted-2); border: 1px solid var(--border); }
html.dark .rider-chip { background: #1e293b; color: #cbd5e1; border-color: #334155; }
.versus { margin: .75rem 0; padding: .5rem 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.team-col { flex: 1; text-align: center; min-width: 0; }
.team-col > * + * { margin-top: 4px; }
.team-logo { width: 40px; height: 40px; margin: 0 auto; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--subtle); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
html.dark .team-logo { border-color: #334155; }
.team-nm { font-size: 12px; font-weight: 900; color: var(--heading); }
.team-cd { font-size: 10px; font-weight: 700; color: var(--faint); text-transform: uppercase; }
.vs-center { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px .5rem; }
.vs-badge { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); background: var(--subtle); padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); }
html.dark .vs-badge { color: #64748b; border-color: #334155; }
.vs-time { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 900; color: #1d4ed8; white-space: nowrap; }
html.dark .vs-time { color: #60a5fa; }
.vs-live { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #b91c1c; background: #fee2e2; padding: 4px 10px; border-radius: 6px; border: 1px solid #fecaca; white-space: nowrap; }
html.dark .vs-live { color: #f87171; background: rgba(127, 29, 29, .35); border-color: rgba(248, 113, 113, .4); }
.vs-score { font-family: var(--font-mono); font-size: 18px; font-weight: 900; color: var(--text); white-space: nowrap; }
.sched-card.is-live { border-color: #fca5a5; }
html.dark .sched-card.is-live { border-color: rgba(248, 113, 113, .5); }
.sched-foot { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--divider); font-size: 12px; font-weight: 500; color: var(--muted-2); }
.sched-foot > * + * { margin-top: .5rem; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.meta-date { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: var(--body); }
.meta-venue { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--muted); min-width: 0; }
.meta-venue .icon { width: 14px; height: 14px; }
.meta-venue span { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: 4px; }
.tv-label { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
.tv-label .icon { width: 14px; height: 14px; color: #3b82f6; }
.tv-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.tv-chip { padding: 2px .5rem; border-radius: 4px; font-size: 10px; font-weight: 900; text-transform: uppercase; background: #eff6ff; color: #1e40af; border: 1px solid #dbeafe; }
html.dark .tv-chip { background: rgba(23, 37, 84, .8); color: #93c5fd; border-color: #1e3a8a; }
.empty-state { max-width: 32rem; margin: 0 auto; padding: 2.5rem; border-radius: var(--radius-xl); text-align: center; background: var(--card); border: 1px solid var(--border); }
.empty-state > * + * { margin-top: 1rem; }
.empty-ico { width: 48px; height: 48px; margin: 0 auto; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #dbeafe; color: #2563eb; }
html.dark .empty-ico { background: #172554; }
.empty-ico .icon { width: 24px; height: 24px; }
.empty-state h3 { font-size: 18px; font-weight: 900; text-transform: uppercase; color: var(--heading); }
.empty-state p { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 4px; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: .5rem 1rem; border-radius: var(--radius); background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; box-shadow: var(--shadow-md); transition: background-color .15s; }
.btn-primary:hover { background: #1e40af; }
.btn-primary.lg { font-size: 14px; padding: 10px 1.5rem; }

/* ---------- 11. Klasemen ---------- */
.table-card { padding: 1rem; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.table-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.table-card-head h3 { font-size: 18px; font-weight: 700; color: var(--heading); }
.table-card-head span { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.standings { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.standings thead tr { background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.standings th { padding: .75rem .5rem; text-align: center; font-weight: 600; white-space: nowrap; }
.standings th.club { text-align: left; padding: .75rem; font-weight: 700; }
.standings th.pts { background: var(--brand-dark); font-weight: 900; padding: .75rem; }
.standings th.form { font-weight: 700; padding: .75rem; }
.standings tbody tr { transition: background-color .15s; }
.standings tbody tr + tr { border-top: 1px solid var(--divider); }
.standings tbody tr:hover { background: var(--soft); }
html.dark .standings tbody tr:hover { background: rgba(30, 41, 59, .5); }
.standings td { padding: 10px .5rem; text-align: center; font-weight: 500; color: #1e293b; white-space: nowrap; }
html.dark .standings td { color: #cbd5e1; }
.standings td.gx { color: var(--body); }
html.dark .standings td.gx { color: #94a3b8; }
.standings td.gd { font-weight: 600; }
.standings td.rank { padding: 10px 4px; font-weight: 700; color: var(--heading); }
.rank-wrap { display: flex; align-items: center; justify-content: center; gap: 4px; }
.status-bar { width: 4px; height: 16px; border-radius: 999px; }
.standings td.club { text-align: left; padding: 10px .75rem; }
.club-cell { display: flex; align-items: center; gap: .5rem; }
.club-cell b { color: var(--heading); }
.club-cell span { font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
.standings td.pts { font-size: 14px; font-weight: 900; color: #1d4ed8; background: rgba(239, 246, 255, .5); padding: 10px .75rem; }
html.dark .standings td.pts { color: #60a5fa; background: rgba(23, 37, 84, .2); }
.form-list { display: flex; justify-content: center; gap: 6px; }
.form-dot { width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: #fff; }
.form-dot.w { background: #059669; } .form-dot.d { background: #94a3b8; } .form-dot.l { background: #e11d48; }
html.dark .form-dot.d { background: #64748b; }
.legend { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 12px; color: var(--body); }
.legend h4 { font-size: 14px; font-weight: 700; letter-spacing: .025em; color: var(--heading); margin-bottom: .75rem; }
.legend-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem; border-radius: var(--radius); background: var(--soft); border: 1px solid var(--divider); }
html.dark .legend-grid { background: rgba(15, 23, 42, .5); border-color: #1e293b; }
.legend-abbr > * + * { margin-top: 6px; }
.legend-abbr div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .5rem; font-weight: 500; }
.legend-abbr strong { display: inline-block; width: 36px; color: var(--heading); }
.legend-col { border-top: 1px solid var(--border); padding-top: .75rem; }
.legend-col > * + * { margin-top: .5rem; }
.legend-item { display: flex; align-items: center; gap: 10px; font-weight: 500; color: #1e293b; }
html.dark .legend-item { color: #e2e8f0; }
.legend-item .dot { width: 14px; height: 14px; border-radius: 999px; display: inline-block; box-shadow: var(--shadow-xs); }
.legend-item .bar { width: 6px; height: 16px; border-radius: 2px; display: inline-block; }

/* ---------- 12. Statistik ---------- */
.stats-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.stat-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); transition: border-color .15s; }
.stat-card:hover { border-color: rgba(59, 130, 246, .5); }
.stat-card img { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; border: 2px solid #fbbf24; flex-shrink: 0; }
.stat-card .info { flex: 1; min-width: 0; }
.stat-card .cat { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #1d4ed8; }
html.dark .stat-card .cat { color: #60a5fa; }
.stat-card h3 { font-size: 18px; font-weight: 700; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-card p { font-size: 12px; font-weight: 500; color: var(--muted-2); }
html.dark .stat-card p { color: #cbd5e1; }
.stat-card .val { display: block; margin-top: .5rem; font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: #1d4ed8; }
html.dark .stat-card .val { color: #60a5fa; }

/* ---------- 13. Arus berita ---------- */
.news-list > * + * { margin-top: 1rem; }
.news-row { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); transition: border-color .15s; }
.news-row:hover { border-color: rgba(59, 130, 246, .5); }
.news-row .media { border-radius: 4px; border: 1px solid var(--border); flex-shrink: 0; }
html.dark .news-row .media { border-color: #334155; }
.news-row:hover .media img { transform: scale(1.05); }
.news-row .info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.news-row .labels { display: flex; align-items: center; gap: .5rem; margin-bottom: 4px; }
.news-row .cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #1d4ed8; }
html.dark .news-row .cat { color: #60a5fa; }
.badge-dark { font-size: 10px; font-weight: 700; text-transform: uppercase; background: #0f172a; color: #fff; padding: 1px 6px; border-radius: 4px; }
.news-row h3 { font-size: 18px; font-weight: 700; line-height: 1.375; color: var(--heading); transition: color .15s; }
.news-row:hover h3 { color: var(--link); }
.news-row p { font-size: 12px; color: var(--muted-2); margin-top: 4px; }
html.dark .news-row p { color: #cbd5e1; }
.news-row time { display: block; margin-top: .75rem; font-size: 11px; font-weight: 500; color: var(--muted); }

/* ---------- 14. Detail artikel ---------- */
.article { max-width: 56rem; margin: 0 auto; }
.article > * + * { margin-top: 1.5rem; }
.article-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.btn-back { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--radius); font-size: 12px; font-weight: 700; background: #eff6ff; color: #1e40af; transition: background-color .15s; }
.btn-back:hover { background: #dbeafe; }
html.dark .btn-back { background: #1e293b; color: #60a5fa; }
html.dark .btn-back:hover { background: #334155; }
.btn-back .icon { width: 16px; height: 16px; }
.article-actions { display: flex; align-items: center; gap: .5rem; }
.btn-outline { display: flex; align-items: center; gap: 6px; padding: .5rem .75rem; border-radius: var(--radius); font-size: 12px; font-weight: 700; background: var(--soft); color: #1e293b; border: 1px solid var(--border); transition: background-color .15s, border-color .15s; }
html.dark .btn-outline { background: #1e293b; color: #e2e8f0; border-color: #334155; }
.btn-outline:hover { background: var(--subtle); }
html.dark .btn-outline:hover { border-color: #475569; background: #1e293b; }
.btn-outline .icon { width: 16px; height: 16px; }
.btn-outline .lbl { display: none; }
.btn-outline .share-ico { color: #2563eb; }
html.dark .btn-outline .share-ico { color: #60a5fa; }
.btn-outline.on { background: #2563eb; color: #fff; border-color: #2563eb; }
.btn-outline.on .icon { fill: currentColor; }
.article-body { padding: 1.5rem; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.article-body > * + * { margin-top: 1.5rem; }
.article-tags { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.article-tags .tag { font-size: 12px; font-weight: 900; padding: 4px .75rem; box-shadow: none; }
.article-tags .tag.dark { background: #0f172a; font-weight: 700; padding: 4px 10px; }
.article-title { font-size: 24px; font-weight: 900; line-height: 1.25; letter-spacing: -.025em; color: var(--heading); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 0; font-size: 12px; color: var(--body); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.article-meta .who { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.article-meta .who b { color: var(--heading); }
.article-meta .dim { color: var(--muted-2); }
.article-meta .read { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); color: var(--muted); }
.article-meta .read .icon { width: 16px; height: 16px; color: #2563eb; }
.article-figure { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--subtle); border: 1px solid var(--border); }
.article-figure img { width: 100%; height: 100%; object-fit: cover; }
.article-summary { padding: 1rem; border-radius: var(--radius-lg); border: 1px solid #bfdbfe; border-left: 4px solid var(--brand); background: rgba(239, 246, 255, .8); color: var(--heading); font-size: 16px; font-weight: 600; line-height: 1.625; }
html.dark .article-summary { background: rgba(30, 41, 59, .8); color: #bfdbfe; border-color: #334155; border-left-color: var(--brand); }
.article-content > * + * { margin-top: 1rem; }
.article-content p { font-size: 16px; line-height: 1.625; color: var(--heading); }
html.dark .article-content p { color: #e2e8f0; }
.reactions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); flex-wrap: wrap; }
.like-btn { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--subtle); color: var(--heading); border: 1px solid var(--border-strong); transition: background-color .15s; }
html.dark .like-btn { background: #1e293b; color: #e2e8f0; border-color: #334155; }
.like-btn:hover { background: #e2e8f0; }
html.dark .like-btn:hover { background: #334155; }
.like-btn.on { background: var(--brand); color: #fff; border-color: #1d4ed8; }
.like-btn .icon { width: 16px; height: 16px; }
.comment-count { display: flex; align-items: center; gap: .5rem; font-size: 12px; font-weight: 700; color: var(--muted-2); }
.comment-count .icon { width: 16px; height: 16px; color: #2563eb; }
.comments-box { padding: 1.25rem; border-radius: var(--radius-lg); background: var(--soft); border: 1px solid var(--border); }
.comments-box > * + * { margin-top: 1rem; }
.comments-box h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--heading); }
.comment-list > * + * { margin-top: 10px; }
.comment { padding: .75rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); font-size: 12px; color: var(--heading); }
html.dark .comment { color: #e2e8f0; }
.comment-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.comment-head b { color: #1e40af; }
html.dark .comment-head b { color: #60a5fa; }
.comment-head span { font-size: 10px; color: var(--faint); }
.comment-form { display: flex; gap: .5rem; padding-top: .5rem; }
.comment-form input { flex: 1; min-width: 0; font-size: 12px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--heading); }
html.dark .comment-form input { border-color: #334155; }
.comment-form input::placeholder { color: var(--muted); }
.comment-form input:focus { outline: none; border-color: #2563eb; }
.comment-form button { padding: 10px 1rem; border-radius: var(--radius); background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; }
.comment-form button:hover { background: #1e40af; }
.related { padding: 1.5rem; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.related h3 { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--heading); margin-bottom: 1rem; }
.related-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.related-item { display: flex; gap: .75rem; padding: .75rem; border-radius: var(--radius-lg); background: var(--soft); border: 1px solid var(--border); transition: border-color .15s; }
html.dark .related-item { background: rgba(30, 41, 59, .6); border-color: rgba(51, 65, 85, .8); }
.related-item:hover { border-color: #3b82f6; }
.related-item img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; }
.related-item .info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.related-item .cat { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #2563eb; margin-bottom: 2px; }
html.dark .related-item .cat { color: #60a5fa; }
.related-item h4 { font-size: 12px; font-weight: 700; color: var(--heading); transition: color .15s; }
.related-item:hover h4 { color: #1e40af; }
html.dark .related-item:hover h4 { color: #60a5fa; }
.related-item small { font-size: 10px; color: var(--muted); }
.not-found { max-width: 32rem; margin: 2rem auto; }

/* ---------- 15. Halaman profil ---------- */
.profile-card { max-width: 42rem; margin: 2rem auto; padding: 2rem; border-radius: var(--radius-xl); text-align: center; background: var(--card); border: 1px solid var(--border); }
.profile-card > * + * { margin-top: 1rem; }
.profile-card h1 { font-size: 24px; font-weight: 900; text-transform: uppercase; letter-spacing: .025em; color: #1d4ed8; }
html.dark .profile-card h1 { color: #60a5fa; }
.profile-card p { font-size: 14px; font-weight: 500; color: var(--muted-2); }

/* ---------- 16. Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: .5rem; overflow-y: auto;
  background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: fadeIn .2s ease-out;
}
.modal-overlay.top { align-items: flex-start; padding: 4rem 1rem 1rem; }
.modal { position: relative; width: 100%; max-width: 32rem; margin: auto 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--card); color: var(--heading); border: 1px solid var(--border); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35); }
.modal-overlay.top .modal { max-width: 36rem; margin: 0; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; background: var(--navy); color: #fff; }
.modal-head .left { display: flex; align-items: center; gap: .5rem; font-size: 14px; font-weight: 700; letter-spacing: .025em; }
.modal-head .left .icon { width: 16px; height: 16px; color: #fbbf24; }
.modal-head .left.profile { font-size: 16px; }
.modal-head .left.profile .icon { width: 20px; height: 20px; color: #60a5fa; }
.modal-x { padding: 4px; border-radius: 999px; color: #fff; display: flex; }
.modal-x:hover { background: rgba(255, 255, 255, .1); }
.modal-x .icon { width: 20px; height: 20px; }
.modal-scroll { max-height: 60vh; overflow-y: auto; padding: 1rem; }
.modal-scroll > * + * { margin-top: 1rem; }

.match-banner { padding: 1.5rem; text-align: center; background: var(--soft); border-bottom: 1px solid var(--border); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px .75rem; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgba(5, 150, 105, .9); color: #fff; margin-bottom: .75rem; }
.status-pill .icon { width: 14px; height: 14px; }
.match-score { display: flex; justify-content: space-around; align-items: center; margin: .5rem 0; }
.match-side { width: 33%; display: flex; flex-direction: column; align-items: center; }
.match-side b { font-size: 30px; font-weight: 700; color: var(--heading); }
.match-side span { font-size: 12px; font-weight: 700; color: var(--muted-2); margin-top: 4px; }
.match-nums { display: flex; align-items: center; gap: .75rem; }
.match-nums b { font-size: 36px; font-weight: 800; color: #1d4ed8; }
html.dark .match-nums b { color: #60a5fa; }
.match-nums i { font-style: normal; font-size: 20px; font-weight: 700; color: var(--faint); }
.match-venue { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: .75rem; font-size: 12px; font-weight: 600; color: var(--muted-2); }
.match-venue .icon { width: 14px; height: 14px; color: #2563eb; }
.match-summary { padding: .75rem; border-radius: var(--radius); font-size: 12px; line-height: 1.625; color: var(--body); background: rgba(239, 246, 255, .8); border: 1px solid rgba(191, 219, 254, .7); }
html.dark .match-summary { background: rgba(23, 37, 84, .3); border-color: rgba(30, 58, 138, .5); }
.match-summary b { display: block; margin-bottom: 4px; color: #1e3a8a; }
html.dark .match-summary b { color: #93c5fd; }
.modal h4 { font-size: 14px; font-weight: 700; color: var(--heading); }
.stat-block > * + * { margin-top: .75rem; }
.stat-line { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
html.dark .stat-line { color: #cbd5e1; }
.stat-bar { height: 8px; display: flex; border-radius: 999px; overflow: hidden; background: #e2e8f0; }
html.dark .stat-bar { background: #334155; }
.stat-bar .a { background: #1d4ed8; } .stat-bar .b { background: #0891b2; }
.events > * + * { margin-top: .5rem; }
.events h4 { margin-bottom: .5rem; }
.event { display: flex; align-items: flex-start; gap: .75rem; padding: 10px; border-radius: 4px; font-size: 12px; background: var(--soft); border: 1px solid var(--border); }
html.dark .event { background: rgba(30, 41, 59, .6); border-color: #334155; }
.event .t { min-width: 40px; font-family: var(--font-mono); font-weight: 700; color: #1d4ed8; }
html.dark .event .t { color: #60a5fa; }
.event b { margin-right: 4px; color: var(--heading); }
.event span { color: #1e293b; }
html.dark .event span { color: #e2e8f0; }

.search-bar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--soft); border-bottom: 1px solid var(--border); }
.search-bar > .icon { width: 20px; height: 20px; color: #2563eb; }
.search-bar input { flex: 1; min-width: 0; background: transparent; border: 0; font-size: 14px; font-weight: 700; color: var(--heading); }
.search-bar input::placeholder { color: var(--muted); }
.search-bar input:focus { outline: none; }
.search-bar .close { padding: 4px; border-radius: 999px; color: var(--muted); display: flex; }
.search-bar .close:hover { background: rgba(0, 0, 0, .05); }
html.dark .search-bar .close:hover { background: rgba(255, 255, 255, .1); }
.search-bar .close .icon { width: 20px; height: 20px; }
.trend-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #1d4ed8; margin-bottom: .5rem; }
html.dark .trend-head { color: #60a5fa; }
.trend-head .icon { width: 16px; height: 16px; }
.trend-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.trend-chip { font-size: 12px; font-weight: 700; padding: 6px .75rem; border-radius: 999px; background: var(--chip-blue-bg); color: var(--chip-blue-text); border: 1px solid var(--chip-blue-border); transition: background-color .15s; }
.trend-chip:hover { background: #dbeafe; }
.result-head { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.result-list > * + * { margin-top: .5rem; }
.result-match { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: 10px; border-radius: var(--radius); background: var(--soft); border: 1px solid var(--border); text-align: left; transition: background-color .15s; }
html.dark .result-match { background: rgba(30, 41, 59, .6); border-color: #334155; }
.result-match:hover { background: #eff6ff; }
html.dark .result-match:hover { background: #1e293b; }
.result-match .lg { font-size: 12px; font-weight: 700; color: #1d4ed8; }
.result-match .sc { display: flex; gap: .5rem; font-size: 12px; font-weight: 700; color: var(--heading); }
.result-match .st { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #1d4ed8; }
html.dark .result-match .lg, html.dark .result-match .st { color: #60a5fa; }
.result-art { display: flex; align-items: center; gap: .75rem; padding: 10px; border-radius: var(--radius); border: 1px solid transparent; transition: background-color .15s, border-color .15s; }
.result-art:hover { background: var(--subtle); border-color: var(--border); }
.result-art img { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.result-art .info { flex: 1; min-width: 0; }
.result-art p { font-size: 12px; font-weight: 700; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-art small { font-size: 10px; font-weight: 500; color: var(--muted); }
.no-result { text-align: center; padding: 2rem 0; font-size: 14px; font-weight: 600; color: var(--muted); }

.ptabs { display: flex; background: var(--soft); border-bottom: 1px solid var(--border); }
.ptabs button { flex: 1; padding: 10px 4px; font-size: 12px; font-weight: 700; text-align: center; color: var(--muted-2); border-bottom: 2px solid transparent; transition: color .15s; }
.ptabs button:hover { color: #2563eb; }
.ptabs button.active { color: #1d4ed8; border-bottom-color: #1d4ed8; background: var(--card); }
html.dark .ptabs button.active { color: #60a5fa; border-bottom-color: #60a5fa; }
.field label { display: block; font-size: 12px; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
html.dark .field label { color: #cbd5e1; }
.field input { width: 100%; font-size: 14px; font-weight: 500; padding: .5rem .75rem; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--heading); }
html.dark .field input { border-color: #334155; }
.field input:focus { outline: none; border-color: #2563eb; }
.notif-box { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; border-radius: var(--radius); background: #eff6ff; border: 1px solid #bfdbfe; }
html.dark .notif-box { background: rgba(23, 37, 84, .4); border-color: #1e3a8a; }
.notif-box .left { display: flex; align-items: center; gap: .5rem; font-size: 12px; }
.notif-box .left > .icon { width: 16px; height: 16px; color: #2563eb; }
.notif-box b { display: block; color: var(--heading); }
.notif-box span { font-weight: 500; color: var(--muted-2); }
.notif-box input { width: 16px; height: 16px; accent-color: #2563eb; cursor: pointer; }
.fav-intro { font-size: 12px; font-weight: 500; color: var(--muted-2); }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.team-btn { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: .5rem .75rem; border-radius: 4px; font-size: 12px; font-weight: 700; background: var(--soft); color: #1e293b; border: 1px solid var(--border); text-align: left; transition: background-color .15s; }
html.dark .team-btn { background: #1e293b; color: #e2e8f0; border-color: #334155; }
.team-btn:hover { background: var(--subtle); }
.team-btn.on { background: var(--brand); color: #fff; border-color: #1d4ed8; }
.team-btn .icon { width: 14px; height: 14px; }
.team-btn:not(.on) .icon { opacity: .5; }
.saved-empty { text-align: center; padding: 2rem 0; font-size: 14px; font-weight: 500; color: var(--muted); }
.saved-empty .icon { width: 32px; height: 32px; margin: 0 auto .5rem; display: block; color: var(--faint); }
.saved-item { display: flex; align-items: center; gap: .75rem; padding: 10px; border-radius: var(--radius); background: var(--soft); border: 1px solid var(--border); transition: background-color .15s; }
html.dark .saved-item { background: rgba(30, 41, 59, .6); border-color: #334155; }
.saved-item:hover { background: #eff6ff; }
html.dark .saved-item:hover { background: #1e293b; }
.saved-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.saved-item .info { flex: 1; min-width: 0; }
.saved-item p { font-size: 12px; font-weight: 700; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-item small { font-size: 10px; font-weight: 500; color: var(--muted); }
.saved-list > * + * { margin-top: .5rem; }

/* ---------- 17. Navigasi bawah (mobile), tombol ke atas, footer ---------- */

.scroll-top {
  position: fixed; right: 1.25rem; bottom: 2rem; z-index: 40;
  display: none; align-items: center; justify-content: center;
  padding: .75rem; border-radius: 999px;
  background: var(--brand); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: var(--shadow-xl);
  transition: transform .15s, background-color .15s;
}
.scroll-top.show { display: flex; }
.scroll-top:hover { background: #1d4ed8; transform: scale(1.1); }
.scroll-top:active { transform: scale(.95); }
.scroll-top .icon { width: 20px; height: 20px; transition: transform .15s; }
.scroll-top:hover .icon { transform: translateY(-2px); }

.site-footer { width: 100%; padding: 2.5rem 0; background: var(--navy); border-top: 1px solid var(--navy-border); color: #e2e8f0; }
html.dark .site-footer { background: #080e18; border-color: #182436; color: #cbd5e1; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-bottom: 2rem; font-size: 12px; }
.footer-grid, .footer-bottom { padding-left: 1.5rem; padding-right: 1.5rem; }
.footer-brand p { color: #94a3b8; line-height: 1.625; padding-top: 1rem; }
.footer-col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; padding-bottom: 6px; margin-bottom: .5rem; border-bottom: 1px solid #1e293b; }
.footer-col li { color: #94a3b8; }
.footer-col li + li { margin-top: 6px; }
.footer-col li a, .footer-col li span { cursor: pointer; transition: color .15s; }
.footer-col li a:hover, .footer-col li span:hover { color: #60a5fa; }
.footer-bottom { padding-top: 1.5rem; border-top: 1px solid rgba(30, 41, 59, .8); display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: 11px; color: #94a3b8; }
.footer-bottom .copy { text-align: center; }
.footer-bottom .copy > * + * { margin-top: 6px; }
.footer-bottom .copy b { font-weight: 600; color: #e2e8f0; }
.footer-bottom .copy p:last-child { font-size: 12px; }
.footer-bottom .copy a { color: #cbd5e1; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom .copy a:hover { color: #60a5fa; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding-top: 4px; }
.footer-links a:hover { color: #fff; }

/* Toast kecil (salin tautan, pengingat) */
.toast { position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 60; background: #0f172a; color: #fff; font-size: 12px; font-weight: 700; padding: .5rem 1rem; border-radius: 999px; box-shadow: var(--shadow-xl); animation: fadeIn .2s ease-out; }

/* ==========================================================================
   Responsif
   ========================================================================== */
@media (min-width: 640px) {
  .logo img { height: 36px; }
  .ticker-arrow { display: flex; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .sub-grid { gap: 1rem; }
  .rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .island-head .note { display: inline; }
  .news-card.lg .news-card-body, .rec-body { padding: 1rem; }
  .page-head { flex-direction: row; align-items: center; }
  .seg, .count-badge { align-self: auto; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-row { flex-direction: row; }
  .news-row .media { width: 192px; }
  .sched-card { padding: 1.25rem; }
  .team-col.t1 { text-align: left; }
  .team-col.t1 .team-logo { margin-left: 0; }
  .team-col.t2 { text-align: right; }
  .team-col.t2 .team-logo { margin-right: 0; }
  .legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legend-col.c2 { border-top: 0; padding-top: 0; border-left: 1px solid var(--border); padding-left: 1rem; }
  .article-body { padding: 2rem; }
  .article-title { font-size: 36px; }
  .article-summary { font-size: 18px; }
  .btn-outline .lbl { display: inline; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-item img { width: 112px; }
  .hero-text { padding: 1.5rem; }
  .hero-text h2 { font-size: 30px; }
  .page-btn { width: 36px; height: 36px; }
  .pagination { gap: 6px; }
  .modal-overlay { padding: 1rem; }
  .modal-scroll { padding: 1.5rem; }
  .modal-scroll.tight { padding: 1rem; }
}

@media (min-width: 768px) {
  .search-trigger { display: flex; }
  .search-mobile { display: none; }
  .header-right { gap: .75rem; }
  .ticker-label { display: flex; }
  .main { padding-top: 1.5rem; }
  .island-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .island-list { border-top: 0; padding-top: 0; border-left: 1px solid var(--border); padding-left: 1.25rem; }
  .sched-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .legend-col.c3 { border-top: 0; padding-top: 0; border-left: 1px solid var(--border); padding-left: 1rem; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .footer-bottom .copy { text-align: left; }
  .footer-links { justify-content: flex-end; }
}

@media (min-width: 1024px) {
  .menu-toggle, .mobile-drawer, .mobile-drawer.open { display: none; }
  .cat-nav { display: block; }
  .cat-nav-inner { overflow: visible; }
  .cat-nav nav { gap: .5rem; }
  .ticker-title span { display: inline; }
  .ticker-pills { max-width: none; }
  .main { padding-bottom: 3rem; }
  .home-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); }
  .col-side { display: block; position: sticky; top: 7rem; }
  .cat-layout { flex-direction: row; }
  .cat-side { display: block; width: 300px; flex-shrink: 0; position: sticky; top: 7rem; }
  .legend-grid { gap: 2rem; }
}

@media (min-width: 1280px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Kolom samping selebar widget (300px) agar tidak ada ruang kosong ke headline */
  .home-grid { grid-template-columns: 300px minmax(0, 1fr) 300px; }
}

/* Grid 2 kolom (kartu sub-berita beranda) tetap 2 kolom di layar lebar */
@media (min-width: 1280px) { .card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================
   SUPERSKOR — superskor.css (versi PHP)
   Tambahan di atas style.css template superskor3.
   Sengaja dipisah supaya tidak tertimpa saat template diganti.
   ========================================================== */

/* Skeleton loading gambar kartu: shimmer sampai <img> selesai dimuat
   (class is-skeleton dilepas lewat onload di markup) */
@keyframes ss-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.media.is-skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 37%, #e2e8f0 63%);
  background-size: 400% 100%;
  animation: ss-shimmer 1.4s ease-in-out infinite;
}
html.dark .media.is-skeleton { background-image: linear-gradient(90deg, #1e293b 25%, #334155 37%, #1e293b 63%); }
.media img { transition: opacity .3s ease, transform .3s; }
.media.is-skeleton img { opacity: 0; }

/* Skeleton jadwal: logo tim shimmer sampai gambar dimuat; selama grid .is-loading card asli & iklan disembunyikan,
   diganti .sched-skel (dilepas superskor.js setelah paging pertama) */
.team-logo.is-skeleton, .skel {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 37%, #e2e8f0 63%);
  background-size: 400% 100%;
  animation: ss-shimmer 1.4s ease-in-out infinite;
}
html.dark .team-logo.is-skeleton, html.dark .skel { background-image: linear-gradient(90deg, #1e293b 25%, #334155 37%, #1e293b 63%); }
.team-logo img { transition: opacity .3s ease; }
.team-logo.is-skeleton img { opacity: 0; }
.sched-grid.is-loading > :not(.sched-skel), .sched-grid:not(.is-loading) > .sched-skel { display: none; }
.sched-skel { display: flex; flex-direction: column; gap: .75rem; min-height: 220px; padding: 1rem; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--border); }
.skel { display: block; border-radius: 6px; }
.skel-chip { width: 40%; height: 18px; }
.skel-versus { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; }
.skel-logo { width: 40px; height: 40px; border-radius: 999px; }
.skel-vs { width: 44px; height: 26px; }
.skel-line { width: 70%; height: 12px; }

/* Kartu headline beranda (4 berita di bawah hero): 2 kolom, 4 kolom di layar lebar */
.card-grid.hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hl-grid .news-card-body { padding: 12px 14px 14px; }
.hl-grid .news-card-title { font-size: 13px; }

@media (min-width: 1280px) {
  .card-grid.hl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}

/* Tabel peringkat BWF ganda: nama pasangan ditumpuk */
.club-cell.pair { flex-direction: column; align-items: flex-start; gap: 2px; }

/* Tag populer beranda read only (span, bukan link): tanpa efek hover */
span.tag-chip { cursor: default; }
span.tag-chip:hover { background: #eff6ff; }
html.dark span.tag-chip:hover { background: #1e293b; }

/* Menu akun SSO di header (user sudah login) */
.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; padding-left: 6px; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  background: #dbeafe; color: var(--brand); font-size: 11px; font-weight: 800;
}
.user-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 200px; padding: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
}
.user-dropdown-name { padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown a {
  display: block; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; color: var(--body);
}
.user-dropdown a:hover { background: var(--subtle); }

@media (max-width: 639px) {
  .user-name { max-width: 6rem; }
}

/* Halaman 404: papan skor + lapangan sepak bola */
.notfound { max-width: 40rem; margin: 2rem auto; overflow: hidden; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.notfound-board { display: flex; align-items: center; justify-content: space-between; padding: .625rem 1rem; background: var(--navy); border-bottom: 3px solid var(--brand); color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.notfound-status { display: inline-flex; align-items: center; gap: 6px; }
.notfound-status i { width: 8px; height: 8px; border-radius: 999px; background: #f43f5e; animation: notfound-blink 1.2s ease-in-out infinite; }
.notfound-minute { padding: 2px 8px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .12); font-family: var(--font-mono); letter-spacing: .02em; }
@keyframes notfound-blink { 50% { opacity: .25; } }

.notfound-pitch { position: relative; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: repeating-linear-gradient(90deg, #15803d 0 12.5%, #16a34a 12.5% 25%); user-select: none; }
html.dark .notfound-pitch { background: repeating-linear-gradient(90deg, #14532d 0 12.5%, #166534 12.5% 25%); }
/* garis lapangan: tepi + garis tengah (::before), kotak penalti (.pitch-box), lingkaran tengah (.notfound-ball) */
.notfound-pitch::before { content: ""; position: absolute; inset: 12px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 2px; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)) center / 2px 100% no-repeat; pointer-events: none; }
.pitch-box { position: absolute; top: 50%; width: 11%; height: 46%; transform: translateY(-50%); border: 2px solid rgba(255, 255, 255, .55); }
.pitch-box.left { left: 12px; border-left: 0; }
.pitch-box.right { right: 12px; border-right: 0; }
.notfound-code { position: relative; display: flex; align-items: center; justify-content: center; gap: .3em; margin: 0; font-family: var(--font-display); font-size: 84px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: #fff; text-shadow: 0 4px 0 rgba(11, 28, 48, .25); }
.notfound-ball { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, .55); border-radius: 999px; }
.notfound-ball svg { width: .62em; height: .62em; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); animation: notfound-bounce 1.6s ease-in-out infinite; }
@keyframes notfound-bounce { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .notfound-ball svg, .notfound-status i { animation: none; } }

.notfound-body { padding: 1.75rem 1.5rem 2rem; }
.notfound-title { font-size: 20px; line-height: 1.3; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; color: var(--heading); }
.notfound-text { max-width: 30rem; margin: .5rem auto 0; font-size: 14px; line-height: 1.6; font-weight: 500; color: var(--muted); }
.notfound-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.notfound-actions .icon { width: 16px; height: 16px; }
.notfound-actions .btn-outline { font-size: 14px; padding: 10px 1.25rem; }
.notfound-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px dashed var(--border-strong); }
.notfound-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--chip-blue-bg); color: var(--chip-blue-text); border: 1px solid var(--chip-blue-border); transition: background-color .15s; }
.notfound-links a:hover { background: #dbeafe; }
html.dark .notfound-links a { background: #1e293b; color: #93c5fd; border-color: #334155; }
html.dark .notfound-links a:hover { background: #334155; }
.notfound-links .icon { width: 14px; height: 14px; }

@media (min-width: 640px) {
  .notfound { margin-top: 3rem; }
  .notfound-pitch { padding: 3rem 2rem; }
  .notfound-code { font-size: 120px; }
  .notfound-body { padding: 2rem 2.5rem 2.5rem; }
  .notfound-title { font-size: 24px; }
}

/* Trivia harian di beranda: widget kolom kanan (desktop) & kartu setelah headline (mobile/tablet) */
.trivia { user-select: auto; }
.trivia-feed { padding: 1rem; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.trivia-chip { padding: 2px 6px; border-radius: 4px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--chip-blue-bg); color: var(--chip-blue-text); }
.trivia-q { margin-bottom: .75rem; font-size: 15px; line-height: 1.4; font-weight: 800; color: var(--heading); }
.trivia-options { display: grid; gap: .5rem; }
.trivia-opt {
  display: flex; align-items: center; gap: .625rem; width: 100%; min-height: 44px; padding: .5rem .75rem;
  border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--soft);
  text-align: left; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--heading);
  transition: background-color .15s, border-color .15s;
}
.trivia-opt:not(:disabled):hover { background: var(--subtle); border-color: var(--border-strong); }
.trivia-opt:disabled { cursor: default; }
.trivia-opt .key {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase;
}
.trivia-opt[aria-pressed="true"] { border-color: var(--brand); background: var(--chip-blue-bg); }
.trivia-opt[aria-pressed="true"] .key { background: var(--brand); border-color: var(--brand); color: #fff; }
html.dark .trivia-opt[aria-pressed="true"] { border-color: #60a5fa; }
.trivia-opt.is-answer { border-color: #10b981; background: #ecfdf5; }
.trivia-opt.is-answer .key { background: #10b981; border-color: #10b981; color: #fff; }
.trivia-opt.is-wrong { border-color: #f43f5e; background: #fff1f2; }
.trivia-opt.is-wrong .key { background: #f43f5e; border-color: #f43f5e; color: #fff; }
html.dark .trivia-opt.is-answer { border-color: #10b981; background: rgba(2, 44, 34, .6); }
html.dark .trivia-opt.is-wrong { border-color: #f43f5e; background: rgba(76, 5, 25, .5); }
.trivia-submit { width: 100%; margin-top: .75rem; }
.trivia-submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.trivia-feedback { margin-top: .75rem; padding: .75rem; border-radius: var(--radius); font-size: 12.5px; line-height: 1.55; color: var(--body); background: var(--subtle); border-left: 3px solid #10b981; }
.trivia-feedback.wrong { border-left-color: #f43f5e; }
.trivia-verdict { display: flex; align-items: center; gap: 6px; margin-bottom: .25rem; font-size: 13px; color: var(--heading); }
.trivia-verdict .icon { width: 16px; height: 16px; color: #059669; }
.trivia-feedback.wrong .trivia-verdict .icon { color: #e11d48; }
.trivia-pts { margin-left: auto; font-size: 12px; font-weight: 800; color: #059669; }
.trivia-meta { margin-top: .5rem; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.trivia-error { margin-top: .5rem; font-size: 12px; font-weight: 600; color: #be123c; }
html.dark .trivia-error { color: #fda4af; }

.trivia-board { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.trivia-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .375rem; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--heading); }
.trivia-board-head span { font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--faint); }
.trivia-board-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.trivia-board-list li { display: flex; align-items: center; gap: .5rem; padding: 6px; border-radius: var(--radius-sm); font-size: 12.5px; }
.trivia-board-list li.me { background: var(--chip-blue-bg); }
.trivia-board-list .rank { width: 20px; flex-shrink: 0; text-align: center; font-weight: 800; color: var(--muted); }
.trivia-board-list .rank.top { color: #d97706; }
.trivia-board-list .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--heading); }
.trivia-board-list .pts { font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
html.dark .trivia-board-list .pts { color: #60a5fa; }
.trivia-board-foot { margin-top: .375rem; font-size: 11.5px; color: var(--muted); }

@media (min-width: 640px) {
  .trivia-feed .trivia-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trivia-feed .trivia-submit { width: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) { .trivia-feed { display: none; } }

/* Tipografi: Inter untuk teks umum (navigasi, klasemen, dll), Karla untuk judul & skor.
   Isi artikel tetap pakai font sistem bawaan template. */
:root {
  --font-system: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-sans: "Inter", var(--font-system);
  --font-display: "Karla", var(--font-system);
}
.hero-text h2, .article-title,
.news-card-title, .island-feature h4, .bullet h5, .rec-body h4, .popular-item h4, .news-row h3, .related-item h4, .result-art p,
.page-title, .island-head h3, .table-card-head h3, .related h3, .notfound-title,
.trivia-q,
.score-val, .match-nums b, .match-nums i, .result-match .sc {
  font-family: var(--font-display);
  /* x-height Karla jauh lebih kecil dari Inter: samakan supaya ukuran px tetap terasa sama */
  font-size-adjust: ex-height 0.53;
}
.article-content, .article-summary { font-family: var(--font-system); }

/* klasemen NBA: konferensi Timur & Barat bertumpuk dalam satu kartu */
.conf-block + .conf-block { margin-top: 1.5rem; }
.conf-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--heading); }
.conf-head::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--brand); }

/* statistik pemain di bawah tabel klasemen (top skor, assist, clean sheet) */
.player-stats { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.player-stats h4 { font-size: 14px; font-weight: 700; letter-spacing: .025em; color: var(--heading); margin-bottom: .75rem; }
.player-stats-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.stat-box { min-width: 0; border-radius: var(--radius); border: 1px solid var(--divider); overflow: hidden; }
.stat-box-head { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.stat-box .no-result { padding: .75rem; font-size: 12px; }
.stat-list { margin: 0; padding: 0; list-style: none; }
.stat-list li { display: flex; align-items: center; gap: .5rem; padding: 8px .75rem; font-size: 12px; }
.stat-list li + li { border-top: 1px solid var(--divider); }
.stat-list li:hover { background: var(--soft); }
.stat-rank { width: 18px; flex-shrink: 0; text-align: center; font-weight: 700; color: var(--muted); }
.stat-player { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stat-player b, .stat-player small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-player b { font-weight: 600; color: var(--heading); }
.stat-player small { font-size: 11px; color: var(--muted); }
.stat-total { flex-shrink: 0; min-width: 24px; text-align: right; font-size: 14px; font-weight: 900; color: var(--link); }
@media (min-width: 768px) { .player-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ticker hasil akhir: logo tim dari API menggantikan team-dot */
.score-logo { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }

/* halaman jadwal: logo tim dari API, pemberitahuan cabor gagal dimuat, 3 kolom kartu di desktop, 4 kolom di layar lebar */
.team-logo img { width: 28px; height: 28px; object-fit: contain; }
.sched-notice { padding: .75rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); font-size: 12px; font-weight: 600; color: var(--body); }
@media (min-width: 1024px) { .sched-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .sched-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }