/* =========================================================
   SPENSACODE — Custom Styles
   Tema: Modern, Futuristik, Glassmorphism
   Warna dasar dari logo: Biru tua, Biru muda, Cyan, Putih
========================================================= */

:root{
  --spc-blue-dark:   #24296B;
  --spc-blue:        #2E3AA8;
  --spc-blue-light:  #6D7FE0;
  --spc-cyan:        #22D3C7;
  --spc-cyan-light:  #67E8DF;
  --spc-white:       #FFFFFF;
  --spc-bg-light:    #F3F6FF;
  --spc-bg-dark:     #0B0F2E;
}

* { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  transition: background-color .3s ease, color .3s ease;
}

/* ===== Background gradients ===== */
.bg-spc-gradient {
  background: linear-gradient(135deg, var(--spc-blue-dark) 0%, var(--spc-blue) 45%, var(--spc-cyan) 100%);
}
.bg-spc-radial {
  background:
    radial-gradient(circle at 15% 20%, rgba(109,127,224,.35), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(34,211,199,.30), transparent 45%),
    var(--spc-bg-light);
}
.dark .bg-spc-radial {
  background:
    radial-gradient(circle at 15% 20%, rgba(109,127,224,.25), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(34,211,199,.20), transparent 45%),
    var(--spc-bg-dark);
}

/* ===== Glassmorphism ===== */
.glass {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 32px rgba(46, 58, 168, 0.15);
}
.dark .glass {
  background: rgba(20, 24, 60, 0.55);
  border: 1px solid rgba(109, 127, 224, 0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.glass-nav {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(109,127,224,0.2);
}
.dark .glass-nav {
  background: rgba(11, 15, 46, 0.75);
  border-bottom: 1px solid rgba(109,127,224,0.2);
}

/* ===== Buttons ===== */
.btn-primary {
  background: linear-gradient(135deg, var(--spc-blue), var(--spc-cyan));
  color: #fff;
  transition: all .25s ease;
  box-shadow: 0 4px 15px rgba(34,211,199,0.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(34,211,199,0.5);
}
.btn-outline {
  border: 1.5px solid var(--spc-blue-light);
  color: var(--spc-blue);
  transition: all .25s ease;
}
.dark .btn-outline { color: var(--spc-cyan-light); border-color: var(--spc-cyan); }
.btn-outline:hover { background: var(--spc-blue-light); color: #fff; }

/* ===== Card hover ===== */
.card-hover { transition: transform .3s ease, box-shadow .3s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(46,58,168,0.2); }

/* ===== Text gradient ===== */
.text-gradient {
  background: linear-gradient(135deg, var(--spc-blue), var(--spc-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--spc-blue-light); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--spc-cyan); }

/* ===== Loader / spinner ===== */
.spc-spinner {
  border: 3px solid rgba(109,127,224,.25);
  border-top-color: var(--spc-cyan);
  border-radius: 50%;
  width: 32px; height: 32px;
  animation: spc-spin 0.8s linear infinite;
}
@keyframes spc-spin { to { transform: rotate(360deg); } }

/* ===== QR Scanner box ===== */
#qr-reader { border-radius: 1rem; overflow: hidden; }
#qr-reader video { border-radius: 1rem; }

/* ===== Badge poin/leaderboard ===== */
.rank-gold   { background: linear-gradient(135deg,#FFD700,#FFA500); }
.rank-silver { background: linear-gradient(135deg,#E5E7EB,#9CA3AF); }
.rank-bronze { background: linear-gradient(135deg,#CD7F32,#A0522D); }

/* ===== Fade in animation ===== */
.fade-in-up { animation: fadeInUp .6s ease both; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Sidebar admin/member ===== */
.sidebar-link { transition: all .2s ease; border-radius: .75rem; }
.sidebar-link:hover, .sidebar-link.active {
  background: linear-gradient(135deg, rgba(46,58,168,.12), rgba(34,211,199,.12));
  color: var(--spc-blue);
}
.dark .sidebar-link:hover, .dark .sidebar-link.active { color: var(--spc-cyan-light); }

/* Print styles for PDF export via browser */
@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; }
}