/* ==========================================================================
   STYLE.CSS — TEMA 3D RETRO PLAYFUL (NEOBRUTALISM + CLAYMORPHIC + 90s GAME)
   ==========================================================================
   TIPS UNTUK PEMULA:
   - Kamu bisa mengganti warna latar belakang utama di bagian :root di bawah.
   - Jangan takut mencoba mengganti kode warna HEX (contoh: #FFF8E7).
   ========================================================================== */

:root {
  /* Warna Mode Siang (Default) */
  --bg-color: #FFF8E7;
  --text-color: #121212;
  --card-bg: #FFFFFF;
  --dot-color: rgba(18, 18, 18, 0.16);
  --grid-color: rgba(139, 92, 246, 0.12);
  --border-color: #121212;
}

html.dark {
  /* Warna Mode Malam / Arcade (Saat Saklar SUN/ARC digeser) */
  --bg-color: #140F21;
  --text-color: #FFF8E7;
  --card-bg: #231938;
  --dot-color: rgba(255, 209, 0, 0.16);
  --grid-color: rgba(0, 229, 179, 0.1);
  --border-color: #09060F;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Space Grotesk', sans-serif;
  overflow-x: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
  /* Motif Latar Belakang: Polka Dot + Grid Retro */
  background-image:
    radial-gradient(var(--dot-color) 2px, transparent 2px),
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: 24px 24px, 48px 48px, 48px 48px;
  background-position: 0 0, 0 0, 0 0;
}

/* Efek Garis Layar TV Tabung (CRT Scanlines) */
.crt-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.08) 50%
  );
  background-size: 100% 4px;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}
html.dark .crt-overlay {
  opacity: 0.7;
}

/* ==========================================================================
   KOTAK & KARTU 3D NEOBRUTALISM (BAYANGAN HITAM TEBAL)
   ========================================================================== */
.neo-box {
  border: 4px solid #121212;
  box-shadow: 8px 8px 0px #121212;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.neo-box-lg {
  border: 4px solid #121212;
  box-shadow: 12px 12px 0px #121212;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Kartu Interaktif yang Membal Saat Disentuh / Diklik */
.neo-card-interactive {
  border: 4px solid #121212;
  box-shadow: 8px 8px 0px #121212;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.neo-card-interactive:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0px #121212;
}
.neo-card-interactive:active {
  transform: translate(6px, 6px);
  box-shadow: 2px 2px 0px #121212;
}

/* ==========================================================================
   TOMBOL 3D ARCADE (MEMBAL SAAT DITEKAN)
   ========================================================================== */
.arcade-btn {
  border: 4px solid #121212;
  box-shadow: 0px 8px 0px #121212, inset 0px 4px 0px rgba(255,255,255,0.45), inset 0px -4px 0px rgba(0,0,0,0.2);
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s ease;
  position: relative;
  user-select: none;
}
.arcade-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0px 10px 0px #121212, inset 0px 4px 0px rgba(255,255,255,0.55), inset 0px -4px 0px rgba(0,0,0,0.2);
}
.arcade-btn:active, .arcade-btn.pressed {
  transform: translateY(6px);
  box-shadow: 0px 2px 0px #121212, inset 0px 2px 0px rgba(255,255,255,0.3), inset 0px -2px 0px rgba(0,0,0,0.25);
}

