/* ================================================================
   EduSpace — index.css
   Tema: Luar Angkasa Interaktif & Animated
   ================================================================ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

/* ── RESET & ROOT ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

:root {
  --clr-bg:       #020812;
  --clr-deep:     #050f25;
  --clr-card:     rgba(6, 18, 50, 0.72);
  --clr-cyan:     #00e5ff;
  --clr-gold:     #ffd54f;
  --clr-purple:   #9c4dff;
  --clr-orange:   #ff7043;
  --clr-green:    #00e676;
  --clr-text:     #e8eaf6;
  --clr-muted:    rgba(200, 210, 240, 0.6);
  --font-display: 'Orbitron', sans-serif;
  --font-body:    'Exo 2', sans-serif;
  --radius:       18px;
  --transition:   0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  font-family: var(--font-body);
  background: var(--clr-bg);
  color: var(--clr-text);
  overflow-x: hidden;
  min-height: 100vh;
  cursor: default;
}

/* ================================================================
   LATAR ANGKASA ANIMASI
   ================================================================ */
.space-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Gradien dasar galaksi */
  background:
    radial-gradient(ellipse 80% 60% at 15% 30%, rgba(13,27,70,0.9) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 85% 70%, rgba(28,10,60,0.85) 0%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #060d1e 0%, #020812 100%);
}

/* ── Bintang (3 layer kedalaman) ── */
.star-field {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  animation: starDrift linear infinite;
}

