/* ==========================================================================
   Jaskuy HQ — palet resmi Premier League
   Ungu #37003C · Hijau neon #00FF87 · Sian #04F5FF · Pink #E90052
   Ditulis tangan: tanpa CDN, tanpa langkah build.
   ========================================================================== */

:root {
  --ungu: #37003C;
  --ungu-tua: #1B0020;
  --ungu-panel: #25002A;
  --ungu-garis: #3F1145;
  --hijau: #00FF87;
  --sian: #04F5FF;
  --pink: #E90052;
  --kuning: #FFD400;
  --putih: #FFFFFF;
  --teks: #F6EEF8;
  --teks-redup: #B9A2C0;
  --radius: 18px;
  --radius-kecil: 12px;
  --bayang: 0 8px 24px rgba(0, 0, 0, .35);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[data-tema="terang"] {
  --ungu-tua: #F4F1F6;
  --ungu-panel: #FFFFFF;
  --ungu-garis: #E4DBE8;
  --teks: #210026;
  --teks-redup: #6B5A72;
  --bayang: 0 6px 18px rgba(55, 0, 60, .12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--ungu-tua);
  color: var(--teks);
  font-size: 15px;
  line-height: 1.5;
  padding-bottom: 84px;
}

a { color: inherit; text-decoration: none; }

/* ---------- Kepala ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(135deg, var(--ungu) 0%, #4A0054 100%);
  padding: 14px 16px 16px;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
  box-shadow: var(--bayang);
}
.topbar-baris { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.merek { display: flex; align-items: center; gap: 10px; }
.merek-logo {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--hijau); color: var(--ungu);
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
  box-shadow: 0 0 18px rgba(0,255,135,.5);
}
.merek-nama { font-weight: 800; letter-spacing: .4px; font-size: 16px; color: #fff; }
.merek-sub { font-size: 11.5px; color: #E5C7EE; margin-top: -2px; }

.tombol-tema {
  background: rgba(255,255,255,.14); border: 0; color: #fff;
  width: 38px; height: 38px; border-radius: 12px; font-size: 17px; cursor: pointer;
}

.deadline {
  margin-top: 12px; background: rgba(0,0,0,.28);
  border: 1px solid rgba(0,255,135,.35);
  border-radius: var(--radius-kecil); padding: 10px 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.deadline-label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--hijau); font-weight: 700; }
.deadline-nilai { font-size: 11.5px; color: #EFD9F5; }
.deadline-sisa { font-size: 15px; font-weight: 800; color: var(--sian); white-space: nowrap; }

/* ---------- Tata letak ---------- */
.wadah { padding: 16px; max-width: 720px; margin: 0 auto; }
h1, h2, h3 { margin: 0 0 10px; line-height: 1.25; }
h1 { font-size: 20px; }
h2 { font-size: 16.5px; letter-spacing: .2px; }
h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .9px; color: var(--teks-redup); }

.kartu {
  background: var(--ungu-panel);
  border: 1px solid var(--ungu-garis);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: var(--bayang);
}
.kartu.padat { padding: 12px; }
.kartu-judul { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.kartu-judul h2 { margin: 0; }
.lihat { font-size: 12px; color: var(--sian); font-weight: 700; }

.petak { display: grid; gap: 10px; }
.petak-2 { grid-template-columns: 1fr 1fr; }
.petak-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 420px) { .petak-3 { grid-template-columns: 1fr 1fr; } }

/* ---------- Angka ringkas ---------- */
.stat { background: rgba(255,255,255,.05); border: 1px solid var(--ungu-garis); border-radius: var(--radius-kecil); padding: 10px 12px; }
.stat-label { font-size: 11px; color: var(--teks-redup); text-transform: uppercase; letter-spacing: .7px; }
.stat-nilai { font-size: 20px; font-weight: 800; margin-top: 2px; }
.stat-kecil { font-size: 11px; color: var(--teks-redup); }

