/* ============================================================
   KANAL HARİTASI — hub & spoke diagram
   7 channel nodes → dashed lines → traveling particles → central orb
   ============================================================ */
.kmap-sec {
  background: #fff;
  margin: 0;
  padding: 110px 0;
  overflow-x: clip; /* contain the decorative outward node drift within the section */
}
.kmap-sec .section-head { margin-bottom: clamp(28px, 4vw, 48px); }

.kmap {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
  aspect-ratio: 680 / 520;
}

/* ---- SVG layer: dashed connectors + particles ---- */
.kmap__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.kmap__line {
  fill: none;
  stroke: #9aa2c4;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.55;
}
.kmap__dot { fill: #7F77DD; }

/* ---- channel nodes ---- */
.kmap__node {
  position: absolute;
  transform: translate(-50%, -50%) translate(var(--kpush-x, 0px), var(--kpush-y, 0px));
  z-index: 2;
  will-change: transform, opacity;
}
.kmap__bubble {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-1, #f3f3f0);
  border: 1px solid var(--line-2, #e3e3dd);
  color: #71778e;
  box-shadow: 0 6px 16px -10px rgba(20,24,48,.4);
  animation: kmPulse 3s ease-in-out infinite;
}
.kmap__bubble svg { width: 22px; height: 22px; }
.kmap__label {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg, #1a1d29);
}
.kmap__node:nth-child(1) .kmap__bubble { animation-delay: 0s; }
.kmap__node:nth-child(2) .kmap__bubble { animation-delay: .25s; }
.kmap__node:nth-child(3) .kmap__bubble { animation-delay: .5s; }
.kmap__node:nth-child(4) .kmap__bubble { animation-delay: .75s; }
.kmap__node:nth-child(5) .kmap__bubble { animation-delay: 1s; }
.kmap__node:nth-child(6) .kmap__bubble { animation-delay: 1.25s; }
.kmap__node:nth-child(7) .kmap__bubble { animation-delay: 1.5s; }
@keyframes kmPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* ---- central hub orb ---- */
.kmap__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  z-index: 3;
  background: radial-gradient(circle at 50% 50%, #c2cdef 0%, #a8b8e5 100%);
  box-shadow:
    0 18px 44px -16px rgba(90,118,230,.5),
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 8px 26px rgba(255,255,255,.35);
}
.kmap__blob {
  position: absolute;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  filter: blur(13px);
  opacity: 1;
  will-change: transform;
}
.kmap__blob--1 { top: -10%; left: -5%; background: radial-gradient(circle at 50% 50%, #9b2bff 0%, #b35cff 30%, rgba(155,43,255,0) 75%); animation: chOrb1 1.3s ease-in-out infinite; }
.kmap__blob--2 { top: 20%;  left: 35%; background: radial-gradient(circle at 50% 50%, #00b6f5 0%, #2fc2f0 30%, rgba(0,182,245,0) 75%); animation: chOrb2 1.5s   ease-in-out infinite; }
.kmap__blob--3 { top: 5%;   left: 10%; background: radial-gradient(circle at 50% 50%, #e85a12 0%, #ff7d38 30%, rgba(232,90,18,0) 75%); animation: chOrb3 1.8s ease-in-out infinite; }
.kmap__blob--4 { top: 35%;  left: -10%; background: radial-gradient(circle at 50% 50%, #00e6ad 0%, #1fdcb5 30%, rgba(0,230,173,0) 75%); animation: chOrb4 2.1s ease-in-out infinite; }

.kmap__caption {
  text-align: center;
  margin: clamp(20px, 3vw, 32px) auto 0;
  max-width: 460px;
  font-size: 14.5px;
  color: var(--fg-mute, #6b7180);
}

@media (max-width: 460px) {
  .kmap__label { font-size: 11px; }
  .kmap__bubble { width: 42px; height: 42px; }
  .kmap__bubble svg { width: 19px; height: 19px; }
  .kmap-head { margin-bottom: 70px !important; }
}

/* kmap decorative pulses + dots kept on under reduce-motion (intentional) */