@mesgflow/ui-kit 0.6.0 → 0.7.0

package/tokens/motion.css

@@ -3,17 +3,28 @@
  * animasyonları. `prefers-reduced-motion: reduce` global bloğu (aşağıda)
  * TÜM `animate-*`/`transition-*` kullanımlarını otomatik kısıyor — yeni bir
  * `--animate-*` eklerken ayrıca bir reduced-motion istisnası YAZMA gerekmiyor.
+ *
+ * Hareket dili (v0.7):
+ * - GİRİŞ `ease-spring` / `ease-emphasis`, `duration-base`..`slow`.
+ * - ÇIKIŞ her zaman DAHA KISA (`--mf-duration-exit`) ve hızlanarak ayrılır
+ *   (`ease-exit`) — Material 3 / Radix ile aynı ilke.
+ * - Overlay'ler tetikleyiciden büyür (anchor-origin, dosyanın sonu).
+ * - Listeler `stagger` ile sırayla girer.
  */
 @theme {
   --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);
+  /*
+   * Çıkış eğrisi — hızlanarak AYRILIR (ease-in). Giriş ve çıkış aynı eğriyi
+   * paylaşınca kapanış "geri sarılan film" gibi yavaş hissettiriyordu.
+   */
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
   /*
    * Sönümlü yay (ζ=0.9, başlangıç hızı 1.2) — `linear()` ile örneklenmiş.
    * Hızlı başlar (ease-out gibi), hedefi ~%2.8 aşıp yerine OTURUR — zıplama
-   * yok. SADECE küçük ölçek/öteleme GİRİŞLERİNDE (dialog, overlay):
+   * yok. SADECE küçük ölçek/öteleme GİRİŞLERİNDE (dialog, overlay, toast):
    * `translateY(100%)` gibi tam-boy kaymalarda (sheet/drawer) aşım panelin
-   * altında boşluk açardı. Çıkışlar `ease-emphasis`te kalır. `linear()`
-   * desteklemeyen tarayıcıda animasyon bildirimi geçersiz sayılır ve panel
-   * animasyonsuz açılır (işlev kaybı yok).
+   * altında boşluk açardı. `linear()` desteklemeyen tarayıcıda animasyon
+   * bildirimi geçersiz sayılır ve panel animasyonsuz açılır (işlev kaybı yok).
    */
   --ease-spring: linear(
     0,
@@ -34,9 +45,11 @@
     1.005 93.8%,
     1
   );
+  --duration-instant: 80ms;
   --duration-fast: 120ms;
   --duration-base: 180ms;
   --duration-slow: 260ms;
+  --duration-slower: 400ms;
 
   /*
    * Table'ın "yeniden sorgulanıyor" göstergesi: satırlar YERİNDE kalır
@@ -54,30 +67,38 @@
     }
   }
 
+  /* Dairesel ilerleme (Progress `variant="ring"`, indeterminate) — halka döner. */
+  --animate-spin-slow: ring-spin 1.4s linear infinite;
+
+  @keyframes ring-spin {
+    to {
+      rotate: 360deg;
+    }
+  }
+
   /*
    * Dialog açılış/kapanış — `Dialog`'un (dialog.ts) `surface.closing()`'e
    * göre reaktif olarak `-in`/`-out` class'ı arasında geçiş yapmasıyla
-   * tetikleniyor. Kapanış CDK'nın kendi kancası OLMADIĞI için
-   * `DialogService.open()`'daki `closePredicate` ile senkronize gecikmeli
-   * (bkz. o dosyanın doc yorumu) — `-out` süresi orada `EXIT_MS` sabitiyle
-   * BİREBİR eşleşiyor, biri değişirse diğeri de güncellenmeli.
+   * tetikleniyor. Kapanış gecikmesi `DialogService.open()`'daki
+   * `closePredicate` — süresini `exitDurationMs()` (core/motion.ts) BURADAKİ
+   * `--mf-duration-exit`'ten okur; iki yerde elle eşitlenen sabit yok.
    */
