@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.bg-text-animation {
  position: fixed;
  top: 50%;
  left: 0;
  width: 200%;
  transform: translateY(-50%);
  font-size: 80px;
  font-weight: 800;
  color: rgba(255, 215, 0, 0.08); /* gold transparan */
  white-space: nowrap;
  pointer-events: none;
  animation: moveText 20s linear infinite;
}

@keyframes moveText {
  0% {
    transform: translate(0, -50%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

body {
  background: #000;
  color: #fff;
  overflow-x: hidden;
  position: relative;
}

/* 🌟 BACKGROUND GRADIENT EMAS */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,215,0,0.15), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(255,215,0,0.1), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(255,215,0,0.08), transparent 50%);
  z-index: -2;
  animation: glowMove 12s ease-in-out infinite;
}

/* ✨ PARTIKEL EMAS */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, #ffd700 1px, transparent 1px);
  background-size: 35px 35px;
  opacity: 0.08;
  z-index: -1;
}

/* 🎬 ANIMASI HALUS */
@keyframes glowMove {
  0% { transform: translate(0,0); }
  50% { transform: translate(-40px, 30px); }
  100% { transform: translate(0,0); }
}

/* CONTAINER */
.container {
  display: flex;
  min-height: 100vh;
  backdrop-filter: blur(2px);
}

/* CARD GLASS GOLD */
.card {
  flex: 1;
  padding: 40px;
  text-align: center;
  position: relative;
  background: linear-gradient(145deg, rgba(15,15,15,0.9), rgba(0,0,0,0.95));
  border: 1px solid rgba(255, 215, 0, 0.25);
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.08);
  overflow: hidden;
}

/* ✨ SPARKLE DALAM CARD */
.card::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,215,0,0.2) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: sparkleMove 20s linear infinite;
  opacity: 0.1;
}

/* ANIMASI SPARKLE */
@keyframes sparkleMove {
  from { transform: translateY(0); }
  to { transform: translateY(-200px); }
}

/* TEXT GOLD */
.title {
  font-size: 40px;
  color: #ffd700;
  font-weight: 800;
  text-shadow: 0 0 15px rgba(255,215,0,0.6);
}

.subtitle {
  font-size: 28px;
  color: #ddd;
}

.session {
  color: #ffd700;
  margin-bottom: 20px;
}

.section {
  margin: 20px 0;
}

.section h3 {
  color: #ffd700;
}

.highlight p {
  color: #ffd700;
  font-weight: bold;
}

.time {
  margin-top: 25px;
}

/* REWARD */
.reward {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 15px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}