/* =====================================================================
   PANENGROUP - WORLD CUP 2026
   Stylesheet (responsive, dark theme, mobile-first)
   ===================================================================== */

:root{
  --bg:           #0a0f1f;
  --bg-2:         #0f1730;
  --panel:        #121b35;
  --panel-2:      #0b1330;
  --border:       #1f2a4d;
  --border-2:     #2a3a6a;
  --text:         #e8edff;
  --muted:        #8a93b8;
  --accent:       #3b82f6;   /* primary blue */
  --accent-2:     #22d3ee;   /* cyan */
  --gold:         #f5b942;
  --gold-2:       #ffd166;
  --green:        #10b981;
  --red:          #ef4444;
  --shadow:       0 10px 30px rgba(0,0,0,.35);
  --radius:       14px;
  --radius-sm:    10px;
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(245,185,66,.07), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-display);
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{ width:min(1180px, 100%); margin:0 auto; padding:0 18px; }

/* ---------- topbar ---------- */
.topbar{
  padding:18px 0;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(11,19,48,.7), transparent);
  position:sticky; top:0; z-index:40; backdrop-filter:blur(10px);
}
.brand-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px;
  border:1px solid var(--border-2);
  border-radius:999px;
  background:linear-gradient(180deg,#152043,#0c1431);
  font-weight:700; letter-spacing:.4px;
  color:var(--accent-2);
  font-size:14px;
}
.brand-pill i{ color:var(--gold); }

/* ---------- hero ---------- */
.hero{ padding:36px 18px 18px; text-align:center; }
.hero-title{
  font-size:clamp(28px, 5.2vw, 56px);
  line-height:1.05; margin:0 0 10px;
  font-weight:800; letter-spacing:-.5px;
}
.accent  { color:var(--text); }
.accent-2{
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ color:var(--muted); margin:0 0 22px; font-size:15px; }

.hero-banner{
  border-radius:18px; overflow:hidden;
  margin:24px auto 18px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  max-width:1100px;
  background:linear-gradient(135deg,#3a1e4a,#812b1a);
  aspect-ratio: 1100 / 350;
}
.hero-banner img{ width:100%; height:100%; object-fit:cover; }

/* ---------- filter bar ---------- */
.filter-bar{
  display:inline-flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:center;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(18,27,53,.55);
  margin:10px auto 16px;
  font-size:14px;
  color:var(--muted);
}
.filter-bar input[type="date"]{
  background:var(--panel-2); color:var(--text);
  border:1px solid var(--border-2);
  border-radius:10px;
  padding:8px 12px;
  font-family:var(--font-mono); font-size:13px;
  color-scheme:dark;
}
.btn-ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--border-2); border-radius:10px;
  padding:8px 14px; cursor:pointer; font-size:13px;
  transition:background .15s ease, transform .1s ease;
}
.btn-ghost:hover{ background:rgba(59,130,246,.12); }
.btn-ghost:active{ transform:translateY(1px); }

/* ---------- tv banner ---------- */
.tv-banner{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  justify-content:center;
  margin:14px auto 6px;
  padding:14px 18px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#0e1632, #0a1226);
  border-radius:16px;
  max-width:720px;
  font-weight:600;
  transition:border-color .2s ease, transform .15s ease;
}
.tv-banner:hover{ border-color:var(--red); transform:translateY(-1px); }
.tv-banner .live-dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--red); box-shadow:0 0 0 6px rgba(239,68,68,.15);
  animation: pulse 1.4s infinite;
}
@keyframes pulse{ 50%{ box-shadow:0 0 0 10px rgba(239,68,68,.05); } }
.tv-banner .tv-cta{
  background:var(--red); color:#fff;
  padding:8px 16px; border-radius:10px;
  font-weight:800; letter-spacing:.4px; font-size:13px;
}

