/* ============================================================
   site.css — desain asli lssbo.com
   Diekstrak harfiah dari blok <style> index.html (96,7 KB) yang
   dipanen dari arsip web. TIDAK ditulis ulang dengan tangan.
   ============================================================ */


  :root{
    --ink:#0a0a08;
    --paper:#f4f1ea;
    --paper-2:#ebe5d8;
    --line:#1a1a17;
    --accent:#ff3d2e;
    --accent-2:#ffd23f;
    --green:#1d7a3a;
    --muted:#6b675e;
    --border:#d8d2c4;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--paper);color:var(--ink);font-family:'Fraunces',serif;overflow-x:hidden}
  body{
    background-image:
      radial-gradient(circle at 20% 0%, rgba(255,61,46,.06), transparent 40%),
      radial-gradient(circle at 80% 100%, rgba(29,122,58,.05), transparent 40%);
  }
  /* grain */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    opacity:.08;mix-blend-mode:multiply;
  }

  /* TOP BAR */
  .topbar{
    border-bottom:2px solid var(--ink);
    padding:.6rem 2rem;
    display:flex;justify-content:space-between;align-items:center;
    font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
    background:var(--ink);color:var(--paper);
    position:relative;z-index:2;
  }
  .topbar .ticker{display:flex;gap:2rem;overflow:hidden;flex:1;justify-content:center}
  .ticker-item{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
  .live-dot{width:8px;height:8px;background:var(--accent);border-radius:50%;animation:pulse 1.2s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

  /* HEADER */
  header{
    border-bottom:3px solid var(--ink);
    padding:1.2rem 2rem 1rem;
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;
    position:relative;z-index:2;
  }
  .logo{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2rem,5vw,3.5rem);
    line-height:.85;letter-spacing:-.02em;
    display:flex;align-items:center;
  }
  .logo-img{
    max-height:60px;
    width:auto;
    display:block;
  }
  .logo-text{display:block} /* default text version */
  .logo .dot{color:var(--accent)}
  .logo small{
    display:block;font-family:'JetBrains Mono',monospace;
    font-size:.6rem;letter-spacing:.3em;color:var(--muted);
    margin-top:.3rem;font-weight:400;
  }
  /* Saat logo.png tersedia, image akan di-load otomatis dan text akan disembunyikan via JS onerror handler.
     Default: image di-show, text di-hide. Kalau image gagal load (404), ditukar via inline JS. */
  .logo-text{display:none}
  /* Kalau Anda ingin pakai PNG: cukup taruh file 'logo.png' di folder yang sama dengan index.html.
     Ukuran ideal: width 240-360px, height 60-80px, transparent background. */
  nav.main-nav{display:flex;gap:1.5rem;font-family:'JetBrains Mono',monospace;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;justify-content:center}
  nav.main-nav a{color:var(--ink);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent;transition:.2s}
  nav.main-nav a:hover,nav.main-nav a.active{border-color:var(--accent)}
  .header-meta{text-align:right;font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.15em}
  .header-meta strong{display:block;font-size:.95rem;color:var(--ink);margin-top:.15rem}

  /* MOBILE TOGGLE */
  .mobile-menu-btn{
    display:none;
    background:var(--ink);color:var(--paper);
    border:none;padding:.5rem .8rem;
    font-family:'JetBrains Mono',monospace;font-size:.72rem;
    text-transform:uppercase;letter-spacing:.1em;cursor:pointer;
  }

  /* SPORTS TAB BAR (NAVBAR OLAHRAGA) */
  .sports-bar{
    background:var(--ink);color:var(--paper);
    padding:0;
    display:flex;justify-content:center;
    border-bottom:3px solid var(--ink);
    position:relative;z-index:2;
    overflow-x:auto;
  }
  .sport-tab{
    padding:.9rem 2rem;
    background:transparent;color:var(--paper);
    border:none;cursor:pointer;
    font-family:'Bebas Neue',sans-serif;
    font-size:1.15rem;letter-spacing:.1em;
    border-bottom:4px solid transparent;
    transition:.2s;display:flex;align-items:center;gap:.5rem;
    white-space:nowrap;
  }
  .sport-tab:hover{background:rgba(255,255,255,.05)}
  .sport-tab.active{
    background:var(--paper);color:var(--ink);
    border-bottom-color:var(--accent);
  }
  .sport-tab .icon{font-size:1.3rem}
  .sport-tab .badge{
    background:var(--accent);color:var(--paper);
    font-family:'JetBrains Mono',monospace;
    font-size:.6rem;padding:.1rem .35rem;
    margin-left:.3rem;border-radius:2px;
  }

  /* HERO */
  .hero{
    padding:2rem 2rem;
    display:grid;grid-template-columns:1fr 1fr;gap:2rem;
    border-bottom:2px solid var(--ink);
    position:relative;z-index:2;
  }
  .hero-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2.2rem,7vw,5.5rem);
    line-height:.88;letter-spacing:-.01em;
  }
  .hero-title em{font-family:'Fraunces',serif;font-style:italic;font-weight:300;color:var(--accent)}
  .hero-sub{
    font-size:1rem;line-height:1.5;color:var(--muted);
    align-self:end;max-width:42ch;
    border-left:3px solid var(--accent);padding-left:1.2rem;
  }
  .hero-sub strong{color:var(--ink)}

  /* DATE NAVIGATOR — Horizontal scrollable date picker */
  .date-nav{
    background:var(--paper-2);
    border-bottom:2px solid var(--ink);
    padding:.6rem 1rem;
    display:flex;align-items:center;gap:.4rem;
    position:relative;z-index:2;
    overflow:hidden;
  }
  .date-nav-arrow{
    background:var(--ink);color:var(--paper);
    border:none;width:32px;height:32px;
    cursor:pointer;
    font-size:1rem;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    transition:.15s;
  }
  .date-nav-arrow:hover{background:var(--accent)}
  .date-nav-arrow:disabled{opacity:.3;cursor:not-allowed}
  .date-list{
    display:flex;gap:.4rem;
    overflow-x:auto;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    flex:1;
    padding:.2rem 0;
    scroll-snap-type:x proximity;
  }
  .date-list::-webkit-scrollbar{display:none}
  .date-list{scrollbar-width:none}

  .date-btn{
    padding:.5rem .9rem;
    background:var(--paper);
    border:1.5px solid var(--ink);
    font-family:'JetBrains Mono',monospace;
    cursor:pointer;transition:.15s;color:var(--ink);
    display:flex;flex-direction:column;align-items:center;
    flex-shrink:0;
    min-width:64px;
    line-height:1.2;
    scroll-snap-align:center;
  }
  .date-btn:hover{background:var(--ink);color:var(--paper)}
  .date-btn.active{
    background:var(--accent);color:var(--paper);border-color:var(--accent);
    transform:scale(1.05);
  }
  .date-btn .day-name{
    font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;
    opacity:.75;
  }
  .date-btn .day-num{
    font-family:'Bebas Neue',sans-serif;
    font-size:1.4rem;line-height:1;margin-top:.15rem;
  }
  .date-btn .day-month{
    font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;
    opacity:.7;margin-top:.1rem;
  }
  .date-btn.today-marker{
    border-color:var(--accent);
    box-shadow:0 0 0 1px var(--accent) inset;
  }
  .date-btn.today-marker:not(.active) .day-name{color:var(--accent)}

  /* MAIN GRID — 3 COLUMN: SIDEBAR | MATCHES | RIGHT */
  main{
    display:grid;
    grid-template-columns:240px 1fr 300px;
    gap:0;position:relative;z-index:2;
  }

  /* ============ LEFT SIDEBAR (KELOMPOK BENUA) ============ */
  .sidebar-left{
    border-right:2px solid var(--ink);
    background:var(--paper-2);
    padding:0;
  }
  .sidebar-left .sb-search{
    padding:.7rem;border-bottom:2px solid var(--ink);
    background:var(--paper);
  }
  .sidebar-left .sb-search input{
    width:100%;padding:.5rem .7rem;
    border:1.5px solid var(--ink);background:var(--paper-2);
    font-family:'JetBrains Mono',monospace;font-size:.75rem;
    color:var(--ink);
  }
  .sidebar-left .sb-search input:focus{outline:none;border-color:var(--accent)}

  .continent-block{margin-bottom:0}
  .continent-head{
    background:var(--ink);color:var(--paper);
    padding:.7rem 1rem;
    font-family:'Bebas Neue',sans-serif;
    font-size:1rem;letter-spacing:.15em;
    border-bottom:1px solid var(--paper);
  }
  .continent-head.tournament-head{
    background:linear-gradient(90deg,var(--ink) 0%,#3a2a1a 100%);
    color:var(--accent-2);
    font-size:1rem;
    border-bottom:2px solid var(--accent);
  }
  .tournament-section{
    border-left:3px solid var(--accent-2);
  }
  .country-item{
    display:flex;align-items:center;justify-content:space-between;
    padding:.6rem .9rem;
    background:var(--paper-2);
    border-bottom:1px solid var(--border);
    cursor:pointer;transition:.15s;
    font-family:'Fraunces',serif;font-size:.92rem;
  }
  .country-item:hover{background:var(--paper);padding-left:1.1rem}
  .country-item.active{
    background:var(--paper);color:var(--ink);
    border-left:4px solid var(--accent);padding-left:.7rem;
  }
  .country-item.tournament-item{
    font-weight:600;
    background:#fffaef;
  }
  .country-item.tournament-item:hover{background:#fff}
  .country-item.world-cup{
    background:linear-gradient(90deg,#fff8d6 0%,#fffbe8 100%);
    border-left:4px solid var(--accent);
    padding-left:.7rem;
    font-weight:700;
    position:relative;
  }
  .country-item.world-cup::after{
    content:"AKTIF";
    position:absolute;right:.6rem;top:50%;transform:translateY(-50%);
    background:var(--accent);color:#fff;
    padding:.1rem .4rem;
    font-family:'JetBrains Mono',monospace;font-size:.55rem;
    font-weight:700;letter-spacing:.1em;
  }
  .country-item.world-cup.active{
    background:linear-gradient(90deg,#ffd23f 0%,#fff8d6 100%);
  }
  .country-item .left{display:flex;align-items:center;gap:.6rem}
  .country-item .flag{font-size:1.05rem}
  .country-item .arrow{
    font-family:'JetBrains Mono',monospace;color:var(--muted);
    font-size:.85rem;
  }
  .country-item.active .arrow{color:var(--accent)}
  .country-item.dim{
    opacity:.55;
  }
  .country-item.dim:hover{opacity:1}
  .country-item.dim .arrow{color:var(--border)}
  .match-count{
    background:var(--paper);
    color:var(--muted);
    border:1px solid var(--border);
    padding:.1rem .4rem;
    font-family:'JetBrains Mono',monospace;font-size:.65rem;
    font-weight:700;letter-spacing:.05em;
    min-width:22px;text-align:center;
  }
  .country-item.active .match-count{
    background:var(--accent);color:#fff;border-color:var(--accent);
  }
  .live-pill{
    background:var(--accent);color:#fff;
    padding:.15rem .4rem;
    font-family:'JetBrains Mono',monospace;font-size:.6rem;
    font-weight:700;letter-spacing:.05em;
    display:flex;align-items:center;gap:.25rem;
  }
  .live-pill::before{
    content:"";width:5px;height:5px;background:#fff;
    border-radius:50%;animation:pulse 1.2s infinite;
  }

  /* ============ MATCHES (CENTER) ============ */
  .matches-section{
    padding:1.5rem;border-right:2px solid var(--ink);
    min-height:60vh;
  }
  .section-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:1.6rem;letter-spacing:.02em;
    margin-bottom:1rem;
    display:flex;align-items:center;gap:1rem;
  }
  .section-title::after{
    content:"";flex:1;height:2px;background:var(--ink);
  }
  .league-block{margin-bottom:1.5rem}

  /* ============ PIALA DUNIA BANNER ============ */
  .worldcup-banner{
    background:linear-gradient(135deg,var(--ink) 0%,#2a1a0a 100%);
    color:var(--paper);
    padding:1.2rem 1.5rem;
    margin-bottom:0;
    display:flex;align-items:center;gap:1.2rem;
    position:relative;overflow:hidden;
    border:2px solid var(--accent-2);
    border-bottom:none;
  }
  .worldcup-banner::before{
    content:"";position:absolute;
    top:-30%;right:-10%;width:200px;height:200px;
    background:radial-gradient(circle,rgba(255,210,63,.15) 0%,transparent 70%);
    pointer-events:none;
  }
  .worldcup-banner .wc-badge{
    background:var(--accent-2);color:var(--ink);
    padding:.6rem .9rem;
    font-family:'Bebas Neue',sans-serif;
    font-size:1.3rem;letter-spacing:.05em;line-height:1;
    flex-shrink:0;
    border:2px solid var(--ink);
    box-shadow:3px 3px 0 var(--accent);
  }
  .worldcup-banner .wc-text{
    display:flex;flex-direction:column;gap:.15rem;
    font-family:'Fraunces',serif;
  }
  .worldcup-banner .wc-text strong{
    font-family:'Bebas Neue',sans-serif;font-size:1.2rem;
    letter-spacing:.05em;color:var(--accent-2);
  }
  .worldcup-banner .wc-text span{
    font-size:.88rem;color:#c8c4ba;
  }
  .worldcup-block{
    border:2px solid var(--accent-2);
    border-top:none;
    margin-bottom:2rem;
  }
  .league-header.worldcup-header{
    background:linear-gradient(90deg,#1a1a17 0%,#3a2810 100%);
    color:var(--accent-2);
    border-bottom:1px solid var(--accent);
  }

  /* ============ UPCOMING MATCHES ============ */
  .upcoming-banner{
    background:linear-gradient(135deg,#0a3a2a 0%,#0a0a08 100%);
    color:var(--paper);
    padding:1rem 1.4rem;
    margin-bottom:1.2rem;
    display:flex;align-items:center;gap:1rem;
    border:2px solid #1d7a3a;
    position:relative;
  }
  .upcoming-banner .ub-icon{
    font-size:2rem;flex-shrink:0;
  }
  .upcoming-banner .ub-text{
    display:flex;flex-direction:column;gap:.15rem;
    font-family:'Fraunces',serif;
  }
  .upcoming-banner .ub-text strong{
    font-family:'Bebas Neue',sans-serif;font-size:1.2rem;
    letter-spacing:.05em;color:#5fd380;
  }
  .upcoming-banner .ub-text span{
    font-size:.88rem;color:#c8c4ba;
  }
  .upcoming-block{
    border:1.5px solid var(--border);
  }
  .upcoming-date-header{
    background:var(--paper-2);
    padding:.55rem .9rem;
    font-family:'JetBrains Mono',monospace;
    font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;
    color:var(--ink);font-weight:700;
    border-top:1px dashed var(--border);
    border-bottom:1px solid var(--border);
  }
  .upcoming-date-header:first-of-type{border-top:none}
  .league-header{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:.55rem .85rem;background:var(--ink);color:var(--paper);
    font-family:'JetBrains Mono',monospace;font-size:.74rem;
    text-transform:uppercase;letter-spacing:.15em;
  }
  .league-header .country{color:var(--accent-2)}

  .match-row{
    display:grid;
    grid-template-columns:65px 1fr 75px 1fr auto;
    align-items:center;
    padding:.85rem .85rem;
    border-bottom:1px solid rgba(26,26,23,.12);
    background:var(--paper);
    transition:background .15s;
    gap:.5rem;
    cursor:pointer;
  }
  .match-row:hover{background:var(--paper-2)}
  .match-row.expanded{background:var(--paper-2);border-bottom:none}
  .match-actions{
    display:flex;align-items:center;gap:.4rem;
  }
  .action-btn{
    background:transparent;border:1.5px solid var(--ink);
    width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--ink);
    font-family:'JetBrains Mono',monospace;font-size:.75rem;
    transition:.15s;font-weight:700;
  }
  .action-btn:hover{background:var(--ink);color:var(--paper)}
  .action-btn.live-btn{
    background:var(--accent);color:var(--paper);border-color:var(--accent);
    width:auto;padding:0 .5rem;height:30px;gap:.25rem;
    display:flex;align-items:center;
    font-size:.65rem;letter-spacing:.05em;
  }
  .action-btn.live-btn::before{
    content:"";width:5px;height:5px;background:#fff;border-radius:50%;
    animation:pulse 1.2s infinite;
  }
  .action-btn.expand-btn .chev{
    display:inline-block;transition:transform .25s;
  }
  .match-row.expanded .action-btn.expand-btn .chev{transform:rotate(180deg)}

  /* ============ MATCH DETAILS PANEL (DROPDOWN STATS) ============ */
  .match-details{
    background:var(--paper-2);
    border-bottom:1px solid rgba(26,26,23,.12);
    padding:0;overflow:hidden;
    max-height:0;transition:max-height .35s ease;
  }
  .match-details.open{max-height:1200px;border-bottom:2px solid var(--ink)}
  .match-details-inner{
    padding:1.5rem 1.5rem 1.8rem;
  }
  .md-tabs{
    display:flex;gap:0;margin-bottom:1.2rem;
    border-bottom:2px solid var(--ink);
  }
  .md-tab{
    padding:.5rem 1rem;background:transparent;
    border:none;cursor:pointer;
    font-family:'JetBrains Mono',monospace;font-size:.7rem;
    text-transform:uppercase;letter-spacing:.1em;
    color:var(--muted);position:relative;
  }
  .md-tab.active{color:var(--ink);font-weight:700}
  .md-tab.active::after{
    content:"";position:absolute;bottom:-2px;left:0;right:0;
    height:3px;background:var(--accent);
  }
  .md-content{display:none}
  .md-content.active{display:block}

  /* STATS BARS */
  .stats-list{display:flex;flex-direction:column;gap:.85rem}
  .stat-item{
    display:grid;grid-template-columns:60px 1fr 60px;
    align-items:center;gap:.7rem;
  }
  .stat-item .label{
    grid-column:1/-1;
    text-align:center;
    font-family:'JetBrains Mono',monospace;font-size:.68rem;
    text-transform:uppercase;letter-spacing:.15em;
    color:var(--muted);margin-bottom:-.4rem;
  }
  .stat-item .num{
    font-family:'Bebas Neue',sans-serif;font-size:1.3rem;
    line-height:1;
  }
  .stat-item .num.left{text-align:right}
  .stat-item .num.right{text-align:left}
  .stat-bar{
    height:6px;display:flex;
    background:var(--border);
    overflow:hidden;
  }
  .stat-bar .home-bar{background:var(--accent);transition:width .5s}
  .stat-bar .away-bar{background:var(--ink);transition:width .5s}
  .stat-bar.away-leading .home-bar{background:#cdc8b9}
  .stat-bar.home-leading .away-bar{background:#cdc8b9}

  .md-summary{
    display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;gap:1rem;margin-bottom:1.2rem;
    padding-bottom:1rem;border-bottom:1px dashed var(--border);
  }
  .md-summary .team-block{font-family:'Fraunces',serif;font-size:1rem;font-weight:600}
  .md-summary .team-block.away{text-align:right}
  .md-summary .vs-block{
    font-family:'Bebas Neue',sans-serif;font-size:1.2rem;
    color:var(--muted);
  }
  .md-no-stats{
    padding:2rem 1rem;text-align:center;color:var(--muted);
    font-style:italic;font-size:.92rem;
  }

  /* STREAMING TAB */
  .stream-container{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#000;
    border:2px solid var(--ink);
  }
  .stream-container iframe{
    width:100%;height:100%;border:none;
  }
  .stream-placeholder{
    position:absolute;inset:0;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    color:var(--paper);text-align:center;padding:1rem;
    background:
      radial-gradient(circle at center, #1a1a17 0%, #000 100%);
  }
  .stream-placeholder .icon{
    font-size:3rem;margin-bottom:.5rem;
  }
  .stream-placeholder h4{
    font-family:'Bebas Neue',sans-serif;font-size:1.4rem;
    letter-spacing:.05em;
  }
  .stream-placeholder p{
    font-family:'Fraunces',serif;font-style:italic;
    font-size:.9rem;color:#aaa;margin-top:.5rem;max-width:40ch;
  }
  .stream-disclaimer{
    margin-top:.8rem;
    font-family:'JetBrains Mono',monospace;
    font-size:.65rem;color:var(--muted);
    text-transform:uppercase;letter-spacing:.1em;
    text-align:center;
  }

  /* TIMELINE/EVENTS */
  .events-list{display:flex;flex-direction:column;gap:.5rem}
  .event{
    display:grid;grid-template-columns:50px 30px 1fr;
    gap:.6rem;align-items:center;
    padding:.5rem .7rem;
    background:var(--paper);
    border-left:3px solid var(--accent);
    font-family:'Fraunces',serif;font-size:.9rem;
  }
  .event .time{
    font-family:'JetBrains Mono',monospace;font-size:.78rem;
    font-weight:700;color:var(--accent);
  }
  .event .icon{font-size:1.1rem;text-align:center}
  .match-status{
    font-family:'JetBrains Mono',monospace;font-size:.7rem;
    text-transform:uppercase;letter-spacing:.08em;
  }
  .match-status.live{color:var(--accent);font-weight:700;display:flex;align-items:center;gap:.25rem}
  .match-status.live::before{content:"";width:5px;height:5px;background:var(--accent);border-radius:50%;animation:pulse 1.2s infinite}
  .match-status.ft{color:var(--muted)}
  .match-status.up{color:var(--ink)}
  .team{
    font-family:'Fraunces',serif;font-weight:500;font-size:.95rem;
    display:flex;align-items:center;gap:.5rem;
    overflow:hidden;
  }
  .team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .team.away{justify-content:flex-end;text-align:right}
  .team-logo{
    width:26px;height:26px;border-radius:50%;
    background:linear-gradient(135deg,var(--paper-2),var(--paper));
    border:1.5px solid var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-family:'Bebas Neue',sans-serif;font-size:.8rem;
    flex-shrink:0;
  }
  .score{
    font-family:'Bebas Neue',sans-serif;font-size:1.6rem;
    text-align:center;letter-spacing:.05em;
    line-height:1;
  }
  .score.live-score{color:var(--accent)}
  .score-vs{color:var(--muted);font-size:.95rem}

  .empty-state{
    padding:3rem 1rem;text-align:center;color:var(--muted);
    font-style:italic;font-size:.95rem;
    background:var(--paper);border:1px dashed var(--border);
  }

  /* ============ INLINE AD SLOTS ============ */
  .ad-slot{
    margin:1rem 0;
    background:repeating-linear-gradient(45deg,#ebe5d8,#ebe5d8 10px,#e0d9c7 10px,#e0d9c7 20px);
    border:2px dashed var(--ink);
    padding:1.5rem;
    text-align:center;
    position:relative;
  }
  .ad-slot::before{
    content:"AD";position:absolute;top:.4rem;left:.6rem;
    font-family:'JetBrains Mono',monospace;font-size:.6rem;
    background:var(--ink);color:var(--paper);
    padding:.1rem .35rem;letter-spacing:.15em;
  }
  .ad-slot .ad-label{
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;
    color:var(--muted);margin-bottom:.4rem;
  }
  .ad-slot .ad-content{
    font-family:'Bebas Neue',sans-serif;
    font-size:1.4rem;letter-spacing:.05em;color:var(--ink);
    line-height:1;
  }
  .ad-slot .ad-content small{
    display:block;font-family:'Fraunces',serif;font-style:italic;
    font-size:.85rem;color:var(--muted);font-weight:400;
    margin-top:.3rem;letter-spacing:0;text-transform:none;
  }
  .ad-banner{padding:2rem 1rem}
  .ad-banner .ad-content{font-size:1.7rem}

  /* ============ RIGHT SIDEBAR ============ */
  aside.sidebar-right{
    padding:1.5rem 1.2rem;
    background:var(--paper-2);
  }
  .widget-promo{
    background:var(--ink);color:var(--paper);
    padding:1.3rem;
    border:2px solid var(--ink);
    margin-bottom:1.2rem;
    position:relative;
  }
  .widget-promo::before{
    content:"NEW";position:absolute;top:-10px;right:1rem;
    background:var(--accent-2);color:var(--ink);
    padding:.2rem .6rem;font-family:'JetBrains Mono',monospace;
    font-size:.7rem;font-weight:700;letter-spacing:.1em;
  }
  .widget-promo h3{
    font-family:'Bebas Neue',sans-serif;font-size:1.5rem;
    line-height:.95;margin-bottom:.5rem;
  }
  .widget-promo p{
    font-size:.84rem;line-height:1.5;color:#c8c4ba;
    margin-bottom:.9rem;
  }
  .btn{
    display:inline-block;padding:.55rem 1rem;
    background:var(--accent);color:var(--paper);
    font-family:'JetBrains Mono',monospace;font-size:.74rem;
    text-transform:uppercase;letter-spacing:.1em;font-weight:700;
    text-decoration:none;border:none;cursor:pointer;
    transition:transform .15s;
  }
  .btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--accent-2)}

  .stats-card{
    background:var(--paper);border:2px solid var(--ink);
    padding:1.1rem;margin-bottom:1rem;
  }
  .stats-card h4{
    font-family:'JetBrains Mono',monospace;font-size:.7rem;
    text-transform:uppercase;letter-spacing:.15em;color:var(--muted);
    margin-bottom:.6rem;
  }
  .stat-row{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:.4rem 0;border-bottom:1px dashed rgba(26,26,23,.2);
    font-family:'Fraunces',serif;font-size:.92rem;
  }
  .stat-row:last-child{border:none}
  .stat-row .num{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;color:var(--accent)}

  /* FOOTER */
  footer{
    border-top:3px solid var(--ink);
    padding:2rem;
    background:var(--ink);color:var(--paper);
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;
    position:relative;z-index:2;
  }
  footer h5{
    font-family:'JetBrains Mono',monospace;font-size:.72rem;
    text-transform:uppercase;letter-spacing:.2em;
    color:var(--accent-2);margin-bottom:.8rem;
  }
  footer p,footer a{
    color:#c8c4ba;text-decoration:none;font-size:.88rem;line-height:1.6;
    display:block;
  }
  footer a:hover{color:var(--paper)}
  .foot-logo{
    font-family:'Bebas Neue',sans-serif;font-size:2.2rem;
    line-height:.9;color:var(--paper);margin-bottom:.5rem;
  }

  /* ===================== MOBILE ===================== */
  @media (max-width:1100px){
    main{grid-template-columns:200px 1fr}
    aside.sidebar-right{display:none}
    .matches-section{border-right:none}
  }

  @media (max-width:760px){
    .topbar{padding:.5rem 1rem;font-size:.62rem;flex-wrap:wrap;gap:.4rem}
    .topbar .ticker{display:none}

    header{
      grid-template-columns:auto 1fr auto;
      padding:.6rem .8rem .3rem;
      gap:.4rem;
      align-items:center;
    }
    .logo{font-size:clamp(1.5rem, 8vw, 2.2rem)}
    .logo-img{max-height:42px}
    /* Nav: tampil di mobile sebagai second row di bawah logo */
    nav.main-nav{
      display:flex;
      grid-column:1/-1;
      order:3;
      gap:1.1rem;
      font-size:.68rem;
      padding:.5rem 0 .2rem;
      border-top:1px solid var(--paper-2);
      margin-top:.4rem;
      justify-content:center;
    }
    /* Lang switcher tampil di header kanan-atas */
    .header-meta{
      display:flex;
      align-items:center;
      grid-column:auto;
      justify-self:end;
      text-align:right;
      gap:.4rem;
    }
    .header-meta .meta-text{display:none} /* sembunyikan teks tanggal di mobile, hemat space */
    .header-meta #langSwitcher{margin-bottom:0!important}
    .mobile-menu-btn{
      display:block;
      padding:.4rem .55rem;
      font-size:.68rem;
      letter-spacing:.05em;
    }

    /* Compact sport-bar di mobile */
    .sports-bar{
      justify-content:space-between;
      padding:0;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    .sports-bar::-webkit-scrollbar{display:none}
    .sport-tab{
      padding:.45rem .5rem;
      font-size:.7rem;
      letter-spacing:.04em;
      flex:1 1 auto;
      min-width:0;
      justify-content:center;
      border-bottom-width:2px;
    }
    .sport-tab .icon{font-size:.85rem}
    .sport-tab span:not(.icon):not(.badge){
      font-size:.7rem;
    }
    .sport-tab .badge{
      font-size:.5rem;
      padding:.02rem .2rem;
      margin-left:.2rem;
    }

    .hero{
      grid-template-columns:1fr;
      padding:1.5rem 1rem;gap:1rem;
    }
    .hero-sub{margin-top:.5rem;font-size:.92rem}

    .date-nav{
      padding:.5rem .5rem;gap:.3rem;
    }
    .date-nav-arrow{width:28px;height:28px;font-size:.85rem}
    .date-btn{
      padding:.4rem .6rem;
      min-width:54px;
    }
    .date-btn .day-name{font-size:.55rem}
    .date-btn .day-num{font-size:1.1rem}
    .date-btn .day-month{font-size:.5rem}

    main{
      grid-template-columns:1fr;
    }
    .sidebar-left{
      display:none; /* hidden by default, shown via toggle */
      border-right:none;border-bottom:2px solid var(--ink);
    }
    .sidebar-left.open{display:block}
    .matches-section{padding:1rem .8rem;border-right:none}

    .match-row{
      grid-template-columns:50px 1fr 60px 1fr auto;
      padding:.7rem .6rem;gap:.35rem;
    }
    .team{font-size:.82rem;gap:.35rem}
    .team-logo{width:22px;height:22px;font-size:.7rem}
    .score{font-size:1.25rem}
    .match-actions{flex-direction:column;gap:.25rem}
    .action-btn{width:26px;height:26px;font-size:.7rem}
    .action-btn.live-btn{height:26px;font-size:.55rem;padding:0 .35rem}

    .match-details-inner{padding:1rem .8rem 1.2rem}
    .stat-item{grid-template-columns:45px 1fr 45px;gap:.5rem}
    .stat-item .num{font-size:1.05rem}
    .md-summary{font-size:.85rem}

    .league-header{padding:.5rem .65rem;font-size:.68rem}
    .league-header .country{font-size:.65rem}

    footer{
      grid-template-columns:1fr;padding:1.5rem 1rem;gap:1.2rem;
    }
  }

  /* DATA SOURCE BANNER */
  .data-banner{
    padding:.55rem 2rem;
    border-bottom:2px solid var(--ink);
    font-family:'JetBrains Mono',monospace;font-size:.72rem;
    text-transform:uppercase;letter-spacing:.1em;
    display:flex;justify-content:space-between;align-items:center;
    position:relative;z-index:2;flex-wrap:wrap;gap:.5rem;
  }
  .data-banner.demo{
    background:#fff8e7;color:var(--ink);
    border-bottom-color:var(--accent-2);
  }
  .data-banner.live{
    background:#f0f9f3;color:var(--ink);
    border-bottom-color:var(--green);
  }
  .data-banner.live::before{
    content:"";display:inline-block;width:8px;height:8px;
    background:var(--green);border-radius:50%;
    margin-right:.4rem;animation:pulse 1.2s infinite;
  }
  .data-banner a{
    color:var(--accent);font-weight:700;
    text-decoration:underline;
  }
  .loading-overlay{
    padding:3rem 1rem;text-align:center;
    color:var(--muted);font-style:italic;
  }
  .loading-overlay::before{
    content:"⏳";font-size:2rem;display:block;margin-bottom:.6rem;
  }

  @media (max-width:760px){
    .data-banner{padding:.5rem 1rem;font-size:.62rem}
    .worldcup-banner{padding:.9rem 1rem;flex-direction:column;align-items:flex-start;gap:.7rem}
    .worldcup-banner .wc-badge{font-size:1rem;padding:.4rem .7rem}
    .worldcup-banner .wc-text strong{font-size:1rem}
    .worldcup-banner .wc-text span{font-size:.78rem}
    .country-item.world-cup::after{font-size:.5rem;padding:.08rem .3rem}
    .upcoming-banner{padding:.8rem 1rem;flex-direction:row;gap:.7rem}
    .upcoming-banner .ub-icon{font-size:1.5rem}
    .upcoming-banner .ub-text strong{font-size:1rem}
    .upcoming-banner .ub-text span{font-size:.75rem}
    .upcoming-date-header{font-size:.65rem;padding:.45rem .7rem}
  }