/* Giriş sayfası ek efektleri (custom.css içindeki .auth-* animasyonlarının ÜSTÜNE biner).
   Kaldırmak için login.php içindeki auth-fx.css / auth-fx.js satırlarını sil. */

@property --fx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* --- Hero: akan aurora ışıkları --- */
.fx-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; mix-blend-mode: screen; opacity: .55; }
.fx-aurora i {
    position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
    will-change: transform; /* yumuşak kenar radyal gradyanla: devasa blur filtresi yok */
}
.fx-aurora i:nth-child(1) { background: radial-gradient(circle closest-side, hsl(238 99% 62% / .55) 0%, transparent 100%); left: -12%; top: -18%; animation: fxDrift1 18s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(2) { background: radial-gradient(circle closest-side, hsl(280 85% 60% / .40) 0%, transparent 100%); right: -18%; top: 25%; animation: fxDrift2 22s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(3) { background: radial-gradient(circle closest-side, hsl(190 90% 55% / .32) 0%, transparent 100%); left: 15%; bottom: -25%; animation: fxDrift3 26s ease-in-out infinite alternate; }
@keyframes fxDrift1 { to { transform: translate(18vmax, 10vmax) scale(1.15); } }
@keyframes fxDrift2 { to { transform: translate(-14vmax, -8vmax) scale(.9); } }
@keyframes fxDrift3 { to { transform: translate(12vmax, -12vmax) scale(1.2); } }

/* İmleçle hafif paralaks (JS --px/--py yazar). */
.auth-hero-inner { translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -8px); transition: translate .25s ease-out; }

/* --- Kart: imleci izleyen 3B eğim + dönen ışık çerçevesi --- */
.auth-card.fx-ready {
    transform: perspective(900px) rotateX(calc(var(--ry, 0) * -3deg)) rotateY(calc(var(--rx, 0) * 3deg));
    transition: transform .18s ease-out, box-shadow .3s ease;
}
.auth-card::before {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 2.5px; opacity: .6;
    /* Yılan: baştaki parlak uç (pembe) geriye doğru mor ve maviye solan kuyruk. */
    background: conic-gradient(from var(--fx-a), transparent 0 22%, hsl(238 100% 62% / .9) 48%, hsl(280 90% 64%) 70%, hsl(330 90% 62%) 94%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}
@keyframes fxSpin { to { --fx-a: 360deg; } }

/* Hatalı girişte kart sallanır. */
.auth-card.fx-shake { animation: fxShake .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes fxShake {
    10%, 90% { translate: -2px 0; } 20%, 80% { translate: 4px 0; }
    30%, 50%, 70% { translate: -7px 0; } 40%, 60% { translate: 7px 0; }
}

.auth-card .input-ico { position: relative; }

/* Şifre göster/gizle */
.fx-eye {
    position: absolute; right: 8px; top: 50%; translate: 0 -50%; width: 30px; height: 30px;
    display: grid; place-items: center; border: 0; background: transparent; color: hsl(var(--muted-foreground));
    border-radius: 8px; cursor: pointer; transition: background .15s, color .15s;
}
.fx-eye:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.auth-card .input-ico:has(.fx-eye) .uk-input { padding-right: 40px; }

/* --- Buton: ışık süpürmesi + yükleniyor durumu --- */
.auth-card form > .uk-btn { position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .2s ease; }
.auth-card form > .uk-btn::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-120%);
    background: linear-gradient(100deg, transparent 30%, hsl(0 0% 100% / .35) 50%, transparent 70%);
}
.auth-card form > .uk-btn:hover::after { transform: translateX(120%); transition: transform .7s ease; }
.auth-card form > .uk-btn:hover { box-shadow: 0 8px 22px -8px hsl(var(--brand) / .7); }
.auth-card form > .uk-btn:active { transform: scale(.98); }
.auth-card form > .uk-btn.is-loading { pointer-events: none; opacity: .9; }
.fx-spin {
    width: 16px; height: 16px; border-radius: 50%; display: inline-block; vertical-align: -3px; margin-right: 8px;
    border: 2px solid hsl(0 0% 100% / .35); border-top-color: #fff; animation: fxRot .7s linear infinite;
}
@keyframes fxRot { to { rotate: 360deg; } }

/* Giriş başarılı: kart yukarı süzülerek kaybolur. */
.auth-wrap.fx-leaving .auth-card { transform: translateY(-14px) scale(.97); opacity: 0; transition: transform .35s ease, opacity .3s ease; }

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    .fx-aurora { display: none; }
    /* Çerçeve yılanı süs animasyonu; genel "hareketi azalt" kuralından muaf. */
    .auth-card::before { animation: fxSpin 4s linear infinite !important; }
    .auth-card.fx-ready { transform: none; }
    .auth-hero-inner { translate: none; }
}