/* Layer 1 — bintang kecil & banyak */
.star-field.s1 {
  background-image:
    radial-gradient(1px 1px at  5%  8%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 13% 22%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 55%, #dde 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 11%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 78%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 48%  3%, #dde 0%, transparent 100%),
    radial-gradient(1px 1px at 57% 44%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 66% 91%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 17%, #dde 0%, transparent 100%),
    radial-gradient(1px 1px at 83% 63%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 35%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 47%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 82%, #dde 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 31%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 67%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 19%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 53% 88%, #dde 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 52%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 71%  4%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 73%, #dde 0%, transparent 100%),
    radial-gradient(1px 1px at 89% 28%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 59%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at  3% 93%, #dde 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 42%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 69% 86%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 87% 14%, #dde 0%, transparent 100%);
  opacity: 0.75;
  animation-duration: 180s;
  animation-delay: 0s;
}

/* Layer 2 — bintang sedang & berkelip */
.star-field.s2 {
  background-image:
    radial-gradient(1.5px 1.5px at  9% 16%, rgba(200,230,255,0.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 24% 71%, rgba(200,230,255,0.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 39% 38%, rgba(200,230,255,0.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 54%  5%, rgba(200,230,255,0.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 82%, rgba(200,230,255,0.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 49%, rgba(200,230,255,0.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 95% 23%, rgba(200,230,255,0.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 12% 90%, rgba(200,230,255,0.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 47% 61%, rgba(200,230,255,0.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 77% 32%, rgba(200,230,255,0.9) 0%, transparent 100%);
  opacity: 0.6;
  animation-duration: 240s;
  animation-delay: -60s;
  animation-name: twinkleShift;
}

/* Layer 3 — bintang besar & bercahaya */
.star-field.s3 {
  background-image:
    radial-gradient(2.5px 2.5px at 18% 28%, #fff 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 43% 75%, rgba(0,229,255,0.8) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 67% 12%, #fff 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 88% 57%, rgba(156,77,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 32% 91%, #fff 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 55% 36%, rgba(255,213,79,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 78% 84%, #fff 0%, transparent 100%);
  opacity: 0.9;
  animation-duration: 300s;
  animation-name: twinkleShift;
  animation-delay: -120s;
}

@keyframes starDrift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100px); }
}

@keyframes twinkleShift {
  0%   { opacity: 0.4; transform: translateY(0) scale(1); }
  50%  { opacity: 0.9; transform: translateY(-50px) scale(1.02); }
  100% { opacity: 0.4; transform: translateY(-100px) scale(1); }
}

/* ── Nebula ── */
.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  animation: nebulaDrift ease-in-out infinite alternate;
}
.neb-blue   { width:700px; height:500px; background:radial-gradient(circle, rgba(0,100,200,0.35), transparent 70%); top:-150px; left:-180px; animation-duration:14s; }
.neb-purple { width:600px; height:600px; background:radial-gradient(circle, rgba(120,0,220,0.28), transparent 70%); top:30%; right:-150px; animation-duration:18s; animation-delay:-5s; }
.neb-teal   { width:500px; height:400px; background:radial-gradient(circle, rgba(0,180,160,0.22), transparent 70%); bottom:5%; left:35%; animation-duration:22s; animation-delay:-10s; }

@keyframes nebulaDrift {
  from { transform: scale(1) translateY(0); opacity: 0.7; }
  to   { transform: scale(1.12) translateY(-20px); opacity: 1; }
}

/* ── Meteor / Shooting Stars ── */
.meteor {
  position: absolute;
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.9) 60%, rgba(0,229,255,0.5));
  border-radius: 2px;
  animation: meteorFly linear infinite;
  opacity: 0;
}
.m1 { top:8%;  left:-200px; animation-duration:5s;  animation-delay:0s; }
.m2 { top:22%; left:-200px; animation-duration:7s;  animation-delay:2.5s; }
.m3 { top:45%; left:-200px; animation-duration:6s;  animation-delay:5s; }
.m4 { top:65%; left:-200px; animation-duration:8s;  animation-delay:1s; }
.m5 { top:82%; left:-200px; animation-duration:4.5s; animation-delay:3.8s; }

@keyframes meteorFly {
  0%   { transform: translateX(0)    translateY(0)   rotate(-20deg); opacity:0; }
  5%   { opacity:1; }
  80%  { opacity:0.8; }
  100% { transform: translateX(115vw) translateY(40vh) rotate(-20deg); opacity:0; }
}

/* ── Planet Dekorasi Latar ── */
.deco-planet {
  position: absolute;
  border-radius: 50%;
  animation: decoFloat ease-in-out infinite alternate;
}
.dp-orange {
  width:120px; height:120px;
  background: radial-gradient(circle at 35% 30%, #ff9966, #b83200);
  top:12%; right:6%;
  box-shadow: 0 0 40px rgba(255,120,0,0.35);
  animation-duration:8s;
}
.dp-blue {
  width:70px; height:70px;
  background: radial-gradient(circle at 35% 30%, #64b5f6, #1565c0);
  bottom:22%; left:5%;
  box-shadow: 0 0 25px rgba(100,180,255,0.3);
  animation-duration:11s; animation-delay:-4s;
}
.dp-ring {
  width:90px; height:90px;
  background: radial-gradient(circle at 35% 30%, #ffe082, #f57f17);
  bottom:40%; right:4%;
  box-shadow: 0 0 30px rgba(255,200,0,0.25);
  animation-duration:13s; animation-delay:-7s;
}
.dp-ring .ring {
  position:absolute;
  width:145px; height:35px;
  border:3px solid rgba(255,220,100,0.45);
  border-radius:50%;
  top:50%; left:50%;
  transform:translate(-50%,-50%) rotateX(70deg);
}

@keyframes decoFloat {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-18px) rotate(5deg); }
}

/* ── Cincin Orbit Dekorasi ── */
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,229,255,0.1);
  animation: orbitSpin linear infinite;
}
.or1 { width:350px; height:350px; top:-80px; right:-80px; animation-duration:35s; }
.or2 { width:200px; height:200px; bottom:15%; left:-60px; animation-duration:25s; border-color:rgba(156,77,255,0.12); }

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 44px;
  background: rgba(2, 8, 18, 0.6);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0,229,255,0.12);
  transition: background var(--transition), box-shadow var(--transition);
}
.navbar.scrolled {
  background: rgba(2, 8, 18, 0.88);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-icon { font-size: 26px; }
.logo-text {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: white;
  letter-spacing: 1px;
}
.logo-accent {
  color: var(--clr-cyan);
  text-shadow: 0 0 18px rgba(0,229,255,0.6);
}

/* Nav Links */
.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav-item {
  text-decoration: none;
  color: rgba(230,240,255,0.75);
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
}
.nav-item:hover {
  color: var(--clr-cyan);
  border-color: rgba(0,229,255,0.28);
  background: rgba(0,229,255,0.07);
}
.nav-item.active {
  background: linear-gradient(135deg, rgba(0,229,255,0.18), rgba(156,77,255,0.18));
  color: var(--clr-cyan);
  border-color: rgba(0,229,255,0.38);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--clr-cyan);
  border-radius: 2px;
  transition: var(--transition);
}

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 100px 6% 60px;
  gap: 60px;
}

/* Hero teks kiri */
.hero-content {
  flex: 1;
  max-width: 600px;
  animation: heroFadeIn 1s ease both;
}
@keyframes heroFadeIn {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px;
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.3);
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-cyan);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 22px;
  color: white;
}

.glow-text {
  background: linear-gradient(90deg, var(--clr-cyan) 0%, #a78bfa 50%, var(--clr-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(0,229,255,0.4));
}

.hero-sub {
  font-size: 17px;
  line-height: 1.75;
  color: var(--clr-muted);
  margin-bottom: 38px;
  max-width: 480px;
}

.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 38px;
  background: linear-gradient(135deg, #0096b4, #6a00e0);
  border-radius: 50px;
  text-decoration: none;
  color: white;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 0 25px rgba(0,229,255,0.3), 0 0 50px rgba(106,0,224,0.2);
  transition: all var(--transition);
}
.btn-primary:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 0 45px rgba(0,229,255,0.5), 0 0 80px rgba(106,0,224,0.4);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: transparent;
  border: 1.5px solid rgba(0,229,255,0.35);
  border-radius: 50px;
  text-decoration: none;
  color: var(--clr-cyan);
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition);
}
.btn-ghost:hover {
  background: rgba(0,229,255,0.08);
  border-color: var(--clr-cyan);
  transform: translateY(-4px);
}

/* Hero Solar (kanan) */
.hero-solar {
  position: relative;
  flex: 0 0 340px;
  height: 340px;
  animation: heroFadeIn 1.2s ease 0.3s both;
}

.hero-sun {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 5;
}
.sun-core {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff9c4, #ffca28, #e65100);
  box-shadow: 0 0 30px #ffca28, 0 0 70px #e65100, 0 0 120px rgba(255,120,0,0.4);
  animation: sunPulse 3s ease-in-out infinite;
}
.sun-glow {
  position: absolute;
  width: 110px; height: 110px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,0,0.3), transparent 70%);
  animation: sunPulse 3s ease-in-out infinite reverse;
}
@keyframes sunPulse {
  0%,100% { transform: scale(1); opacity:1; }
  50%      { transform: scale(1.08); opacity:0.9; }
}

