/*
Theme Name: TembakBola
Theme URI: https://tembakbola.my.id/
Author: Guru
Author URI: https://tembakbola.my.id/
Description: Theme khusus portal bola (mobile & desktop). Slider hasil/jadwal, berita transfer, liga populer, cerita bola, klasemen, dan footer gelap.
Version: 1.0.0
Text Domain: tembakbola
*/
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color:#111}
img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}ul{list-style:none;padding:0;margin:0}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}
.tb-header{background:#2f6fb5}.tb-header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.tb-brand{font-weight:800;font-size:22px;color:#fff;letter-spacing:.3px}.tb-brand .accent{background:linear-gradient(90deg,#ff8a00,#0ea5e9);-webkit-background-clip:text;background-clip:text;color:transparent}
.tb-nav{display:flex;gap:12px}.tb-search{flex:1;display:flex;justify-content:flex-end}.tb-search form{width:100%;max-width:360px;display:flex}
.tb-search input[type=search]{flex:1;padding:10px 12px;border:none;border-radius:8px 0 0 8px}.tb-search button{padding:10px 14px;border:none;background:#0b3a66;color:#fff;border-radius:0 8px 8px 0;cursor:pointer}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:16px 0 10px}.section-title h2,.section-title h3{font-size:18px;font-weight:800;margin:0}.section-title .more{font-size:14px;color:#0b3a66}
.tb-slider{position:relative}.tb-slider-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:8px}
.tb-slide{min-width:240px;scroll-snap-align:start;background:#fff;border:1px solid #eaeaea;border-radius:12px;padding:12px}
.tb-slider .nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:8px;pointer-events:none}
.tb-slider .nav button{pointer-events:all;border:none;width:36px;height:36px;border-radius:999px;background:#0b3a66;color:#fff;cursor:pointer;opacity:.9}
.tb-slider .nav .prev{left:-6px;position:absolute}.tb-slider .nav .next{right:-6px;position:absolute}
.tb-vslider{position:relative}.tb-vslider-track{max-height:680px;overflow-y:auto;scroll-snap-type:y mandatory;display:flex;flex-direction:column;gap:12px;padding-right:8px}
.tb-vslide{scroll-snap-align:start;border:1px solid #eaeaea;border-radius:12px;padding:10px;display:flex;gap:10px;background:#fff}
.tb-vslider .vnav{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:8px}
.tb-vslider .vnav button{border:none;width:36px;height:36px;border-radius:8px;background:#0b3a66;color:#fff;cursor:pointer;opacity:.9}
.match-card{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700}.match-card .teams{display:flex;align-items:center;gap:10px}.match-card .score{background:#0b3a66;color:#fff;padding:6px 10px;border-radius:8px}
.transfer-section{background:#0b0b0b;color:#f3f3f3;padding:10px 0 16px;border-radius:14px}.transfer-section .tb-slide{background:#141414;border-color:#262626}
.liga-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.liga-item{background:#fff;border:1px solid #eee;border-radius:14px;padding:16px;text-align:center;font-weight:800}.liga-item small{display:block;font-weight:600;opacity:.8;margin-top:6px}
.article-item{display:flex;gap:10px}.article-item .thumb{width:104px;border-radius:10px;overflow:hidden;background:#eee}.article-item .meta{flex:1;align-self:center}.article-item .meta h4{font-size:15px;margin:0;line-height:1.25}
@media (min-width:1024px){.columns{display:grid;grid-template-columns:2fr 1fr;gap:18px}.box{border:1px solid #eaeaea;border-radius:14px;padding:12px;background:#fff}.box h3{margin:0 0 10px;font-size:16px;font-weight:800}.list-text li{padding:6px 0;border-bottom:1px dashed #efefef}.list-text li:last-child{border-bottom:none}}
.site-footer{background:#000;color:#fff;margin-top:24px}.site-footer .inner{padding:24px 0}.brand-footer{font-weight:900;font-size:20px;letter-spacing:.4px;background:linear-gradient(90deg,#ff8a00,#0ea5e9);-webkit-background-clip:text;background-clip:text;color:transparent}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;background:#eef6ff;color:#0b3a66;font-weight:700}.bg-dark{background:#0b0b0b;color:#fff}.mx-auto{margin-left:auto;margin-right:auto}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-10{margin-bottom:10px}.hidden{display:none}
/* === FORCE style utk modul tiles Hasil/Jadwal === */
.tb-league-tiles .tb-slider.tiles{ padding:0 !important; }
.tb-league-tiles .tb-slider-track.tiles{
  display:flex !important; gap:12px !important; align-items:stretch !important;
  overflow-x:auto !important; scroll-snap-type:x mandatory !important;
}

/* Kartu seragam di mobile */
.tb-league-tiles .league-tile{
  box-sizing:border-box !important;
  display:flex !important; flex-direction:column !important;
  justify-content:center !important; align-items:center !important;
  width:180px !important; height:132px !important; min-height:132px !important;
  padding:14px 10px !important; border:1px solid #ececec !important;
  border-radius:14px !important; background:#fff !important;
  text-align:center !important; scroll-snap-align:start !important;
}
.tb-league-tiles .league-tile .tile-icon{ font-size:22px !important; margin-bottom:6px !important; }
.tb-league-tiles .league-tile .tile-label{ font-size:20px !important; font-weight:800 !important; line-height:1.15 !important; }
.tb-league-tiles .league-tile .tile-sub{ font-size:12px !important; color:#6b7280 !important; }

/* Panah menempel di tepi layar */
.tb-league-tiles .tb-slider.tiles .nav .prev{ left:8px !important; }
.tb-league-tiles .tb-slider.tiles .nav .next{ right:8px !important; }

/* Sedikit lebih lebar di tablet/desktop */
@media (min-width:641px){
  .tb-league-tiles .league-tile{ width:220px !important; height:128px !important; }
}

/* (opsional) seragamkan grid Liga Populer kalau perlu */
.liga-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (min-width:768px){ .liga-grid{ grid-template-columns:repeat(6,1fr); } }
.liga-grid .liga-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:132px; border:1px solid #ececec; border-radius:14px; background:#fff; text-align:center;
}(function(){
  function toggleArrows(slider){
    const track = slider.querySelector('.tb-slider-track');
    const nav   = slider.querySelector('.nav');
    if (!track || !nav) return;
    nav.style.display = (track.scrollWidth > track.clientWidth + 4) ? '' : 'none';
  }
  function initTiles(slider){
    if (!slider || slider.dataset.inited) return;
    slider.dataset.inited = '1';
    const track = slider.querySelector('.tb-slider-track');
    const prev  = slider.querySelector('.prev');
    const next  = slider.querySelector('.next');
    if (!track || !prev || !next) return;

    const by = () => Math.max(180, Math.round(track.clientWidth * 0.9));
    prev.addEventListener('click', ()=>track.scrollBy({left:-by(), behavior:'smooth'}));
    next.addEventListener('click', ()=>track.scrollBy({left: by(), behavior:'smooth'}));

    toggleArrows(slider);
    new ResizeObserver(()=>toggleArrows(slider)).observe(track);
  }

  // Init saat halaman siap
  document.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('.tb-league-tiles .tb-slider.tiles').forEach(initTiles);
  });

  // Recalc saat ganti tab → panah "Jadwal" keluar
  document.addEventListener('click', function(e){
    const tab = e.target.closest('.tb-league-tiles .tb-tab'); if(!tab) return;
    const root = tab.closest('.tb-league-tiles');
    setTimeout(()=>root.querySelectorAll('.tb-slider.tiles').forEach(toggleArrows), 0);
  }, {passive:true});
})();
/* === Paksa panah terlihat di mobile (kalau sebelumnya tersembunyi) === */
@media (max-width:640px){
  .tb-league-tiles .tb-slider.tiles{ padding:0 !important; }
  .tb-league-tiles .tb-slider.tiles .nav{ display:block !important; } /* <-- FORCE SHOW */
  .tb-league-tiles .tb-slider.tiles .nav .prev{ left:8px !important; }
  .tb-league-tiles .tb-slider.tiles .nav .next{ right:8px !important; }

  /* Kartu seragam (tinggi & lebar sama) */
  .tb-league-tiles .tb-slider-track.tiles{
    display:flex !important; gap:12px !important; align-items:stretch !important;
    overflow-x:auto !important; scroll-snap-type:x mandatory !important;
  }
  .tb-league-tiles .league-tile{
    box-sizing:border-box !important;
    display:flex !important; flex-direction:column !important;
    justify-content:center !important; align-items:center !important;
    width:180px !important; height:132px !important; min-height:132px !important;
    padding:14px 10px !important; border:1px solid #ececec !important;
    border-radius:14px !important; background:#fff !important; text-align:center !important;
    scroll-snap-align:start !important;
  }
  .tb-league-tiles .league-tile .tile-icon{ font-size:22px !important; margin-bottom:6px !important; }
  .tb-league-tiles .league-tile .tile-label{ font-size:20px !important; font-weight:800 !important; line-height:1.15 !important; }
  .tb-league-tiles .league-tile .tile-sub{ font-size:12px !important; color:#6b7280 !important; }
}
/* ukuran ikon responsif (otomatis) */
:root{ --tb-icon: clamp(22px, 4.2vw, 32px); }  /* min 22px, naik sesuai lebar layar, max 32px */

/* terapkan ke semua ikon liga (hasil/jadwal & liga populer) */
.tb-league-tiles .tile-icon,
.liga-grid .tile-icon{
  width: var(--tb-icon);
  height: var(--tb-icon);
  display: block;
  object-fit: contain;
  margin-bottom: 6px;
}
/* Artikel single */
.tb-article .entry-title{ font-size:clamp(22px,3.6vw,34px); font-weight:800; margin:8px 0 12px; }
.tb-article .entry-meta{ color:#6b7280; font-size:.9rem; margin-bottom:18px; }

.tb-article .entry-content{ line-height:1.75; font-size:1rem; }
.tb-article .entry-content p{ margin:0 0 1rem; }
.tb-article .entry-content h2{ font-size:1.5rem; margin:1.5rem 0 .5rem; font-weight:800; }
.tb-article .entry-content h3{ font-size:1.25rem; margin:1.25rem 0 .5rem; font-weight:700; }
.tb-article .entry-content ul, .tb-article .entry-content ol{ padding-left:1.25rem; margin:0 0 1rem; }
.tb-article .entry-content li{ margin:.4rem 0; }
.tb-article .entry-content img, 
.tb-article .entry-content iframe, 
.tb-article .entry-content figure{ max-width:100%; height:auto; border-radius:8px; }
.tb-article .entry-content blockquote{
  margin:1rem 0; padding:.8rem 1rem; border-left:4px solid #f59e0b; background:#fff7ed;
}
/* ===== DESKTOP HOMEPAGE POLISH (tidak mengubah mobile) ===== */
@media (min-width:1024px){

  /* Kontainer & judul seksi */
  .container{ max-width:1200px; }
  .section-title{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 10px; }
  .section-title h2{ margin:0; font-size:20px; font-weight:800; }
  .section-title .more{ font-weight:700; }

  /* Tab hasil/jadwal */
  .tb-tabbar.minimal{ display:flex; gap:18px; border-bottom:1px solid #eee; margin-bottom:10px; }
  .tb-tabbar.minimal .tb-tab{ background:none; border:0; padding:6px 4px; font-weight:700; color:#1e293b; opacity:.7; }
  .tb-tabbar.minimal .tb-tab.active{ opacity:1; border-bottom:2px solid #f5c147; }

  /* Slider tiles (Hasil/Jadwal) – panah di pinggir layar */
  .tb-league-tiles .tb-slider.tiles{ position:relative; padding:0 48px; }
  .tb-league-tiles .tb-slider-track.tiles{ display:flex; gap:14px; scrollbar-width:none; }
  .tb-league-tiles .tb-slider-track.tiles::-webkit-scrollbar{ display:none; }

  .league-tile{
    width:190px; height:130px; min-height:130px;
    border:1px solid #e9eef5; border-radius:14px; background:#fff;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.04);
    transition:.15s transform, .15s box-shadow;
  }
  .league-tile:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
  .league-tile .tile-label{ font-weight:800; font-size:18px; line-height:1.2; }
  .league-tile .tile-sub{ font-size:11px; color:#8b95a7; margin-top:6px; letter-spacing:.02em; }
  .tile-icon{ width:28px; height:28px; object-fit:contain; margin-bottom:6px; }

  .tb-slider .nav{ position:absolute; inset:0; pointer-events:none; }
  .tb-slider .nav .prev,
  .tb-slider .nav .next{
    pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border-radius:999px; border:0;
    background:#183a5a; color:#fff; display:grid; place-items:center;
    box-shadow:0 2px 10px rgba(0,0,0,.2);
  }
  .tb-slider .nav .prev{ left:6px; }  .tb-slider .nav .next{ right:6px; }
  .tb-slider .nav .prev::before{ content:"◀"; } .tb-slider .nav .next::before{ content:"▶"; }

  /* Berita Transfer (blok hitam) */
  .transfer-section{ background:#0f172a; border-radius:16px; margin:22px 0; padding:18px 0; }
  .transfer-section .section-title h2{ color:#fff; }
  .transfer-section .section-title .more{ color:#cbd5e1; }
  .transfer-section .tb-slider{ padding:0 56px; }
  .transfer-section .tb-slide a{ color:#e5e7eb; }
  .transfer-section .tb-slide h4{ font-size:15px; line-height:1.4; margin:6px 0 0; }
  .transfer-section .tb-slider .nav .prev,
  .transfer-section .tb-slider .nav .next{ background:#0b2238; }
  

  /* Liga Populer – grid 6 kolom rapi */
  .liga-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
  .liga-grid .liga-item{
    border:1px solid #e9eef5; border-radius:14px; background:#fff;
    min-height:120px; padding:12px; text-align:center;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    box-shadow:0 1px 2px rgba(0,0,0,.04); transition:.15s transform, .15s box-shadow;
  }
  .liga-grid .liga-item:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
  .liga-grid .liga-item small{ color:#8b95a7; margin-top:6px; font-size:11px; }
  .liga-grid .tile-icon{ margin-bottom:8px; }

  /* Artikel vertikal tengah (12 item) – panah di kanan */
  .tb-vslider{ max-width:1200px; margin:8px auto; padding-right:52px; position:relative; }
  .tb-vslider .vnav{ position:absolute; top:0; right:6px; display:flex; flex-direction:column; gap:8px; }
  .tb-vslider .vnav button{
    width:34px; height:34px; border-radius:999px; border:0; background:#183a5a; color:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.2);
  }
  .tb-vslider .article-item{ border-bottom:1px solid #eef2f7; padding:10px 0; }
  .tb-vslider .article-item .thumb img{ border-radius:8px; }

  /* Video pilihan */
  .video iframe, .video amp-youtube{ max-width:960px; margin:8px auto; border-radius:12px; display:block; }

  /* Spasi antar-seksi lebih rapat sedikit */
  .container.mt-16{ margin-top:24px; }
}
/* Kunci horizontal scroll khusus beranda */
body.home, body.front-page{
  overflow-x: hidden;
  width: 100%;
  position: relative;
  overscroll-behavior-x: none;      /* cegah bounce sideways */
}
html{ overflow-x:hidden; }          /* jaga-jaga */
*{ box-sizing: border-box; }        /* biar padding nggak nyodor keluar */

/* Pastikan semua wrapper tidak melebihi lebar layar */
.container, .site, .wrap, main, header, footer, section{
  max-width: 100%;
}

/* ====== MOBILE LAYOUT (≤ 768px) ====== */
@media (max-width: 768px){

  /* Tab Hasil/Jadwal */
  .tb-tabbar.minimal{ gap:16px; padding:0 6px; }
  .tb-tabbar.minimal .tb-tab{ font-size:15px; padding:6px 0; }
  .tb-tabbar.minimal .tb-tab.active{ border-bottom:2px solid #f5c147; }

  /* Slider tiles Hasil/Jadwal */
  .tb-league-tiles .tb-slider.tiles{
    position: relative;
    padding: 0 48px;                 /* ruang buat panah kiri/kanan */
  }
  .tb-league-tiles .tb-slider-track.tiles{
    display:flex; gap:12px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;    /* snap enak */
  }
  .tb-league-tiles .tb-slider-track.tiles > *{
    flex:0 0 auto; scroll-snap-align:center;
  }

  /* Ukuran kartu liga */
  .league-tile{
    width: 64vw;                     /* 2 kartu muat nyaman */
    height: 124px; min-height:124px;
    border-radius:14px;
    border:1px solid #e9eef5; background:#fff;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    text-align:center;
  }
  .league-tile .tile-label{ font-size:18px; font-weight:800; line-height:1.2; }
  .league-tile .tile-sub{ font-size:11px; color:#8b95a7; margin-top:6px; }
  .tile-icon{ width:28px; height:28px; object-fit:contain; margin-bottom:6px; }

  /* Panah slider nempel di ujung layar */
  .tb-slider .nav{ position:absolute; inset:0; pointer-events:none; }
  .tb-slider .nav .prev,
  .tb-slider .nav .next{
    pointer-events:auto;
    position:absolute; top:38px; transform:translateY(-50%);
    width:36px; height:36px; border-radius:999px; border:0;
    background:#183a5a; color:#fff; display:grid; place-items:center;
    box-shadow:0 2px 10px rgba(0,0,0,.2);
  }
  .tb-slider .nav .prev{ left:6px; } .tb-slider .nav .next{ right:6px; }
  .tb-slider .nav .prev::before{ content:"◀"; } .tb-slider .nav .next::before{ content:"▶"; }

  /* Berita Transfer (blok hitam) */
  .transfer-section{ margin:16px 0; padding:14px 0; border-radius:12px; }
  .transfer-section .tb-slider{ padding:0 48px; }
  .transfer-section .tb-slide h4{ font-size:15px; line-height:1.4; }

  /* Liga Populer → 2 kolom */
  .liga-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
  .liga-grid .liga-item{
    min-height:110px; border-radius:14px; border:1px solid #e9eef5; background:#fff;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
  }
  .liga-grid .tile-icon{ margin-bottom:8px; }
}
/* Pastikan track nggak meluber & item tidak memaksa lebar ekstra */
.tb-slider-track{ max-width:100%; }
.tb-slider-track > *{ max-width:100%; }
.wrap{max-width:1200px;margin:16px auto;padding:0 12px;display:flex;gap:20px}
.content-box{flex:3;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:22px}
.sidebar-box{flex:1;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;position:sticky;top:12px;height:max-content}
h2.sub{font-size:20px;font-weight:800;color:#1f2937;margin:26px 0 10px}
.related h3{font-size:18px;font-weight:800;margin:0 0 14px}
.related .card{background:#eaf5ea;border:1px solid #d7ead7;border-radius:12px;overflow:hidden}
.related .card .meta{padding:10px}
.related .card .meta p{font-size:14px;margin:0;color:#0b1320}
@media(max-width:900px){.wrap{flex-direction:column}.sidebar-box{position:static}}
/* Layout kotak + sidebar */
.wrap{max-width:1200px;margin:16px auto;padding:0 12px;display:flex;gap:20px}
.content-box{flex:3;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:22px}
.sidebar-box{flex:1;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;position:sticky;top:12px;height:max-content}
@media(max-width:900px){.wrap{flex-direction:column}.sidebar-box{position:static}}

/* Judul & paragraf */
h1{font-size:28px;line-height:1.25;margin:0 0 12px}
h1 a{text-decoration:none;color:#111827}
.content-box p{color:#374151;line-height:1.75;font-size:16px;margin:12px 0}

/* Subjudul rapi untuk semua H2 */
h2.sub{font-size:20px;font-weight:800;color:#1f2937;margin:26px 0 10px}

.related { margin-top: 28px; }
.related h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 14px;
}

/* track horizontal */
.related-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 260px;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.related-track::-webkit-scrollbar { height: 8px }
.related-track::-webkit-scrollbar-thumb { background: #bbf7d0; border-radius: 8px }

/* kartu related */
.card {
  background: #d1fae5;              /* hijau lembut */
  border: 1px solid #a7f3d0;        /* border hijau muda */
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
}
.card-link { display: block; text-decoration: none; color: inherit }
.thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center;
}
.meta { padding: 10px }
.card-title {
  font-size: 14px;
  margin: 0;
  color: #064e3b;        /* hijau tua untuk kontras */
  font-weight: 700;      /* bikin judul lebih tebal */
  line-height: 1.4;
}

/* responsive kecil */
@media (max-width: 480px) {
  .related-track { grid-auto-columns: 80%; }
}
/* Hilangkan semua panah slider */
.tb-slider .nav,
.tb-slider .nav .prev,
.tb-slider .nav .next {
  display: none !important;
}
.content-box p:empty,
.content-box p br {
  display: none;
}
/* Atur ukuran font khusus untuk desktop */
@media screen and (min-width: 1024px) {
  .content-box h2 {
    font-size: 26px;   /* default biasanya 20px */
    line-height: 1.4;
  }

  .content-box h3 {
    font-size: 22px;   /* default biasanya 18px */
    line-height: 1.4;
  }

  .content-box h4 {
    font-size: 20px;   /* default biasanya 16px */
    line-height: 1.4;
  }

  .content-box p {
    font-size: 18px;   /* default biasanya 16px */
    line-height: 1.8;
  }
}
/* Paragraf artikel lebih gelap khusus mobile */
@media (max-width: 768px){
  .content-box p { 
    color: #0f172a;   /* lebih pekat dari #374151 */
  }
  .content-box { 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
/* ===== Kunci horizontal scroll khusus halaman artikel ===== */
body.single, body.single-post {
  overflow-x: hidden;        /* kunci global */
  position: relative;
  overscroll-behavior-x: none; /* cegah bounce ke samping (Chrome/Android) */
}

html { overflow-x: hidden; }

.content-box, .wrap, .site, main, header, footer, section {
  max-width: 100%;           /* jangan ada wrapper melebar */
}

.entry-content,
.entry-content * {
  box-sizing: border-box;    /* biar padding gak nambah lebar */
  max-width: 100%;           /* elemen tak boleh melewati lebar kontainer */
}

/* Media yang sering bikin meluber */
.entry-content img,
.entry-content iframe,
.entry-content video,
.entry-content figure {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Kalau ada tabel/pre panjang, biar scroll di DALAM, bukan body */
.entry-content table,
.entry-content pre,
.entry-content code {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* Batasi gestur: konten artikel hanya boleh pan-y (vertikal) */
.content-box { touch-action: pan-y; }

/* Related carousel tetap boleh geser sendiri tanpa “menarik” body */
.related .related-track {
  overscroll-behavior-x: contain;
}
/* ===== Header: perbaikan search di mobile ===== */
@media (max-width: 768px){
  .tb-header { position: sticky; top: 0; z-index: 50; }
  .tb-header-inner{
    padding: 10px 12px;
    gap: 10px;
  }

  /* baris brand + search */
  .tb-header .container,
  .tb-header-inner { display:flex; align-items:center; gap:10px }

  /* biar search bisa penuh di samping/di bawah brand */
  .tb-brand{ font-size:20px; flex:0 0 auto; white-space:nowrap }
  .tb-search{ flex:1; min-width:0 }            /* penting: min-width:0 */
  .tb-search form{
    display:flex; align-items:center; gap:0;   /* rapat, tanpa celah */
    width:100%;
  }

  .tb-search input[type="search"]{
    flex:1; min-width:0;
    height:44px; line-height:44px;
    border: none;
    border-radius: 10px 0 0 10px;
    padding: 0 12px;
    font-size: 16px;                           /* cegah zoom iOS */
    box-sizing: border-box;
  }
  .tb-search button{
    height:44px; line-height:44px;
    padding: 0 14px;
    border: none;
    border-radius: 0 10px 10px 0;
    background:#0b3a66; color:#fff;
    white-space: nowrap;
  }

  /* Hilangkan bayangan/garis aneh saat fokus */
  .tb-search input[type="search"]:focus{ outline: none; box-shadow: none; }

  /* pastikan gak bisa geser ke samping */
  html, body { overflow-x: hidden; }
}
/* Wrapper box */
.tb-sidebar.box {
  background:#fff;
  border-radius:16px;
  padding:14px 14px 10px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  margin-bottom:18px;
}
.tb-sidebar.box > h3 {
  font-size:16px;
  font-weight:700;
  margin:0 0 10px;
  display:flex; align-items:center; gap:8px;
}
.tb-sidebar.box > h3::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#3b82f6; /* titik biru */
}

/* FEATURED item (pos #1) */
.tb-featured {
  position:relative;
  display:block;
  border-radius:12px;
  overflow:hidden;
  min-height:140px; /* sesuaikan dengan lebar sidebar */
  margin-bottom:12px;
  color:#fff; text-decoration:none;
}
.tb-featured-thumb {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:brightness(.9);
}
.tb-featured-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.0) 30%, rgba(0,0,0,.65) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:12px;
}
.tb-featured-title {
  font-weight:700; line-height:1.25; font-size:15px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tb-meta { display:flex; gap:12px; font-size:12px; opacity:.95; margin-top:4px; align-items:center; }
.tb-meta-date::before{ content:""; width:10px; height:10px; display:inline-block; margin-right:6px; background:#fff; border-radius:2px; opacity:.8; }
.tb-meta-views::before{ content:"👁"; margin-right:6px; }

/* Badge nomor merah */
.tb-rank-num {
  position:absolute; top:10px; left:10px;
  background:#d71f26; color:#fff; width:28px; height:28px;
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px;
}

/* LIST bernomor (pos #2 dst) */
.tb-ranked { display:flex; flex-direction:column; gap:10px; }
.tb-ranked .tb-item {
  display:flex; align-items:flex-start; gap:10px;
  text-decoration:none; color:inherit; padding:8px; border-radius:12px;
  background:#f7f7f9;
}
.tb-ranked .tb-item:hover { background:#eff2f7; }
.tb-ranked .tb-item .tb-rank-num {
  position:static; flex:0 0 28px;
}
.tb-item-content { display:flex; flex-direction:column; gap:4px; min-width:0; }
.tb-item-title {
  font-weight:600; line-height:1.35; font-size:14px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tb-ranked .tb-meta { color:#6b7280; }
.readmore .more {
  font-weight: 700; /* jadi tebal */
}
.home-layout { display:flex; gap:24px; align-items:flex-start; }
.main-col    { flex:1 1 auto; min-width:0; }
.sidebar-col { flex:0 0 320px; width:320px; }

.readmore { margin-top:10px; text-align:right; clear:none !important; }
.readmore .more { font-weight:700; text-decoration:none; }
.readmore .more:hover { text-decoration:underline; }

/* Responsif: stack di layar kecil */
@media (max-width: 900px){
  .home-layout { flex-direction:column; }
  .sidebar-col { width:100%; flex:unset; }
}

/* --- "Selengkapnya" biru neon khusus area transfer --- */
.transfer-section .more,
.transfer-section .readmore .more,
.transfer-section .section-title .more,
.transfer-section a.more{
  color:#00e5ff !important;                /* biru neon */
  text-shadow:0 0 8px rgba(0,229,255,.8),
              0 0 16px rgba(0,229,255,.5); /* glow */
}
/* Hanya untuk desktop */
@media screen and (min-width: 1024px) {
  .prediksi-card {
    max-width: 60%;   /* Lebar maksimal 60% */
    width: 60%;
    margin: 0 auto;   /* Center di tengah */
    display: block;
  }
}
/* ====  A. Layout desktop terkunci  ==== */
@media (min-width:1024px){
  /* lebar maksimal halaman homepage */
  .home-layout{
    max-width: 1200px;        /* kunci lebar desktop */
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }
  /* main 60% + sidebar 40% */
  .home-layout .main-col   { flex: 0 0 60%; max-width: 60%; min-width: 0; }
  .home-layout .sidebar-col{ flex: 0 0 40%; max-width: 40%; }
}

/* ====  B. Box per artikel (Prediksi & Cerita Bola)  ==== */
/* berlaku untuk item yang kita pakai class .article-item */
.home-layout .main-col .article-item{
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.home-layout .main-col .article-item + .article-item{ margin-top: 12px; }

/* thumbnail di dalam box */
.home-layout .main-col .article-item .thumb img{
  width: 96px; height: 64px; object-fit: cover; border-radius: 10px; display: block;
}

/* efek hover halus (desktop) */
@media (hover:hover){
  .home-layout .main-col .article-item{
    transition: box-shadow .2s ease, transform .2s ease;
  }
  .home-layout .main-col .article-item:hover{
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    transform: translateY(-1px);
  }
}

/* ====  C. (Opsional) kalau maksudmu box lebarnya 60% layar, bukan kolom 60% ==== */
/* Pakai ini kalau kamu ingin setiap kartu-artikel hanya 60% dari lebar baris dan center */
@media (min-width:1024px){
  .home-layout .main-col .article-item{
    /* uncomment 2 baris di bawah jika mau kartu 60% baris */
    /* width: 60%; */
    /* margin-left: auto; margin-right: auto; */
  }
}
/* ===== MOBILE THUMB FIX PERSEGI + BORDER CANTIK (≤1023px) ===== */
@media (max-width: 1023px) {
  .home-layout .main-col .article-item {
    display: grid;
    grid-template-columns: 90px 1fr; /* kotak thumb 90px */
    gap: 14px;
    align-items: center;
    padding: 14px 16px;

    /* border cantik */
    border: 1.5px solid rgba(99, 132, 255, 0.25); /* biru pastel lembut */
    border-radius: 16px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
    background: #fff;
  }

  .home-layout .main-col .article-item + .article-item {
    margin-top: 14px;
  }

  .home-layout .main-col .article-item .thumb {
    width: 90px;
    height: 90px;             /* persegi */
    border-radius: 12px;      /* bikin lembut */
    overflow: hidden;
    flex: 0 0 auto;

    /* border tipis di thumbnail */
    border: 2px solid rgba(99,132,255,0.15);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  .home-layout .main-col .article-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .home-layout .main-col .article-item h3,
  .home-layout .main-col .article-item p {
    margin: 0;
  }
}
/* ==== Section Title ala Bola.net ==== */
.section-title {
  font-size: clamp(26px, 3vw, 38px);   /* responsif: mobile → desktop */
  font-weight: 900;                    /* super bold */
  text-transform: uppercase;           /* huruf besar semua */
  margin: 24px 0 16px;
  line-height: 1.2;

  /* gradasi biru → hitam */
  background: linear-gradient(90deg, #1a73e8 0%, #000000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  letter-spacing: 1px;                 /* jarak huruf */
  position: relative;
}

/* opsional: garis highlight di bawah */
.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  background: linear-gradient(90deg, #1a73e8, #000000);
}
/* Wrapper */
.tb-cat{max-width:980px;margin:24px auto;padding:0 16px}

/* Judul + garis aksen kanan */
.tb-cat-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.tb-cat-head h1{margin:0;font-size:px;letter-spacing:.5px}
.tb-underline{flex:1;height:4px;background:#1e40af;border-radius:9999px}

/* List item */
.tb-list{display:flex;flex-direction:column;gap:18px}
.tb-item{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:12px 16px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.tb-thumb{display:block;flex:0 0 auto}
.tb-thumb img{width:120px;height:80px;object-fit:cover;border-radius:12px;display:block}
.tb-info{flex:1 1 auto}
.tb-title{font-size:18px;line-height:1.3;margin:0}
.tb-title a{text-decoration:none;color:#0f172a}
.tb-item:hover .tb-title a{text-decoration:underline}

/* Pagination angka */
.tb-pager{margin:18px 0 26px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.tb-pager .page-numbers{padding:8px 12px;border:1px solid #e5e7eb;border-radius:10px;text-decoration:none}
.tb-pager .current{background:#1f2937;color:#fff;border-color:#1f2937}
.tb-chipbar{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}
.tb-chip{display:inline-block;padding:6px 12px;border:1px solid #dbe1e8;border-radius:9999px;
  font-size:14px;line-height:1;text-decoration:none;color:#0f172a;background:#fff}
.tb-chip.is-active{background:#1e40af;color:#fff;border-color:#1e40af}
.tb-chip:hover{text-decoration:underline}
.tb-chip.is-active{background:#1e40af;color:#fff;border-color:#1e40af}

/* H1 judul artikel: sedikit lebih tipis + tracking longgar */
body.single-post h1.tb-title{
  font-weight: 700;                 /* turun dari 800 -> lebih tipis */
  font-size: clamp(28px, 2.1vw + 18px, 42px);
  line-height: 1.24;
  letter-spacing: 0.01em;           /* jarak huruf tidak terlalu rapat */
  margin: 6px 0 12px;
  color: #0f172a;
  text-wrap: balance;
  word-break: break-word;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.single-post h1.tb-title a{
  color: inherit;
  text-decoration: none;
}
.tb-brand {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
}
.tb-home-icon {
  height: 50px;
  width: 50px;
  margin-right: 8px;
  display: block;
}

/* kalau masih terasa tebal, aktifkan opsi ini (pilih salah satu) */
/*
body.single-post h1.tb-title{ font-weight: 600; }         // lebih tipis lagi
/* Untuk font variabel (mis. Inter), bisa juga: */
/* body.single-post h1.tb-title{ font-variation-settings: "wght" 650; } */

/* 1) Batasi lebar area konten di single post */
body.single-post .content-box,
body.single-post .entry-content,
body.single-post .post-content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
/* Hilangkan H1 WP khusus halaman single post */
body.single-post h1.entry-title,
body.single-post .post-header h1.entry-title,
body.single-post .wp-block-post-title {
  display: none !important;
}
/* Styling untuk link dalam H1 */
body.single-post .entry-content h1 a {
  color: inherit;          /* ikut warna teks judul */
  text-decoration: none;   /* hilangkan underline */
}

body.single-post .entry-content h1 a:hover {
  text-decoration: underline; /* underline saat hover (opsional) */
}