/* ============ Tokens ============ */
:root{
  --void:#0c0414;
  --panel:#170a24;
  --panel-alt:#221133;
  --panel-raised:#2e1644;
  --line:#4f2066;
  --line-soft:#39164d;

  --text:#F9E9FF;
  --text-dim:#E0A8F8;
  --muted:#BA81D0;

  /* Dominan Warna #FF00FF */
  --emerald:#FF00FF;
  --emerald-dim:#CC00CC;
  --amber:#D44DFF;
  --crimson:#FF33FF;

  --font-display:'Oswald', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius:14px;
  --radius-sm:8px;

  /* ==== Kontrol cahaya/glow judul hero (JADWAL & PREDIKSI...) ====
     Ubah 2 nilai ini saja untuk mengatur seberapa terang cahayanya:
     - blur   : makin besar angkanya, cahaya makin menyebar/tebal
     - opacity: makin kecil angkanya (0–1), cahaya makin redup
     Contoh redup total: --hero-glow-blur:0px; --hero-glow-opacity:0; */
  --hero-glow-blur:14px;
  --hero-glow-opacity:0.55;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--void);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* ANIMASI LOADING SCREEN */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--void);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader-logo {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--emerald);
  letter-spacing: 2px;
  margin-bottom: 15px;
  text-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
  animation: pulseGlow 1.2s infinite alternate;
}
.spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 0, 255, 0.2);
  border-top: 3px solid var(--emerald);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* subtle grain / vignette for atmosphere */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 90% 60% at 15% -10%, rgba(255, 0, 255,0.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(212,77,255,0.08), transparent 60%);
}

.wrap{
  max-width:1240px;
  margin:0 auto;
  padding:0 28px;
  position:relative;
  z-index:1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

body.loaded .wrap {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width:700px){
  .wrap{padding:0 16px;}
}

a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input{font-family:inherit;}

/* ============ Topbar ============ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(12,4,20,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{
  font-size:20px; color:var(--emerald);
  filter:drop-shadow(0 0 8px rgba(255, 0, 255,0.6));
}
.brand-text{display:flex; flex-direction:column; line-height:1.1;}
.brand-name{
  font-family:var(--font-display); font-weight:600;
  font-size:19px; letter-spacing:1.5px;
}
.brand-sub{font-size:11px; color:var(--muted); letter-spacing:0.3px;}

.nav{display:flex; gap:32px;}
.nav-link{
  font-size:14px; color:var(--muted); font-weight:500;
  position:relative; padding:6px 0;
  transition:color .2s ease;
}
.nav-link:hover{color:var(--text);}
.nav-link.active{color:var(--emerald);}
.nav-link.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-8px;
  height:2px; background:var(--emerald);
  box-shadow:0 0 10px rgba(255, 0, 255,0.7);
}
.menu-btn{
  display:none; flex-direction:column; gap:4px;
  background:none; border:none; padding:8px;
}
.menu-btn span{width:20px; height:2px; background:var(--text); display:block;}

@media (max-width:700px){
  .nav{display:none;}
  .menu-btn{display:flex;}
}

/* ============ Hero ============ */
.hero{
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:40px;
  padding:56px 28px 40px;
}
.hero-copy h1 {
  color: #F9E9FF;
}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:2px;
  color:var(--emerald); text-transform:uppercase; margin-bottom:14px;
}
.hero-copy h1{
  font-family:var(--font-display); font-weight:700;
  font-size:46px; letter-spacing:0.5px; line-height:1.05;
  margin-bottom:14px;
}
.hero-date{
  font-family:var(--font-mono); font-size:15px; color:var(--amber);
  margin-bottom:16px; letter-spacing:0.5px;
}
.hero-desc{
  max-width:520px; color:var(--text-dim); font-size:15px; margin-bottom:14px;
}
.hero-updated{font-size:12px; color:var(--muted);}