-  --animate-dialog-in: dialog-in var(--duration-base) var(--ease-spring);
-  --animate-dialog-out: dialog-out var(--duration-fast) var(--ease-emphasis) forwards;
-  --animate-sheet-in: sheet-in var(--duration-base) var(--ease-emphasis);
-  --animate-sheet-out: sheet-out var(--duration-fast) var(--ease-emphasis) forwards;
+  --animate-dialog-in: dialog-in var(--duration-slow) var(--ease-spring);
+  --animate-dialog-out: dialog-out var(--mf-duration-exit) var(--ease-exit) forwards;
+  --animate-sheet-in: sheet-in var(--duration-slow) var(--ease-emphasis);
+  --animate-sheet-out: sheet-out var(--mf-duration-exit) var(--ease-exit) forwards;
 
   @keyframes dialog-in {
     from {
       opacity: 0;
-      transform: translateY(8px) scale(0.98);
+      transform: translateY(12px) scale(0.97);
     }
   }
 
   @keyframes dialog-out {
     to {
       opacity: 0;
-      transform: translateY(4px) scale(0.985);
+      transform: translateY(6px) scale(0.98);
     }
   }
 
@@ -94,36 +115,56 @@
   }
 
   /*
-   * Drawer (sağdan açılan panel) — X ekseninde kayıyor, BİLEREK modal (Y +
-   * scale) ve sheet'ten (Y) farklı: hareket ekseni metaforla eşleşiyor
-   * (modal ortadan yükselir, sheet alttan kayar, drawer kenardan kayar).
+   * Drawer — kenardan kayar. Hareket ekseni metaforla eşleşiyor (modal
+   * ortadan yükselir, sheet alttan kayar, drawer kenardan kayar).
+   * `end` (varsayılan, eski `drawer`) / `start` / `top` / `bottom` (= sheet).
+   * `--mf-dir` RTL'de yatay yönü çevirir (bkz. aşağıdaki `:root`).
    */
-  --animate-drawer-in: drawer-in var(--duration-base) var(--ease-emphasis);
-  --animate-drawer-out: drawer-out var(--duration-fast) var(--ease-emphasis) forwards;
+  --animate-drawer-in: drawer-in var(--duration-slow) var(--ease-emphasis);
+  --animate-drawer-out: drawer-out var(--mf-duration-exit) var(--ease-exit) forwards;
+  --animate-drawer-start-in: drawer-start-in var(--duration-slow) var(--ease-emphasis);
+  --animate-drawer-start-out: drawer-start-out var(--mf-duration-exit) var(--ease-exit) forwards;
+  --animate-drawer-top-in: drawer-top-in var(--duration-slow) var(--ease-emphasis);
+  --animate-drawer-top-out: drawer-top-out var(--mf-duration-exit) var(--ease-exit) forwards;
 
   @keyframes drawer-in {
     from {
-      transform: translateX(100%);
+      transform: translateX(calc(100% * var(--mf-dir, 1)));
     }
   }
 
   @keyframes drawer-out {
     to {
-      transform: translateX(100%);
+      transform: translateX(calc(100% * var(--mf-dir, 1)));
+    }
+  }
+
+  @keyframes drawer-start-in {
+    from {
+      transform: translateX(calc(-100% * var(--mf-dir, 1)));
+    }
+  }
+
+  @keyframes drawer-start-out {
+    to {
+      transform: translateX(calc(-100% * var(--mf-dir, 1)));
+    }
+  }
+
+  @keyframes drawer-top-in {
+    from {
+      transform: translateY(-100%);
+    }
+  }
+
+  @keyframes drawer-top-out {
+    to {
+      transform: translateY(-100%);
     }
   }
 
-  /*
-   * Popover/Menu/Select/Combobox/ColorPicker/DatePicker/... — 12 kopya
-   * overlay panelinin BİRLEŞTİĞİ tek giriş/çıkış hareketi (bkz. plan Faz 1c,
-   * `Popover`'ın `closing` sinyali). Dialog'dan (Y 8px + duration-base) daha
-   * hafif — küçük bir panel, `-4px` + `duration-fast` yeterli, ağır
-   * hissettirmez.
-   */
   /* Durum ikonu değişimi (kopyalandı ✓ vb.) — küçükten yaya binerek büyür. */
   --animate-pop: pop var(--duration-base) var(--ease-spring);
-  --animate-overlay-in: overlay-in var(--duration-fast) var(--ease-spring);
-  --animate-overlay-out: overlay-out var(--duration-fast) var(--ease-emphasis) forwards;
 
   @keyframes pop {
     from {
@@ -136,49 +177,94 @@
     }
   }
 
