/* Base */
*{box-sizing:border-box}
:root{
  --primary:#0d47a1;
  --muted:#f1f3f5;
  --border:#e5e7eb;
  --text:#1f2937;
  --accent:#e53935;
}
html,body{height:100%}
body{
  font-family: Arial, sans-serif;
  background:#fff;
  margin:0;
  color:var(--text);
  line-height:1.5;
}

/* Header */
header{
  background:var(--primary);
  color:#fff;
  padding:16px;
}
header h1{margin:0;font-size:28px}
.liga-populer{background:#0f55c7;padding:12px 16px}
.liga-populer h2{margin:0 0 10px;font-size:16px;color:#fff;opacity:.9}
.liga-populer ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.liga-populer li{background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.liga-populer a{text-decoration:none;color:var(--primary);font-weight:600}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:16px}

/* Tabs */
.sub-menu-liga.tabs{display:flex;gap:10px;border-bottom:2px solid var(--border);margin:8px 0 16px}
.sub-menu-liga .tab{
  display:inline-block;
  padding:10px 14px;
  border:1px solid var(--border);
  border-bottom:none;
  background:#fff;
  border-top-left-radius:10px;border-top-right-radius:10px;
  text-decoration:none;color:var(--primary);font-weight:700;
}
.sub-menu-liga .tab.active{background:var(--muted)}

/* Special box */
.kotak-merah{border:2px solid var(--accent);background:#fff8f8;border-radius:12px;padding:16px;margin:18px 0}
.kotak-merah h2{color:#b71c1c;margin-top:0}

/* Cards */
.list-artikel{margin:10px 0 20px}
.section-title{font-size:20px;margin:0 0 10px;color:var(--primary)}
.card{
  display:flex;gap:12px;align-items:center;
  padding:10px;border:1px solid var(--border);border-radius:12px;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  margin-bottom:10px;
}
.card img{width:96px;height:64px;object-fit:cover;border-radius:8px}
.card-title{font-size:16px;margin:0 0 6px}
.card-meta{font-size:12px;color:#6b7280;margin:0}

/* Tables */
.table-block{margin:14px 0 26px}
.table-scroll{overflow:auto;border:1px solid var(--border);border-radius:12px}
table{width:100%;border-collapse:collapse;background:#fff}
thead th{background:var(--muted)}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
tbody tr:hover{background:#fafafa}

/* Responsive */
@media (max-width:640px){
  .liga-populer li{padding:6px 10px}
  .sub-menu-liga .tab{padding:8px 10px}
  .card{padding:8px}
  .card img{width:80px;height:54px}
}
#jadwal.is-hidden, #hasil.is-hidden { display:none !important; }
.sub-menu-liga .tab{padding:8px 12px;border-radius:10px}
.table-block{margin-top:12px}
.table-scroll table{border-collapse:separate;border-spacing:0;border-radius:12px;overflow:hidden}
.table-scroll thead th{font-weight:700}

<!-- ==== Arrow toggle: CSS kecil ==== -->
<style>
  th.col-aksi{width:72px; text-align:center}
  td.cell-aksi{text-align:center}
  .arrow-btn{
    border:none; background:transparent; cursor:pointer;
    font-size:18px; line-height:1; padding:6px 10px; border-radius:8px;
    transition:transform .15s ease, opacity .15s ease;
  }
  .arrow-btn:hover{ transform:translateY(-1px); opacity:.9 }
  .arrow-btn.down{ color:#10b981 } /* hijau ▼ */
  .arrow-btn.up{ color:#ef4444 }   /* merah ▲ */
</style>