.hero-scoreboard{display:flex; align-items:center; justify-content:center;}
.sb-ring{position:relative; width:140px; height:140px;}
.sb-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
.sb-ring-track{fill:none; stroke:var(--line); stroke-width:6;}
.sb-ring-fill{
  fill:none; stroke:var(--emerald); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:326.7; stroke-dashoffset:326.7;
  transition:stroke-dashoffset 1s ease;
  filter:drop-shadow(0 0 8px rgba(255, 0, 255,0.7));
}
.sb-ring-label{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.sb-ring-num{font-family:var(--font-display); font-size:34px; font-weight:700;}
.sb-ring-text{
  font-family:var(--font-mono); font-size:11px; letter-spacing:2px;
  color:var(--emerald);
}

@media (max-width:820px){
  .hero{grid-template-columns:1fr; text-align:left;}
  .hero-scoreboard{display:none;}
  .hero-copy h1{font-size:34px;}
}

/* ============ Featured ticket carousel ============ */
.featured{padding:8px 28px 44px;}
.featured-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}
.featured-head h2{
  font-family:var(--font-display); font-size:20px; font-weight:600;
  letter-spacing:0.4px;
}
.carousel-nav{display:flex; gap:8px;}
.carousel-nav button{
  width:32px; height:32px; border-radius:50%;
  background:var(--panel-alt); border:1px solid var(--line);
  color:var(--text); font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s;
}
.carousel-nav button:hover{border-color:var(--emerald); color:var(--emerald);}

.ticket-row{
  overflow:hidden;
  padding:4px 4px 14px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ticket-track{
  display:flex; gap:18px; width:max-content;
  animation: marquee linear infinite;
  animation-duration:var(--marquee-duration, 28s);
}
.ticket-row:hover .ticket-track,
.ticket-row.is-paused .ticket-track{
  animation-play-state:paused;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.ticket{
  scroll-snap-align:start;
  flex:0 0 300px;
  background:linear-gradient(155deg, var(--panel-raised), var(--panel));
  border:1px solid var(--line);
  border-radius:16px;
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, border-color .25s ease;
}
.ticket:hover{transform:translateY(-4px); border-color:rgba(255, 0, 255,0.6);}
.ticket.is-live{border-color:rgba(255, 0, 255,0.65);}

.ticket-top{
  padding:16px 18px 14px;
  display:flex; align-items:flex-start; justify-content:space-between;
  min-height:52px;
}
.ticket-league{
  font-size:11px; color:var(--muted); text-transform:uppercase;
  letter-spacing:1px; font-weight:600;
  min-height:2.4em;
  line-height:1.2;
  display:flex;
  align-items:flex-start;
}
.status-pill{
  font-family:var(--font-mono); font-size:10px; letter-spacing:1px;
  padding:3px 8px; border-radius:20px; font-weight:700;
  text-transform:uppercase;
}
.status-pill.live{background:rgba(255, 0, 255,0.2); color:var(--emerald);}
.status-pill.live .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--emerald); margin-right:5px;
  animation:pulse 1.4s infinite;
}
.status-pill.upcoming{background:rgba(124,139,158,0.15); color:var(--muted);}
.status-pill.finished{background:rgba(255, 0, 255,0.15); color:var(--amber);}

@keyframes pulse{
  0%,100%{opacity:1;} 50%{opacity:.25;}
}

