/* =====================================================================
   OmniSpace · v16 efekt katmanı (uygulama, yönetici paneli, giriş/kayıt)
   Canlı aurora arka plan · imleç ışığı · kayan menü göstergesi ·
   ışıklı kart kenarı · tıklama dalgası · sayfa geçişi
   ===================================================================== */

/* ---------- Aurora arka plan ---------- */
.fx .bg-scene { background: radial-gradient(120% 90% at 50% -10%, #0d1838 0%, #070c1d 55%, #04060f 100%); }
.fx-aurora { position: absolute; inset: -20%; filter: blur(70px) saturate(1.25); opacity: .85; }
.fx-aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: fxDrift 28s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(1) { width: 46vw; height: 46vw; left: 2%; top: 4%; background: radial-gradient(circle at 40% 40%, rgba(63,125,255,.55), transparent 65%); }
.fx-aurora i:nth-child(2) { width: 40vw; height: 40vw; right: 0; top: 18%; background: radial-gradient(circle at 50% 50%, rgba(141,92,246,.5), transparent 65%); animation-duration: 34s; animation-delay: -8s; }
.fx-aurora i:nth-child(3) { width: 36vw; height: 36vw; left: 30%; bottom: -4%; background: radial-gradient(circle at 50% 50%, rgba(31,214,198,.3), transparent 65%); animation-duration: 40s; animation-delay: -16s; }
.fx-aurora i:nth-child(4) { width: 28vw; height: 28vw; right: 18%; bottom: 8%; background: radial-gradient(circle at 50% 50%, rgba(255,111,181,.16), transparent 65%); animation-duration: 46s; animation-delay: -4s; }
@keyframes fxDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vw, 4vh, 0) scale(1.12); }
  100% { transform: translate3d(-4vw, -3vh, 0) scale(.94); }
}
.fx-stars { position: absolute; inset: 0; opacity: .5; background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 140px 90px, rgba(200,215,255,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 260px 170px, rgba(160,240,255,.55), transparent 60%),
    radial-gradient(1px 1px at 330px 40px, rgba(255,255,255,.5), transparent 60%);
  background-size: 360px 220px; animation: fxStars 120s linear infinite; mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent); -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent); }
@keyframes fxStars { to { background-position: 360px 220px; } }
.fx .bg-scene .blob { opacity: .14; }

/* ---------- İmleç ışığı ---------- */
.fx-cursor { position: fixed; left: 0; top: 0; z-index: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(110,120,255,.13) 0%, rgba(31,214,198,.05) 35%, transparent 65%); transform: translate(-999px, -999px); transition: opacity .4s; will-change: transform; }
body:not(:hover) .fx-cursor { opacity: 0; }
.fx .app, .fx .auth-shell { position: relative; z-index: 1; }

/* ---------- Kenar menü ---------- */
.fx .sidebar { background: linear-gradient(180deg, rgba(10,16,36,.78), rgba(6,10,24,.82)); box-shadow: inset -1px 0 0 rgba(150,172,255,.08); }
.fx .sidebar .logo svg { transition: transform .8s var(--ease); }
.fx .sidebar .logo:hover svg { transform: rotate(-24deg) scale(1.06); }
.fx .nav-item { transition: color .2s, background .2s, transform .2s var(--ease); }
.fx .nav-item svg { transition: transform .25s var(--ease), color .25s; }
.fx .nav-item:hover svg { transform: translateX(2px) scale(1.08); color: #9fd8ff; }
.fx .sidebar .nav-item[aria-current="page"] { background: transparent; box-shadow: none; }
.fx .sidebar .nav-item[aria-current="page"]::before { opacity: 0; }
.fx .sidebar .nav-item[aria-current="page"] svg { color: #fff; filter: drop-shadow(0 0 6px rgba(141,92,246,.8)); }
.fx-glider { position: absolute; left: 14px; right: 14px; top: 0; height: 44px; border-radius: 12px; pointer-events: none; z-index: 0; opacity: 0;
  background: linear-gradient(100deg, rgba(63,125,255,.26), rgba(141,92,246,.22) 55%, rgba(31,214,198,.12));
  box-shadow: inset 0 0 0 1px rgba(160,180,255,.28), 0 8px 28px -10px rgba(110,90,255,.7);
  transition: transform .45s cubic-bezier(.2,.9,.25,1.15), height .3s, opacity .3s; }
.fx-glider::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #3f7dff, #8d5cf6, #1fd6c6); box-shadow: 0 0 12px rgba(141,92,246,.9); }
.fx-glider::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%); background-size: 250% 100%; animation: fxSheen 3.6s ease-in-out infinite; }
@keyframes fxSheen { 0%, 60% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.fx .sidebar > .nav-item, .fx .sidebar > .nav-sep, .fx .sidebar > .logo, .fx .sidebar > .storage-meter { position: relative; z-index: 1; }

/* ---------- Üst çubuk ---------- */
.fx .topbar { background: rgba(6,10,24,.55); }
.fx .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(63,125,255,.6), rgba(141,92,246,.7), rgba(31,214,198,.5), transparent); background-size: 200% 100%; animation: fxLine 9s linear infinite; }
@keyframes fxLine { to { background-position: -200% 0; } }
.fx .search .input:focus { box-shadow: 0 0 0 4px rgba(63,125,255,.14), 0 0 24px -6px rgba(141,92,246,.6); }