/* =========================================================
   Açılış koreografisi: sol panel soldan, sağ panel sağdan fade-in.
   (custom.css'teki "perde" animasyonunun yerine geçer.)
   ========================================================= */
.auth-hero-overlay { animation: none; }

.auth-hero {
    animation: fxPanelL 1.15s cubic-bezier(.16, .84, .28, 1) backwards;
    will-change: transform, opacity;
}
.auth-form-side {
    animation: fxPanelR 1.15s cubic-bezier(.16, .84, .28, 1) .08s backwards;
}
@keyframes fxPanelL {
    from { opacity: 0; transform: translate3d(-140px, 0, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes fxPanelR {
    from { opacity: 0; transform: translate3d(140px, 0, 0); }
    to   { opacity: 1; transform: none; }
}

/* Bu sayfaya gelirken tarayıcının sayfa-geçişi çapraz solması açılış animasyonunu
   örtmesin: giriş sayfası geçişe katılmaz. */
@view-transition { navigation: none; }

/* İki panelin birleştiği çizgide tek seferlik ışık süpürmesi */
.auth-wrap { position: relative; }
.auth-wrap::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: calc(1.02 / 2.02 * 100%); width: 2px; z-index: 6;
    margin-left: -1px; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, transparent, hsl(var(--brand) / .9) 35%, hsl(280 85% 70% / .9) 65%, transparent);
    box-shadow: 0 0 22px 3px hsl(var(--brand) / .55);
    transform-origin: top; animation: fxSeam 1.3s cubic-bezier(.65, 0, .35, 1) .55s both;
}
@keyframes fxSeam {
    0%   { opacity: 0; transform: scaleY(0); }
    35%  { opacity: 1; transform: scaleY(1); transform-origin: top; }
    70%  { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
    100% { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
}

/* Logo: dönerek ve büyüyerek yerine oturur, ardından halka nabzı */
.auth-hero-logo { animation: fxLogo .9s cubic-bezier(.34, 1.56, .64, 1) .25s backwards; }
@keyframes fxLogo {
    from { opacity: 0; transform: scale(.5) rotate(-14deg); }
    to   { opacity: 1; transform: none; }
}

/* Kart açılırken ışık çerçevesi sonradan belirir */
.auth-card::before { animation: fxSpin 4s linear infinite, fxFadeIn .8s ease 1.1s backwards; }
@keyframes fxFadeIn { from { opacity: 0; } }

@media (max-width: 900px) {
    .auth-wrap::after { display: none; }
    .auth-hero { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-hero, .auth-form-side, .auth-hero-logo, .auth-wrap::after { animation: none; }
}

/* Toast: belirgin, uyarı rengine göre tonlanmış kenarlık (panel-ux.css ile aynı) */
.toast { border-color: hsl(var(--toast-accent) / .42); }

/* Hareket azaltma tercihi: aurora durur. Dönen çerçeve bilerek durmaz (yukarıdaki "süs animasyonu" kuralı):
   Windows'ta "Animasyon efektleri" kapalıysa tarayıcı reduce bildirir ve çerçeve masaüstünde de donuk kalıyordu. */
@media (prefers-reduced-motion: reduce) {
    .fx-aurora i { animation: none !important; }
}

/* Cloudflare Turnstile (Genel Ayarlar › Turnstile): şifre alanı ile giriş düğmesi arasında */
.auth-turnstile { display: flex; justify-content: center; min-height: 65px; margin: 0 0 1rem; }
.auth-ts-msg { margin: -.4rem 0 1rem; font-size: .78rem; line-height: 1.4; text-align: center; color: hsl(var(--danger)); }
.auth-ts-msg:empty { display: none; }