/* user-theme.css — TEMA BARU web user: abu-abu & putih + aksen biru langit (#0891d2), elemen mengambang.
   Dimuat SETELAH <style> di index.html sehingga menimpa tema lama.
   Titik kembali ke tampilan lama: branch git "backup-ui-lama" (atau hapus <link> file ini). */

:root {
  --bg: #e9ecf1;
  --surface: #ffffff;
  --surface-2: #f3f5f9;
  --border: #e3e7ee;
  --text: #111827;
  --text-2: #6b7280;
  --red: #b91c1c;
  --red-dark: #fee2e2;
  --yellow: #0891d2;          /* dulu emas; sekarang aksen biru (dipakai sebagai warna sorotan) */
  --yellow-glow: #0768a3;
  --success: #15803d;
  --warn: #b45309;
  --error: #b91c1c;
  --brand: #0891d2;
  --brand-2: #0768a3;
  --brand-soft: #e1f3fc;
  --sky-1: #e9ecf1; --sky-2: #e9ecf1; --sky-3: #e9ecf1;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(17,24,39,.08), 0 2px 6px rgba(17,24,39,.05);
  --font-title: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

body {
  background:
    radial-gradient(700px 380px at 88% -8%, rgba(8,145,210,.20), transparent 70%),
    radial-gradient(520px 340px at -3% 102%, rgba(34,211,238,.14), transparent 70%),
    var(--bg);
  background-attachment: fixed, fixed, fixed;
  color: var(--text);
}
/* pola titik halus di bagian atas */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(7,104,163,.12) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 50%);
  mask-image: linear-gradient(180deg, #000, transparent 50%);
}
.scene { display: none !important; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.01em; }
a { color: var(--brand-2); }