.ticket-teams{
  padding:0 18px 14px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:flex-start;
  gap:8px;
}
.ticket-team{display:flex; flex-direction:column; align-items:center; gap:8px;}
.crest{
  width:44px; height:44px;
  border-radius:12px;
  background:var(--panel-alt); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  color:var(--text-dim);
  overflow:hidden;
}
.crest img{
  width:auto;
  height:auto;
  max-width:85%;
  max-height:85%;
  object-fit:contain;
  margin:auto;
}
.crest-fallback{
  font-family:var(--font-display); font-weight:700; font-size:13px;
  color:var(--text-dim);
}
.ticket-team-name{
  font-size:11.5px;
  text-align:center;
  color:var(--text-dim);
  font-weight:500;
  min-height:2.6em;
  line-height:1.3;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.ticket-score{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding-top:8px;
  min-width:56px;
  text-align:center;
}
.ticket-score .score{
  font-family:var(--font-mono); font-size:24px; font-weight:700;
  letter-spacing:2px;
  font-variant-numeric:tabular-nums;
  width:100%;
  text-align:center;
}
.ticket-score .vs{
  font-family:var(--font-mono); font-size:12px; color:var(--muted);
  font-variant-numeric:tabular-nums;
  width:100%;
  text-align:center;
}
.ticket-time{
  font-family:var(--font-mono); font-size:11px; color:var(--muted);
}

.ticket-tear{
  position:relative;
  height:0; border-top:1px dashed var(--line);
  margin:0 0;
}
.ticket-tear::before, .ticket-tear::after{
  content:''; position:absolute; top:-9px; width:18px; height:18px;
  border-radius:50%; background:var(--void);
}
.ticket-tear::before{left:-9px;}
.ticket-tear::after{right:-9px;}

.ticket-pred{
  padding:12px 18px 16px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
}
.ticket-pred-label{
  font-size:10.5px; color:var(--amber); text-transform:uppercase;
  letter-spacing:1px; font-weight:700;
}
.ticket-pred-score{
  font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--text);
}
.confidence{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
.confidence-bar{
  width:52px; height:5px; border-radius:3px; background:var(--line);
  overflow:hidden;
}
.confidence-fill{
  height:100%; background:linear-gradient(90deg, var(--amber), var(--emerald));
}
.confidence-num{
  min-width:32px;
  text-align:right;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
}

/* ============ Board controls ============ */
.board{padding:8px 28px 70px;}
.board-controls{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:26px;
}
.search-box{
  flex:1 1 280px; max-width:420px;
  display:flex; align-items:center; gap:10px;
  background:var(--panel-alt); border:1px solid var(--line);
  border-radius:10px; padding:10px 14px;
}
.search-icon{color:var(--muted); font-size:14px;}
.search-box input{
  background:none; border:none; outline:none; color:var(--text);
  font-size:14px; width:100%;
}
.search-box input::placeholder{color:var(--muted);}

.filter-tabs{display:flex; gap:8px; flex-wrap:wrap;}
.filter-tab{
  padding:9px 16px; border-radius:20px; font-size:13px; font-weight:600;
  background:var(--panel-alt); border:1px solid var(--line); color:var(--muted);
  transition:all .2s ease;
}
.filter-tab:hover{color:var(--text);}
.filter-tab.active{
  background:var(--emerald); border-color:var(--emerald); color:#ffffff;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

/* ============ Panels ============ */
.panels{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
}
@media (max-width:900px){
  .panels{grid-template-columns:1fr;}
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.panel-head{
  display:flex; gap:12px; align-items:flex-start;
  padding:20px 22px;
  border-bottom:1px solid var(--line);
  background:var(--panel-alt);
}
.panel-icon{
  width:34px; height:34px; border-radius:9px;
  background:rgba(255, 0, 255,0.15); color:var(--emerald);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; font-size:15px;
}
.panel-predict .panel-icon{background:rgba(212,77,255,0.15); color:var(--amber);}
.panel-head h3{
  font-family:var(--font-display); font-size:16.5px; font-weight:600; letter-spacing:0.3px;
}
.panel-head p{font-size:12px; color:var(--muted); margin-top:2px;}

.panel-body{max-height:640px; overflow-y:auto;}
.panel-body::-webkit-scrollbar{width:6px;}
.panel-body::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}

.league-group-title{
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--emerald);
  padding:14px 22px 8px;
  background:linear-gradient(180deg, var(--panel), transparent);
}
.panel-predict .league-group-title{color:var(--amber);}

.match-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 22px;
  border-top:1px solid var(--line-soft);
  transition:background .15s ease;
}
.match-row:hover{background:var(--panel-alt);}

.match-time{
  font-family:var(--font-mono); font-size:12px; color:var(--muted);
  width:44px; flex:0 0 auto;
}
.match-teams{flex:1; min-width:0;}
.match-team-line{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13.5px; gap:8px;
}
.match-team-line + .match-team-line{margin-top:5px;}
.match-team-name{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--text-dim);
}
.match-team-line.winning .match-team-name{color:var(--text); font-weight:600;}
.match-team-score{
  font-family:var(--font-mono); font-weight:700; font-size:13.5px;
  flex:0 0 auto; min-width:16px; text-align:right;
}
.match-team-line.winning .match-team-score{color:var(--emerald);}
.panel-predict .match-team-line.winning .match-team-score{color:var(--amber);}

