/* YÖRÜNGE — görsel (billboard, Z=0) + eğik yörünge düzlemi tek preserve-3d sahnede:
   uydular gerçek derinlikle görselin arkasından dolanıp önünden geçer. */
.mh-fx { position: absolute; inset: 0; pointer-events: none; }
.blog-hero__free { position: relative; }
.mh-fx i { position: absolute; display: block; }

.mh-anim--orbit { transform-style: preserve-3d; container-type: inline-size; }
.mh-anim--orbit .mh-fx { transform: rotateX(72deg); transform-style: preserve-3d; }
.mh-anim--orbit .mh-fx i { left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
/* Halkalar — eğik düzlemde elips görünür */
.mh-anim--orbit .mh-fx i:nth-child(1)::before,
.mh-anim--orbit .mh-fx i:nth-child(2)::before {
  content: ""; position: absolute; left: 0; top: 0; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.mh-anim--orbit .mh-fx i:nth-child(1)::before { width: 96cqw; height: 96cqw; border: 1px solid rgba(139,92,246,.38); }
.mh-anim--orbit .mh-fx i:nth-child(2)::before { width: 68cqw; height: 68cqw; border: 1px dashed rgba(185,164,216,.32); }
/* Uydular — aynı keyframe, negatif delay = faz farkı; ::before billboard karşı-dönüşle hep izleyiciye bakar */
.mh-anim--orbit .mh-fx i:nth-child(n+3) { animation: mhOrbitNode 20s linear infinite; }
.mh-anim--orbit .mh-fx i:nth-child(n+3)::before {
  content: ""; position: absolute; left: 48cqw; top: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff, #8b5cf6 70%);
  box-shadow: 0 0 16px 5px rgba(139,92,246,.6);
  animation: mhOrbitFace 20s linear infinite;
}
.mh-anim--orbit .mh-fx i:nth-child(3)::before { width: 14px; height: 14px; }
.mh-anim--orbit .mh-fx i:nth-child(4),
.mh-anim--orbit .mh-fx i:nth-child(4)::before { animation-delay: -6.7s; }
.mh-anim--orbit .mh-fx i:nth-child(4)::before { width: 9px; height: 9px; left: 34cqw; box-shadow: 0 0 11px 3px rgba(196,181,253,.55); background: radial-gradient(circle at 32% 30%, #fff, #c4b5fd 70%); }
.mh-anim--orbit .mh-fx i:nth-child(5),
.mh-anim--orbit .mh-fx i:nth-child(5)::before { animation-delay: -13.4s; }
.mh-anim--orbit .mh-fx i:nth-child(5)::before { width: 11px; height: 11px; }
@keyframes mhOrbitNode { to { transform: rotateZ(360deg); } }
@keyframes mhOrbitFace {
  from { transform: translate(-50%, -50%) rotateZ(0deg)    rotateX(-72deg); }
  to   { transform: translate(-50%, -50%) rotateZ(-360deg) rotateX(-72deg); }
}
@media (prefers-reduced-motion: reduce) { .mh-fx i, .mh-fx i::before { animation: none !important; } }