/* ================================================================
   Hareketli tasarım (motion.js ile) — kinetik başlık, slot sayaç, kayan yazı şeritleri, parçacık tuvali
   ================================================================ */

/* ---------- Harf harf açılan başlık ---------- */
.mo-split .mo-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.02em 0.12em; margin: -0.06em -0.02em -0.12em; }
.mo-split .mo-c { display: inline-block; transform: translateY(115%) rotate(6deg); opacity: 0; }
.mo-split.mo-in .mo-c { animation: mo-rise 900ms cubic-bezier(.16, 1.2, .3, 1) var(--d, 0ms) both; }
@keyframes mo-rise {
  0% { transform: translateY(115%) rotate(6deg); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* Aşağıdan süzülerek gelen yardımcı öğe (alt başlık, düğmeler) */
.mo-fade { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity 800ms ease var(--d, 0ms), transform 900ms cubic-bezier(.2, .8, .2, 1) var(--d, 0ms), filter 800ms ease var(--d, 0ms); }
.mo-in .mo-fade, .mo-fade.mo-in { opacity: 1; transform: none; filter: none; }

/* Göz başlığı: harf aralığı açılarak belirir */
.mo-track { opacity: 0; letter-spacing: calc(var(--ls, 0.16em) + 0.45em); transition: opacity 900ms ease var(--d, 0ms), letter-spacing 1200ms cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.mo-in .mo-track, .mo-track.mo-in { opacity: 1; letter-spacing: var(--ls, 0.16em); }

/* ---------- Slot makinesi sayaç ---------- */
.mo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mo-odo { display: inline-flex; line-height: 1; }
/* Sayfanın genel "x span" kuralları (ör. .fi-stats span) rakam sütunlarına sızmasın */
.mo-odo.mo-odo, .mo-odo .mo-col, .mo-odo .mo-strip, .mo-odo .mo-ch { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; padding: 0; border: 0; background: none; opacity: 1; }
.mo-odo .mo-col { display: inline-block; } .mo-odo .mo-strip { display: block; } .mo-odo .mo-ch { display: inline; }
.mo-col { --lh: 1.12em; display: inline-block; height: var(--lh); overflow: hidden; vertical-align: top; margin-bottom: calc(1em - var(--lh)); }
.mo-strip { display: block; transform: translateY(calc(var(--v, 0) * var(--lh) * -1));
  transition: transform 1100ms cubic-bezier(.2, 1.15, .35, 1) calc(var(--k, 0) * 70ms); }
.mo-strip::before { content: '0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0'; white-space: pre; display: block; line-height: var(--lh); text-align: center; }
.mo-strip.mo-snap { transition: none; }
.mo-ch::before { content: attr(data-c); }
/* Saniye gibi sık değişen sayaçlar kısa ve yaylı döner */
.mo-quick .mo-strip { transition-duration: 520ms; transition-delay: 0ms; }
/* Ekrana girmeden dönmez: .mo-live gelince sıfırdan hedefe akar */
.mo-wait:not(.mo-live) .mo-strip { transform: none; transition: none; }

/* ---------- Kayan yazı şeritleri (arka plan) ---------- */
.mo-marq { position: absolute; inset: -10% -20%; z-index: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.1em; overflow: hidden; pointer-events: none;
  transform: rotate(-8deg); font-family: var(--font-display); font-weight: 700; font-size: clamp(3.4rem, 13vw, 8rem); line-height: 1; text-transform: uppercase; }
.mo-row { display: flex; white-space: nowrap; width: max-content; color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.16); animation: mo-marq 38s linear infinite; }
.mo-row.rev { animation-direction: reverse; animation-duration: 46s; }
.mo-row.mid { -webkit-text-stroke: 0; color: rgba(255, 255, 255, 0.07); }
.mo-row span { padding-right: 0.3em; }
@keyframes mo-marq { to { transform: translateX(-50%); } }

/* ---------- Parçacık tuvali ---------- */
.mo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .mo-split .mo-c, .mo-split.mo-in .mo-c { animation: none; transform: none; opacity: 1; }
  .mo-fade, .mo-track { opacity: 1; transform: none; filter: none; letter-spacing: var(--ls, 0.16em); transition: none; }
  .mo-strip { transition: none; }
  .mo-row { animation: none; }
}

/* ---------- Daktilo (Motion.split(el, { type: true })) ---------- */
.mo-typed .mo-w { overflow: visible; }
.mo-typed .mo-c, .mo-typed.mo-in .mo-c { transform: none; opacity: 0; animation: none; }
.mo-typed.mo-in .mo-c { animation: mo-key 1ms steps(1) var(--d, 0ms) both; }
@keyframes mo-key { to { opacity: 1; } }
.mo-typed.mo-in::after { content: ''; display: inline-block; width: 2px; height: 0.85em; margin-left: 3px; vertical-align: -0.08em; background: currentColor;
  animation: mo-caret 900ms steps(1) var(--end, 0ms) 4 both; opacity: 0; }
@keyframes mo-caret { 0% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- Sırayla belirme (Motion.reveal) ---------- */
.mo-rv { opacity: 0; transform: translateY(26px) scale(0.97); transition: opacity 700ms ease var(--d, 0ms), transform 900ms cubic-bezier(.2, 1.1, .3, 1) var(--d, 0ms); }
.mo-rv.mo-in { opacity: 1; transform: none; }

/* ---------- Kalp kıvılcımı (Motion.burst) ---------- */
.mo-spark { position: fixed; z-index: 10005; pointer-events: none; line-height: 1; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .mo-typed .mo-c { opacity: 1; }
  .mo-typed.mo-in .mo-c, .mo-typed.mo-in::after { animation: none; }
  .mo-rv { opacity: 1; transform: none; transition: none; }
}