/* ===== 3D ORBITAL SİSTEM - Persmont Merkez, Referanslar Gezegenler ===== */

:root {
  --ring-radius: clamp(180px, 22vw, 320px);
  --planet-size: clamp(50px, 6vw, 80px);
  --ellipse-z: 0.16;
  --spin-sec: 26s;
  --tilt-deg: -6deg;
  --yaw-deg: 0deg;
  --cam-y: -10px;
  --brand-z: 0;
}

/* Solar System Container */
.solar-system {
  position: relative;
  width: 100%;
  height: 220px;
  display: none;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  perspective: 1400px;
  overflow: hidden;
}

.solar-system.active {
  display: block;
  opacity: 1;
  transform: scale(1);
}

/* Camera ve 3D Stage */
.camera {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  transform: translateY(var(--cam-y)) rotateX(var(--tilt-deg)) rotateY(var(--yaw-deg));
}

.elliptic {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  transform: scaleZ(var(--ellipse-z));
}

/* Dönen Yörünge */
.orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  animation: spinOrbit var(--spin-sec) linear infinite;
}

@keyframes spinOrbit {
  from { transform: rotateY(0turn); }
  to { transform: rotateY(1turn); }
}

/* Persmont Logo - Merkez */
.brand {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: clamp(60px, 7vw, 100px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(80% 80% at 30% 25%, #ffd700, #f4c430 70%);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: translateZ(var(--brand-z));
  opacity: 0.95;
  z-index: auto;
}

.brand img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
}

/* Gezegenler (Referans Logoları) */
.planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--planet-size);
  height: var(--planet-size);
  margin: calc(var(--planet-size) / -2) 0 0 calc(var(--planet-size) / -2);
  border-radius: 50%;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: 
    0 14px 28px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  z-index: 1;
  background: white;
}

.planet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.planet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 30% 30%,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.18) 20%,
    rgba(0, 0, 0, 0) 45% 60%,
    rgba(0, 0, 0, 0.28) 80%);
  mix-blend-mode: soft-light;
}

/* Responsive */
@media (max-width: 1200px) {
  :root {
    --ring-radius: clamp(160px, 22vw, 300px);
    --planet-size: clamp(55px, 6.5vw, 85px);
  }
  
  .solar-system {
    height: 200px;
  }
  
  .brand {
    width: clamp(65px, 7.5vw, 105px);
  }
}

@media (max-width: 768px) {
  :root {
    --ring-radius: clamp(140px, 30vw, 260px);
    --planet-size: clamp(60px, 9vw, 85px);
    --cam-y: -5px;
    --ellipse-z: 0.25;
  }
  
  .solar-system {
    height: 240px;
  }
  
  .brand {
    width: clamp(65px, 10vw, 95px);
  }
}

@media (max-width: 480px) {
  :root {
    --ring-radius: clamp(120px, 32vw, 220px);
    --planet-size: clamp(55px, 10vw, 75px);
    --cam-y: 0px;
    --ellipse-z: 0.3;
  }
  
  .solar-system {
    height: 220px;
  }
  
  .brand {
    width: clamp(60px, 11vw, 85px);
  }
}