+  /*
+   * Popover/Menu/Select/Combobox/Tooltip/... — tüm overlay panellerinin TEK
+   * giriş/çıkış hareketi. Anchor-origin: `--mf-overlay-dx/dy` ve
+   * `transform-origin` CDK'nın SEÇTİĞİ pozisyonun `panelClass`'ından gelir
+   * (`mf-side-*` / `mf-origin-*`, dosyanın sonu + core/overlay/placements.ts)
+   * — panel yukarı çevrildiğinde (flip) hareket de ona göre döner.
+   */
+  --animate-overlay-in: overlay-in var(--duration-base) var(--ease-spring);
+  --animate-overlay-out: overlay-out var(--mf-duration-exit) var(--ease-exit) forwards;
+
   @keyframes overlay-in {
     from {
       opacity: 0;
-      transform: translateY(-4px) scale(0.98);
+      transform: translate(var(--mf-overlay-dx, 0px), var(--mf-overlay-dy, -4px)) scale(0.96);
     }
   }
 
   @keyframes overlay-out {
     to {
       opacity: 0;
-      transform: translateY(-4px) scale(0.98);
+      transform: translate(var(--mf-overlay-dx, 0px), var(--mf-overlay-dy, -4px)) scale(0.97);
     }
   }
 
   /*
-   * Toast — X ekseninde kayarak girer/çıkar (bkz. `ToastHost`, sağ-alt/
-   * sağ-üst köşeden gelen bildirim metaforu; dialog/overlay'in Y ekseninden
-   * BİLEREK farklı).
+   * Toast — X ekseninde kayarak girer/çıkar (köşeden gelen bildirim
+   * metaforu). Giriş yaylı, çıkış kısa + hızlanan.
    */
-  --animate-toast-in: toast-in var(--duration-base) var(--ease-emphasis);
-  --animate-toast-out: toast-out var(--duration-fast) var(--ease-emphasis) forwards;
+  --animate-toast-in: toast-in var(--duration-slow) var(--ease-spring);
+  --animate-toast-out: toast-out var(--mf-duration-exit) var(--ease-exit) forwards;
 
   @keyframes toast-in {
     from {
       opacity: 0;
-      transform: translateX(16px);
+      transform: translateX(calc(24px * var(--mf-dir, 1))) scale(0.97);
     }
   }
 
   @keyframes toast-out {
     to {
       opacity: 0;
-      transform: translateX(16px);
+      transform: translateX(calc(24px * var(--mf-dir, 1))) scale(0.97);
+    }
+  }
+
+  /* Toast otomatik kapanma çubuğu — süre `--mf-toast-duration` (ToastHost satır stili). */
+  --animate-countdown: countdown var(--mf-toast-duration, 5s) linear forwards;
+
+  @keyframes countdown {
+    from {
+      transform: scaleX(1);
+    }
+    to {
+      transform: scaleX(0);
+    }
+  }
+
+  /*
+   * Liste girişi — `stagger` utility'siyle birlikte: öğeler sırayla 30ms
+   * arayla yükselir (menü öğeleri, toast yığını, blok kartları).
+   */
+  --animate-list-in: list-in var(--duration-slow) var(--ease-emphasis) both;
+
+  @keyframes list-in {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+  }
+
+  /* Checkbox işareti — SVG path "çizilir" (stroke-dashoffset). */
+  --animate-draw: draw var(--duration-base) var(--ease-emphasis) both;
+
+  @keyframes draw {
+    from {
+      stroke-dashoffset: var(--mf-draw-length, 24);
+    }
+    to {
+      stroke-dashoffset: 0;
     }
   }
 
   /*
    * Skeleton — `animate-pulse` (opaklık titreşimi) yerine soldan sağa kayan
-   * bir parıltı (bkz. plan Faz 1c). Skeleton'un kendi arka planı bir
-   * gradient olmalı (`background-size: 200% 100%`) — token burada sadece
-   * hareketi tanımlıyor, gradient tanımı `skeleton.ts`'te.
+   * bir parıltı. Skeleton'un kendi arka planı bir gradient olmalı
+   * (`background-size: 200% 100%`) — gradient tanımı `skeleton.ts`'te.
    */
