:root{
  --primary:#6d5dfc;
  --primary-dark:#4f46e5;
  --secondary:#00c2ff;
  --accent:#ffcc4d;
  --success:#21c55d;
  --danger:#ef4444;
  --dark:#111827;
  --muted:#6b7280;
  --soft:#f6f7fb;
  --card:rgba(255,255,255,.82);
  --border:rgba(255,255,255,.55);
  --shadow:0 18px 50px rgba(31,41,55,.12);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--dark);
  background:
    radial-gradient(circle at 10% 10%,rgba(109,93,252,.12),transparent 30%),
    radial-gradient(circle at 90% 20%,rgba(0,194,255,.10),transparent 30%),
    linear-gradient(180deg,#fbfcff 0%,#f4f6fb 100%);
  min-height:100vh;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background-image:
    linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);
  background-size:32px 32px;
  z-index:-1;
}

.navbar{
  background:rgba(255,255,255,.78)!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.5);
}

.navbar-brand{
  font-size:1.35rem;
  letter-spacing:-.02em;
}

.nav-link{
  border-radius:12px;
  padding:.65rem .9rem!important;
  transition:.25s ease;
}

.nav-link:hover,.nav-link.active{
  color:var(--primary)!important;
  background:rgba(109,93,252,.08);
}

.min-vh-75{min-height:75vh}

.hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  padding:70px 0;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 28%),
    radial-gradient(circle at 80% 30%,rgba(0,194,255,.22),transparent 24%),
    linear-gradient(135deg,#4f46e5 0%,#7c3aed 55%,#0ea5e9 100%);
}

.hero::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  right:-120px;
  bottom:-180px;
  background:rgba(255,255,255,.12);
  filter:blur(2px);
}

.hero h1{
  letter-spacing:-.04em;
  line-height:1.05;
}

.hero .lead{max-width:680px;color:rgba(255,255,255,.86)}

.hero-icon{
  font-size:180px;
  animation:float 4s ease-in-out infinite;
  filter:drop-shadow(0 25px 35px rgba(0,0,0,.22));
}

@keyframes float{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-16px) rotate(3deg)}
}

.page-header{
  color:#fff;
  padding:84px 0;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.18),transparent 24%),
    linear-gradient(135deg,#4f46e5,#7c3aed 60%,#0ea5e9);
  position:relative;
  overflow:hidden;
}

.page-header::before{
  content:"";
  position:absolute;
  inset:auto -80px -140px auto;
  width:340px;
  height:340px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
}

.feature-card,.materi-card,.article-card,.menu-card,.login-card,.latihan-card,.badge-card,.stat-card,.nilai-item{
  background:var(--card);
  border:1px solid var(--border);
  backdrop-filter:blur(16px);
  border-radius:24px;
  box-shadow:var(--shadow);
}

.feature-card,.materi-card,.menu-card,.stat-card,.badge-card{
  padding:30px;
  height:100%;
  transition:.28s ease;
}

.feature-card:hover,.materi-card:hover,.menu-card:hover,.badge-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 60px rgba(31,41,55,.16);
}

.feature-card{text-align:center}

.feature-card i,.menu-card i{
  display:inline-flex;
  width:66px;
  height:66px;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  font-size:30px;
  color:#fff;
  margin-bottom:18px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 12px 25px rgba(109,93,252,.25);
}

.materi-card{
  text-align:left;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}

.materi-card::before{
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  border-radius:50%;
  top:-70px;
  right:-50px;
  background:linear-gradient(135deg,rgba(109,93,252,.18),rgba(0,194,255,.14));
}

.materi-icon,.detail-icon{
  font-size:68px;
  line-height:1;
  margin-bottom:18px;
}

.article-card{padding:32px}

.learning-box{
  background:linear-gradient(135deg,rgba(109,93,252,.08),rgba(0,194,255,.08));
  border:1px solid rgba(109,93,252,.12);
  border-left:5px solid var(--primary);
  border-radius:18px;
  padding:22px;
}

.menu-card,.stat-card{text-align:center}

.menu-card h2,.stat-card h2{
  font-size:2.2rem;
  font-weight:800;
  margin:.3rem 0 0;
}

.profile-icon{
  font-size:84px;
  filter:drop-shadow(0 12px 18px rgba(109,93,252,.18));
}

.login-body{
  background:
    radial-gradient(circle at 15% 20%,rgba(109,93,252,.22),transparent 30%),
    radial-gradient(circle at 85% 20%,rgba(0,194,255,.18),transparent 30%),
    linear-gradient(135deg,#eef2ff,#f8fafc);
}

.login-card{
  width:100%;
  max-width:470px;
  padding:40px;
}

.login-icon{
  font-size:84px;
  animation:float 4s ease-in-out infinite;
}

.form-control{
  border-radius:14px;
  border:1px solid #e5e7eb;
  padding:.9rem 1rem;
}

.form-control:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 .25rem rgba(109,93,252,.12);
}

.btn{
  border-radius:14px;
  font-weight:700;
  transition:.25s ease;
}

.btn:hover{transform:translateY(-2px)}

.btn-primary{
  border:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 10px 22px rgba(109,93,252,.22);
}

.btn-warning{
  border:none;
  background:linear-gradient(135deg,#ffd84d,#ffb020);
  color:#2d2300;
}

.latihan-card{padding:34px}

.soal-item{
  padding:24px;
  margin-bottom:22px;
  border:1px solid #e8ebf3;
  border-radius:20px;
  background:rgba(255,255,255,.8);
}

.nomor-soal{
  display:inline-flex;
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  align-items:center;
  justify-content:center;
  margin-right:10px;
  font-weight:800;
}

.pilihan-jawaban{
  display:block;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:10px;
  cursor:pointer;
  transition:.2s ease;
}

.pilihan-jawaban:hover{
  border-color:var(--primary);
  background:#f1efff;
  transform:translateX(4px);
}

.achievement-hero{
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 24%),
    linear-gradient(135deg,#4f46e5,#7c3aed 60%,#0ea5e9);
  color:#fff;
  border-radius:30px;
  padding:48px;
  box-shadow:0 24px 60px rgba(79,70,229,.25);
}

.progress{
  background:rgba(17,24,39,.08);
  border-radius:999px;
  overflow:hidden;
}

.progress-bar{
  border-radius:999px;
  transition:width 1s ease;
}

.progress-achievement{height:26px}

.badge-emoji{
  font-size:68px;
  animation:float 4s ease-in-out infinite;
}

.badge-open{
  border:2px solid rgba(255,193,7,.75);
  background:linear-gradient(180deg,#fff,#fffdf2);
}

.badge-locked{
  filter:grayscale(1);
  opacity:.58;
}

.nilai-item{
  padding:20px;
  display:flex;
  gap:18px;
  align-items:center;
}

.nilai-circle{
  width:74px;
  height:74px;
  min-width:74px;
  border-radius:22px;
  background:linear-gradient(135deg,#eef2ff,#e0f2fe);
  color:var(--primary);
  font-weight:800;
  font-size:1.35rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.footer{
  background:#0f172a;
  color:#fff;
  padding:38px 0;
}

.badge{
  border-radius:999px;
  padding:.55rem .8rem;
}

@media(max-width:768px){
  .hero{padding:55px 0}
  .hero-icon{font-size:110px}
  .achievement-hero{padding:30px 22px}
  .latihan-card,.login-card,.article-card{padding:22px}
  .navbar-nav{gap:.2rem!important}
}