/* =====================================================================
   MERKEZÎ dekoratif ŞEKİL HAREKETİ — mouse parallax + otonom yüzme.
   Motor: js/shapes-motion.js :root'a --mx/--my (−1..1) yazar; burada şeklin
   `translate`ine karışır. `translate` BAĞIMSIZ CSS özelliği olduğu için mevcut
   `transform: rotate()/translateX()` KORUNUR (compose olur, ezmez).
   Otonom float @keyframes ile --fx/--fy'yi (Houdini @property <length>) oynatır
   → mouse olmasa da şekiller süzülür. prefers-reduced-motion'da hepsi durur.

   KULLANIM (yeni şekiller için): elemana `fx-shape` sınıfı ekle. İsteğe bağlı:
     .fx-slow / .fx-fast (tempo), .fx-deep / .fx-shallow (parallax mesafesi),
     inline `--pd:<px>` (parallax derinliği) / `--fd:<s>` (float süresi) ile ayarla.
   Mevcut dekorlar aşağıdaki listede otomatik canlandırılır (sınıf gerekmez).
   ===================================================================== */
@property --fx { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fy { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* --- Yeniden kullanılabilir dekoratif ŞEKİLLER (yapı; hareket için ayrıca .fx-shape ekle) ---
   fx-blob = yumuşak ışıltı topu, fx-ring = açık halka, fx-dotfield = nokta tarlası.
   Renk/boyut/konum inline style ile (background / color / left-right-top / width-height). */
.fx-blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .5; pointer-events: none;
}
.fx-ring {
  position: absolute; border: 3px solid currentColor; border-radius: 50%;
  border-right-color: transparent; border-bottom-color: transparent;
  opacity: .35; pointer-events: none;
}
.fx-dotfield {
  position: absolute;
  background-image: radial-gradient(var(--c-line-2) 1.4px, transparent 1.4px);
  background-size: 14px 14px; opacity: .85; pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

  @keyframes fxFloat {
    0%, 100% { --fx: 0px;   --fy: 0px; }
    25%      { --fx: 9px;   --fy: -13px; }
    50%      { --fx: 15px;  --fy: 7px; }
    75%      { --fx: -7px;  --fy: 13px; }
  }

  /* Ortak motor: mouse (--mx/--my) + otonom float (--fx/--fy) tek translate'te birleşir.
     --pd = parallax derinliği (px), --fd = float süresi. Varsayılanlar makul. */
  .fx-shape,
  .home-hero .blob, .home-hero .arc, .home-hero .dot-grid,
  .cta-dots, .cta::before, .cta::after,
  .stats::after,
  .templates::before, .templates::after,
  .features::before, .features::after,
  .reviews::before, .reviews::after,
  .home-services::before,
  .home-bayi-cta::before,
  .bayi-personas::before, .bayi-advantages::after,
  .bayi-pricing::before, .bayi-pricing::after {
    translate:
      calc(var(--mx, 0) * var(--pd, 16px) + var(--fx))
      calc(var(--my, 0) * var(--pd, 16px) + var(--fy));
    animation: fxFloat var(--fd, 11s) ease-in-out infinite;
    will-change: translate;
  }

  /* Katmanlı derinlik/tempo — büyük yumuşak bloblar çok, ince dot-grid az hareket eder.
     Zıt yönlü (reverse) olanlar parallax'a "paralaks katman" hissi katar. */
  .home-hero .blob.a   { --pd: 34px; --fd: 13s; }
  .home-hero .blob.b   { --pd: 46px; --fd: 16s; animation-direction: reverse; }
  .home-hero .arc.amber{ --pd: 24px; --fd: 9s; }
  .home-hero .arc.coral{ --pd: 30px; --fd: 12s; animation-direction: reverse; }
  .home-hero .dot-grid { --pd: 10px; --fd: 15s; }

  .cta-dots            { --pd: 14px; --fd: 12s; }
  .cta::before         { --pd: 20px; --fd: 14s; }
  .cta::after          { --pd: 28px; --fd: 10s; animation-direction: reverse; }
  .stats::after        { --pd: 8px;  --fd: 18s; }

  .templates::before, .reviews::before,
  .home-services::before, .home-bayi-cta::before,
  .bayi-personas::before, .bayi-pricing::before { --pd: 12px; --fd: 13s; }
  .templates::after, .reviews::after,
  .bayi-advantages::after, .bayi-pricing::after { --pd: 18px; --fd: 11s; animation-direction: reverse; }
  .features::before    { --pd: 16px; --fd: 12s; }
  .features::after     { --pd: 22px; --fd: 10s; animation-direction: reverse; }

  /* Utility ayarları (fx-shape ile) */
  .fx-shape.fx-slow    { --fd: 18s; }
  .fx-shape.fx-fast    { --fd: 7s; }
  .fx-shape.fx-deep    { --pd: 40px; }
  .fx-shape.fx-shallow { --pd: 8px; }

  /* Overflow guard: parallax + float sürüklenmesi yatay scrollbar açmasın.
     (features/hero/stats/cta zaten overflow:hidden; bu ikisi değildi.) */
  .templates, .reviews { overflow: hidden; }
}