/* Sinar matahari */
.sun-ray {
  position: absolute;
  width: 3px;
  background: linear-gradient(to top, rgba(255,200,0,0.8), transparent);
  border-radius: 2px;
  top: 50%; left: 50%;
  transform-origin: bottom center;
  animation: rayFlicker 2s ease-in-out infinite alternate;
}
.sun-ray.r1 { height:30px; transform:translate(-50%,-100%) rotate(0deg);   animation-delay:0s; }
.sun-ray.r2 { height:25px; transform:translate(-50%,-100%) rotate(90deg);  animation-delay:0.5s; }
.sun-ray.r3 { height:28px; transform:translate(-50%,-100%) rotate(45deg);  animation-delay:1s; }
.sun-ray.r4 { height:26px; transform:translate(-50%,-100%) rotate(135deg); animation-delay:1.5s; }
@keyframes rayFlicker {
  from { opacity:0.6; transform-origin:bottom center; }
  to   { opacity:1; }
}

/* Orbit cincin di hero */
.hero-orbit {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(0,229,255,0.18);
  transform: translate(-50%,-50%);
  animation: orbitSpin linear infinite;
}
.ho1 { width:140px; height:140px; animation-duration:6s; }
.ho2 { width:210px; height:210px; animation-duration:11s; border-color:rgba(156,77,255,0.18); }
.ho3 { width:300px; height:300px; animation-duration:18s; border-color:rgba(255,213,79,0.14); }