/* ---------- Baris pemain ---------- */
.pemain {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-kecil);
  background: rgba(255,255,255,.04); margin-bottom: 7px;
  border-left: 3px solid transparent;
}
.pemain.kapten { border-left-color: var(--hijau); background: rgba(0,255,135,.08); }
.pemain.wakil { border-left-color: var(--sian); }
.pemain.bangku { opacity: .72; }
.pemain.flag { border-left-color: var(--pink); }
.pemain-nomor {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px;
  background: rgba(255,255,255,.1); display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: var(--teks-redup);
}
.pemain-inti { flex: 1 1 auto; min-width: 0; }
.pemain-nama { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pemain-meta { font-size: 11.5px; color: var(--teks-redup); }
.pemain-poin { text-align: right; flex: 0 0 auto; }
.pemain-poin b { font-size: 17px; font-weight: 800; }
.poin-hijau { color: var(--hijau); }
.poin-merah { color: var(--pink); }

.lencana {
  display: inline-block; padding: 1px 6px; border-radius: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
}
.lencana-gk { background: #FFD400; color: #2A2000; }
.lencana-def { background: #04F5FF; color: #00282B; }
.lencana-mid { background: #00FF87; color: #00301A; }
.lencana-fwd { background: #E90052; color: #fff; }
.lencana-tim { background: rgba(255,255,255,.12); color: var(--teks); }
.lencana-c { background: var(--hijau); color: var(--ungu); }
.lencana-v { background: var(--sian); color: var(--ungu); }
.lencana-alert { background: var(--pink); color: #fff; }
.lencana-baik { background: rgba(0,255,135,.18); color: var(--hijau); }
.lencana-buruk { background: rgba(233,0,82,.2); color: #FF7BA6; }

/* ---------- Tabel liga ---------- */
.tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabel th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--teks-redup); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--ungu-garis);
}
.tabel td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
.tabel tr.saya { background: rgba(0,255,135,.1); }
.tabel tr.saya td { font-weight: 800; }
.tabel .angka { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Saring ---------- */
.saring { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.saring input, .saring select {
  background: var(--ungu-panel); color: var(--teks);
  border: 1px solid var(--ungu-garis); border-radius: 11px;
  padding: 9px 11px; font-size: 14px; font-family: var(--font); min-width: 0;
}
.saring input[type=text] { flex: 1 1 140px; }
.saring button, .tombol {
  background: var(--hijau); color: var(--ungu); border: 0;
  padding: 10px 16px; border-radius: 11px; font-weight: 800; font-size: 14px; cursor: pointer;
}
.tombol-garis { background: transparent; color: var(--hijau); border: 1.5px solid var(--hijau); }

/* ---------- Bilah bawah ---------- */
.bawahan {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: rgba(27, 0, 32, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--ungu-garis);
  display: flex; justify-content: space-around; padding: 8px 4px max(8px, env(safe-area-inset-bottom));
}
html[data-tema="terang"] .bawahan { background: rgba(255,255,255,.97); }
.bawahan a {
  flex: 1 1 0; text-align: center; font-size: 10.5px; color: var(--teks-redup);
  padding: 5px 2px; border-radius: 12px; font-weight: 700;
}
.bawahan a .ikon { display: block; font-size: 19px; line-height: 1.2; }
.bawahan a.aktif { color: var(--hijau); background: rgba(0,255,135,.1); }

/* ---------- Lain-lain ---------- */
.kosong { text-align: center; padding: 28px 16px; color: var(--teks-redup); }
.kosong .ikon { font-size: 34px; display: block; margin-bottom: 8px; }
.pil { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.1); }
.baris-antara { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.halus { color: var(--teks-redup); font-size: 12.5px; }
.hijau { color: var(--hijau); }
.pink { color: var(--pink); }
.sian { color: var(--sian); }
.pemisah { height: 1px; background: var(--ungu-garis); margin: 12px 0; border: 0; }
.tengah { text-align: center; }