/* === Globe 3D + logo === */
.globe-wrap {
  position: relative;
  width: 380px;
  height: 380px;
  margin: 0 auto;
  perspective: 900px;
}

.globe-wrap--medium {
  width: 300px;
  height: 300px;
}

.globe-wrap--large {
  width: 380px;
  height: 380px;
}

.globe-scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Orbits */
.globe-wrap .orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 123, 255, 0.3);
  transform-style: preserve-3d;
}

.globe-wrap .orbit-1 {
  animation: orbit-spin 18s linear infinite;
}

.globe-wrap .orbit-2 {
  inset: -8%;
  border-color: rgba(0, 212, 255, 0.2);
  animation: orbit-spin 26s linear infinite reverse;
  transform: rotateX(62deg);
}

.globe-wrap .orbit-3 {
  inset: -16%;
  border-style: dashed;
  border-color: rgba(0, 123, 255, 0.12);
  animation: orbit-spin 34s linear infinite;
  transform: rotateX(72deg) rotateZ(25deg);
}

@keyframes orbit-spin {
  from { transform: rotateX(62deg) rotateZ(0deg); }
  to { transform: rotateX(62deg) rotateZ(360deg); }
}

.globe-wrap .orbit-1 {
  transform: rotateX(58deg);
}

.globe-wrap .orbit-1 {
  animation-name: orbit-spin-flat;
}

@keyframes orbit-spin-flat {
  from { transform: rotateX(58deg) rotateZ(0deg); }
  to { transform: rotateX(58deg) rotateZ(360deg); }
}

/* Satellites on orbit */
.orbit-satellite {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--primary-light) 40%, var(--primary) 100%);
  box-shadow: 0 0 16px var(--primary-light), 0 0 32px var(--primary-glow);
  animation: satellite-glow 2s ease-in-out infinite;
}

.orbit-satellite--2 {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  animation-delay: 0.7s;
}

.orbit-satellite--3 {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  animation-delay: 1.2s;
}

@keyframes satellite-glow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.85; }
}

/* Core sphere */
.globe-core {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  transform-style: preserve-3d;
}

.globe-atmosphere {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.12) 0%, transparent 70%);
  animation: atmosphere-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes atmosphere-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.globe-sphere-3d {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Fallback jika JS mati */
.no-js .globe-sphere-3d {
  animation: globe-rotate-y 24s linear infinite;
}

.globe-sphere-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 28%, rgba(0, 212, 255, 0.35), transparent 45%),
    radial-gradient(circle at 72% 65%, rgba(0, 123, 255, 0.45), transparent 40%),
    linear-gradient(145deg, #061018 0%, #0c2845 45%, #041020 100%);
  border: 1px solid rgba(0, 212, 255, 0.25);
  box-shadow:
    inset -24px -24px 50px rgba(0, 0, 0, 0.55),
    0 0 60px var(--primary-glow),
    0 0 100px rgba(0, 212, 255, 0.15);
}

@keyframes globe-rotate-y {
  from { transform: rotateY(0deg) rotateX(8deg); }
  to { transform: rotateY(360deg) rotateX(8deg); }
}

.globe-grid-lines {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='50' rx='48' ry='48' fill='none' stroke='rgba(0,212,255,0.12)' stroke-width='0.4'/%3E%3Cpath d='M2 50h96M50 2v96' stroke='rgba(0,212,255,0.08)' stroke-width='0.35'/%3E%3Cpath d='M10 25 Q50 5 90 25' fill='none' stroke='rgba(0,212,255,0.1)' stroke-width='0.35'/%3E%3Cpath d='M10 75 Q50 95 90 75' fill='none' stroke='rgba(0,212,255,0.1)' stroke-width='0.35'/%3E%3C/svg%3E") center/cover;
  animation: globe-grid-spin 30s linear infinite reverse;
  opacity: 0.9;
}

@keyframes globe-grid-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.globe-logo-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18%;
  z-index: 2;
}

.globe-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.45));
  animation: globe-logo-float 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes globe-logo-float {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* Scan highlight */
.globe-sphere-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(0, 212, 255, 0.18) 50%,
    transparent 58%
  );
  animation: globe-scan 4s linear infinite;
}

@keyframes globe-scan {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Orbit labels — positioned dynamically */
.globe-wrap .orbit-label {
  position: absolute;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--primary-light);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  z-index: 5;
  animation: label-orbit-pulse 3s ease-in-out infinite;
  animation-delay: calc(var(--label-i, 0) * 0.6s);
}

.globe-wrap .orbit-label:nth-of-type(1) { top: 4%; left: 50%; transform: translateX(-50%); }
.globe-wrap .orbit-label:nth-of-type(2) { top: 48%; right: -2%; }
.globe-wrap .orbit-label:nth-of-type(3) { bottom: 12%; left: 8%; }
.globe-wrap .orbit-label:nth-of-type(4) { top: 32%; left: -4%; }

@keyframes label-orbit-pulse {
  0%, 100% { box-shadow: 0 0 0 transparent; }
  50% { box-shadow: 0 0 14px rgba(0, 212, 255, 0.3); }
}

/* Pause on hover for readability */
.globe-wrap:hover .globe-sphere-3d {
  animation-play-state: paused;
}

.globe-wrap:hover .orbit-1,
.globe-wrap:hover .orbit-2,
.globe-wrap:hover .orbit-3 {
  animation-play-state: paused;
}