.match-status{
  flex:0 0 auto; width:70px; text-align:right;
}
.match-badge{
  font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  letter-spacing:0.5px; padding:3px 7px; border-radius:5px;
  text-transform:uppercase;
}
.match-badge.live{background:rgba(255, 0, 255,0.2); color:var(--emerald);}
.match-badge.upcoming{background:rgba(124,139,158,0.15); color:var(--muted);}
.match-badge.finished{background:rgba(255, 0, 255,0.15); color:var(--amber);}
.match-confidence{
  font-family:var(--font-mono); font-size:10.5px; color:var(--muted);
  margin-top:4px;
}

.empty-state{
  padding:60px 22px; text-align:center; color:var(--muted); font-size:13.5px;
}

.load-more-row{
  padding:16px 22px 20px; text-align:center;
}
.load-more{
  font-family:var(--font-mono); font-size:12px; color:var(--muted);
  border:1px dashed var(--line); border-radius:8px;
  padding:8px 16px; background:none;
}

/* ============ Footer ============ */
.site-footer{
  padding:36px 28px 60px;
  border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; color:var(--muted); font-size:12.5px;
}
.brand-footer .brand-name{font-size:15px;}

/* ============ Animations ============ */
@keyframes ticketIn{
  from{ opacity:0; transform:translateY(18px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes barFill{
  from{ width:0%; }
}
@keyframes liveGlow{
  0%,100%{ box-shadow:0 0 0 rgba(255, 0, 255,0); }
  50%{ box-shadow:0 0 22px rgba(255, 0, 255,0.4); }
}
@keyframes rowIn{
  from{ opacity:0; transform:translateX(-8px); }
  to{ opacity:1; transform:translateX(0); }
}
@keyframes pulseGlow{
  0% { opacity: 0.6; text-shadow: 0 0 5px rgba(255, 0, 255,0.4); }
  100% { opacity: 1; text-shadow: 0 0 20px rgba(255, 0, 255,0.9); }
}

.ticket{
  animation: ticketIn 0.55s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i, 0) * 90ms);
}
.ticket.is-live{
  animation: ticketIn 0.55s cubic-bezier(.22,.61,.36,1) both,
             liveGlow 2.6s ease-in-out 0.6s infinite;
}
.ticket.no-anim{
  animation: none;
}
.ticket.is-live.no-anim{
  animation: liveGlow 2.6s ease-in-out infinite;
}
.confidence-fill{
  animation: barFill 1.1s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i, 0) * 90ms + 200ms);
}
.confidence-fill.no-anim{
  animation:none;
}
.match-row{
  animation: rowIn 0.4s ease both;
}
.match-row.no-anim{
  animation:none;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  html{scroll-behavior:auto;}
  .ticket, .ticket.is-live, .confidence-fill, .match-row{ animation:none !important; }
  .ticket-track{ animation:none !important; }
}
/* Efek cahaya menyala dan berdenyut pada border dan kotak */
.ticket {
  border: 2px solid #FF00FF !important;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.4) !important;
  animation: borderGlow 2s ease-in-out infinite alternate !important;
}

@keyframes borderGlow {
  0% {
    border-color: rgba(255, 0, 255, 0.4);
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.2), inset 0 0 5px rgba(255, 0, 255, 0.1);
  }
  100% {
    border-color: rgba(255, 0, 255, 1);
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.8), inset 0 0 12px rgba(255, 0, 255, 0.4);
  }
}
/* 1. Panel — cahaya BERDENYUT rata di sekeliling border.
      Sengaja BUKAN efek "muter/lari" lagi — efek muter itu sifatnya
      posisional (titik cahaya ada DI SATU TEMPAT tiap saat), jadi
      begitu ukuran dua panel beda dikit saja karena isi kontennya
      beda, titik cahayanya bisa kelihatan cuma nongol di satu sisi.
      Efek berdenyut (opacity naik-turun rata ke SELURUH border)
      tidak punya "posisi", jadi dijamin selalu identik di kedua
      panel di waktu yang sama — tidak mungkin lagi kelihatan sebelah. */
