/* ==========================================================================
   Hareket katmanı. Başlangıç durumları yalnızca JS hazırken (html.motion) uygulanır;
   JS yoksa veya kullanıcı hareketi azaltmayı seçtiyse içerik olduğu gibi görünür.
   ========================================================================== */

/* Hero arka planı: kenarlara doğru sönen ince nokta ızgarası */
.s-hero { position: relative; isolation: isolate; }
.s-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(30, 78, 140, .16) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, #000 20%, transparent 75%);
}
.s-hero h1 .w { display: inline-block; }
.s-hero .s-shot-wrap { perspective: 1600px; }
.s-hero .s-shot { transform-origin: 50% 0; will-change: transform; }

/* Kaydırınca beliren öğeler */
html.motion [data-reveal] { opacity: 0; transform: translateY(24px); }

/* Üst menü: kaydırınca ince gölge */
.s-header { transition: box-shadow .25s, border-color .25s; }
.s-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(11, 27, 51, .35); border-bottom-color: transparent; }

/* Kartlarda imleci izleyen ışık */
.s-feat, .s-plan, .s-demo, .s-quote, .s-int { position: relative; }
.s-spot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(30, 78, 140, .08), transparent 45%);
}
.s-spot:hover::after { opacity: 1; }
.bg-navy .s-spot::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .07), transparent 45%); }

/* Logo şeridi: sonsuz akış (JS iki kopya oluşturur) */
.s-logos .row-l.is-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.s-logos .row-l.is-marquee .track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; }

/* Sekmeli tur: aktif sekmede ilerleme çizgisi */
.s-tabbar button { position: relative; overflow: hidden; }
.s-tabbar button .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); }
.s-tabpane .s-shot { transition: none; }

/* Adımlar: bağlantı çizgisi soldan sağa çizilir */
html.motion .s-step::after { transform-origin: 0 50%; transform: scaleX(var(--draw, 0)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }

/* CTA bandında tek seferlik ışık geçişi */
.s-ctaband { position: relative; overflow: hidden; isolation: isolate; }
.s-ctaband .sheen { position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .08), transparent); transform: skewX(-18deg); }

/* Fiyat kutusu geçişinde rakam titremesini önle */
.s-plan .price b { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html.motion [data-reveal] { opacity: 1 !important; transform: none !important; }
  .s-spot::after { display: none; }
}