-  --animate-shimmer: shimmer 1.4s linear infinite;
+  --animate-shimmer: shimmer 1.6s var(--ease-emphasis) infinite;
 
   @keyframes shimmer {
     0% {
@@ -197,18 +283,31 @@
       opacity: 0;
     }
   }
+
+  /**
+   * Sekme paneli girişi — solma + 4px yükselme. `display:none → block` geçişi
+   * animasyonu kendiliğinden yeniden başlatır, önceki durum takibi gerekmez.
+   */
+  --animate-panel-in: panel-in var(--duration-base) var(--ease-emphasis);
+
+  @keyframes panel-in {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+  }
 }
 
 /*
  * Tailwind v4'te `--duration-*` diye bir theme namespace YOK (sadece
- * `--ease-*`/`--animate-*` var) — `duration-fast`/`duration-base`/
- * `duration-slow` class'ları yukarıdaki `@theme` bloğundaki tanıma rağmen
- * HİÇBİR ZAMAN CSS üretmiyordu (kod tabanında ~60 kullanım yeri, hepsi sessizce
- * etkisizdi, tüm geçişler tarayıcı varsayılanına düşüyordu). `@utility` ile
- * elle tanımlamak hem class'ları çalıştırıyor hem de "kullanılmayan" gerekçesiyle
- * derlenen CSS'ten atlanan `--duration-*` custom property'lerini emit ettiriyor
- * (`.mf-dialog-backdrop`'ın `var(--duration-base)`'i de bu sayede düzeliyor).
+ * `--ease-*`/`--animate-*` var) — `duration-*` class'ları `@theme`
+ * tanımına rağmen CSS üretmiyordu. `@utility` ile elle tanımlamak hem
+ * class'ları çalıştırıyor hem de `--duration-*` custom property'lerini emit
+ * ettiriyor.
  */
+@utility duration-instant {
+  transition-duration: var(--duration-instant);
+}
 @utility duration-fast {
   transition-duration: var(--duration-fast);
 }
@@ -218,8 +317,55 @@
 @utility duration-slow {
   transition-duration: var(--duration-slow);
 }
+@utility duration-slower {
+  transition-duration: var(--duration-slower);
+}
+
+/*
+ * `stagger` — `[style.--mf-stagger]="$index"` ile birlikte: animasyon
+ * gecikmesi öğe sırasıyla artar (10. öğeden sonra sabit, uzun listelerde
+ * sondaki öğeler beklemesin).
+ */
+@utility stagger {
+  animation-delay: min(calc(var(--mf-stagger, 0) * 30ms), 300ms);
+}
+
+/*
+ * `hover-lift` — tıklanabilir kart/döşeme: hover'da 2px yükselir + overlay
+ * gölgesi. Sadece gerçek hover'lı cihazlarda — dokunmatikte "yapışkan hover"
+ * olmasın. `translate` bağımsız özelliği: `transform` kullanan animasyonlarla
+ * çakışmaz.
+ */
+@utility hover-lift {
+  transition-property: translate, box-shadow, border-color, background-color;
+  transition-duration: var(--duration-base);
+  transition-timing-function: var(--ease-emphasis);
+  @media (hover: hover) {
+    &:hover {
+      translate: 0 -2px;
+      box-shadow: var(--mf-shadow-2);
+    }
+  }
+  &:active {
+    translate: 0 0;
+  }
+}
 
 @layer base {
+  /*
+   * Çalışma zamanı motion token'ları — JS'in de OKUDUĞU değerler
+   * (`exitDurationMs()`, core/motion.ts): çıkış süresi TEK kaynakta.
+   * `--mf-dir` — RTL'de yatay kaymaları çevirir (drawer/toast).
+   */
+  :root {
+    --mf-duration-exit: 120ms;
+    --mf-dir: 1;
+  }
+
+  [dir='rtl'] {
+    --mf-dir: -1;
+  }
+
   /* `transitionMfTheme()` (theming) — tema çapraz geçişi kitin kendi süre/eğrisiyle, tarayıcı varsayılanı (250ms ease) değil. */
   ::view-transition-old(root),
   ::view-transition-new(root) {
@@ -228,11 +374,16 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
+    :root {
+      --mf-duration-exit: 0ms;
+    }
+
     *,
     *::before,
     *::after {
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
+      animation-delay: 0ms !important;
       transition-duration: 0.01ms !important;
       scroll-behavior: auto !important;
     }
@@ -243,26 +394,20 @@
  * `.mf-dialog-backdrop` (bkz. dialog/dialog.service.ts) BİLEREK `@layer`
  * DIŞINDA (unlayered) — CDK'nın kendi `overlay-prebuilt.css`'i
  * `.cdk-overlay-backdrop` kuralını KENDİ `@layer cdk-overlay`'inde taşıyor,
- * ve unlayered CSS her zaman HERHANGİ bir layer'ı (specificity'den bağımsız)
- * yener (CSS cascade layers spec) — bu yüzden burada `@layer` kullanmak bu
- * override'ı tamamen etkisiz bırakırdı. `.is-closing`, `DialogService.open()`'ın
- * `closePredicate`'i tarafından panelin kendi `animate-dialog-out`/
- * `animate-sheet-out`'uyla AYNI anda eklenir (backdrop ham DOM elemanı — CDK
- * yönetiyor, Angular template'ine bağlanamıyor, bu yüzden imperatif class
- * toggle kaçınılmaz).
+ * ve unlayered CSS her zaman HERHANGİ bir layer'ı yener. `.is-closing`,
+ * `DialogService.open()`'ın `closePredicate`'i tarafından panelin kendi
+ * çıkış animasyonuyla AYNI anda eklenir.
  *