.panel {
  position: relative;
  border-radius: var(--radius);
  border: 1.5px solid rgba(255, 0, 255, 0.3) !important;
  z-index: 1;
  animation: panelPulse 2.6s ease-in-out infinite !important;
  animation-delay: 0s !important;
}

@keyframes panelPulse {
  0%, 100% {
    border-color: rgba(255, 0, 255, 0.25);
    box-shadow: 0 0 6px rgba(255, 0, 255, 0.15), inset 0 0 6px rgba(255, 0, 255, 0.06);
  }
  50% {
    border-color: rgba(255, 0, 255, 0.9);
    box-shadow: 0 0 22px rgba(255, 0, 255, 0.5), inset 0 0 16px rgba(255, 0, 255, 0.22);
  }
}
/* ============================================================
   EFEK CAHAYA BERJALAN & KILAUAN — dominan #FF00FF
   (blok tambahan, tidak mengubah struktur/kelas yang sudah ada)
   ============================================================ */

/* --- Cahaya berjalan (shimmer sweep) di kartu & panel --- */
.shimmer-host{
  position:relative;
  overflow:hidden;
}
.shimmer-sweep{
  position:absolute;
  top:0; left:-60%;
  width:35%; height:100%;
  background:linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,0,255,0) 30%,
    rgba(255,0,255,0.35) 48%,
    rgba(255,255,255,0.65) 53%,
    rgba(255,0,255,0.35) 58%,
    rgba(255,0,255,0) 70%,
    transparent 100%
  );
  pointer-events:none;
  mix-blend-mode:screen;
  animation: sweepLight 5.5s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * 260ms);
  z-index:6;
}
@keyframes sweepLight{
  0%   { left:-60%; }
  40%  { left:130%; }
  100% { left:130%; }
}

/* --- Kilauan (sparkle) mengambang, digenerate oleh effects.js --- */
.sparkle{
  position:fixed;
  pointer-events:none;
  z-index:9990;
  background:radial-gradient(circle, #ffffff 0%, #FF00FF 45%, transparent 72%);
  border-radius:50%;
  filter:drop-shadow(0 0 6px rgba(255,0,255,0.9));
  animation: sparkleTwinkle ease-out forwards;
}
@keyframes sparkleTwinkle{
  0%   { opacity:0; transform:scale(0) rotate(0deg); }
  18%  { opacity:1; transform:scale(1) rotate(45deg); }
  100% { opacity:0; transform:scale(0.15) rotate(90deg); }
}

/* --- Sentuhan "HD/jernih": judul dengan gradient glossy --- */
.hero-copy h1{
  background:linear-gradient(180deg, #ffffff 0%, #FFB3FF 45%, #FF00FF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 var(--hero-glow-blur) rgba(255,0,255,var(--hero-glow-opacity)));
}

@media (prefers-reduced-motion: reduce){
  .shimmer-sweep{ animation:none !important; display:none; }
  .sparkle{ animation:none !important; display:none; }
}

/* ============================================================
   OVERLAY PROTEKSI (devtools / lihat sumber laman)
   ============================================================ */
#devtoolsOverlay{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:#000000;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}
#devtoolsOverlay.is-active{
  opacity:1; visibility:visible; pointer-events:auto;
}
#devtoolsOverlay img{
  max-width:min(520px, 86vw);
  max-height:80vh;
  width:auto; height:auto;
  object-fit:contain;
}

/* nonaktifkan seleksi teks & drag gambar sebagai lapisan tambahan */
body{
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}
img{
  -webkit-user-drag:none;
}
/* input tetap bisa diketik & diseleksi normal (search box dsb) */
input, textarea{
  -webkit-user-select:text;
  -moz-user-select:text;
  user-select:text;
}

