/* ====== Tebak Skor UI — Professional Dark ====== */
:root{
  --bg:#0b1020;           /* halaman */
  --panel:#121a2b;        /* card dasar */
  --panel-2:#0f1626;      /* card hover */
  --line:#1f2a44;         /* border */
  --text:#e8eef7;         /* teks utama */
  --muted:#93a3bf;        /* teks sekunder */
  --accent:#6aa3ff;       /* aksen biru */
  --accent-2:#22d3ee;     /* aksen cyan */
  --ok:#22c55e;
  --warn:#f59e0b;
  --err:#ef4444;
  --ring:rgba(102,178,255,.25); /* focus ring */
  --shadow:0 8px 20px rgba(0,0,0,.35);
  --radius:16px;
  --speed:160ms;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial;
  background: radial-gradient(1200px 800px at 20% -10%, rgba(34,211,238,.12), transparent 60%),
              radial-gradient(800px 600px at 120% 20%, rgba(106,163,255,.10), transparent 55%),
              var(--bg);
  color:var(--text);
}

a{color:var(--accent);text-decoration:none;transition:opacity var(--speed)}
a:hover{opacity:.85}

.wrap{max-width:1150px;margin:28px auto;padding:0 16px}

.topbar{
  position:sticky; top:0; z-index:20;
  padding:12px 0 18px;
  background:linear-gradient(to bottom, rgba(11,16,32,.75), rgba(11,16,32,0));
  backdrop-filter:saturate(120%) blur(6px);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.topbar h1{margin:0;font-size:28px;letter-spacing:.2px}

.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  transition:transform var(--speed), border-color var(--speed), background var(--speed);
}
.card:hover{transform:translateY(-2px); background:var(--panel-2); border-color:#2a3a5c}
.card:focus-within{outline:2px solid transparent; box-shadow:0 0 0 3px var(--ring)}

h1,h2,h3,h4{margin:0 0 12px}
h2{font-size:20px}
h3{font-size:18px}
h4{font-size:16px}
.muted{color:var(--muted);font-size:14px}

.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.right{text-align:right}
.center{text-align:center}

/* Inputs */
input,select{
  background:#0e1524;color:var(--text);
  border:1px solid #24344f;border-radius:12px;
  padding:10px 12px; transition:border-color var(--speed), box-shadow var(--speed), transform var(--speed);
}
input::placeholder{color:#6e7e9c}
select{appearance:none; background-image:linear-gradient(45deg, transparent 49%, #6aa3ff 50%),linear-gradient(135deg, #6aa3ff 50%, transparent 51%); background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat}
input:focus,select:focus{outline:none;border-color:#3b62a6; box-shadow:0 0 0 3px var(--ring)}
input:active{transform:translateY(1px)}

/* Buttons */
button,.btn{
  position:relative; overflow:hidden;
  border:none; cursor:pointer; font-weight:700;
  padding:10px 16px; border-radius:14px;
  color:#041427;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  transition:transform var(--speed), filter var(--speed), opacity var(--speed), box-shadow var(--speed);
  box-shadow:0 6px 16px rgba(45,134,255,.22);
}
button:hover,.btn:hover{filter:saturate(115%) brightness(1.02)}
button:active,.btn:active{transform:translateY(1px)}
button:disabled,.btn:disabled{opacity:.55; cursor:not-allowed}

.btn.ghost{
  background:transparent;color:var(--accent);
  border:1px solid var(--accent); box-shadow:none;
}
.btn.ghost:hover{background:rgba(106,163,255,.08)}
.btn.ghost:active{transform:translateY(1px)}

/* Ripple effect (span.ripple ditambah via JS) */
.ripple{
  position:absolute; border-radius:999px; pointer-events:none;
  transform:scale(0); opacity:.5;
  background:radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%);
  animation:ripple .6s ease-out forwards;
}
@keyframes ripple{
  to{transform:scale(12); opacity:0}
}

/* Tags/Badges */
.tag{
  display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:12px; border:1px solid #2b4160; color:#b7c5df; background:#0e1627;
}
.tag.ok{border-color:rgba(34,197,94,.35); color:#baf3c3; background:rgba(34,197,94,.08)}
.tag.warn{border-color:rgba(245,158,11,.35); color:#ffe0a6; background:rgba(245,158,11,.08)}
.tag.err{border-color:rgba(239,68,68,.35); color:#ffd0d0; background:rgba(239,68,68,.08)}

/* Tables */
table{width:100%; border-collapse:separate; border-spacing:0}
th,td{padding:12px 10px; border-bottom:1px solid var(--line)}
th{color:#bcd0f0; text-align:left; font-weight:700}
tbody tr:hover{background:rgba(255,255,255,.02)}
tbody tr:nth-child(even){background:rgba(255,255,255,.01)}
td.right{font-variant-numeric:tabular-nums}

/* Utility */
.hr{height:1px;background:var(--line);border:0;margin:8px 0}
.small{font-size:12px}

/* ==== Member Skin additions ==== */
.section-title{display:flex;align-items:center;gap:10px;margin:6px 0 14px}
.section-title .ico{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(106,163,255,.12);color:#8fb6ff;}

/* chips (filter/toggle) */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 10px;border-radius:999px;border:1px solid #2b4160;background:#0e1627;color:#bcd0f0;font-weight:600;cursor:pointer;transition:all .15s}
.chip:hover{background:#13213b}
.chip.on{border-color:rgba(106,163,255,.5);box-shadow:0 0 0 3px rgba(106,163,255,.15)}

/* progress slot */
.progress{height:8px;border-radius:999px;background:#0e1624;border:1px solid #22334d;overflow:hidden}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,#6aa3ff,#22d3ee);width:0}
.progress.ok > i{background:linear-gradient(90deg,#22c55e,#86efac)}
.progress.err > i{background:linear-gradient(90deg,#ef4444,#f87171)}

/* scoreline card */
.score-card{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;transition:transform .14s,border-color .14s}
.score-card:hover{transform:translateY(-2px);border-color:#2a3a5c}
.score-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.score-title{font-weight:800;letter-spacing:.4px}
.ul-clean{margin:6px 0 0;padding-left:18px}
.ul-clean li{margin:2px 0}

/* ====== THEME: Light/Dark with Gold accent ====== */
/* default (dark) sudah di :root; kita override saat body.theme-light */
:root{ --accent:#f5c242; --accent-2:#ffd86b; } /* aksen emas di kedua tema */

body.theme-light{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel-2:#f9fafc;
  --line:#e6eaf3;
  --text:#0b1020;
  --muted:#5d6b8a;
  --ring:rgba(245,194,66,.28);
  --shadow:0 8px 20px rgba(0,0,0,.12);
}
body.theme-dark{
  /* eksplisit supaya toggle cepat (nilai sama dgn default dark kamu) */
  --bg:#0b1020;
  --panel:#121a2b;
  --panel-2:#0f1626;
  --line:#1f2a44;
  --text:#e8eef7;
  --muted:#93a3bf;
  --ring:rgba(245,194,66,.22);
  --shadow:0 8px 20px rgba(0,0,0,.35);
}

/* Logo di topbar & footer */
.logo{height:28px;width:auto;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}
.topbar .brand-wrap{display:flex;align-items:center;gap:10px}

/* Tombol toggle tema */
.theme-btn{border-radius:999px;padding:8px 12px}

/* Footer */
.site-footer{
  margin:28px 0 10px; padding:12px 4px;
  color:var(--muted); border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.site-footer .brand{display:flex;align-items:center;gap:10px;font-weight:600}


/* ===== THEME PUBLIK: Brown + Gold + Soft Orange ===== */
:root{
  --gold:#f1c453;         /* emas hangat */
  --gold-2:#f7d89a;       /* emas terang */
  --soft-orange:#e89a5b;  /* oranye lembut (tidak tajam) */
  --coffee-900:#1b1310;   /* latar gelap coklat */
  --coffee-800:#231810;
  --coffee-700:#2b1e16;
  --latte:#fbf7f2;        /* latar terang krem */
  --latte-2:#fffdf9;
  --latte-line:#eadfd4;
  --ink:#1a120d;
  --clay:#7a675a;
}

/* Dark look untuk publik */
.public.theme-dark{
  --bg: radial-gradient(1100px 700px at 15% -10%, rgba(241,196,83,.10), transparent 60%),
        radial-gradient(900px 600px at 110% 20%, rgba(232,154,91,.08), transparent 55%),
        var(--coffee-900);
  --panel: var(--coffee-800);
  --panel-2: var(--coffee-700);
  --line: #3b2a1f;
  --text: #f6efe7;
  --muted: #d5c6b8;
  --ring: rgba(241,196,83,.22);
  --shadow: 0 8px 20px rgba(0,0,0,.35);
  --accent: var(--gold);
  --accent-2: var(--soft-orange);
}

/* Light look untuk publik */
.public.theme-light{
  --bg: var(--latte);
  --panel: #ffffff;
  --panel-2: var(--latte-2);
  --line: var(--latte-line);
  --text: var(--ink);
  --muted: var(--clay);
  --ring: rgba(241,196,83,.28);
  --shadow: 0 8px 20px rgba(0,0,0,.12);
  --accent: #d8a93b;   /* emas sedikit lebih kalem di mode terang */
  --accent-2: #efc66d; /* gradasi ke emas muda */
}

/* Sentuhan publik */
.public .section-title .ico{
  background: rgba(241,196,83,.16);
  color:#ffe39e;
}
.public .chip{ background:#1d1410; border-color:#3b2a1f; color:#eedecc; }
.public.theme-light .chip{ background:#fff8ee; border-color:#f0e3d5; color:#3a2a1f; }
.public .chip:hover{ background:#251a14; }
.public.theme-light .chip:hover{ background:#fff2df; }
.public .chip.on{ border-color:rgba(241,196,83,.6); box-shadow:0 0 0 3px rgba(241,196,83,.16); }

.public .score-card:hover{ border-color:#4a3426 }
.public .progress > i{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* Topbar logo biar napas */
.public .logo{ height:30px; }

/* Footer publik: teks saja */
.public .site-footer{
  margin-top: 34px;
  justify-content: center;
  font-weight: 600;
}



/* ==== FORCE PUBLIC THEME + CENTERED FOOTER ==== */

/* Palet coklat + emas + oranye lembut */
:root{
  --gold:#f1c453;          /* emas hangat */
  --gold-2:#f7d89a;        /* emas muda */
  --soft-orange:#e89a5b;   /* oranye lembut */
  --coffee-900:#1b1310;    /* coklat gelap latar */
  --coffee-800:#231810;
  --coffee-700:#2b1e16;
  --latte:#fbf7f2;         /* krem terang */
  --latte-2:#fffdf9;
  --latte-line:#eadfd4;
  --ink:#1a120d;
  --clay:#7a675a;
}

/* PUBLIC – DARK */
.public.theme-dark{
  --bg: radial-gradient(1100px 700px at 15% -10%, rgba(241,196,83,.10), transparent 60%),
        radial-gradient(900px 600px at 110% 20%, rgba(232,154,91,.08), transparent 55%),
        var(--coffee-900);
  --panel: var(--coffee-800);
  --panel-2: var(--coffee-700);
  --line: #3b2a1f;
  --text: #f6efe7;
  --muted: #d5c6b8;
  --ring: rgba(241,196,83,.22);
  --shadow: 0 8px 20px rgba(0,0,0,.35);
  --accent: var(--gold);
  --accent-2: var(--soft-orange);
}

/* PUBLIC – LIGHT */
.public.theme-light{
  --bg: var(--latte);
  --panel: #ffffff;
  --panel-2: var(--latte-2);
  --line: var(--latte-line);
  --text: var(--ink);
  --muted: var(--clay);
  --ring: rgba(241,196,83,.28);
  --shadow: 0 8px 20px rgba(0,0,0,.12);
  --accent: #d8a93b;
  --accent-2: #efc66d;
}

/* chip & kartu publik */
.public .chip{background:#1d1410;border-color:#3b2a1f;color:#eedecc}
.public.theme-light .chip{background:#fff8ee;border-color:#f0e3d5;color:#3a2a1f}
.public .chip:hover{background:#251a14}
.public.theme-light .chip:hover{background:#fff2df}
.public .chip.on{border-color:rgba(241,196,83,.6);box-shadow:0 0 0 3px rgba(241,196,83,.16)}
.public .score-card:hover{border-color:#4a3426}
.public .progress>i{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.public .logo{height:30px}
.public .section-title .ico{background:rgba(241,196,83,.16);color:#ffe39e}

/* FOOTER: tengah di bawah, full width */
.public .site-footer{
  position: fixed;
  left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; align-items: center;
  padding: 6px 10px;
  border-top: 0; 
  color: var(--muted);
  background: transparent;
  z-index: 5;
}


/* ==== Public mobile layout: logo di atas, toolbar di bawah ==== */

/* jaga konten tidak ketutup footer */
.public .wrap{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* stack topbar untuk public */
.topbar-public{ display:flex; gap:12px; align-items:flex-start; }
.topbar-public .brand-wrap{ display:flex; align-items:center; gap:10px; }

/* toolbar = deretan chip/tombol di sebelah judul (desktop) atau di bawah (mobile) */
.topbar-public .row{ display:flex; flex-wrap:wrap; gap:8px; }

/* logo agak besar di public */
.public .logo{ height:44px; }

/* kartu & elemen publik */
.public .cards{ grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }

/* ------ Breakpoint mobile ------ */
@media (max-width: 640px){
  .wrap{ padding: 0 12px; }
  .topbar{ padding: 10px 0 12px; }

  /* stack & pusatkan semuanya */
  .topbar-public{ flex-direction:column; align-items:center; text-align:center; }
  .topbar-public .brand-wrap{ width:100%; justify-content:center; }
  .topbar-public h1{ font-size:24px; line-height:1.15; }
  .public .logo{ height:54px; }          /* logo lebih “kelihatan” */
  .topbar-public .row{ width:100%; justify-content:center; }

  /* chip & tombol lebih pas di jempol */
  .chip{ padding:6px 12px; font-size:13px; }
  .theme-btn{ padding:8px 10px; }

  /* kartu 1 kolom penuh */
  .cards{ grid-template-columns: 1fr !important; }
  .card{ padding:14px; }
}

/* footer copyright: tengah bawah, full width */
.public .site-footer{
  position: fixed; left:0; right:0; bottom:12px;
  display:flex; justify-content:center; align-items:center;
  padding:6px 10px; border-top:0; background:transparent;
  color:var(--muted); z-index:5;
}

/* Center hanya teks judul match di kartu (public) */
.public .card .section-title{
  display:flex;             /* pastikan flex */
  align-items:center;
}

/* ikon di kiri diberi lebar pasti */
.public .card .section-title .ico{
  width:28px;               /* samakan kiri */
  display:inline-flex;
  justify-content:center;
}

/* judulnya di tengah */
.public .card .section-title h2{
  flex:1;                   /* ambil ruang tengah */
  text-align:center;        /* teks center */
  margin:0;                 /* rapikan margin */
}

/* bikin “penyeimbang” di kanan sebesar ikon kiri */
.public .card .section-title::after{
  content:"";
  width:28px;               /* samakan dengan .ico */
}

/* Banner per-match tepat di atas judul kartu */
.public .card .match-banner{
  width:100%; height:auto; display:block;
  border-radius:12px; margin:4px 0 10px;
  aspect-ratio: 21 / 7;      /* desktop: melebar tapi cukup tinggi */
  object-fit:cover; object-position:center;
  border:1px solid rgba(255,255,255,.06);
}
@media (max-width: 640px){
  .public .card .match-banner{
    aspect-ratio: 16 / 9;    /* HP: lebih tinggi agar teks gambar jelas */
    border-radius:10px;
    margin:4px 0 8px;
  }
}


/* ===== MOBILE TUNING (≤ 640px) ===== */
@media (max-width: 640px) {
  .wrap{ padding:12px; }

  /* Header/brand */
  .topbar-public{ padding:10px 12px; }
  .topbar-public .brand-wrap{
    display:flex; align-items:center; gap:10px;
  }
  .topbar-public .brand-wrap .logo{
    height:34px; width:auto; flex:0 0 auto;
  }
  .topbar-public .brand-wrap h1{
    font-size:18px; line-height:1.2; margin:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* Bar kanan (chips + tombol) */
  .topbar .row{ flex-wrap:wrap; gap:6px; }
  .chips{
    display:flex; gap:6px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:2px; max-width:100%;
    scrollbar-width:none;
  }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ padding:6px 10px; font-size:12px; }
  .btn, .btn.ghost{ padding:8px 12px; font-size:12px; }

  /* Banner full-bleed bawah header */
  .banner-full{
    height:clamp(120px, 28vw, 180px);
    border-radius:12px; margin:8px 0 14px;
    object-fit:cover;
  }

  /* Card & judul di dalam konten */
  .card{ padding:14px; }
  .section-title h2{ font-size:18px; text-align:center; }
  .section-title .ico{ display:none; } /* biar judul lebih “napas” di HP */

  /* Banner per-match (history & public kalau nanti dipakai) */
  .match-banner{
    height:clamp(140px, 26vw, 200px);
    border-radius:12px; margin:0 0 10px 0;
    object-fit:cover; width:100%;
  }

  /* Kartu skor */
  .score-card{ padding:12px; }
  .score-card .score-title{ font-size:15px; }
}



/* === PATCH: jangan crop banner di HP (override minimal) === */
@media (max-width: 640px){
  /* 1) Banner per-match di kartu */
  .public .card .match-banner,
  img.match-banner,
  .match-banner{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;      /* matikan ratio/height paksa */
    object-fit: contain !important;      /* tampil utuh, tidak crop */
    object-position: center center !important;
  }

  /* 2) Banner slider/hero (kelas kamu: .banner-full) */
  .banner-full,
  .banner-full img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;      /* tampil utuh, tidak crop */
    object-position: center center !important;
  }
}



/* === PATCH DESKTOP: jangan crop banner di PC === */
@media (min-width: 641px){
  /* 1) Banner per-match di kartu */
  .public .card .match-banner,
  img.match-banner,
  .match-banner{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;     /* matikan ratio 21/7 */
    object-fit: contain !important;     /* tampil utuh di PC */
    object-position: center center !important;
    display: block;
  }

  /* 2) Banner slider/hero di atas */
  .banner-full,
  .banner-full img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;     /* tampil utuh di PC */
    object-position: center center !important;
    display: block;
  }

  /* (opsional) kalau ada slider pakai background-image */
  .swiper-slide, .splide__slide, .glide__slide, .slick-slide, .banner-slide, .hero, .hero-slide{
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    height: auto !important;
    aspect-ratio: auto !important;
  }

  /* jangan dipotong oleh wrapper */
  .public .card{ overflow: visible !important; }
}