/**
 * Premium teknoloji ambient katmanı.
 * İçeriğin altında kalır; pointer-events kapalı; reduced-motion ve mobilde sadeleşir.
 */
.tech-ambient {
  --tech-ink: color-mix(in srgb, var(--paper, #f2f0ea) 70%, transparent);
  --tech-accent: color-mix(in srgb, #7c97ff 55%, transparent);
  --tech-mint: color-mix(in srgb, #7ed9c8 45%, transparent);
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}

.tech-ambient__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tech-ambient__glyph {
  position: absolute;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: clamp(0.65rem, 1.1vw, 0.85rem);
  letter-spacing: 0.04em;
  color: var(--tech-ink);
  opacity: 0.085;
  white-space: nowrap;
  user-select: none;
  will-change: transform, opacity;
}

.tech-ambient__glyph--soft {
  opacity: 0.065;
  filter: blur(0.15px);
}

.tech-ambient__glyph--near {
  opacity: 0.11;
  font-size: clamp(0.72rem, 1.25vw, 0.95rem);
}

.tech-ambient__dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--tech-accent);
  opacity: 0.12;
  will-change: transform, opacity;
}

.tech-ambient__rail {
  position: absolute;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, #7c97ff 32%, transparent),
    transparent
  );
  opacity: 0.5;
}

/* Kenar yerleşimleri — merkez metin alanı seyrek bırakılır */
.tech-g-1 { top: 12%; left: 3.5%; }
.tech-g-2 { top: 22%; left: 6%; }
.tech-g-3 { top: 38%; left: 2.5%; }
.tech-g-4 { top: 58%; left: 5%; }
.tech-g-5 { top: 74%; left: 3%; }
.tech-g-6 { top: 16%; right: 4%; left: auto; }
.tech-g-7 { top: 31%; right: 6.5%; left: auto; }
.tech-g-8 { top: 48%; right: 3%; left: auto; }
.tech-g-9 { top: 66%; right: 5.5%; left: auto; }
.tech-g-10 { top: 82%; right: 4%; left: auto; }
.tech-g-11 { top: 8%; left: 18%; opacity: 0.055; }
.tech-g-12 { top: 88%; left: 22%; opacity: 0.055; }
.tech-g-13 { top: 10%; right: 18%; left: auto; opacity: 0.055; }
.tech-g-14 { top: 86%; right: 20%; left: auto; opacity: 0.055; }

.tech-d-1 { top: 18%; left: 11%; }
.tech-d-2 { top: 44%; left: 8%; }
.tech-d-3 { top: 70%; left: 13%; }
.tech-d-4 { top: 26%; right: 10%; left: auto; }
.tech-d-5 { top: 55%; right: 8%; left: auto; }
.tech-d-6 { top: 78%; right: 12%; left: auto; }

.tech-rail-l {
  left: 9%;
  top: 10%;
  height: 42%;
}
.tech-rail-r {
  right: 9%;
  top: 38%;
  height: 40%;
}

/* SVG çizgileri */
.tech-ambient .tech-line {
  fill: none;
  stroke: color-mix(in srgb, #7c97ff 38%, transparent);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.58;
}

.tech-ambient .tech-line--mint {
  stroke: color-mix(in srgb, #7ed9c8 34%, transparent);
}

.tech-ambient .tech-node {
  fill: color-mix(in srgb, var(--paper, #f2f0ea) 45%, transparent);
  opacity: 0.7;
}

.tech-ambient .tech-chart {
  fill: none;
  stroke: color-mix(in srgb, #7ed9c8 40%, transparent);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.62;
}

.tech-ambient .tech-dash {
  stroke-dasharray: 4 10;
  animation: tech-dash-flow 28s linear infinite;
}

/* Hareketler — yavaş, kısa mesafe */
.tech-float-a {
  animation: tech-float-y 32s ease-in-out infinite;
}
.tech-float-b {
  animation: tech-float-x 36s ease-in-out infinite;
}
.tech-float-c {
  animation: tech-float-diag 40s ease-in-out infinite;
}
.tech-fade {
  animation: tech-fade-soft 26s ease-in-out infinite;
}
.tech-pulse {
  animation: tech-dot-pulse 22s ease-in-out infinite;
}

.tech-delay-1 { animation-delay: -4s; }
.tech-delay-2 { animation-delay: -9s; }
.tech-delay-3 { animation-delay: -14s; }
.tech-delay-4 { animation-delay: -19s; }
.tech-delay-5 { animation-delay: -24s; }

@keyframes tech-float-y {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -14px, 0); }
}

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

@keyframes tech-float-diag {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-8px, 10px, 0); }
}

@keyframes tech-fade-soft {
  0%, 100% { opacity: 0.055; }
  40% { opacity: 0.11; }
  70% { opacity: 0.07; }
}

@keyframes tech-dot-pulse {
  0%, 100% { opacity: 0.08; transform: scale(1); }
  50% { opacity: 0.16; transform: scale(1.35); }
}

@keyframes tech-dash-flow {
  to { stroke-dashoffset: -140; }
}

/* Sosyal / SEO sayfalarında hafif vurgu rengi opsiyonel */
.svc-social ~ .tech-ambient,
body:has(.svc-social) .tech-ambient {
  --tech-accent: color-mix(in srgb, #f3b4c8 50%, transparent);
}

.svc-seo ~ .tech-ambient,
body:has(.svc-seo) .tech-ambient {
  --tech-accent: color-mix(in srgb, #7ed9c8 50%, transparent);
}

/* Mobil: daha az eleman, daha sakin */
@media (max-width: 1023px) {
  .tech-ambient__glyph {
    opacity: 0.065;
    font-size: 0.68rem;
  }

  .tech-ambient__glyph--near {
    opacity: 0.085;
  }

  .tech-hide-mobile {
    display: none !important;
  }

  .tech-float-a,
  .tech-float-b,
  .tech-float-c {
    animation-duration: 40s;
  }
}

@media (max-width: 639px) {
  .tech-ambient__glyph {
    opacity: 0.05;
  }

  .tech-rail-l,
  .tech-rail-r,
  .tech-hide-sm {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-ambient * {
    animation: none !important;
  }

  .tech-ambient__glyph,
  .tech-ambient__dot {
    opacity: 0.045;
  }
}