body {
  margin: 0;
  height: 100vh;
  background: #0a0a0f;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-area {
  position: relative;
  width: 100%;
  height: 100%;
}

.circle {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  transition: all 0.4s ease;
  position: absolute;
  z-index: 2;
  box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.6), inset 10px 10px 20px rgba(255, 255, 255, 0.2);
  text-decoration: none;
  overflow: hidden;
  background-size: cover;
  background-repeat: repeat-x;
  animation: spinGlobe 20s linear infinite;
}

/* efek globe berputar horizontal */
@keyframes spinGlobe {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -512px 0;
  }
}

.circle.glow {
  box-shadow: 0 0 30px 12px rgba(255, 255, 255, 0.7), inset -10px -10px 20px rgba(0, 0, 0, 0.6), inset 10px 10px 20px rgba(255, 255, 255, 0.3);
}

/* posisi segitiga (desktop) */
.circle[data-id="1"] {
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  background: radial-gradient(circle at 30% 30%, #00ffcc, #0066ff);
}

.circle[data-id="2"] {
  bottom: 10%;
  left: 25%;
  transform: translate(-50%, 0);
  background: radial-gradient(circle at 30% 30%, #ff0066, #6600ff);
}

.circle[data-id="3"] {
  bottom: 10%;
  right: 25%;
  transform: translate(50%, 0);
  background: radial-gradient(circle at 30% 30%, #ffcc00, #ff6600);
}

/* planet kecil */
.circle[data-id="1"] {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 30% 30%, #00ffcc, #0066ff);
}

.circle[data-id="1"] .icon {
  font-size: 20px;
}

.circle[data-id="1"] .text {
  font-size: 10px;
}

/* planet sedang */
.circle[data-id="2"] {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at 30% 30%, #ff0066, #6600ff);
}

.circle[data-id="2"] .icon {
  font-size: 28px;
}

.circle[data-id="2"] .text {
  font-size: 14px;
}

/* planet besar */
.circle[data-id="3"] {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at 30% 30%, #ffcc00, #ff6600);
}

.circle[data-id="3"] .icon {
  font-size: 40px;
}

.circle[data-id="3"] .text {
  font-size: 18px;
}

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

  to {
    transform: rotate(360deg);
  }
}

.circle span {
  transition: opacity 0.3s ease;
  position: absolute;
}

.circle .icon {
  opacity: 1;
  font-size: 32px;
}

.circle .text {
  opacity: 0;
  font-size: 16px;
  font-weight: bold;
}

.circle:hover .icon {
  opacity: 0;
}

.circle:hover .text {
  opacity: 1;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

line {
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0;
}

/* RESPONSIVE: perkecil di layar hp */
@media (max-width: 768px) {
  /* planet kecil */
  .circle[data-id="1"] {
    width: 40px;
    /* lebih kecil dari desktop */
    height: 40px;
  }

  .circle[data-id="1"] .icon {
    font-size: 14px;
  }

  .circle[data-id="1"] .text {
    font-size: 9px;
  }

  /* planet sedang */
  .circle[data-id="2"] {
    width: 80px;
    height: 80px;
  }

  .circle[data-id="2"] .icon {
    font-size: 20px;
  }

  .circle[data-id="2"] .text {
    font-size: 11px;
  }

  /* planet besar */
  .circle[data-id="3"] {
    width: 120px;
    height: 120px;
  }

  .circle[data-id="3"] .icon {
    font-size: 26px;
  }

  .circle[data-id="3"] .text {
    font-size: 14px;
  }

  /* atur ulang posisi biar tetap segitiga */
  .circle[data-id="1"] {
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .circle[data-id="2"] {
    bottom: 15%;
    left: 20%;
    transform: translate(-50%, 0);
  }

  .circle[data-id="3"] {
    bottom: 35%;
    right: 10%;
    transform: translate(50%, 0);
  }
}

/* Tambah ke CSS kamu */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
  z-index: 0;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0;
  animation: twinkle 3s infinite;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.1;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}