/* Sayfaya özel davranış katmanı.
   Görsel değerlerin tamamı design-system.css'ten gelen token değişkenlerinden okunur.
   Burada yalnız keyframe tanımı ve hareket tercihi yer alır. */

@layer design-os.page;

@layer design-os.page {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: var(--semantic-structure-none);
  }

  @media (prefers-reduced-motion: no-preference) {
    [data-settle] {
      animation-name: sb-settle;
      animation-duration: var(--semantic-motion-settle-duration);
      animation-timing-function: var(--semantic-motion-settle-easing);
      animation-fill-mode: both;
    }
  }
}

@keyframes sb-settle {
  from {
    opacity: var(--primitive-structure-zero);
    transform: translateY(var(--primitive-space-4));
  }

  to {
    opacity: var(--primitive-structure-opaque);
    transform: translateY(var(--primitive-structure-zero));
  }
}