/* ========================================
   Solar System Animations
   Animated celestial elements for space theme
======================================== */

/* ========================================
   Hero Section - Side by Side Layout
======================================== */
.hero-section {
  height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
  overflow: hidden;
}

.hero-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50% 50% */
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  height: 100%;
}

/* ========================================
   Sun Side (Left 50%)
======================================== */
.sun-side {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
  min-height: 500px;
  overflow: hidden; /* Mencegah orbit terpotong */
  padding: 2rem; /* Memberikan ruang untuk orbit */
}

/* ========================================
   Content Side (Right 50%)
======================================== */
.content-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  height: 100%;
}

.content-side .profile-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.5rem;
  width: fit-content;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.content-side .hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.content-side .hero-description {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem;
  max-width: 600px;
}

.content-side .tagline {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: #ffd700;
  font-weight: 600;
  margin-bottom: 2rem;
}

/* ========================================
   Solar System Section (Legacy - keeping for compatibility)
======================================== */
.sun-section {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1; /* Same level as main content */
}

.animated-sun-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Gelombang matahari utama - Layer pertama */
.animated-sun-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  background: 
    radial-gradient(circle at center, transparent 35%, rgba(255, 211, 97, 0.08) 40%, transparent 45%),
    radial-gradient(circle at center, transparent 50%, rgba(255, 211, 97, 0.06) 55%, transparent 60%),
    radial-gradient(circle at center, transparent 65%, rgba(255, 211, 97, 0.04) 70%, transparent 75%),
    radial-gradient(circle at center, transparent 80%, rgba(255, 211, 97, 0.03) 85%, transparent 90%),
    radial-gradient(circle at center, transparent 95%, rgba(255, 211, 97, 0.02) 100%, transparent 105%);
  border-radius: 50%;
  animation: sunWaves 8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* Gelombang matahari tambahan - Layer kedua */
.animated-sun-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  background: 
    radial-gradient(circle at center, transparent 40%, rgba(248, 171, 85, 0.06) 45%, transparent 50%),
    radial-gradient(circle at center, transparent 55%, rgba(248, 171, 85, 0.04) 60%, transparent 65%),
    radial-gradient(circle at center, transparent 70%, rgba(248, 171, 85, 0.03) 75%, transparent 80%),
    radial-gradient(circle at center, transparent 85%, rgba(248, 171, 85, 0.02) 90%, transparent 95%);
  border-radius: 50%;
  animation: sunWaves2 12s ease-in-out infinite;
  pointer-events: none;
  z-index: -2;
}

/* ========================================
   Sun Element
======================================== */
.animated-sun {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  width: 120px;
  height: 120px;
  background: #ffd361; /* Updated yellow color */
  border: 12px solid #f8ab55; /* Thicker orange outline (1.5x from 8px) */
  border-radius: 50%;
  box-shadow: 
    0 0 40px rgba(255, 211, 97, 0.6),
    0 0 80px rgba(248, 171, 85, 0.4),
    0 0 120px rgba(255, 255, 255, 0.3);
  animation: sunPulse 4s ease-in-out infinite;
}

/* Sun Glow Effect */
.animated-sun::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  background: radial-gradient(circle, transparent 60%, rgba(255, 255, 255, 0.3) 70%, transparent 80%);
  border-radius: 50%;
  animation: sunGlow 6s ease-in-out infinite;
}

/* ========================================
   Planets Around the Sun - Orbital System
======================================== */

/* Planet Orbit Containers - Border redup untuk visualisasi orbit */
.planet-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}

/* Individual Planet Orbits - Orbit lebih dekat dan kompak dengan animasi yang lebih cepat */
.mercury-orbit {
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  animation: mercuryOrbit 3s linear infinite; /* Dipercepat dari 4s ke 3s */
  border: 1px solid rgba(255, 255, 255, 0.15); /* Paling terang */
}

