/* ═══════════════════════════════════════════════════════════════════════════
   OGK PLATFORM — Motion Layer v1.0
   "Kayan efektler": üst yükleme çubuğu, sidebar kayan aktif çizgi, buton
   ripple, dropdown/alert giriş animasyonu, giriş sayfası hareketli gradient.
   Additive only — ogk-enhanced.css'teki kart/tablo/buton temel stillerine
   dokunmaz, sadece hareket katmanı ekler.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Üst navigasyon yükleme çubuğu ───────────────────────────────────── */
#ogk-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
  box-shadow: 0 0 8px rgba(139, 92, 246, .6);
  z-index: 10000;
  transition: width .3s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  opacity: 0;
}
#ogk-progress.is-active { opacity: 1; }

/* ── Sidebar: kayan aktif gösterge çizgisi ───────────────────────────── */
.sidebar .nav-item { position: relative; }
.sidebar .nav-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 3px;
  background: linear-gradient(180deg, #8b5cf6, #6366f1);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
  border-radius: 0 3px 3px 0;
}
.sidebar .nav-item.active::before { transform: scaleY(1); }
.sidebar .nav-item:not(.nav-profile) .nav-link {
  transition: padding-left .25s cubic-bezier(.22,1,.36,1), background .25s ease, color .25s ease;
}
.sidebar .nav-item:not(.nav-profile) .nav-link:hover { padding-left: 1.6rem; }
.sidebar .sub-menu .nav-link {
  transition: padding-left .2s cubic-bezier(.22,1,.36,1), color .2s ease;
}
.sidebar .sub-menu .nav-link:hover { padding-left: 2.6rem; }
.sidebar .menu-arrow { transition: transform .25s cubic-bezier(.22,1,.36,1); }
.sidebar [aria-expanded="true"] .menu-arrow { transform: rotate(90deg); }

/* ── Buton ripple ─────────────────────────────────────────────────────── */
.btn { position: relative; overflow: hidden; }
.ogk-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,.55);
  pointer-events: none;
  animation: ogkRipple .6s ease-out;
}
@keyframes ogkRipple { to { transform: scale(3); opacity: 0; } }

/* ── Dropdown giriş animasyonu ─────────────────────────────────────────
   fill-mode "both" DEĞİL: animasyon bitince transform (translateY(0) olsa
   bile) kalıcı kalırsa, içindeki position:fixed elemanlar (örn. bir modal
   tetikleyicisi) için görünmez bir containing-block oluşur. */
.dropdown-menu {
  animation: ogkFadeUp .2s cubic-bezier(.22,1,.36,1);
}
@keyframes ogkFadeUp {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Giriş (login) sayfası ────────────────────────────────────────────── */
body:has(.content-wrapper.auth) {
  background: linear-gradient(120deg, #1f0f38, #3b1d63, #6d2fa8, #3b1d63);
  background-size: 300% 300%;
  animation: ogkGradientShift 14s ease infinite;
}
.content-wrapper.auth .card,
.content-wrapper.auth .auth-form-light {
  animation: ogkAuthIn .6s cubic-bezier(.22,1,.36,1);
}
@keyframes ogkGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ogkAuthIn {
  from { opacity: 0; transform: translateY(24px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}