/* Tombol Bulat Merah Besar untuk "Acak Opini!" */
.big-red-dome {
  border: 5px solid #121212;
  background: radial-gradient(circle at 35% 28%, #FF758F 0%, #FF2A54 45%, #B80028 100%);
  box-shadow:
    0px 14px 0px #6A0017,
    0px 14px 0px 5px #121212,
    0px 22px 25px rgba(0,0,0,0.35),
    inset 0px 6px 10px rgba(255,255,255,0.55);
  transition: all 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.big-red-dome:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0px 17px 0px #6A0017,
    0px 17px 0px 5px #121212,
    0px 26px 30px rgba(0,0,0,0.4),
    inset 0px 6px 12px rgba(255,255,255,0.65);
}
.big-red-dome:active, .big-red-dome.pressed {
  transform: translateY(11px) scale(0.98);
  box-shadow:
    0px 3px 0px #6A0017,
    0px 3px 0px 5px #121212,
    0px 6px 10px rgba(0,0,0,0.25),
    inset 0px 3px 6px rgba(255,255,255,0.35);
}

/* Tekstur Claymorphic (Ornamen 3D di sekitar karakter) */
.clay-badge {
  border: 3.5px solid #121212;
  box-shadow:
    6px 6px 0px #121212,
    inset 3px 3px 6px rgba(255, 255, 255, 0.65),
    inset -4px -4px 8px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.clay-badge:hover {
  transform: scale(1.12) rotate(-5deg) translateY(-4px);
  box-shadow:
    10px 10px 0px #121212,
    inset 3px 3px 6px rgba(255, 255, 255, 0.75),
    inset -4px -4px 8px rgba(0, 0, 0, 0.25);
}
.clay-badge:active {
  transform: scale(0.95) translate(4px, 4px);
  box-shadow: 2px 2px 0px #121212;
}

/* Judul 3D Tebal Retro */
.text-3d-retro {
  color: #FFD100;
  -webkit-text-stroke: 2.5px #121212;
  text-shadow:
    3px 3px 0px #FF6B35,
    6px 6px 0px #121212;
}
@media (min-width: 768px) {
  .text-3d-retro {
    -webkit-text-stroke: 3.5px #121212;
    text-shadow:
      4px 4px 0px #FF6B35,
      8px 8px 0px #121212;
  }
}

/* ==========================================================================
   ANIMASI MELAYANG (FLOATING / BOBBING) & GLITCH RETRO
   ========================================================================== */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}
@keyframes floatOrbit1 {
  0%, 100% { transform: translate(0px, 0px) rotate(-6deg); }
  50% { transform: translate(-6px, -16px) rotate(4deg); }
}
@keyframes floatOrbit2 {
  0%, 100% { transform: translate(0px, 0px) rotate(5deg); }
  50% { transform: translate(8px, -14px) rotate(-5deg); }
}
@keyframes floatOrbit3 {
  0%, 100% { transform: translate(0px, 0px) rotate(-4deg) scale(1); }
  50% { transform: translate(-5px, 12px) rotate(6deg) scale(1.05); }
}
@keyframes waveHand {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(16deg); }
  50% { transform: rotate(-8deg); }
  75% { transform: rotate(14deg); }
}
@keyframes glitchPulse {
  0%, 92%, 100% { transform: translate(0, 0) skew(0deg); filter: hue-rotate(0deg); }
  94% { transform: translate(-3px, 1px) skew(-3deg); filter: hue-rotate(45deg); }
  96% { transform: translate(3px, -2px) skew(3deg); filter: hue-rotate(-45deg); }
  98% { transform: translate(-2px, 0px) skew(0deg); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes popBounce {
  0% { transform: scale(0.5) translateY(20px); opacity: 0; }
  70% { transform: scale(1.06) translateY(-4px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.animate-character { animation: floatSlow 4.2s ease-in-out infinite; }
.animate-orbit-1 { animation: floatOrbit1 3.8s ease-in-out infinite; }
.animate-orbit-2 { animation: floatOrbit2 4.5s ease-in-out infinite 0.4s; }
.animate-orbit-3 { animation: floatOrbit3 4.1s ease-in-out infinite 0.9s; }
.animate-orbit-4 { animation: floatOrbit1 5.0s ease-in-out infinite 1.2s; }
.animate-orbit-5 { animation: floatOrbit2 3.6s ease-in-out infinite 0.7s; }
.animate-orbit-6 { animation: floatOrbit3 4.7s ease-in-out infinite 1.5s; }
.animate-glitch { animation: glitchPulse 6s infinite; }
.animate-wave {
  transform-origin: 75% 75%;
  animation: waveHand 2.4s ease-in-out infinite;
}
.animate-spin-reel { animation: spinSlow 3s linear infinite; }
.animate-pop { animation: popBounce 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Animasi Bar Musik Equalizer */
@keyframes eqBounce {
  0%, 100% { height: 20%; }
  50% { height: 95%; }
}
.eq-bar { animation: eqBounce 0.6s ease-in-out infinite; }
.eq-paused .eq-bar {
  animation-play-state: paused;
  height: 18% !important;
}

/* Scrollbar Kustom Warna-warni */
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track {
  background: #FFD100;
  border-left: 4px solid #121212;
}
::-webkit-scrollbar-thumb {
  background: #8B5CF6;
  border: 3px solid #121212;
}
::-webkit-scrollbar-thumb:hover { background: #FF6B35; }