.venus-orbit {
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);
  animation: venusOrbit 5s linear infinite; /* Dipercepat dari 7s ke 5s */
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.earth-orbit {
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  animation: earthOrbit 7s linear infinite; /* Dipercepat dari 10s ke 7s */
  border: 1px solid rgba(255, 255, 255, 0.11);
}

.mars-orbit {
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
  animation: marsOrbit 12s linear infinite; /* Dipercepat dari 19s ke 12s */
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.jupiter-orbit {
  width: 210px;
  height: 210px;
  transform: translate(-50%, -50%);
  animation: jupiterOrbit 20s linear infinite; /* Dipercepat dari 60s ke 20s */
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.saturn-orbit {
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%);
  animation: saturnOrbit 30s linear infinite; /* Dipercepat dari 120s ke 30s */
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.uranus-orbit {
  width: 270px;
  height: 270px;
  transform: translate(-50%, -50%);
  animation: uranusOrbit 40s linear infinite; /* Dipercepat dari 240s ke 40s */
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.neptune-orbit {
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  animation: neptuneOrbit 50s linear infinite; /* Dipercepat dari 480s ke 50s */
  border: 1px solid rgba(255, 255, 255, 0.02); /* Paling redup */
}

/* Planet Styles - Ukuran diperbesar agar lebih terlihat jelas */
.planet {
  position: absolute;
  top: -8px;
  right: -8px;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
  transition: transform 0.3s ease;
}

.planet:hover {
  transform: scale(1.2);
}

/* Mercury - Planet terkecil, abu-abu */
.planet.mercury {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 30% 30%, #8c6239, #5c4033, #3e2723);
  box-shadow: 0 0 8px rgba(140, 98, 57, 0.8);
}

/* Venus - Planet panas, kuning-oranye */
.planet.venus {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 30% 30%, #ffb347, #ff8c00, #ff7f50);
  box-shadow: 0 0 12px rgba(255, 179, 71, 0.9);
}

/* Earth - Planet biru dengan daratan hijau */
.planet.earth {
  width: 16px;
  height: 16px;
  background: 
    radial-gradient(circle at 20% 20%, #4a90e2, #357abd),
    radial-gradient(circle at 70% 30%, #2d5016, transparent 40%),
    radial-gradient(circle at 30% 70%, #228b22, transparent 35%),
    linear-gradient(45deg, #4a90e2 60%, #87ceeb 100%);
  box-shadow: 0 0 15px rgba(74, 144, 226, 0.9);
  position: relative;
}

/* Moon - Bulan mengelilingi Bumi - Posisi disejajarkan */
.moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: radial-gradient(circle at 30% 30%, #f5f5f5, #e0e0e0, #bdbdbd);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(245, 245, 245, 0.8);
  animation: moonOrbit 1.5s linear infinite; /* Dipercepat dari 2s ke 1.5s */
  transform-origin: 0 0;
}

/* Mars - Planet merah */
.planet.mars {
  width: 12px;
  height: 12px;
  background: 
    radial-gradient(circle at 30% 30%, #cd5c5c, #8b0000, #654321),
    linear-gradient(135deg, #ff4500 30%, #dc143c 70%);
  box-shadow: 0 0 10px rgba(205, 92, 92, 0.8);
}

/* Jupiter - Planet terbesar, coklat dengan pita */
.planet.jupiter {
  width: 28px;
  height: 28px;
  background: 
    radial-gradient(circle at 30% 30%, #d2b48c, #daa520, #b8860b),
    linear-gradient(0deg, #d2691e 20%, #cd853f 40%, #daa520 60%, #b8860b 80%);
  box-shadow: 0 0 18px rgba(210, 180, 140, 0.8);
}

/* Saturn - Planet dengan cincin yang jelas */
.planet.saturn {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 30% 30%, #fad5a5, #f4a460, #daa520);
  box-shadow: 0 0 15px rgba(250, 213, 165, 0.8);
  position: relative;
}

/* Uranus - Planet biru-hijau es */
.planet.uranus {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 30% 30%, #4fd0e3, #40e0d0, #00ced1);
  box-shadow: 0 0 12px rgba(79, 208, 227, 0.8);
}

/* Neptune - Planet biru tua */
.planet.neptune {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 30% 30%, #4169e1, #0000cd, #191970);
  box-shadow: 0 0 12px rgba(65, 105, 225, 0.8);
}

/* Saturn Rings - Cincin yang lebih besar dan realistis */
.saturn-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(75deg);
  pointer-events: none;
}

.saturn-rings::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.saturn-rings::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* ========================================
   Mobile Responsiveness for Orbital System
======================================== */

/* Mobile Devices - Planet JAUH lebih besar dan semua planet ditampilkan */
@media (max-width: 768px) {
  .sun-side {
    min-height: 350px; /* Lebih kompak untuk mobile */
    padding: 1rem;
    overflow: visible; /* Pastikan planet tidak terpotong */
  }
  
  /* Orbit yang lebih kompak untuk mobile */
  .mercury-orbit { width: 70px; height: 70px; }
  .venus-orbit { width: 85px; height: 85px; }
  .earth-orbit { width: 100px; height: 100px; }
  .mars-orbit { width: 115px; height: 115px; }
  .jupiter-orbit { width: 130px; height: 130px; }
  .saturn-orbit { width: 145px; height: 145px; }
  .uranus-orbit { width: 160px; height: 160px; }
  .neptune-orbit { width: 175px; height: 175px; }
  
  /* Planet SANGAT BESAR di mobile agar tidak seperti titik */
  .planet.mercury { width: 12px; height: 12px; top: -6px; right: -6px; }
  .planet.venus { width: 16px; height: 16px; top: -8px; right: -8px; }
  .planet.earth { width: 18px; height: 18px; top: -9px; right: -9px; }
  .planet.mars { width: 14px; height: 14px; top: -7px; right: -7px; }
  .planet.jupiter { width: 28px; height: 28px; top: -14px; right: -14px; }
  .planet.saturn { width: 24px; height: 24px; top: -12px; right: -12px; }
  .planet.uranus { width: 20px; height: 20px; top: -10px; right: -10px; }
  .planet.neptune { width: 18px; height: 18px; top: -9px; right: -9px; }
  
  /* Bulan yang lebih besar dan sejajar */
  .moon { 
    width: 6px; 
    height: 6px; 
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
  }
  
  /* Cincin Saturn yang proporsional */
  .saturn-rings { width: 36px; height: 36px; border: 3px solid rgba(255, 255, 255, 0.7); }
  .saturn-rings::before { width: 30px; height: 30px; border: 2px solid rgba(255, 255, 255, 0.5); }
  .saturn-rings::after { width: 42px; height: 42px; border: 2px solid rgba(255, 255, 255, 0.4); }
  
  /* TAMPILKAN SEMUA PLANET di mobile */
  .mercury-orbit, .venus-orbit, .earth-orbit, .mars-orbit,
  .jupiter-orbit, .saturn-orbit, .uranus-orbit, .neptune-orbit {
    display: block;
  }
  
  /* Glow effect yang lebih kuat untuk visibility */
  .planet {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
  }
  
  .planet.mercury { box-shadow: 0 0 15px rgba(140, 98, 57, 1); }
  .planet.venus { box-shadow: 0 0 18px rgba(255, 179, 71, 1); }
  .planet.earth { box-shadow: 0 0 20px rgba(74, 144, 226, 1); }
  .planet.mars { box-shadow: 0 0 16px rgba(205, 92, 92, 1); }
  .planet.jupiter { box-shadow: 0 0 25px rgba(210, 180, 140, 1); }
  .planet.saturn { box-shadow: 0 0 22px rgba(250, 213, 165, 1); }
  .planet.uranus { box-shadow: 0 0 18px rgba(79, 208, 227, 1); }
  .planet.neptune { box-shadow: 0 0 18px rgba(65, 105, 225, 1); }
}

/* Tablet Devices */
@media (min-width: 769px) and (max-width: 1024px) {
  .sun-side {
    min-height: 500px;
    padding: 1.5rem;
  }
  
  .mercury-orbit { width: 100px; height: 100px; }
  .venus-orbit { width: 115px; height: 115px; }
  .earth-orbit { width: 130px; height: 130px; }
  .mars-orbit { width: 145px; height: 145px; }
  .jupiter-orbit { width: 165px; height: 165px; }
  .saturn-orbit { width: 185px; height: 185px; }
  .uranus-orbit { width: 205px; height: 205px; }
  .neptune-orbit { width: 225px; height: 225px; }
  
  .planet.mercury { width: 9px; height: 9px; }
  .planet.venus { width: 12px; height: 12px; }
  .planet.earth { width: 14px; height: 14px; }
  .planet.mars { width: 10px; height: 10px; }
  .planet.jupiter { width: 24px; height: 24px; }
  .planet.saturn { width: 20px; height: 20px; }
  .planet.uranus { width: 16px; height: 16px; }
  .planet.neptune { width: 14px; height: 14px; }
  
  /* Bulan yang sejajar di tablet */
  .moon { 
    width: 8px; 
    height: 8px; 
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
  }
  
  .saturn-rings { width: 32px; height: 32px; }
  .saturn-rings::before { width: 27px; height: 27px; }
  .saturn-rings::after { width: 37px; height: 37px; }
  
  .animated-sun-container::before {
    width: 275px;
    height: 275px;
  }
  
  .animated-sun-container::after {
    width: 350px;
    height: 350px;
  }
  
  /* Tampilkan semua planet di tablet karena orbit sudah lebih dekat */
  .mercury-orbit, .venus-orbit, .earth-orbit, .mars-orbit,
  .jupiter-orbit, .saturn-orbit, .uranus-orbit, .neptune-orbit {
    display: block;
  }
}

/* Large Screens - Show all planets */
@media (min-width: 1025px) {
  .sun-side {
    min-height: 500px;
    padding: 2rem;
  }
  /* Full size as defined above */
}

/* Very Small Screens - Tetap menampilkan planet utama dengan ukuran yang sangat jelas */
@media (max-width: 480px) {
  .sun-side {
    min-height: 400px;
    padding: 1rem;
    overflow: visible;
  }
  
  /* Orbit yang sangat kompak untuk layar kecil */
  .mercury-orbit { width: 75px; height: 75px; }
  .venus-orbit { width: 85px; height: 85px; }
  .earth-orbit { width: 95px; height: 95px; }
  .mars-orbit { width: 105px; height: 105px; }
  .jupiter-orbit { width: 120px; height: 120px; }
  .saturn-orbit { width: 135px; height: 135px; }
  
  /* Planet SANGAT BESAR untuk layar kecil */
  .planet.mercury { width: 10px; height: 10px; top: -5px; right: -5px; }
  .planet.venus { width: 13px; height: 13px; top: -6px; right: -6px; }
  .planet.earth { width: 15px; height: 15px; top: -7px; right: -7px; }
  .planet.mars { width: 12px; height: 12px; top: -6px; right: -6px; }
  .planet.jupiter { width: 22px; height: 22px; top: -11px; right: -11px; }
  .planet.saturn { width: 18px; height: 18px; top: -9px; right: -9px; }
  
  .moon { 
    width: 5px; 
    height: 5px; 
    top: 50%; 
    left: 50%; 
    transform-origin: 0 0;
  }
  
  /* Cincin Saturn proporsional */
  .saturn-rings { width: 28px; height: 28px; border: 2px solid rgba(255, 255, 255, 0.8); }
  .saturn-rings::before { width: 24px; height: 24px; border: 2px solid rgba(255, 255, 255, 0.6); }
  .saturn-rings::after { width: 32px; height: 32px; border: 2px solid rgba(255, 255, 255, 0.5); }
  
  /* Tampilkan 6 planet utama di layar sangat kecil */
  .mercury-orbit, .venus-orbit, .earth-orbit, 
  .mars-orbit, .jupiter-orbit, .saturn-orbit {
    display: block;
  }
  
  /* Sembunyikan hanya planet terjauh */
  .uranus-orbit, .neptune-orbit {
    display: none;
  }
  
  /* Glow effect yang sangat kuat */
  .planet.mercury { box-shadow: 0 0 12px rgba(140, 98, 57, 1.2); }
  .planet.venus { box-shadow: 0 0 15px rgba(255, 179, 71, 1.2); }
  .planet.earth { box-shadow: 0 0 18px rgba(74, 144, 226, 1.2); }
  .planet.mars { box-shadow: 0 0 14px rgba(205, 92, 92, 1.2); }
  .planet.jupiter { box-shadow: 0 0 22px rgba(210, 180, 140, 1.2); }
  .planet.saturn { box-shadow: 0 0 20px rgba(250, 213, 165, 1.2); }
}

/* ========================================
   Meteors
======================================== */

/* Meteor 1 - Moving from top-right to bottom-left */
.content-side .meteor1 {
  position: absolute;
  top: -10%;
  right: -10%;
  width: 0px;
  height: 0px;
  animation: meteorPath1 6s ease-in infinite;
  z-index: 0; /* Behind text */
}

/* Meteor 1 Tail */
.content-side .meteor1::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 4px;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 152, 0, 0.3) 30%, rgba(255, 152, 0, 0.6) 70%, rgba(255, 152, 0, 0.9) 100%);
  border-radius: 4px;
  transform: translate(-50%, -50%) rotate(135deg);
  transform-origin: center;
  animation: meteorTail1 6s ease-in infinite;
  box-shadow: 0 0 8px rgba(255, 152, 0, 0.5);
}

/* Meteor 2 - Second meteor with delay */
.content-side .meteor2 {
  position: absolute;
  top: -5%;
  right: -5%;
  width: 0px;
  height: 0px;
  animation: meteorPath2 6s ease-in infinite 5s;
  z-index: 0; /* Behind text */
}

/* Meteor 2 Tail */
.content-side .meteor2::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35px;
  height: 3px;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 87, 34, 0.3) 30%, rgba(255, 87, 34, 0.6) 70%, rgba(255, 87, 34, 0.9) 100%);
  border-radius: 3px;
  transform: translate(-50%, -50%) rotate(135deg);
  transform-origin: center;
  animation: meteorTail2 6s ease-in infinite 5s;
  box-shadow: 0 0 6px rgba(255, 87, 34, 0.5);
}

/* Meteor 3 - Third meteor with longer delay */
.content-side .meteor3 {
  position: absolute;
  top: -15%;
  right: -15%;
  width: 0px;
  height: 0px;
  animation: meteorPath3 6s ease-in infinite 10s;
  z-index: 0; /* Behind text */
}

/* Meteor 3 Tail */
.content-side .meteor3::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 3.5px;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 111, 0, 0.3) 30%, rgba(255, 111, 0, 0.6) 70%, rgba(255, 111, 0, 0.9) 100%);
  border-radius: 3.5px;
  transform: translate(-50%, -50%) rotate(135deg);
  transform-origin: center;
  animation: meteorTail3 6s ease-in infinite 10s;
  box-shadow: 0 0 7px rgba(255, 111, 0, 0.5);
}

/* ========================================
   Satellite
======================================== */

/* Sun Rays - REMOVED to clean up the design */

/* ========================================
   Solar System Animations
======================================== */

/* Sun Pulse Animation */
@keyframes sunPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 
      0 0 40px rgba(255, 211, 97, 0.6),
      0 0 80px rgba(248, 171, 85, 0.4),
      0 0 120px rgba(255, 255, 255, 0.3);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 
      0 0 50px rgba(255, 211, 97, 0.8),
      0 0 100px rgba(248, 171, 85, 0.6),
      0 0 150px rgba(255, 255, 255, 0.4);
  }
}