- * Karartma + blur miktarı 2026-09 Deep Emerald geçişinde eklendi (eskiden
- * backdrop hiç karartmıyordu, sadece 2px blur veriyordu) — mikro
- * glassmorphism'in bir parçası: panel `glassSurface` ile yarı saydamken
- * arkadaki içerik hem karartılıp hem bulanıklaştırılmazsa panel içeriğiyle
- * karışır. `color-mix()` (Tailwind'in `/40` opaklık modifier'ı unlayered
- * kuralda çalışmıyor, bu yüzden elle) `--color-neutral-975`'i kullanıyor —
- * moda göre otomatik doğru koyulukta.
+ * Karartma + blur — mikro glassmorphism: panel `glassSurface` ile yarı
+ * saydamken arkadaki içerik hem karartılıp hem bulanıklaştırılmazsa panel
+ * içeriğiyle karışır. Blur kademeli açılır (`backdrop-filter` geçişi).
  */
 .mf-dialog-backdrop {
-  transition-duration: var(--duration-base);
+  transition-property: opacity, backdrop-filter;
+  transition-duration: var(--duration-slow);
+  transition-timing-function: var(--ease-emphasis);
   background-color: color-mix(in srgb, var(--color-neutral-975) 40%, transparent);
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(6px) saturate(1.1);
 }
 
 @media (prefers-reduced-transparency: reduce) {
@@ -274,4 +419,97 @@
 
 .mf-dialog-backdrop.is-closing {
   opacity: 0;
+  transition-duration: var(--mf-duration-exit);
+  transition-timing-function: var(--ease-exit);
+}
+
+/*
+ * Overlay anchor-origin sınıfları — CDK'nın SEÇTİĞİ `ConnectedPosition`'ın
+ * `panelClass`'ı olarak pane'e eklenir (bkz. core/overlay/placements.ts).
+ * `mf-side-*`: panelin tetikleyiciye göre konumu → kayma yönü (panel
+ * tetikleyiciden dışarı doğru açılır, ona doğru çekilerek kapanır).
+ * `mf-origin-*`: `transform-origin` — ölçek tetikleyiciye en yakın noktadan.
+ * `:dir(rtl)` — CDK pane host'unun `dir` özniteliğini Directionality'den alır.
+ */
+.mf-side-bottom {
+  --mf-overlay-dx: 0px;
+  --mf-overlay-dy: -4px;
+}
+.mf-side-top {
+  --mf-overlay-dx: 0px;
+  --mf-overlay-dy: 4px;
+}
+.mf-side-end {
+  --mf-overlay-dx: -4px;
+  --mf-overlay-dy: 0px;
+}
+.mf-side-start {
+  --mf-overlay-dx: 4px;
+  --mf-overlay-dy: 0px;
+}
+.mf-side-end:dir(rtl) {
+  --mf-overlay-dx: 4px;
+}
+.mf-side-start:dir(rtl) {
+  --mf-overlay-dx: -4px;
+}
+
+.mf-origin-top-start {
+  --mf-overlay-origin: top left;
+}
+.mf-origin-top-center {
+  --mf-overlay-origin: top center;
+}
+.mf-origin-top-end {
+  --mf-overlay-origin: top right;
+}
+.mf-origin-center-start {
+  --mf-overlay-origin: center left;
+}
+.mf-origin-center-end {
+  --mf-overlay-origin: center right;
+}
+.mf-origin-bottom-start {
+  --mf-overlay-origin: bottom left;
+}
+.mf-origin-bottom-center {
+  --mf-overlay-origin: bottom center;
+}
+.mf-origin-bottom-end {
+  --mf-overlay-origin: bottom right;
+}
+.mf-origin-top-start:dir(rtl) {
+  --mf-overlay-origin: top right;
+}
+.mf-origin-top-end:dir(rtl) {
+  --mf-overlay-origin: top left;
+}
+.mf-origin-center-start:dir(rtl) {
+  --mf-overlay-origin: center right;
+}
+.mf-origin-center-end:dir(rtl) {
+  --mf-overlay-origin: center left;
+}
+.mf-origin-bottom-start:dir(rtl) {
+  --mf-overlay-origin: bottom right;
+}
+.mf-origin-bottom-end:dir(rtl) {
+  --mf-overlay-origin: bottom left;
+}
+
+.animate-overlay-in,
+.animate-overlay-out {
+  transform-origin: var(--mf-overlay-origin, top center);
+}
+
+/* Lightbox (lightbox/lightbox.ts) — koyu cam arka plan; unlayered (CDK katmanını yener). */
+.mf-lightbox-backdrop {
+  background-color: color-mix(in srgb, #000 88%, transparent);
+  backdrop-filter: blur(8px);
+}
+@media (prefers-reduced-transparency: reduce) {
+  .mf-lightbox-backdrop {
+    background-color: #000;
+    backdrop-filter: none;
+  }
 }

package/tokens/radius.css

@@ -26,11 +26,19 @@
  * AYNI hizada dursun diye.
  */
 @theme {
+  --control-h-xs: 1.75rem; /* 28px — yoğun tablo/araç çubuğu */
   --control-h-sm: 2rem; /* 32px */
   --control-h-md: 2.25rem; /* 36px */
   --control-h-lg: 2.5rem; /* 40px */
+  --control-h-xl: 3rem; /* 48px — hero/pazarlama CTA */
 }
 
+@utility h-control-xs {
+  height: var(--control-h-xs);
+}
+@utility h-control-xl {
+  height: var(--control-h-xl);
+}
 @utility h-control-sm {
   height: var(--control-h-sm);
 }
@@ -50,20 +58,26 @@
  */
 @layer base {
   [data-density='compact'] {
+    --control-h-xs: 1.5rem; /* 24px */
     --control-h-sm: 1.75rem; /* 28px */
     --control-h-md: 2rem; /* 32px */
     --control-h-lg: 2.25rem; /* 36px */
+    --control-h-xl: 2.75rem; /* 44px */
   }
 
   [data-density='default'] {
+    --control-h-xs: 1.75rem;
     --control-h-sm: 2rem;
     --control-h-md: 2.25rem;
     --control-h-lg: 2.5rem;
+    --control-h-xl: 3rem;
   }
 
   [data-density='comfortable'] {
+    --control-h-xs: 2rem; /* 32px */
     --control-h-sm: 2.25rem; /* 36px */
     --control-h-md: 2.5rem; /* 40px */
     --control-h-lg: 2.75rem; /* 44px */
+    --control-h-xl: 3.25rem; /* 52px */
   }
 }

package/tokens.css

@@ -37,5 +37,6 @@
 @import './tokens/radius.css';
 @import './tokens/elevation.css';
 @import './tokens/motion.css';
+@import './tokens/controls.css';
 /* Erişilebilirlik modları (prefers-contrast / forced-colors) — color.css'in rol bloklarını ezer, bu yüzden SONDA kalmalı. */
 @import './tokens/contrast.css';