/* Hareketli grafikler — çoğunlukla CSS + SVG; sektör kartları Lottie (lottie-web) */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* —— Hero: veri akışı sahnesi —— */
.hero-blt__figure--motion {
  margin: 0;
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  box-shadow: var(--shadow-md, 0 12px 40px rgba(15, 23, 42, 0.08));
  background: linear-gradient(165deg, #e8f2ff 0%, #f5f9ff 40%, #dceaff 100%);
}

.hero-blt__viz {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(52vh, 420px);
  overflow: hidden;
}

.motion-hero-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.motion-hero-svg .mh-grid {
  animation: mh-grid-drift 24s linear infinite;
}

.motion-hero-svg .mh-flow {
  stroke-dasharray: 12 8;
  animation: mh-dash 14s linear infinite;
}

.motion-hero-svg .mh-flow--slow {
  animation-duration: 20s;
  animation-direction: reverse;
}

.motion-hero-svg .mh-node {
  animation: mh-pulse 3s ease-in-out infinite;
}

.motion-hero-svg circle.mh-node:nth-of-type(1) {
  animation-delay: 0s;
}
.motion-hero-svg circle.mh-node:nth-of-type(2) {
  animation-delay: 0.5s;
}
.motion-hero-svg circle.mh-node:nth-of-type(3) {
  animation-delay: 1s;
}

.motion-hero-svg .mh-orbit {
  transform-origin: 600px 200px;
  animation: mh-orbit-spin 40s linear infinite;
}

.motion-hero-svg .mh-glow {
  animation: mh-glow-shift 8s ease-in-out infinite alternate;
}

@keyframes mh-grid-drift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-40px, -24px);
  }
}

@keyframes mh-dash {
  to {
    stroke-dashoffset: -400;
  }
}

@keyframes mh-pulse {
  0%,
  100% {
    opacity: 0.5;
    r: 5;
  }
  50% {
    opacity: 1;
    r: 8;
  }
}

@keyframes mh-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mh-glow-shift {
  from {
    stop-color: #0b63ff;
    stop-opacity: 0.12;
  }
  to {
    stop-color: #38bdf8;
    stop-opacity: 0.28;
  }
}

/* —— Sektör kartları: Lottie (assets/lottie/sectors) —— */
.industry-card-blt__media--lottie {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.industry-lottie {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.industry-lottie svg {
  width: 100% !important;
  height: auto !important;
  max-height: 100%;
  display: block;
}

/* —— Görsel bant: boru hattı —— */
.viz-pipeline-motion {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 360;
  max-height: min(42vw, 320px);
  border-radius: calc(var(--radius, 14px) + 2px);
  overflow: hidden;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  background: linear-gradient(180deg, #f0f6ff 0%, #e2edff 100%);
}

.viz-pipeline-motion svg {
  display: block;
  width: 100%;
  height: 100%;
}

.viz-pipeline-motion .vp-seg {
  stroke-dasharray: 14 10;
  animation: vp-flow 12s linear infinite;
}

.viz-pipeline-motion .vp-seg--b {
  animation-duration: 16s;
  animation-direction: reverse;
}

.viz-pipeline-motion circle.vp-dot {
  animation: vp-blink 2s ease-in-out infinite;
}

.viz-pipeline-motion circle.vp-dot:nth-of-type(1) {
  animation-delay: 0s;
}
.viz-pipeline-motion circle.vp-dot:nth-of-type(2) {
  animation-delay: 0.4s;
}
.viz-pipeline-motion circle.vp-dot:nth-of-type(3) {
  animation-delay: 0.8s;
}
.viz-pipeline-motion circle.vp-dot:nth-of-type(4) {
  animation-delay: 1.2s;
}
.viz-pipeline-motion circle.vp-dot:nth-of-type(5) {
  animation-delay: 1.6s;
}

@keyframes vp-flow {
  to {
    stroke-dashoffset: -300;
  }
}

@keyframes vp-blink {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* —— Teknoloji: katmanlı yığın —— */
.tech-motion {
  position: relative;
  width: 100%;
  aspect-ratio: 520 / 400;
  max-height: 400px;
  border-radius: var(--radius, 14px);
  overflow: hidden;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  background: linear-gradient(180deg, #f8fafc 0%, #e8f0ff 100%);
}

.tech-motion__layer {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 22%;
  border-radius: 10px;
  border: 1px solid rgba(11, 99, 255, 0.2);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 24px rgba(11, 99, 255, 0.08);
}

.tech-motion__layer--1 {
  bottom: 18%;
  animation: tech-float 5s ease-in-out infinite;
}

.tech-motion__layer--2 {
  bottom: 44%;
  animation: tech-float 5s ease-in-out infinite 0.4s;
  opacity: 0.95;
}

.tech-motion__layer--3 {
  bottom: 70%;
  animation: tech-float 5s ease-in-out infinite 0.8s;
  opacity: 0.9;
}

.tech-motion__pulse {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(11, 99, 255, 0.08), transparent);
  background-size: 40% 100%;
  animation: tech-sweep 4s ease-in-out infinite;
}

@keyframes tech-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes tech-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

/* —— Güven: halkalar —— */
.guven-motion {
  position: relative;
  width: 100%;
  aspect-ratio: 480 / 420;
  max-height: 420px;
  border-radius: var(--radius, 14px);
  overflow: hidden;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  background: radial-gradient(circle at 50% 45%, #e8f2ff 0%, #dce8ff 45%, #cfe0ff 100%);
}

.guven-motion::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px solid rgba(11, 99, 255, 0.25);
  animation: guven-ring 6s ease-in-out infinite;
}

.guven-motion::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1px dashed rgba(5, 150, 105, 0.35);
  animation: guven-ring 8s linear infinite reverse;
}

@keyframes guven-ring {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}