/* =========================================================
   POLİMER DÜNYASI — Hero Görsel Animasyonu
   hero-animation.css
   "PES Ecosystem Solutions" — dönen küre + kutucuklar animasyonu.
   Kaynak: index-v5.html (tüm sınıflar çakışmayı önlemek için
   "pes-" ön ekiyle bu siteye taşındı). Konum/oranlar orijinaline
   sadıktır; dış sarmalayıcı (.pes-hero-visual) JS ile ölçeklenir.
   ========================================================= */

.pes-hero-visual {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 640 / 560;
  margin-left: auto;
}

.pes-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 560px;
  transform-origin: top left;
}

.pes-glow-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 155, 255, 0.18) 0%, rgba(63, 155, 255, 0) 70%);
}

.pes-globe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 32% 28%, #2a6094, #0a2038 55%, #03182d 85%);
  box-shadow:
    0 0 40px rgba(63, 155, 255, 0.35),
    inset -14px -14px 30px rgba(0, 0, 0, 0.55),
    inset 8px 8px 20px rgba(120, 190, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pes-globe-surface {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  display: flex;
  animation: pes-scroll-globe 18s linear infinite;
}
.pes-globe-surface svg { width: 50%; height: 100%; flex-shrink: 0; }
@keyframes pes-scroll-globe {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.pes-globe-shade {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 32%),
    radial-gradient(circle at 68% 78%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%);
}
.pes-globe-label {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 1.4, 0.4, 1);
  text-shadow: 0 0 18px rgba(63, 155, 255, 0.9);
  padding: 0 12px;
}
.pes-globe-label.pes-show { opacity: 1; transform: scale(1); }
.pes-globe-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  margin-bottom: 6px;
  box-shadow: 0 0 14px rgba(63, 155, 255, 0.6);
}

.pes-node { position: absolute; width: 150px; text-align: center; }
.pes-badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #0e2a46;
  border: 1px solid #3f9bff;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(var(--fx), var(--fy)) scale(0.25);
  box-shadow: 0 0 0 rgba(63, 155, 255, 0);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.16, 0.8, 0.28, 1), box-shadow 0.4s ease;
}
.pes-badge.pes-show { opacity: 1; transform: translate(0, 0) scale(1); }
.pes-badge.pes-flash { box-shadow: 0 0 22px rgba(63, 155, 255, 0.85); }
.pes-desc {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.pes-desc.pes-show { opacity: 1; }

.pes-chip {
  position: absolute;
  padding: 4px 10px;
  border-radius: 6px;
  background: #0e2a46;
  border: 1px solid rgba(92, 168, 255, 0.5);
  color: #9fd4ff;
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  filter: blur(6px);
  transform: translate(var(--fx), var(--fy)) scale(0.7);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 0.8, 0.28, 1), filter 0.9s ease;
}
.pes-chip.pes-show { opacity: 1; filter: blur(0); transform: translate(0, 0) scale(1); }
.pes-chip.pes-merged {
  opacity: 0;
  filter: blur(1px);
  transform: translate(var(--mx), var(--my)) scale(0.15);
  box-shadow: 0 0 14px rgba(159, 212, 255, 0.9);
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.6, 1), transform 0.55s cubic-bezier(0.4, 0, 0.6, 1), filter 0.55s ease, box-shadow 0.3s ease;
}

svg.pes-lines { position: absolute; inset: 0; pointer-events: none; }
svg.pes-lines path {
  stroke: #3f9bff;
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  opacity: 0.55;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.3, 0.7, 0.3, 1);
}
svg.pes-lines path.pes-show { stroke-dashoffset: 0; }
.pes-pulse { fill: #9fd4ff; opacity: 0; filter: drop-shadow(0 0 4px #3f9bff); }
.pes-pulse.pes-run { opacity: 1; animation: pes-travel 1.4s ease-in-out infinite; }
@keyframes pes-travel {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

.pes-n-saticilar { left: 50%; top: 0; margin-left: -75px; --fx: 0px; --fy: 245px; }
.pes-n-alicilar { left: 76%; top: 16%; --fx: -241px; --fy: 160px; }
.pes-n-guvence { left: 76%; top: 60%; --fx: -241px; --fy: -86px; }
.pes-n-rehber { left: 50%; top: 78%; margin-left: -75px; --fx: 0px; --fy: -176px; }
.pes-n-pns { left: 0%; top: 60%; --fx: 245px; --fy: -76px; }
.pes-n-b2b { left: 0%; top: 16%; --fx: 245px; --fy: 170px; }

@media (prefers-reduced-motion: reduce) {
  .pes-globe-surface { animation: none; }
  .pes-pulse.pes-run { animation: none; opacity: 0.9; }
}