/* ===== Komponen dasar ===== */
.text-gradient { background: none; -webkit-text-fill-color: var(--text); color: var(--text); }
.text-white { color: var(--text); }
.btn {
  background: linear-gradient(180deg, #19a6e6, var(--brand-2));
  box-shadow: 0 8px 18px rgba(8,145,210,.32);
  border-radius: 12px; font-weight: 700;
}
.btn:disabled { background: #cbd5e1; color: #f8fafc; box-shadow: none; }
.btn-outline { background: #fff; border: 1px solid #d5dbe5; color: var(--text); box-shadow: none; }
.btn-outline:hover { background: var(--surface-2); }
.card {
  background: var(--surface); border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-red {
  background: linear-gradient(135deg, var(--brand-soft), #fff);
  border: 1px solid #cfe9f7;
}
input[type="text"], input[type="password"], input[type="number"], select, textarea {
  background: #f8fbfd; border: 1px solid #dbe5ee; color: var(--text); font-weight: 500;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(8,145,210,.18); }
th { color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
td, th { border-bottom: 1px solid #eef1f5; }
.badge { background: var(--brand-soft); color: var(--brand-2); }
.badge.success { background: #e0f7f3; color: #0d7a6f; }
.badge.error { background: #fee2e2; color: #b91c1c; }
.logo { color: var(--text); letter-spacing: .02em; }
.logo svg { filter: none; }
.logo-img { border: none; border-radius: 10px; width: 36px; height: 36px; box-shadow: 0 4px 10px rgba(17,24,39,.15); }
.dot { background: #d5dde6; }
.dot.active { background: var(--brand); }
.bolt-segment { background: #e3e7ee; }
.bolt-segment.active { background: linear-gradient(90deg, #22d3ee, var(--brand)); }
.avatar-circle { background: var(--brand-soft); border: 3px solid #bfe2f4; color: var(--brand-2); }
.av { background: #dbe6fb; color: var(--brand-2); }
.toast { background: #111827; border: none; color: #fff; }
.console-log { background: #0f172a; color: #86efac; }
.text-yellow { color: var(--brand-2); }
.text-success { color: var(--success); }
.terms-check { color: var(--text-2); }
.wd-timer { background: var(--brand-soft); border: 1px solid #cfe9f7; }
.wd-timer .t { color: var(--brand-2); }
.wd-count .u { background: #fff; box-shadow: var(--shadow); }
.wd-count .u b { color: var(--text); }
.speed-opt.active { background: linear-gradient(135deg, #19a6e6, var(--brand-2)); box-shadow: 0 4px 12px rgba(8,145,210,.35); }
.blast-box { background: #f4f9fd; border: 1px solid #e3eef6; }

/* ===== Popup / dialog kotak mengambang ===== */
.qr-modal { background: rgba(17,24,39,.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.qr-modal > .card, .qr-modal > div > .card { border-radius: 22px; box-shadow: 0 30px 70px rgba(17,24,39,.3); }
.swal2-popup { border-radius: 22px !important; }

/* ===== Banner pemberitahuan ===== */
.wb-info { background: #0f2a3d; }
.web-banner { z-index: 9500; }

/* ===== Landing & auth ===== */
.hero p { color: var(--text-2); text-shadow: none; }
.hero h1 { color: var(--text); }
.auth-card { background: #fff; border: 1px solid rgba(255,255,255,.9); box-shadow: 0 30px 70px rgba(17,24,39,.16); }
.landing-header { background: transparent; }
.features .card h3 { color: var(--brand-2); }

/* ===== Kerangka dashboard: sidebar & bar atas mengambang ===== */
#dashboard-shell { align-items: flex-start; }
.sidebar {
  width: 236px; top: 16px; bottom: 16px; left: 16px; margin: 0;
  background: linear-gradient(180deg, #fff, #f4f9fd);
  border: none; border-radius: 22px; box-shadow: var(--shadow);
}
body.has-banner .sidebar { top: calc(16px + var(--bh, 40px)); }
.sidebar-header { border-bottom: none; height: 72px; padding: 0 20px; }
.sidebar-nav { padding: 6px 12px; gap: 3px; }
.nav-item {
  color: var(--text-2); font-weight: 600; font-size: 14px; gap: 12px; padding: 11px 13px; border-radius: 12px;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active {
  color: var(--brand-2); background: linear-gradient(90deg, #d6eefb, #eaf7fd);
  box-shadow: inset 3px 0 0 var(--brand);
}
.nav-item .nv-line { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; opacity: .85; }
.nav-item.active .nv-line { opacity: 1; }
.sidebar .btn-outline { border-color: #d5dbe5; }

.app-col { flex: 1; min-width: 0; margin-left: 268px; padding: 16px 26px 28px 0; display: flex; flex-direction: column; gap: 16px; }
.main-content { margin: 0; padding: 0; background: none; border: none; box-shadow: none; border-radius: 0; flex: none; }

.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: #fff; border-radius: 18px; padding: 10px 12px 10px 20px; box-shadow: var(--shadow);
  position: sticky; top: 16px; z-index: 120;
}
body.has-banner .topbar { top: calc(16px + var(--bh, 40px)); }
.tb-clock { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-date { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--brand); background: var(--brand-soft); border-radius: 10px; padding: 5px 10px; font-size: 14px; white-space: nowrap; }
.tb-time small { font-size: 10px; font-weight: 700; opacity: .75; margin-left: 4px; }
.tb-right { display: flex; align-items: center; gap: 10px; position: relative; }
.tb-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: #f3f5f9; }
.tb-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); display: inline-block; }
.tb-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 12px; background: #f3f5f9; font-weight: 600; font-size: 13px; border: none; cursor: pointer; color: var(--text); }
.tb-chip:hover { background: #e9eef5; }
.tb-prof { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px; border-radius: 14px; background: #f3f5f9; font-weight: 600; font-size: 13px; border: none; cursor: pointer; color: var(--text); }
.tb-prof:hover { background: #e9eef5; }
.tb-prof .av { width: 32px !important; height: 32px !important; font-size: 13px !important; }
.tb-menu {
  position: absolute; right: 0; top: calc(100% + 12px); min-width: 240px; background: #fff; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(17,24,39,.22); padding: 10px; display: none; z-index: 130;
}
.tb-menu.open { display: block; animation: tbpop .16s ease-out; }
@keyframes tbpop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tb-menu .hd { padding: 8px 12px 10px; border-bottom: 1px solid #eef1f5; margin-bottom: 6px; }
.tb-menu .hd b { display: block; }
.tb-menu .hd span { font-size: 12px; color: var(--text-2); }
.tb-menu a, .tb-menu button.it {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; font-weight: 500; font-size: 14px;
  color: var(--text); text-decoration: none; background: none; border: none; width: 100%; cursor: pointer; text-align: left;
}
.tb-menu a:hover, .tb-menu button.it:hover, .tb-menu .on { background: var(--brand-soft); color: var(--brand-2); }
.tb-menu .nv-line { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tb-menu hr { border: none; border-top: 1px solid #eef1f5; margin: 6px 0; }
.tb-menu .danger { color: var(--error); }
.tb-menu .danger:hover { background: #fee2e2; color: var(--error); }
.tb-menu .lang-row { display: flex; gap: 6px; padding: 6px 8px; }
.tb-menu .lang-row button { flex: 1; border: 1px solid #dbe5ee; background: #fff; border-radius: 10px; padding: 8px 4px; font-weight: 600; cursor: pointer; font-size: 13px; }
.tb-menu .lang-row button.on { background: var(--brand-soft); color: var(--brand-2); border-color: #9ed4ee; }
.mobile-header { display: none !important; }
body:has(#dashboard-shell) #langFloat { display: none !important; }
#langFloat { background: #fff !important; border: none !important; box-shadow: var(--shadow); }

.fab-help { background: linear-gradient(180deg, #19a6e6, var(--brand-2)); color: #fff; box-shadow: 0 8px 20px rgba(8,145,210,.4); }

/* ===== Beranda ===== */
.home-hero {
  background: linear-gradient(120deg, #0b78b5 0%, #0891d2 55%, #22d3ee 130%); color: #fff; border: none;
  position: relative; overflow: hidden;
}
.home-hero::before { content: ""; position: absolute; right: -60px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.12); }
.home-hero::after { content: ""; position: absolute; right: 140px; bottom: -110px; width: 230px; height: 230px; border-radius: 50%; background: rgba(255,255,255,.09); }
.home-hero > * { position: relative; z-index: 1; }
.home-hero .text-2, .home-hero h3, .home-hero h2 { color: #fff; }
.home-hero .text-2 { opacity: .85; }
.home-hero .text-yellow { color: #fff; }
.home-hero .text-success { color: #bbf7d0; }
.home-hero .btn { background: #fff; color: var(--brand-2); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.home-hero .av { background: rgba(255,255,255,.22); color: #fff; }
.stat-card { text-align: left; border-top: none !important; overflow: hidden; }
.stat-card h3 { font-size: 26px; }
.stat-card .p { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-top: 12px; }
.stat-card .tile { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 8px 16px rgba(8,145,210,.28); }
.tile.t1 { background: linear-gradient(135deg, #22d3ee, #0891d2); }
.tile.t2 { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.tile.t3 { background: linear-gradient(135deg, #34d399, #0d9488); }
.tile.t4 { background: linear-gradient(135deg, #a5b4fc, #6366f1); }
#bonusBox .card { border: 1px solid #cfe9f7 !important; background: linear-gradient(135deg, #e8f6fd, #fff) !important; }
.bonus-bar, #bonusBox [style*="height:10px"], #bonusBox [style*="height: 10px"] { background: #e6eef4; }

/* ===== Leaderboard / chat / lainnya (variabel sudah berganti; sesuaikan yang hard-coded) ===== */
.pod { background: #fff; border-color: #e3e7ee; box-shadow: var(--shadow); }
.pod1 { border-color: #fcd34d; background: linear-gradient(180deg, #fffbeb, #fff); }
.pod .pbase { color: #fff; }
.lb-row { background: #fff; box-shadow: var(--shadow); border-color: transparent; }
.sup-body { background: #f3f5f9; }
.sup-m.me .sup-b { background: linear-gradient(180deg, #19a6e6, var(--brand-2)); color: #fff; }
.sup-ava { background: var(--brand-soft); color: var(--brand-2); }

/* ===== Menu bawah (HP): pil melayang + ikon beranimasi ===== */
@media (max-width: 1199px) {
  .sidebar { width: 82px; }
  .sidebar-header { justify-content: center; padding: 0; }
  .nav-item { justify-content: center; padding: 13px; }
  .app-col { margin-left: 114px; }
  .tb-date { max-width: 260px; }
}
@media (max-width: 767px) {
  .sidebar { display: none; }
  .app-col { margin-left: 0; padding: 14px 14px 112px; gap: 12px; }
  .topbar { top: 14px; padding: 9px 10px 9px 14px; }
  body.has-banner .topbar { top: calc(14px + var(--bh, 40px)); }
  .tb-date { font-size: 12px; max-width: 190px; }
  .tb-time { font-size: 15px; background: none; padding: 0; color: var(--brand); display: block; }
  .tb-clock { flex-direction: column; align-items: flex-start; gap: 0; }
  .tb-pill, .tb-prof .nm, .tb-chip .cl { display: none; }
  .tb-prof { padding: 3px; background: none; }
  .tb-chip { padding: 7px 10px; }
  .bottom-nav {
    left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); height: auto;
    background: #fff; border: none; border-radius: 24px; box-shadow: 0 14px 34px rgba(17,24,39,.18);
    backdrop-filter: none; padding: 8px 6px; gap: 0;
  }
  .bottom-nav-item { color: var(--text-2); font-weight: 600; padding: 4px 2px; gap: 2px; border-radius: 14px; max-width: none; }
  .bottom-nav-item.active { color: var(--brand-2); background: var(--brand-soft); box-shadow: none; transform: none; }
  .fab-help { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); right: 16px; width: 46px; height: 46px; }
}
.ni { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; position: relative; }
.ni svg { width: 28px; height: 28px; overflow: visible; }
.bottom-nav-item .ni { width: 34px; height: 34px; border-radius: 11px; }
.bottom-nav-item .ni svg { width: 24px; height: 24px; }
.bottom-nav-item.active .ni { box-shadow: 0 6px 14px rgba(8,145,210,.32); }
@keyframes hop { 0%,100% { transform: translateY(0) } 20% { transform: translateY(-4px) } 40% { transform: translateY(0) } }
@keyframes wave { 0%,100% { opacity: .15 } 30% { opacity: 1 } 60% { opacity: .15 } }
@keyframes flip { 0%,100% { transform: scaleX(1) } 25% { transform: scaleX(.08) } 50% { transform: scaleX(1) } }
@keyframes twk { 0%,100% { transform: scale(.5) rotate(0); opacity: .3 } 50% { transform: scale(1.2) rotate(45deg); opacity: 1 } }
@keyframes tilt { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-8deg) } 75% { transform: rotate(8deg) } }
@keyframes lid { 0%,60%,100% { transform: translateY(0) rotate(0) } 20% { transform: translateY(-5px) rotate(-8deg) } 40% { transform: translateY(-3px) rotate(6deg) } }
@keyframes dotb { 0%,100% { transform: translateY(0) } 25% { transform: translateY(-3.5px) } 50% { transform: translateY(0) } }
@keyframes blink { 0%,42%,50%,100% { transform: scaleY(1) } 46% { transform: scaleY(.1) } }
@keyframes bobb { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-2px) } }
.a-hop { animation: hop 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.w1 { animation: wave 2.4s infinite 0s; } .w2 { animation: wave 2.4s infinite .25s; } .w3 { animation: wave 2.4s infinite .5s; }
.a-flip { animation: flip 2.4s ease-in-out infinite; transform-origin: 16px 16px; }
.a-twk { animation: twk 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.a-tilt { animation: tilt 2.4s ease-in-out infinite; transform-origin: 16px 28px; }
.a-lid { animation: lid 2.4s ease-in-out infinite; transform-origin: 16px 14px; }
.d1 { animation: dotb 2.4s infinite 0s; } .d2 { animation: dotb 2.4s infinite .2s; } .d3 { animation: dotb 2.4s infinite .4s; }
.a-blink { animation: blink 2.4s infinite; transform-origin: center; transform-box: fill-box; }
.a-bob { animation: bobb 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ni svg * { animation: none !important; } }

@media (max-width: 767px) {
  .main-content .mb-4 { margin-bottom: 14px; }
  .main-content .mb-3 { margin-bottom: 12px; }
  .main-content .grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .main-content .grid-2 { gap: 12px; }
  .main-content .card { padding: 16px; }
  .stat-card .tile { width: 36px; height: 36px; border-radius: 11px; font-size: 13px; }
  .stat-card h3 { font-size: 19px; }
  .home-hero { flex-direction: column; align-items: stretch !important; gap: 12px !important; }
  .home-hero .text-right { text-align: left; }
  .home-hero .text-right .btn { width: 100%; }
  .home-hero h2 { font-size: 28px !important; }
  h2 { font-size: 22px; }
}

/* Tombol bahasa di halaman depan/login (HP): pindah ke bawah agar tidak menutupi tombol Masuk/Daftar */
@media (max-width: 767px) {
  #langFloat { top: auto !important; bottom: 16px; right: 14px !important; }
}