.ho-dot {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  top: -6px; left: 50%;
  transform: translateX(-50%);
}
.dot-orange { background:#ff7043; box-shadow:0 0 10px #ff7043; }
.dot-blue   { background:#4fc3f7; box-shadow:0 0 10px #4fc3f7; }
.dot-red    { background:#ef5350; box-shadow:0 0 10px #ef5350; }

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--clr-muted);
  animation: scrollBob 2s ease-in-out infinite;
}
.scroll-arrow {
  width: 20px; height: 20px;
  border-right: 2px solid var(--clr-cyan);
  border-bottom: 2px solid var(--clr-cyan);
  transform: rotate(45deg);
}
@keyframes scrollBob {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%     { transform:translateX(-50%) translateY(8px); }
}

/* ================================================================
   SECTION — CARD MENU
   ================================================================ */
.section-menu {
  position: relative;
  z-index: 1;
  padding: 80px 6%;
}

.section-label {
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 700;
  color: var(--clr-cyan);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 900;
  margin-bottom: 10px;
  color: white;
}
.accent { color: var(--clr-cyan); }
.section-sub {
  color: var(--clr-muted);
  font-size: 16px;
  margin-bottom: 50px;
}

/* Grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1300px;
}

/* Card Menu */
.menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--clr-text);
  border-radius: var(--radius);
  padding: 30px 26px;
  background: var(--clr-card);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(20px);
  overflow: hidden;
  transition: all var(--transition);
  opacity: 0;
  transform: translateY(30px);
}
.menu-card.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Shimmer shine effect */
.menu-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transition: left 0.7s ease;
}
.menu-card:hover::before { left: 130%; }

/* Glow spot */
.card-glow {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0;
  top: -50px; right: -50px;
  transition: opacity 0.5s;
  pointer-events: none;
}
.menu-card:hover .card-glow { opacity: 0.5; }

/* Sparkles */
.card-sparkle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}
.card-sparkle.sp1 { top: 20%; right: 15%; }
.card-sparkle.sp2 { bottom: 25%; right: 20%; }
.menu-card:hover .card-sparkle { opacity: 0.8; animation: sparkleAnim 1s ease-in-out infinite alternate; }
@keyframes sparkleAnim {
  from { transform: scale(1); }
  to   { transform: scale(1.8); }
}

/* Color variants */
.c-orange { border-top: 2px solid var(--clr-orange); }
.c-orange:hover { box-shadow: 0 20px 50px rgba(255,112,67,0.25); border-color: var(--clr-orange); transform: translateY(-10px); }
.c-orange .card-glow, .c-orange .card-sparkle { background: var(--clr-orange); }

.c-cyan { border-top: 2px solid var(--clr-cyan); }
.c-cyan:hover { box-shadow: 0 20px 50px rgba(0,229,255,0.22); border-color: var(--clr-cyan); transform: translateY(-10px); }
.c-cyan .card-glow, .c-cyan .card-sparkle { background: var(--clr-cyan); }

.c-purple { border-top: 2px solid var(--clr-purple); }
.c-purple:hover { box-shadow: 0 20px 50px rgba(156,77,255,0.25); border-color: var(--clr-purple); transform: translateY(-10px); }
.c-purple .card-glow, .c-purple .card-sparkle { background: var(--clr-purple); }

.c-green { border-top: 2px solid var(--clr-green); }
.c-green:hover { box-shadow: 0 20px 50px rgba(0,230,118,0.22); border-color: var(--clr-green); transform: translateY(-10px); }
.c-green .card-glow, .c-green .card-sparkle { background: var(--clr-green); }

/* Card internals */
.card-icon-wrap {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  transition: transform var(--transition);
}
.menu-card:hover .card-icon-wrap { transform: scale(1.1) rotate(-3deg); }
.card-emoji { font-size: 32px; }

.card-body { flex: 1; }
.card-body h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  color: white;
}
.card-body p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--clr-muted);
}

.card-footer { margin-top: 24px; }
.card-btn {
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-cyan);
  letter-spacing: 0.5px;
  transition: letter-spacing var(--transition);
}
.c-orange .card-btn { color: var(--clr-orange); }
.c-purple .card-btn { color: var(--clr-purple); }
.c-green  .card-btn { color: var(--clr-green); }
.menu-card:hover .card-btn { letter-spacing: 1.5px; }

/* ================================================================
   SECTION — PLANET
   ================================================================ */
.section-planets {
  position: relative;
  z-index: 1;
  padding: 80px 6%;
}