/* Sun Glow Animation */
@keyframes sunGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Removed sunRays animation */

/* Sun Waves Animation - Gelombang utama */
@keyframes sunWaves {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
}

/* Sun Waves Animation 2 - Gelombang kedua dengan timing berbeda */
@keyframes sunWaves2 {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.6;
  }
  30% { 
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0.8;
  }
  70% { 
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 0.7;
  }
}

/* ========================================
   Planet Animations - Orbital System
======================================== */

/* Orbital animations berdasarkan periode orbit sebenarnya */

/* Mercury Orbital Animation - Tercepat (88 hari = 4 detik) */
@keyframes mercuryOrbit {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Venus Orbital Animation - 225 hari (7 detik) */
@keyframes venusOrbit {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Earth Orbital Animation - 365 hari (10 detik) - Referensi */
@keyframes earthOrbit {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Moon Orbital Animation - Bulan mengelilingi Bumi dengan orbit yang sejajar */
@keyframes moonOrbit {
  0% { 
    transform: translate(-50%, -50%) rotate(0deg) translateX(18px) rotate(0deg); 
  }
  100% { 
    transform: translate(-50%, -50%) rotate(360deg) translateX(18px) rotate(-360deg); 
  }
}

/* Mars Orbital Animation - 687 hari (19 detik) */
@keyframes marsOrbit {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Jupiter Orbital Animation - 12 tahun (60 detik) */
@keyframes jupiterOrbit {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Saturn Orbital Animation - 29 tahun (120 detik) */
@keyframes saturnOrbit {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Uranus Orbital Animation - 84 tahun (240 detik) */
@keyframes uranusOrbit {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Neptune Orbital Animation - 165 tahun (480 detik) */
@keyframes neptuneOrbit {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Legacy Planet Animations - Updated for orbital system */
/* Mercury Animation - Fast orbit */
@keyframes mercuryFloat {
  0%, 100% { 
    transform: translateY(0) scale(1);
    opacity: 0.9;
  }
  25% { 
    transform: translateY(-8px) translateX(3px) scale(1.1);
    opacity: 1;
  }
  50% { 
    transform: translateY(-3px) translateX(6px) scale(1);
    opacity: 0.8;
  }
  75% { 
    transform: translateY(4px) translateX(2px) scale(0.95);
    opacity: 1;
  }
}

/* Saturn Animation - Slow majestic movement */
@keyframes saturnFloat {
  0%, 100% { 
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.9;
  }
  25% { 
    transform: translateY(-12px) translateX(-5px) scale(1.05);
    opacity: 1;
  }
  50% { 
    transform: translateY(-8px) translateX(-8px) scale(1.1);
    opacity: 0.8;
  }
  75% { 
    transform: translateY(6px) translateX(-3px) scale(1.02);
    opacity: 1;
  }
}

/* Earth Animation - Steady orbital movement */
@keyframes earthFloat {
  0%, 100% { 
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.9;
  }
  25% { 
    transform: translateY(8px) translateX(5px) scale(1.05);
    opacity: 1;
  }
  50% { 
    transform: translateY(12px) translateX(8px) scale(1);
    opacity: 0.85;
  }
  75% { 
    transform: translateY(4px) translateX(3px) scale(1.02);
    opacity: 1;
  }
}

/* Mars Animation - Elliptical orbit pattern */
@keyframes marsFloat {
  0%, 100% { 
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.9;
  }
  20% { 
    transform: translateY(-6px) translateX(4px) scale(1.03);
    opacity: 1;
  }
  40% { 
    transform: translateY(-10px) translateX(7px) scale(1.05);
    opacity: 0.8;
  }
  60% { 
    transform: translateY(-4px) translateX(9px) scale(1.02);
    opacity: 0.9;
  }
  80% { 
    transform: translateY(3px) translateX(5px) scale(0.98);
    opacity: 1;
  }
}

/* ========================================
   Meteor Animations
======================================== */

/* Meteor 1 Path Animation - Diagonal movement with fade */
@keyframes meteorPath1 {
  0% { 
    transform: translate(0, 0) scale(0);
    opacity: 0;
  }
  10% { 
    transform: translate(-20px, 20px) scale(1);
    opacity: 1;
  }
  90% { 
    transform: translate(-300px, 300px) scale(0.8);
    opacity: 0.8;
  }
  100% { 
    transform: translate(-350px, 350px) scale(0);
    opacity: 0;
  }
}

/* Meteor 1 Tail Animation */
@keyframes meteorTail1 {
  0% { 
    opacity: 0;
    transform: translate(-50%, -50%) rotate(135deg) scaleX(0);
  }
  10% { 
    opacity: 1;
    transform: translate(-50%, -50%) rotate(135deg) scaleX(1);
  }
  90% { 
    opacity: 0.8;
    transform: translate(-50%, -50%) rotate(135deg) scaleX(1.2);
  }
  100% { 
    opacity: 0;
    transform: translate(-50%, -50%) rotate(135deg) scaleX(0);
  }
}

/* Meteor 2 Path Animation */
@keyframes meteorPath2 {
  0% { 
    transform: translate(0, 0) scale(0);
    opacity: 0;
  }
  15% { 
    transform: translate(-25px, 25px) scale(1);
    opacity: 1;
  }
  85% { 
    transform: translate(-280px, 280px) scale(0.7);
    opacity: 0.7;
  }
  100% { 
    transform: translate(-320px, 320px) scale(0);
    opacity: 0;
  }
}

/* Meteor 2 Tail Animation */
@keyframes meteorTail2 {
  0% { 
    opacity: 0;
    transform: translate(-50%, -50%) rotate(135deg) scaleX(0);
  }
  15% { 
    opacity: 1;
    transform: translate(-50%, -50%) rotate(135deg) scaleX(1);
  }
  85% { 
    opacity: 0.7;
    transform: translate(-50%, -50%) rotate(135deg) scaleX(1.1);
  }
  100% { 
    opacity: 0;
    transform: translate(-50%, -50%) rotate(135deg) scaleX(0);
  }
}

/* Meteor 3 Path Animation */
@keyframes meteorPath3 {
  0% { 
    transform: translate(0, 0) scale(0);
    opacity: 0;
  }
  12% { 
    transform: translate(-30px, 30px) scale(1);
    opacity: 1;
  }
  88% { 
    transform: translate(-290px, 290px) scale(0.6);
    opacity: 0.6;
  }
  100% { 
    transform: translate(-340px, 340px) scale(0);
    opacity: 0;
  }
}

/* Meteor 3 Tail Animation */
@keyframes meteorTail3 {
  0% { 
    opacity: 0;
    transform: translate(-50%, -50%) rotate(135deg) scaleX(0);
  }
  12% { 
    opacity: 1;
    transform: translate(-50%, -50%) rotate(135deg) scaleX(1);
  }
  88% { 
    opacity: 0.6;
    transform: translate(-50%, -50%) rotate(135deg) scaleX(1.3);
  }
  100% { 
    opacity: 0;
    transform: translate(-50%, -50%) rotate(135deg) scaleX(0);
  }
}

/* ========================================
   Main Content Section
======================================== */
.main-content {
  position: relative;
  z-index: 1; /* Same level as sun section */
}

/* ========================================
   Responsive Hero Layout
======================================== */

/* Mobile Devices - Stacked Layout */
@media (max-width: 768px) {
  .hero-section {
    height: auto;
    min-height: 100vh;
  }
  
  .hero-container {
    grid-template-columns: 1fr; /* Single column for mobile */
    grid-template-rows: auto auto;
    gap: 0;
    padding: 1rem;
    height: auto;
  }
  
  .sun-side {
    min-height: 350px; /* Lebih kompak */
    padding: 1rem 0;
  }
  
  .content-side {
    padding: 1.5rem 1rem;
    margin-top: 1rem; /* Margin yang lebih kecil */
  }
  
  .content-side .hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  
  .content-side .hero-description {
    font-size: clamp(0.9rem, 4vw, 1.1rem);
  }
  
  .content-side .tagline {
    font-size: clamp(0.9rem, 4vw, 1rem);
  }
  
  /* Mobile sun sizing */
  .animated-sun {
    width: 80px;
    height: 80px;
    border-width: 6px;
  }
  
  .animated-sun-container::before {
    width: 250px;
    height: 250px;
  }
  
  .animated-sun-container::after {
    width: 320px;
    height: 320px;
  }
  
  /* Hide outer planets on mobile for better performance */
  .uranus-orbit,
  .neptune-orbit {
    display: block; /* Tampilkan semua planet */
  }
}

/* Tablet Devices */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-container {
    gap: 1.5rem;
    padding: 1.5rem;
  }
  
  .content-side {
    padding: 1.5rem;
  }
  
  .animated-sun {
    width: 100px;
    height: 100px;
    border-width: 7px;
  }
  
  .animated-sun-container::before {
    width: 250px;
    height: 250px;
  }
}

/* Large Screens */
@media (min-width: 1025px) {
  .hero-container {
    gap: 3rem;
    padding: 2rem;
  }
  
  .content-side {
    padding: 2rem;
  }
  
  .animated-sun {
    width: 120px;
    height: 120px;
    border-width: 8px;
  }
  
  .animated-sun-container::before {
    width: 300px;
    height: 300px;
  }
  
  .animated-sun-container::after {
    width: 400px;
    height: 400px;
  }
}

/* Extra Large Screens */
@media (min-width: 1400px) {
  .animated-sun {
    width: 140px;
    height: 140px;
    border-width: 10px;
  }
  
  .animated-sun-container::before {
    width: 350px;
    height: 350px;
  }
  
  .animated-sun-container::after {
    width: 450px;
    height: 450px;
  }
}

/* Performance Optimizations */
@media (prefers-reduced-motion: reduce) {
  .animated-sun,
  .planet-orbit,
  .moon {
    animation: none;
  }
  
  .animated-sun::before {
    animation: none;
  }
}

/* Touch Devices - Animasi orbital dipercepat untuk mobile */
@media (hover: none) and (pointer: coarse) {
  .animated-sun {
    animation-duration: 6s; /* Slower animation for better performance */
  }
  
  /* Semua orbit dipercepat DRASTIS untuk mobile agar terlihat bergerak */
  .mercury-orbit { animation-duration: 2s; }  /* Dari 4s ke 2s */
  .venus-orbit { animation-duration: 3s; }    /* Dari 7s ke 3s */
  .earth-orbit { animation-duration: 4s; }    /* Dari 10s ke 4s */
  .mars-orbit { animation-duration: 6s; }     /* Dari 19s ke 6s */
  .jupiter-orbit { animation-duration: 8s; }  /* Dari 60s ke 8s - SANGAT DIPERCEPAT */
  .saturn-orbit { animation-duration: 10s; }  /* Dari 120s ke 10s - SANGAT DIPERCEPAT */
  .uranus-orbit { animation-duration: 12s; }  /* Dari 240s ke 12s - SANGAT DIPERCEPAT */
  .neptune-orbit { animation-duration: 14s; } /* Dari 480s ke 14s - SANGAT DIPERCEPAT */
  .moon { animation-duration: 1s; }           /* Bulan bergerak cepat */
}