/* ---------- Kartlarda imleçle parlayan kenar ---------- */
.fx-rel { position: relative; }
.fx-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .35s;
  padding: 1px; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(170,140,255,.9), rgba(31,214,198,.45) 35%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.fx-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
:hover > .fx-glow { opacity: 1; }

/* ---------- Düğmeler ---------- */
.fx .btn-primary { background: linear-gradient(110deg, #3f7dff, #8d5cf6 45%, #1fd6c6 70%, #8d5cf6 85%, #3f7dff); background-size: 260% 100%; background-position: 0 0; transition: background-position .7s var(--ease), box-shadow .25s, transform .15s; }
.fx .btn-primary:hover { background: linear-gradient(110deg, #3f7dff, #8d5cf6 45%, #1fd6c6 70%, #8d5cf6 85%, #3f7dff); background-size: 260% 100%; background-position: 100% 0; filter: none; }
.fx .btn:active, .fx .nav-item:active, .fx .icon-btn:active { transform: scale(.97); }
.fx-ink { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.fx-ink i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.38), rgba(160,170,255,.18) 50%, transparent 70%); transform: scale(0); animation: fxRipple .6s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes fxRipple { to { transform: scale(var(--s, 30)); opacity: 0; } }

/* ---------- Açılır menü, pencere, bildirim ---------- */
.fx .menu { background: rgba(12,18,40,.88); box-shadow: 0 24px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(160,180,255,.14), inset 0 1px 0 rgba(255,255,255,.06); transform-origin: top right; animation: fxPop .22s cubic-bezier(.2,.9,.3,1.2); }
.fx .menu button { transition: background .15s, padding-left .2s var(--ease); }
.fx .menu button:hover { padding-left: 16px; }
.fx .modal { animation: fxModal .32s cubic-bezier(.2,.9,.3,1.1); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(160,180,255,.16), 0 0 80px -30px rgba(110,90,255,.6); }
@keyframes fxPop { from { opacity: 0; transform: scale(.94) translateY(-4px); } }
@keyframes fxModal { from { opacity: 0; transform: translateY(16px) scale(.97); filter: blur(4px); } }
.fx .toast { backdrop-filter: blur(14px); box-shadow: 0 18px 50px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(160,180,255,.14); animation: fxToast .4s cubic-bezier(.2,.9,.3,1.2); }
@keyframes fxToast { from { opacity: 0; transform: translateX(30px) scale(.96); } }

/* ---------- Sayfa geçişi (içerik sırayla gelir) ---------- */
.fx .view.fx-enter > * { animation: fxIn .55s cubic-bezier(.2,.8,.2,1) both; }
.fx .view.fx-enter > *:nth-child(2) { animation-delay: .06s; }
.fx .view.fx-enter > *:nth-child(3) { animation-delay: .12s; }
.fx .view.fx-enter > *:nth-child(4) { animation-delay: .18s; }
.fx .view.fx-enter > *:nth-child(n+5) { animation-delay: .22s; }
@keyframes fxIn { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } }

/* ---------- Telefon alt menüsü ---------- */
.fx .mobile-nav { background: rgba(8,12,28,.82); backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 -12px 40px -20px rgba(0,0,0,.8); }
.fx .mobile-nav a, .fx .mobile-nav .mnav-btn { transition: color .2s, transform .2s var(--ease); }
.fx .mobile-nav a[aria-current="page"] svg { color: #fff; filter: drop-shadow(0 0 8px rgba(141,92,246,.9)); transform: translateY(-2px); transition: transform .3s var(--ease); }
.fx .mobile-nav a[aria-current="page"]::after { content: ""; position: absolute; top: -1px; left: 50%; width: 26px; height: 3px; margin-left: -13px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #3f7dff, #8d5cf6, #1fd6c6); box-shadow: 0 0 12px rgba(141,92,246,.9); }

/* ---------- Kaydırma çubuğu ---------- */
.fx ::-webkit-scrollbar { width: 10px; height: 10px; }
.fx ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(63,125,255,.45), rgba(141,92,246,.45)); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
.fx ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Giriş / kayıt sayfaları ---------- */
.fx .auth-card { box-shadow: 0 40px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(160,180,255,.14), 0 0 90px -40px rgba(110,90,255,.7); }

/* ---------- Hafif mod ve hareket azaltma ---------- */
html.lite .fx-aurora i, html.lite .fx-stars { animation: none; }
html.lite .fx-aurora { filter: blur(50px); }
@media (prefers-reduced-motion: reduce) {
  .fx-aurora i, .fx-stars, .fx-glider::after, .fx .topbar::after { animation: none !important; }
  .fx-glider { transition: none; }
  .fx .view.fx-enter > * { animation: none !important; }
  .fx-ink { display: none; }
}