/* Solar Diagram dekorasi */
.solar-diagram {
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 280px;
  margin: 0 auto 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.solar-sun {
  position: absolute;
  width: 64px; height: 64px;
  background: radial-gradient(circle, #fff9c4, #ffc107, #e65100);
  border-radius: 50%;
  box-shadow: 0 0 25px #ffc107, 0 0 60px rgba(255,120,0,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  z-index: 10;
  animation: sunPulse 4s ease-in-out infinite;
}
.solar-sun-glow {
  position: absolute;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(255,200,0,0.3), transparent 70%);
  border-radius: 50%;
  animation: sunPulse 4s ease-in-out infinite reverse;
}

/* Orbit tracks */
.orbit-track {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,229,255,0.15);
  animation: orbitSpin linear infinite;
  top: 50%; left: 50%;
}
.ot1 { width:110px; height:110px; margin-left:-55px; margin-top:-55px; animation-duration:5s; }
.ot2 { width:170px; height:170px; margin-left:-85px; margin-top:-85px; animation-duration:9s; }
.ot3 { width:230px; height:230px; margin-left:-115px; margin-top:-115px; animation-duration:14s; }
.ot4 { width:290px; height:290px; margin-left:-145px; margin-top:-145px; animation-duration:20s; }

.orbit-planet {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.op-img {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: rgba(10,25,60,0.8);
  border: 1.5px solid rgba(0,229,255,0.4);
}
.op-merkurius .op-img { background: radial-gradient(circle, #bdbdbd, #616161); }
.op-venus     .op-img { background: radial-gradient(circle, #ffcc80, #bf360c); }
.op-bumi      .op-img { background: radial-gradient(circle, #4fc3f7, #1565c0); }
.op-mars      .op-img { background: radial-gradient(circle, #ef9a9a, #b71c1c); }

.op-tooltip {
  font-size: 10px;
  color: var(--clr-cyan);
  font-family: var(--font-display);
  white-space: nowrap;
  background: rgba(0,229,255,0.1);
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.orbit-planet:hover .op-tooltip { opacity: 1; }

/* Planet Grid */
.planet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  max-width: 1300px;
}

.planet-card {
  position: relative;
  border-radius: var(--radius);
  padding: 28px 20px;
  background: rgba(6, 18, 50, 0.65);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(16px);
  cursor: pointer;
  overflow: hidden;
  transition: all var(--transition);
  text-align: center;
  opacity: 0;
  transform: translateY(25px);
}
.planet-card.revealed {
  opacity: 1;
  transform: translateY(0);
}
.planet-card:hover {
  transform: translateY(-12px);
  border-color: rgba(0,229,255,0.3);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

/* Warna latar per planet */
.pcard-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s;
  border-radius: var(--radius);
}
.planet-card:hover .pcard-bg { opacity: 0.12; }
.pb-merkurius { background:radial-gradient(circle at 50% 50%, #9e9e9e, transparent 70%); }
.pb-venus     { background:radial-gradient(circle at 50% 50%, #ffc107, transparent 70%); }
.pb-bumi      { background:radial-gradient(circle at 50% 50%, #2196f3, transparent 70%); }
.pb-mars      { background:radial-gradient(circle at 50% 50%, #f44336, transparent 70%); }
.pb-jupiter   { background:radial-gradient(circle at 50% 50%, #ff9800, transparent 70%); }
.pb-saturnus  { background:radial-gradient(circle at 50% 50%, #ffeb3b, transparent 70%); }
.pb-uranus    { background:radial-gradient(circle at 50% 50%, #00bcd4, transparent 70%); }
.pb-neptunus  { background:radial-gradient(circle at 50% 50%, #3f51b5, transparent 70%); }

/* Garis hover bawah */
.pcard-hover-line {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-cyan), transparent);
  transition: width 0.4s ease;
}
.planet-card:hover .pcard-hover-line { width: 80%; }

.pcard-img {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.pcard-img img {
  max-height: 80px;
  max-width: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(0,229,255,0.3));
  transition: transform 0.4s ease;
}
.planet-card:hover .pcard-img img { transform: scale(1.15) rotate(5deg); }
.planet-emoji { font-size: 52px; line-height: 1; display: block; }

.pcard-info h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  color: white;
}
.pcard-info p {
  font-size: 12px;
  color: var(--clr-muted);
  margin-bottom: 10px;
  line-height: 1.5;
}
.pcard-tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(0,229,255,0.1);
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 20px;
  font-size: 11px;
  font-family: var(--font-display);
  color: var(--clr-cyan);
}

/* ================================================================
   POPUP PLANET
   ================================================================ */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.popup-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.popup-overlay.open .popup-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.popup-box {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(135deg, #060f2a, #0c1a45);
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 24px;
  padding: 36px;
  transform: translateY(30px) scale(0.96);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,0.3) transparent;
}

.popup-close {
  position: absolute;
  top: 18px; right: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  border-radius: 50%;
  width: 34px; height: 34px;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.popup-close:hover { background: rgba(255,60,60,0.3); color: white; }

.popup-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.popup-emoji {
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(0 0 15px var(--pcolor, #00e5ff));
}
.popup-planet-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: white;
  margin-bottom: 5px;
}
.popup-planet-sub {
  font-size: 13px;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.popup-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.stat-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
}
.stat-icon { font-size: 20px; flex-shrink: 0; }
.stat-label {
  display: block;
  font-size: 11px;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.stat-val {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: white;
  line-height: 1.4;
}

.popup-facts h4 {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--clr-gold);
  margin-bottom: 14px;
  letter-spacing: 1px;
}
.popup-facts ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.popup-facts li {
  padding: 12px 16px;
  background: rgba(0,229,255,0.05);
  border: 1px solid rgba(0,229,255,0.12);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--clr-text);
}

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  position: relative;
  z-index: 1;
  background: rgba(2, 8, 18, 0.92);
  border-top: 1px solid rgba(0,229,255,0.12);
  margin-top: 60px;
  overflow: hidden;
}
.footer-glow {
  position: absolute;
  width: 400px; height: 200px;
  background: radial-gradient(circle, rgba(0,229,255,0.08), transparent 70%);
  top: -100px; left: 50%;
  transform: translateX(-50%);
}
.footer-inner {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
  padding: 50px 6%;
  position: relative;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 200px;
}
.footer-logo-icon { font-size: 40px; }
.footer-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--clr-cyan);
  margin-bottom: 5px;
}
.footer-brand p { font-size: 14px; color: var(--clr-muted); }

.footer-contact, .footer-links {
  flex: 0 0 auto;
  min-width: 150px;
}
.footer-contact h4, .footer-links h4 {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--clr-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-contact p { font-size: 14px; color: var(--clr-muted); margin-bottom: 6px; }
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer-links a {
  text-decoration: none;
  color: var(--clr-muted);
  font-size: 14px;
  padding: 5px 0;
  transition: color 0.2s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.footer-links a:hover { color: var(--clr-cyan); }

.footer-bottom {
  text-align: center;
  padding: 18px 6%;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  color: rgba(200,210,240,0.35);
  position: relative;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 80px 6% 50px;
    min-height: auto;
    padding-bottom: 60px;
  }
  .hero-content { max-width: 100%; }
  .hero-sub { margin: 0 auto 32px; }
  .hero-cta { justify-content: center; }
  .hero-solar { flex: 0 0 260px; height: 260px; }
  .ho3 { display: none; }
  .scroll-indicator { display: none; }

  .solar-diagram { display: none; }
}

@media (max-width: 700px) {
  .navbar { padding: 12px 20px; }
  .hamburger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 60px; left: 0; right: 0;
    flex-direction: column;
    background: rgba(2,8,18,0.97);
    backdrop-filter: blur(20px);
    padding: 20px;
    border-bottom: 1px solid rgba(0,229,255,0.15);
    gap: 6px;
  }
  .nav-links.open { display: flex; }
  .nav-item { padding: 10px 16px; }

  .planet-grid { grid-template-columns: repeat(2, 1fr); }
  .popup-stats { grid-template-columns: 1fr; }
  .footer-inner { gap: 30px; }
  .hero-solar { width: 200px; height: 200px; flex: 0 0 200px; }
  .ho2, .ho3 { display: none; }
}

@media (max-width: 420px) {
  .planet-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
}