/* ---------- tabs ---------- */
.tabs{
  display:flex; gap:6px;
  margin:18px auto 22px;
  padding:8px;
  border:1px solid var(--border);
  background:rgba(15,23,48,.55);
  border-radius:18px;
  overflow-x:auto;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:1 1 auto; display:flex; align-items:center; gap:8px;
  justify-content:center; white-space:nowrap;
  padding:11px 16px; border-radius:12px;
  color:var(--muted); font-weight:600; font-size:14px;
  transition:all .2s ease;
}
.tab i{ font-size:15px; }
.tab:hover{ color:var(--text); background:rgba(59,130,246,.06); }
.tab.active{
  background:linear-gradient(180deg, var(--accent), #2256c7);
  color:#fff; box-shadow:0 6px 18px rgba(59,130,246,.35);
}

/* ---------- main / cards ---------- */
.main-content{ padding-bottom:80px; }

.card{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
.card + .card{ margin-top:16px; }
.card-h{
  display:flex; align-items:center; gap:10px;
  margin:0 0 4px;
  font-size:20px; font-weight:700;
}
.card-h i{ color:var(--gold); }
.card-sub{ color:var(--muted); margin:0 0 18px; font-size:13.5px; }

/* ---------- table ---------- */
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td{
  text-align:left; padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-size:14px;
}
.table th{
  color:var(--muted); font-weight:600;
  font-size:12px; text-transform:uppercase; letter-spacing:.6px;
}
.table tbody tr{ transition:background .15s ease; }
.table tbody tr:hover{ background:rgba(59,130,246,.06); }
.table .rank{
  width:46px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; background:#16224a; font-weight:700; color:var(--text);
  font-family:var(--font-mono); font-size:13px;
}
.table .rank.r1{ background:linear-gradient(135deg,#f5b942,#b97c00); color:#1a1100; }
.table .rank.r2{ background:linear-gradient(135deg,#c0c6d8,#7c869c); color:#1a1a1a; }
.table .rank.r3{ background:linear-gradient(135deg,#c87833,#8a4a14); color:#fff; }

.brand-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.4px;
  background:rgba(34,211,238,.10); color:var(--accent-2);
  border:1px solid rgba(34,211,238,.25);
}
.brand-tag i{ font-size:11px; }

/* ---------- forms ---------- */
.form-grid{ display:grid; gap:14px; }
@media(min-width:760px){ .form-grid.two{ grid-template-columns:1fr 1fr; } }

.field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; font-weight:600; }
.input, select.input, textarea.input{
  width:100%; box-sizing:border-box;
  background:var(--panel-2); color:var(--text);
  border:1px solid var(--border-2);
  border-radius:10px;
  padding:11px 14px; font-size:14px;
  font-family:var(--font-display);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus, select.input:focus, textarea.input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(59,130,246,.15);
}
textarea.input{ min-height:90px; resize:vertical; }

.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:12px 18px; border-radius:12px;
  background:linear-gradient(180deg, var(--accent), #2253c2);
  color:#fff; border:none; cursor:pointer;
  font-weight:700; font-size:14px;
  width:100%;
  transition:transform .1s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ filter:brightness(1.05); box-shadow:0 8px 20px rgba(59,130,246,.35); }
.btn:active{ transform:translateY(1px); }
.btn.green{ background:linear-gradient(180deg, var(--green), #047857); }
.btn.green:hover{ box-shadow:0 8px 20px rgba(16,185,129,.35); }
.btn.gold { background:linear-gradient(180deg, var(--gold), #a96f0a); color:#1a1100; }
.btn.red  { background:linear-gradient(180deg, var(--red), #991b1b); }
.btn.outline{
  background:transparent; color:var(--text);
  border:1px solid var(--border-2);
}
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.alert{
  margin-bottom:14px; padding:11px 14px;
  border-radius:10px; font-size:13.5px;
  border:1px solid var(--border-2);
}
.alert.ok{ background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.4); color:#a7f3d0; }
.alert.err{ background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.4); color:#fecaca; }
.alert.info{ background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.3); color:#bfdbfe; }

/* ---------- sub-tabs (inside Tebak Piala Dunia and Syarat) ---------- */
.subtabs{
  display:flex; gap:6px;
  background:rgba(11,19,48,.7);
  padding:6px; border-radius:12px;
  border:1px solid var(--border);
  margin-bottom:18px;
}
.subtab{
  flex:1; text-align:center;
  padding:10px 12px;
  border-radius:8px;
  color:var(--muted); font-weight:600; font-size:13.5px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.subtab.active{ background:linear-gradient(180deg, var(--accent), #2253c2); color:#fff; }
.subtab.green.active{ background:linear-gradient(180deg, var(--green), #047857); }
.subtab-panel{ display:none; }
.subtab-panel.active{ display:block; }

/* ---------- search box ---------- */
.search-box{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px;
  background:var(--panel-2);
  border:1px solid var(--border-2); border-radius:12px;
}
.search-box i{ color:var(--muted); }
.search-box input{
  flex:1; background:transparent; border:0; outline:0;
  color:var(--text); font-size:14px; font-family:var(--font-display);
}

/* ---------- hadiah / prizes ---------- */
.prize-grid{
  display:grid; gap:14px; margin:18px 0 8px;
  grid-template-columns:repeat(3, 1fr);
}
@media(max-width:720px){ .prize-grid{ grid-template-columns:1fr; } }

.prize{
  border:1px solid var(--border);
  background:linear-gradient(180deg,#101a3a,#0b1227);
  padding:22px; border-radius:14px; text-align:center; position:relative;
  transition:transform .2s ease, border-color .2s ease;
}
.prize:hover{ transform:translateY(-3px); }
.prize .rank-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  padding:3px 14px; border-radius:999px;
  background:#0b1230; border:1px solid var(--border-2);
  font-size:12px; font-weight:700; color:var(--accent-2);
}
.prize .ico{ font-size:36px; margin:8px 0; }
.prize h4{ margin:6px 0 4px; font-size:18px; font-weight:700; }
.prize p{ margin:0; color:var(--muted); font-size:13.5px; }
.prize.gold{
  border-color:rgba(245,185,66,.45);
  background:linear-gradient(180deg,#1a1530, #150e1f);
  box-shadow:0 0 0 1px rgba(245,185,66,.15) inset;
}
.prize.gold .rank-badge{ background:#1c1407; color:var(--gold-2); border-color:var(--gold); }

/* ---------- syarat list ---------- */
.rules h3{ margin:16px 0 8px; font-size:16px; }
.rules ul, .rules ol{ padding-left:22px; color:#cdd5f7; }
.rules li{ margin-bottom:6px; }

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--border);
  padding:24px 0; margin-top:24px;
  text-align:center; color:var(--muted); font-size:13px;
}
.site-footer .muted a{ color:var(--accent-2); }
.muted{ color:var(--muted); }

/* ---------- bill thumbs ---------- */
.bill-thumbs{ display:flex; gap:8px; flex-wrap:wrap; }
.bill-thumbs a{
  display:block; width:64px; height:64px; border-radius:8px;
  background:#0b1230; overflow:hidden; border:1px solid var(--border-2);
}
.bill-thumbs img{ width:100%; height:100%; object-fit:cover; }

/* ---------- pill status ---------- */
.pill{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.4px;
}
.pill.pending { background:rgba(245,185,66,.15); color:#fde68a; }
.pill.approved{ background:rgba(16,185,129,.15); color:#a7f3d0; }
.pill.rejected{ background:rgba(239,68,68,.15);  color:#fecaca; }

/* ---------- empty state ---------- */
.empty{
  text-align:center; padding:32px 14px; color:var(--muted);
  border:1px dashed var(--border-2); border-radius:12px;
}
.empty i{ font-size:34px; margin-bottom:10px; color:var(--border-2); }

/* ---------- two-column wrapper for tebak ---------- */
.split{
  display:grid; gap:16px;
  grid-template-columns:1fr;
}
@media(min-width:880px){ .split{ grid-template-columns:1fr 1fr; } }

/* ---------- admin layout ---------- */
.admin-shell{ display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
@media(max-width:880px){ .admin-shell{ grid-template-columns:1fr; } }

.sidebar{
  background:linear-gradient(180deg, #0d1530, #0a1126);
  border-right:1px solid var(--border);
  padding:20px 14px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
@media(max-width:880px){ .sidebar{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--border); } }

.sidebar .logo{ font-weight:800; font-size:16px; margin-bottom:18px; color:var(--accent-2); }
.sidebar nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:2px 0;
  border-radius:10px; color:var(--muted);
  font-size:14px; font-weight:600;
}
.sidebar nav a:hover{ background:#121c40; color:var(--text); }
.sidebar nav a.active{ background:linear-gradient(180deg, var(--accent), #2253c2); color:#fff; }
.sidebar nav a i{ width:18px; text-align:center; }
.sidebar .divider{ height:1px; background:var(--border); margin:14px 0; }

.admin-main{ padding:24px; }
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--border);
  flex-wrap:wrap; gap:10px;
}
.admin-topbar h1{ margin:0; font-size:22px; font-weight:800; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
@media(max-width:880px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
.stat{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--border); border-radius:14px; padding:16px;
}
.stat .label{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.6px; }
.stat .value{ font-size:28px; font-weight:800; margin-top:6px; font-family:var(--font-mono); }
.stat i{ color:var(--accent-2); }

.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.toolbar .btn{ width:auto; padding:9px 16px; }

.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:18px;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(700px 400px at -10% 30%, rgba(245,185,66,.08), transparent 60%),
    var(--bg);
}
.login-card{ width:min(420px,100%); }

.row-actions a, .row-actions button{
  background:transparent; border:1px solid var(--border-2);
  color:var(--text); border-radius:8px; padding:6px 10px;
  font-size:12px; cursor:pointer; margin-right:4px;
  transition:background .15s ease;
}
.row-actions a:hover{ background:#162148; }
.row-actions button.danger:hover{ background:rgba(239,68,68,.15); border-color:var(--red); }

/* scrollable table on small screens */
.table-wrap{ overflow-x:auto; }

/* utility */
.text-right{ text-align:right; }
.text-center{ text-align:center; }
.mt-12{ margin-top:12px; } .mt-18{ margin-top:18px; }
.mb-0{ margin-bottom:0; }
.hidden{ display:none !important; }