/* ============================================================
   NAV MOBILE (dropdown) — blok tambahan, tidak mengubah aturan lama
   ============================================================ */
/* ============================================================
   MOBILE POLISH — blok tambahan, tidak mengubah aturan lama
   ============================================================ */

/* logo topbar — responsif, ganti inline style height:60px */
.brand-logo{
  height:60px;
  max-height:60px;
  width:auto;
  object-fit:contain;
}

/* gambar/crest tidak pernah meluber dari container-nya */
img{ max-width:100%; height:auto; }

@media (max-width:700px){
  .topbar-inner{ height:60px; }
  .brand-logo{ height:40px; }

  .hero{ padding:36px 16px 28px; gap:24px; }
  .hero-copy h1{ font-size:28px; }
  .hero-date{ font-size:13px; }
  .hero-desc{ font-size:13.5px; max-width:100%; }
  .hero-updated{ font-size:11px; }

  .featured{ padding:6px 0 34px; }
  .featured .featured-head{ padding:0 16px; }
  .ticket-row{ padding:4px 0 14px; }
  .ticket{ flex-basis:250px; }
  .ticket-teams{ padding:0 14px 12px; gap:6px; }
  .ticket-top{ padding:14px 14px 12px; }
  .ticket-pred{ padding:10px 14px 14px; }
  .crest{ width:38px; height:38px; }
  .ticket-team-name{ font-size:11px; }
  .ticket-score .score{ font-size:20px; }

  .board{ padding:6px 16px 50px; }
  .board-controls{ flex-direction:column; align-items:stretch; gap:12px; }
  .search-box{ max-width:100%; flex:0 0 auto; width:100%; }

  .filter-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .filter-tabs::-webkit-scrollbar{ display:none; }
  .filter-tab{
    flex:0 0 auto;
    white-space:nowrap;
    padding:9px 14px;
  }

  .panel-head{ padding:16px 16px; }
  .panel-body{ max-height:460px; }

  .league-group-title{ padding:12px 16px 6px; }
  .match-row{
    padding:12px 16px;
    gap:8px;
  }
  .match-time{ width:auto; font-size:11px; }
  .match-teams{ font-size:12.5px; }
  .match-team-line{ font-size:12.5px; gap:6px; }
  .match-status{ width:auto; flex:0 0 auto; }
  .match-badge{ font-size:9px; padding:3px 6px; }
  .match-confidence{ font-size:9.5px; }

  .site-footer{ padding:28px 16px 44px; }

  /* target sentuh minimal 40px untuk tombol-tombol utama */
  .menu-btn{ padding:10px; }
  .carousel-nav button{ width:38px; height:38px; }
  .load-more{ padding:10px 16px; }
}

@media (max-width:400px){
  .hero-copy h1{ font-size:24px; }
  .ticket{ flex-basis:220px; }
  .crest{ width:34px; height:34px; }
  .ticket-score .score{ font-size:18px; }
  .filter-tab{ font-size:12px; padding:8px 12px; }
}

@media (max-width:700px){
  .nav{
    display:flex;
    flex-direction:column;
    gap:0;
    position:absolute;
    top:100%; left:0; right:0;
    background:rgba(12,4,20,0.97);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);
    box-shadow:0 14px 24px rgba(0,0,0,0.4);

    max-height:0;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    transition:max-height .3s ease, opacity .25s ease;
  }
  .topbar.nav-open .nav{
    max-height:280px;
    opacity:1;
    pointer-events:auto;
  }
  .nav-link{
    padding:16px 28px;
    border-bottom:1px solid var(--line-soft);
    width:100%;
  }
  .nav-link.active::after{ display:none; }
  .nav-link.active{ background:rgba(255,0,255,0.08); }

  .topbar{ position:sticky; }
  .topbar-inner{ position:relative; }

  /* animasi ikon hamburger jadi silang (X) saat menu terbuka */
  .menu-btn span{ transition:transform .25s ease, opacity .2s ease; transform-origin:center; }
  .topbar.nav-open .menu-btn span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .topbar.nav-open .menu-btn span:nth-child(2){ opacity:0; }
  .topbar.nav-open .menu-btn span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}