/* =========================================================
   KOCIPEDIA.ID · blok Liga Uttara
   Komponen berdiri sendiri: klasemen berlogo, deretan peserta,
   papan jadwal dari Instagram, dan pita rekaman pertandingan.
   Mengikuti bahasa kartu Beranda: garis 1px, sudut lengkung.
   ========================================================= */

.liga-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,30px);margin-top:30px}
/* divisi yang baru punya daftar peserta melebar, tabel tetap satu kolom */
.liga-grid .klas:has(.peserta){grid-column:1/-1}

.klas{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px 24px 20px}
.sec.alt .klas{background:var(--paper)}
.klas-judul{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:1.1rem;
  color:var(--ink);display:flex;align-items:baseline;gap:10px;
  border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:2px}
.klas-judul span{font-family:var(--fm);font-size:10px;letter-spacing:.14em;color:var(--ink-2);
  text-transform:none;margin-left:auto}

.klas table{width:100%;border-collapse:collapse}
.klas th{font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);text-align:left;padding:11px 5px 9px;border-bottom:1px solid var(--line)}
.klas td{padding:7px 5px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.klas tbody tr:last-child td{border-bottom:0}
.klas td:first-child,.klas th:first-child{width:26px;font-family:var(--fm);font-size:11px}
.klas td:nth-child(n+3),.klas th:nth-child(n+3){text-align:right;width:38px}
.klas th:last-child,.klas td:last-child{width:44px}
.klas tr.ksd td{background:var(--orange-soft)}
.klas tr.ksd td:first-child{border-radius:6px 0 0 6px}
.klas tr.ksd td:last-child{border-radius:0 6px 6px 0}

/* keping klub: logo kalau berkasnya ada, inisial kalau belum */
.klub{display:flex;align-items:center;gap:9px;min-width:0}
.krest{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:7px;
  border:1px solid var(--line);background:var(--paper-2);overflow:hidden}
.krest::before{content:attr(data-awal);grid-area:1/1;font-family:var(--fd);font-weight:800;
  font-size:10.5px;color:var(--ink-2)}
.krest img{grid-area:1/1;position:relative;width:100%;height:100%;object-fit:contain;
  display:block;background:var(--paper-2)}
.knama{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.klub.koci .krest{border-color:var(--orange)}
.klub.koci .knama{color:#B23C15}

/* deretan peserta untuk divisi yang papannya belum masuk */
.peserta{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  gap:2px 18px;padding:14px 0 4px}
.peserta .klub{padding:6px 0;font-size:14px;align-items:center}
.peserta .knama{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}

.asal{font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);margin-top:13px;line-height:1.7}
.asal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* papan jadwal, tetap apa adanya dari Instagram */
.papan{border:1px solid var(--line);border-radius:12px;padding:10px 10px 0;
  background:var(--paper);overflow:hidden}
.papan .bingkai{position:relative;height:0;background:var(--navy-deep);border-radius:7px;
  overflow:hidden;padding-top:calc(var(--rasio,133.34%) + var(--kaki,208px))}
.papan .bingkai iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.papan figcaption{padding:13px 3px 12px;display:grid;gap:6px}
.papan figcaption b{font-family:var(--fd);font-weight:800;text-transform:uppercase;
  font-size:15px;letter-spacing:.03em;line-height:1.05;color:var(--ink)}
.papan figcaption span{font-family:var(--fm);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2)}
.papan figcaption a{display:inline-flex;align-items:center;gap:7px;justify-self:start;
  font-family:var(--fd);font-weight:700;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--orange);transition:gap .26s var(--ease)}
.papan figcaption a:hover{gap:12px}

/* pita rekaman pertandingan */
.pita-liga{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;
  gap:clamp(18px,3vw,54px);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:clamp(20px,2.4vw,26px) clamp(22px,2.6vw,28px)}
.pita-liga .isi b{display:block;font-family:var(--fd);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.15rem,2vw,1.6rem);line-height:1;color:var(--ink)}
.pita-liga .isi p{margin-top:9px;font-size:14.6px;color:var(--ink-2);max-width:46ch}
.pita-liga .tonton{display:grid;justify-items:end;gap:6px;text-align:right}
.pita-liga .n{font-family:var(--fd);font-weight:800;line-height:.84;
  font-size:clamp(2.2rem,4.2vw,3.2rem);color:var(--orange)}
.pita-liga .l{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:7px;
  transition:gap .26s var(--ease)}
.pita-liga .tonton:hover .l{gap:13px}

.stempel{grid-column:1/-1;font-family:var(--fm);font-size:11.5px;line-height:1.6;
  color:var(--ink-2);max-width:62ch}

@media (max-width:1080px){.klas .opsional{display:none}}
@media (max-width:860px){
  .liga-grid{grid-template-columns:1fr}
  .peserta{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}
@media (max-width:700px){
  .pita-liga{grid-template-columns:1fr;gap:18px}
  .pita-liga .tonton{justify-items:start;text-align:left}
}

/* ---------- putaran kedua: tiap divisi pecah jadi dua grup ---------- */
.grup + .grup{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.grup-judul{margin-bottom:9px;font-family:var(--fm);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange)}