/*
 * motion.css — panelin hareket ve malzeme cilası (en son yüklenir).
 * Kurallar (docs/performance.md, Emil):
 *   • Sonsuz döngü yok; her hareket bir kez oynar ve durur (boşta 0 kare).
 *   • Yalnız transform / opacity canlanır; renk geçişleri hover'da kısa.
 *   • Sık yapılan iş (sayfa değişimi, sekme) çok kısa; seyrek an (ilk açılış) biraz keyifli.
 *   • backdrop-filter yok; prefers-reduced-motion'da hareket kalkar, solma kalır.
 * Tasarım: docs/design-system.md §7.33
 */

/* ============================================================
   [SAYFA GEÇİŞİ] günde onlarca kez: 180 ms, 4 px, güçlü ease-out
   ============================================================ */
.view { animation: wf-view-in 180ms var(--wf-ease-out); }
@keyframes wf-view-in { from { opacity: 0; transform: translateY(4px); } }

/* ============================================================
   [MALZEME] ana yüzeyler: üstten ince ışık kenarı + hafif dikey derinlik.
   Kendi rengi olan karolar (--c / --k) köşeden o rengin çok soluk ışığını alır.
   ============================================================ */
:is(.dsh-kpis, .dsh-card, .usr-table, .rl-list, .rl-detail, .shu-panel, .bk-card, .bk-files) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018) 46%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.065);
}
.usr-stat:not(.is-skel) {
  background:
    radial-gradient(140% 160% at 0% 0%, color-mix(in srgb, var(--c, transparent) 10%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.065);
}
.dsh-kpi { background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--k) 8%, transparent), transparent 62%); }

/* ============================================================
   [SEKMELER] seçim rengi kısa geçiş; Dashboard sekmelerinde kayan işaret
   ============================================================ */
.usr-seg button { transition: background-color var(--wf-dur-hover) ease, color var(--wf-dur-hover) ease; }
.dsh-tabs { position: relative; }
.dsh-tab { position: relative; z-index: 1; }
.dsh-tabs.has-mark .dsh-tab[aria-selected='true'] { background: transparent; }
.dsh-tab-mark {
  position: absolute;
  top: 3px;
  left: 0;
  z-index: 0;
  height: 30px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
  transition: transform 240ms var(--wf-ease-in-out), width 240ms var(--wf-ease-in-out);
}
.dsh-tab-mark.is-still { transition: none; }

/* ============================================================
   [KISAYOLLAR] her kısayol gittiği bölümün renginde
   ============================================================ */
.dsh-shortcut svg { color: color-mix(in srgb, var(--sc, #9b8f86) 78%, rgba(255, 255, 255, 0.3)); }
@media (hover: hover) and (pointer: fine) {
  .dsh-shortcut:hover svg { color: var(--sc, var(--theme-primary-light)); }
}

/* ============================================================
   [ERİŞİLEBİLİRLİK] hareket istemeyen: yer değiştirme yok, solma kalır
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .view { animation: wf-view-fade 160ms ease; }
  .sb-mark, .dsh-tab-mark { transition: opacity var(--wf-dur-state) ease; }
}
@keyframes wf-view-fade { from { opacity: 0; } }