/* ============================================================
   RedoNetwork UI — Motion sistemi
   Mikro etkileşimler 160–240ms, büyük geçişler 240–360ms.
   prefers-reduced-motion desteği zorunlu.
   ============================================================ */

@keyframes rn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rn-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes rn-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rn-spin { to { transform: rotate(360deg); } }
@keyframes rn-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes rn-pulse-ring { 0% { box-shadow: 0 0 0 0 var(--rn-volt-soft); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes rn-celebrate {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* Sayfa girişi: içerik parçalar hâlinde belirir (layout shift yok) */
.main > * { animation: rn-rise var(--dur-slow) var(--ease-out) backwards; }
.main > *:nth-child(1) { animation-delay: 0ms; }
.main > *:nth-child(2) { animation-delay: 40ms; }
.main > *:nth-child(3) { animation-delay: 80ms; }
.main > *:nth-child(4) { animation-delay: 120ms; }
.main > *:nth-child(n+5) { animation-delay: 150ms; }

/* Hedef tamamlandı mikro kutlaması */
.celebrate { animation: rn-celebrate 480ms var(--ease-out); }
.goal-hit { position: relative; }
.goal-hit::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  animation: rn-pulse-ring 1.4s var(--ease-out) 2;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Delight katmanı — hızlı, eğlenceli mikro-etkileşimler
   (prefers-reduced-motion bloğu dosyanın sonunda hepsini kapatır)
   ============================================================ */

/* KPI kartı: hover'da hafif kalkış + volt alt çizgisi büyür */
.card.stat { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.card.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card.stat .value { transition: background-size var(--dur) var(--ease); }
.card.stat:hover .value { background-size: 44px 3px; }

/* Buton basış hissi */
.btn { transition: transform 90ms var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.btn:active { transform: scale(.965); }
.btn.accent:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--rn-volt-strong) 45%, transparent); }

/* Nav: hover'da ikon kısa adım atar, aktif çentik yumuşak gelir */
.nav a .nav-icon { transition: transform var(--dur-fast) var(--ease); }
.nav a:hover .nav-icon { transform: translateX(2px); }

/* Kampanya/görev kartları */
.campaign-card:hover, .task-card:hover, .rn-board-card:hover, .customer-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-2);
}
.task-card, .rn-board-card, .customer-card { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }

/* İlerleme çubukları: sayfa açılışında 0'dan dolarak gelir */
@keyframes rn-fill { from { width: 0; } }
.cc-progress > *, .proj-progress > *, .gauge > * { animation: rn-fill .7s var(--ease-out) both; }
.progress > i { animation: rn-fill .7s var(--ease-out) both; }

/* Hedef %100+: halka ve değer kutlama nabzı */
.goal-hit .bar { filter: drop-shadow(0 0 6px var(--rn-volt-strong)); }
.goal-hit .ring-label strong { animation: rn-celebrate .9s var(--ease) 1; }

/* Tablo satırı: hover'da sol volt işareti */
.table tbody tr { transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.table tbody tr:hover { box-shadow: inset 3px 0 0 var(--rn-volt-strong); }

/* Rozet ve idot doğuşu */
.idot, .badge, .ibadge { animation: rn-pop .28s var(--ease-out) both; }

/* Sekme geçişi: aktif çizgi kayarak gelir hissi */
.wb-tab { position: relative; }
.wb-tab::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 2px; background: var(--rn-volt-strong); transition: left var(--dur-fast) var(--ease), right var(--dur-fast) var(--ease); }
.wb-tab:hover::after { left: 12px; right: 12px; }
.wb-tab.active { border-bottom-color: transparent; }
.wb-tab.active::after { left: 0; right: 0; }

/* Bildirim zili: yeni bildirim rozetinde tatlı sallanma */
@keyframes rn-ring { 0%,100% { transform: rotate(0); } 15% { transform: rotate(12deg); } 30% { transform: rotate(-10deg); } 45% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } }
.icon-btn:has(.dot-badge):hover svg { animation: rn-ring .7s var(--ease); transform-origin: top center; }

/* Boş durum ikonu nazikçe süzülür */
.empty-state > svg { animation: rn-float 3.2s ease-in-out infinite; }
@keyframes rn-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Reduced-motion: yukarıdaki delight katmanı dahil her şey kapanır */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cc-progress > *, .proj-progress > *, .gauge > *, .progress > i { animation: none !important; }
  .empty-state > svg, .icon-btn:has(.dot-badge):hover svg { animation: none !important; }
}