/* ============================================
   OTO KOÇ - Modern Light Login Page
   Clean & Professional Design
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Inter', sans-serif;
    background: #050214;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- ULTRA Premium Animated Background ---
   Conic rainbow + çoklu mesh + büyük neon orb'lar + yıldız parıltıları
   Hedef: "WOW" etkisi yaratan, sürekli akan, neon-cyberpunk vibesi */
.login-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 55% at 18% 22%, #6366f1 0%, transparent 60%),
        radial-gradient(ellipse 55% 50% at 82% 18%, #ec4899 0%, transparent 60%),
        radial-gradient(ellipse 65% 55% at 78% 82%, #06b6d4 0%, transparent 60%),
        radial-gradient(ellipse 55% 50% at 22% 78%, #a855f7 0%, transparent 60%),
        radial-gradient(ellipse 45% 45% at 50% 50%, #f59e0b 0%, transparent 65%),
        radial-gradient(ellipse 90% 50% at 50% 100%, #be185d 0%, transparent 60%),
        linear-gradient(135deg, #050214 0%, #1e1b4b 35%, #4c1d95 75%, #312e81 100%);
    background-size: 200% 200%, 220% 220%, 180% 180%, 200% 200%, 150% 150%, 240% 200%, 100% 100%;
    background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%, 50% 100%, 0% 0%;
    animation: meshShift 18s ease-in-out infinite;
}

/* Conic rainbow halo — daha hızlı dönen, daha keskin */
.login-bg .login-conic {
    position: absolute;
    width: 130vmax;
    height: 130vmax;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        rgba(244, 114, 182, 0.55) 0deg,
        rgba(168, 85, 247, 0.6) 40deg,
        rgba(99, 102, 241, 0.55) 80deg,
        rgba(14, 165, 233, 0.6) 120deg,
        rgba(34, 211, 238, 0.55) 160deg,
        rgba(16, 185, 129, 0.5) 200deg,
        rgba(245, 158, 11, 0.6) 240deg,
        rgba(239, 68, 68, 0.6) 280deg,
        rgba(217, 70, 239, 0.55) 320deg,
        rgba(244, 114, 182, 0.55) 360deg
    );
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.85;
    animation: conicSpin 18s linear infinite;
    pointer-events: none;
}

@keyframes conicSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Neon lazer ışınları — ekrandan diagonal geçen dramatik ışık çubukları */
.login-bg::before,
.login-bg::after {
    /* mevcut blob stilleri yukarıda zaten var, bunları override etmeyeceğiz */
}

/* Floating renkli geometrik şekiller — döner, akar, parıldar */
.login-shapes {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.login-shapes .shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    mix-blend-mode: screen;
    opacity: 0.7;
}
.login-shapes .shape.s1 {
    width: 280px; height: 280px;
    top: 8%; left: -4%;
    background: radial-gradient(circle, #f472b6 0%, transparent 70%);
    animation: shapeFloat1 14s ease-in-out infinite;
}
.login-shapes .shape.s2 {
    width: 240px; height: 240px;
    top: 18%; right: -3%;
    background: radial-gradient(circle, #38bdf8 0%, transparent 70%);
    animation: shapeFloat2 16s ease-in-out infinite;
}
.login-shapes .shape.s3 {
    width: 320px; height: 320px;
    bottom: 12%; left: 5%;
    background: radial-gradient(circle, #a78bfa 0%, transparent 70%);
    animation: shapeFloat3 18s ease-in-out infinite;
}
.login-shapes .shape.s4 {
    width: 260px; height: 260px;
    bottom: 8%; right: 3%;
    background: radial-gradient(circle, #fbbf24 0%, transparent 70%);
    animation: shapeFloat4 15s ease-in-out infinite;
}
.login-shapes .shape.s5 {
    width: 200px; height: 200px;
    top: 45%; left: 8%;
    background: radial-gradient(circle, #34d399 0%, transparent 70%);
    animation: shapeFloat5 13s ease-in-out infinite;
}
.login-shapes .shape.s6 {
    width: 220px; height: 220px;
    top: 55%; right: 10%;
    background: radial-gradient(circle, #fb7185 0%, transparent 70%);
    animation: shapeFloat6 17s ease-in-out infinite;
}

@keyframes shapeFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(150px, 80px) scale(1.2); }
    66% { transform: translate(-60px, 200px) scale(0.85); }
}
@keyframes shapeFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-180px, 120px) scale(1.3); }
}
@keyframes shapeFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(80px, -100px) scale(1.15); }
    50% { transform: translate(180px, 60px) scale(0.9); }
    75% { transform: translate(60px, 140px) scale(1.1); }
}
@keyframes shapeFloat4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-120px, -80px) scale(1.2); }
}
@keyframes shapeFloat5 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(120px, -50px) scale(1.25); }
    66% { transform: translate(220px, 80px) scale(0.85); }
}
@keyframes shapeFloat6 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-200px, -60px) scale(1.15); }
}

/* Yatay neon ışık çizgileri — ekrandan akıyormuş gibi */
.login-beams {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.login-beams::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 2px;
    top: 30%;
    left: -50%;
    background: linear-gradient(90deg, transparent, #f472b6 30%, #06b6d4 50%, #fbbf24 70%, transparent);
    box-shadow: 0 0 30px rgba(244, 114, 182, 0.8), 0 0 60px rgba(6, 182, 212, 0.5);
    animation: beamMove 7s linear infinite;
    transform: rotate(-8deg);
    opacity: 0.65;
}
.login-beams::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 2px;
    bottom: 25%;
    right: -50%;
    background: linear-gradient(90deg, transparent, #a78bfa 30%, #34d399 50%, #fb7185 70%, transparent);
    box-shadow: 0 0 30px rgba(167, 139, 250, 0.8), 0 0 60px rgba(52, 211, 153, 0.5);
    animation: beamMove2 9s linear infinite;
    transform: rotate(6deg);
    opacity: 0.6;
}

@keyframes beamMove {
    from { transform: translateX(-30%) rotate(-8deg); }
    to { transform: translateX(30%) rotate(-8deg); }
}
@keyframes beamMove2 {
    from { transform: translateX(30%) rotate(6deg); }
    to { transform: translateX(-30%) rotate(6deg); }
}

/* Glitter / yıldız parıltıları — küçük ışık noktacıkları, twinkle efekti */
.login-bg .login-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.9), transparent 60%),
        radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.7), transparent 60%),
        radial-gradient(1.5px 1.5px at 38% 12%, rgba(244,114,182,0.9), transparent 60%),
        radial-gradient(1px 1px at 52% 28%, rgba(255,255,255,0.85), transparent 60%),
        radial-gradient(1px 1px at 68% 8%, rgba(34,211,238,0.9), transparent 60%),
        radial-gradient(2px 2px at 78% 45%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1px 1px at 88% 22%, rgba(168,85,247,0.9), transparent 60%),
        radial-gradient(1.5px 1.5px at 8% 60%, rgba(255,255,255,0.7), transparent 60%),
        radial-gradient(1px 1px at 28% 75%, rgba(245,158,11,0.85), transparent 60%),
        radial-gradient(1.5px 1.5px at 45% 88%, rgba(255,255,255,0.85), transparent 60%),
        radial-gradient(1px 1px at 62% 70%, rgba(239,68,68,0.9), transparent 60%),
        radial-gradient(2px 2px at 82% 78%, rgba(255,255,255,0.7), transparent 60%),
        radial-gradient(1px 1px at 95% 60%, rgba(34,197,94,0.9), transparent 60%);
    animation: starsTwinkle 4s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes starsTwinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@keyframes meshShift {
    0%, 100% {
        background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%, 0% 0%;
    }
    25% {
        background-position: 30% 20%, 70% 30%, 60% 70%, 30% 70%, 60% 40%, 0% 0%;
    }
    50% {
        background-position: 60% 40%, 40% 60%, 30% 40%, 70% 40%, 40% 60%, 0% 0%;
    }
    75% {
        background-position: 20% 70%, 60% 80%, 80% 30%, 50% 20%, 30% 30%, 0% 0%;
    }
}

/* Büyük parlayan ışık küresi 1 — sıcak gradient (turuncu/pembe) */
.login-bg::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    top: -250px;
    right: -200px;
    background: radial-gradient(circle, rgba(244, 114, 182, 0.55) 0%, rgba(251, 191, 36, 0.35) 35%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    animation: blobMove1 22s ease-in-out infinite;
    mix-blend-mode: screen;
}

/* Büyük parlayan ışık küresi 2 — soğuk gradient (cyan/mavi) */
.login-bg::after {
    content: '';
    position: absolute;
    width: 650px;
    height: 650px;
    bottom: -250px;
    left: -150px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.55) 0%, rgba(139, 92, 246, 0.4) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    animation: blobMove2 25s ease-in-out infinite;
    mix-blend-mode: screen;
}

@keyframes blobMove1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-120px, 100px) scale(1.15); }
    50% { transform: translate(-60px, 200px) scale(0.9); }
    75% { transform: translate(80px, 80px) scale(1.08); }
}

@keyframes blobMove2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(100px, -80px) scale(1.12); }
    50% { transform: translate(180px, -160px) scale(0.88); }
    75% { transform: translate(60px, -100px) scale(1.06); }
}

/* Aurora dalgaları + ekstra ışık katmanı */
.login-particles::before {
    content: '';
    position: absolute;
    width: 140%;
    height: 60%;
    top: 20%;
    left: -20%;
    background:
        radial-gradient(ellipse 40% 30% at 30% 50%, rgba(168, 85, 247, 0.35), transparent 60%),
        radial-gradient(ellipse 35% 25% at 70% 50%, rgba(34, 211, 238, 0.3), transparent 60%);
    filter: blur(50px);
    animation: auroraSweep 16s ease-in-out infinite;
    mix-blend-mode: screen;
    transform-origin: center;
}

.login-particles::after {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    top: 8%;
    left: 4%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: morphShape 14s ease-in-out infinite;
    box-shadow: inset 0 0 80px rgba(255, 255, 255, 0.05);
}

@keyframes auroraSweep {
    0%, 100% { transform: translateX(0) skewY(0deg); opacity: 0.7; }
    50% { transform: translateX(8%) skewY(-3deg); opacity: 1; }
}

@keyframes morphShape {
    0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(0deg); }
    25% { border-radius: 58% 42% 35% 65% / 55% 60% 40% 45%; }
    50% { border-radius: 50% 50% 60% 40% / 35% 65% 35% 65%; transform: rotate(90deg); }
    75% { border-radius: 40% 60% 50% 50% / 60% 35% 65% 35%; }
}

/* --- Floating Particles --- */
.login-particles {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: particleFloat linear infinite;
}

/* Renkli parlayan parçacıklar — her biri farklı renk + glow */
.particle:nth-child(1)  { width: 8px;  height: 8px;  background: #f472b6; box-shadow: 0 0 16px 4px rgba(244,114,182,.7), 0 0 32px 8px rgba(244,114,182,.35); left: 8%;  animation-duration: 14s; animation-delay: 0s; }
.particle:nth-child(2)  { width: 10px; height: 10px; background: #06b6d4; box-shadow: 0 0 18px 5px rgba(6,182,212,.7),  0 0 36px 10px rgba(6,182,212,.35); left: 18%; animation-duration: 16s; animation-delay: 2s; }
.particle:nth-child(3)  { width: 7px;  height: 7px;  background: #fbbf24; box-shadow: 0 0 14px 4px rgba(251,191,36,.75), 0 0 28px 8px rgba(251,191,36,.4); left: 28%; animation-duration: 11s; animation-delay: 4s; }
.particle:nth-child(4)  { width: 9px;  height: 9px;  background: #a78bfa; box-shadow: 0 0 16px 4px rgba(167,139,250,.7), 0 0 32px 9px rgba(167,139,250,.35); left: 38%; animation-duration: 15s; animation-delay: 1s; }
.particle:nth-child(5)  { width: 8px;  height: 8px;  background: #34d399; box-shadow: 0 0 16px 4px rgba(52,211,153,.7), 0 0 32px 8px rgba(52,211,153,.35); left: 52%; animation-duration: 12s; animation-delay: 3s; }
.particle:nth-child(6)  { width: 11px; height: 11px; background: #ec4899; box-shadow: 0 0 20px 6px rgba(236,72,153,.7), 0 0 40px 12px rgba(236,72,153,.35); left: 62%; animation-duration: 18s; animation-delay: 5s; }
.particle:nth-child(7)  { width: 7px;  height: 7px;  background: #38bdf8; box-shadow: 0 0 14px 4px rgba(56,189,248,.75), 0 0 28px 8px rgba(56,189,248,.4); left: 72%; animation-duration: 13s; animation-delay: 0.5s; }
.particle:nth-child(8)  { width: 9px;  height: 9px;  background: #fb923c; box-shadow: 0 0 16px 5px rgba(251,146,60,.7), 0 0 32px 10px rgba(251,146,60,.35); left: 82%; animation-duration: 14s; animation-delay: 2.5s; }
.particle:nth-child(9)  { width: 8px;  height: 8px;  background: #c084fc; box-shadow: 0 0 16px 4px rgba(192,132,252,.7), 0 0 32px 9px rgba(192,132,252,.35); left: 90%; animation-duration: 16s; animation-delay: 1.5s; }
.particle:nth-child(10) { width: 10px; height: 10px; background: #2dd4bf; box-shadow: 0 0 18px 5px rgba(45,212,191,.7), 0 0 36px 10px rgba(45,212,191,.35); left: 5%;  animation-duration: 19s; animation-delay: 6s; }
.particle:nth-child(11) { width: 7px;  height: 7px;  background: #f87171; box-shadow: 0 0 14px 4px rgba(248,113,113,.75), 0 0 28px 8px rgba(248,113,113,.4); left: 45%; animation-duration: 10s; animation-delay: 3.5s; }
.particle:nth-child(12) { width: 9px;  height: 9px;  background: #818cf8; box-shadow: 0 0 16px 5px rgba(129,140,248,.7), 0 0 32px 10px rgba(129,140,248,.35); left: 68%; animation-duration: 20s; animation-delay: 7s; }

@keyframes particleFloat {
    0%   { transform: translateY(100vh) translateX(0) scale(0.6); opacity: 0; }
    8%   { opacity: 1; transform: translateY(85vh) translateX(10px) scale(1); }
    35%  { transform: translateY(60vh) translateX(-25px) scale(1.1); }
    65%  { transform: translateY(30vh) translateX(20px) scale(0.95); }
    92%  { opacity: 1; transform: translateY(5vh) translateX(-15px) scale(1.05); }
    100% { transform: translateY(-150px) translateX(0) scale(0.7); opacity: 0; }
}

/* --- Login Container --- */
.login-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 460px;
    padding: 20px;
    animation: containerEntry 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(40px) scale(0.96);
}

@keyframes containerEntry {
    0% { opacity: 0; transform: translateY(40px) scale(0.96); filter: blur(8px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* --- Glass Card --- */
.login-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(40px) saturate(1.8);
    -webkit-backdrop-filter: blur(40px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    padding: 52px 44px 44px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.9),
        0 0 40px rgba(239, 68, 68, 0.25),
        0 0 80px rgba(239, 68, 68, 0.15),
        0 0 120px rgba(239, 68, 68, 0.08),
        0 25px 60px -12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    position: relative;
    overflow: hidden;
    animation: cardGlow 4s ease-in-out infinite;
}

/* Top animated gradient line */
.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6, #06b6d4, #f59e0b);
    background-size: 300% 100%;
    animation: gradientLine 4s ease infinite;
}

@keyframes gradientLine {
    0% { background-position: 0% 0%; }
    100% { background-position: 300% 0%; }
}

@keyframes cardGlow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.9),
            0 0 40px rgba(239, 68, 68, 0.2),
            0 0 80px rgba(239, 68, 68, 0.1),
            0 25px 60px -12px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 1);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.9),
            0 0 50px rgba(239, 68, 68, 0.35),
            0 0 100px rgba(239, 68, 68, 0.2),
            0 0 140px rgba(239, 68, 68, 0.1),
            0 25px 60px -12px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 1);
    }
}

/* Corner accent light */
.login-card::after {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* --- Logo Area --- */
.login-logo {
    text-align: center;
    margin-bottom: 36px;
    animation: logoReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes logoReveal {
    0% { opacity: 0; transform: translateY(-20px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.login-logo-icon {
    width: 200px;
    height: 200px;
    margin: 0 auto 10px;
    position: relative;
    animation: logoFloat 5s ease-in-out infinite;
}

.login-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
    padding: 22px;
    /* Sade beyaz daire + yumuşak neon glow (mor-pembe-amber halo) */
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.8),
        0 12px 36px rgba(244, 114, 182, 0.45),
        0 0 60px rgba(139, 92, 246, 0.35),
        0 0 90px rgba(245, 158, 11, 0.25);
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Logo glow ring KALDIRILDI (dönen conic kalkan) — yerine sabit rainbow border, doğrudan img'da */
.login-logo-icon::before { display: none !important; }
.login-logo-icon::after  { display: none !important; }

@keyframes logoPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.06); opacity: 0; }
}


/* --- Security Badge (removed from top, now in footer) --- */

/* --- Form --- */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: formReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

@keyframes formReveal {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Stage başlığı — gradient yazı + alt çizgi animasyonu */
.stage-title {
    font-size: 26px;
    font-weight: 800;
    text-align: center;
    margin: 8px 0 4px;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #06b6d4 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: titleGradient 6s ease infinite;
    position: relative;
}

.stage-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    margin: 8px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #6366f1, #ec4899, #06b6d4);
    background-size: 200% 100%;
    animation: titleGradient 6s ease infinite;
}

@keyframes titleGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.stage-hint {
    font-size: 13px;
    text-align: center;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 4px;
}

/* --- Input Group --- */
.login-input-group {
    position: relative;
}

.login-input-group .input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #818cf8;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 2;
}

.login-input-group input {
    width: 100%;
    padding: 19px 18px 19px 52px;
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 16px;
    color: #1e293b;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    position: relative;
    z-index: 1;
    background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(135deg, #6366f1, #ec4899, #06b6d4);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12);
}

.login-input-group input::placeholder {
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: none;
}

.login-input-group input:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.18);
}

.login-input-group input:focus {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.15),
        0 12px 28px rgba(236, 72, 153, 0.18),
        0 6px 16px rgba(6, 182, 212, 0.15);
}

.login-input-group:focus-within .input-icon {
    color: #6366f1;
    transform: translateY(-50%) scale(1.12);
}

/* Input glow on focus */
.login-input-group::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.login-input-group:focus-within::after {
    opacity: 1;
}

/* --- Password Toggle --- */
.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 52px;
}

.password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 15px;
    cursor: pointer;
    padding: 4px;
    z-index: 2;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.password-toggle:hover {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
}

/* --- Error Message — üst-orta floating toast --- */
.login-error {
    display: none;
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    align-items: center;
    gap: 12px;
    padding: 14px 22px 14px 18px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    border-radius: 50px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    box-shadow:
        0 12px 32px rgba(239, 68, 68, 0.45),
        0 4px 12px rgba(220, 38, 38, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    max-width: 90vw;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.login-error.show {
    display: flex;
    animation: errorToastIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards, errorToastOut 0.4s ease 3.6s forwards;
}

.login-error i {
    font-size: 18px;
    color: #ffffff;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

@keyframes errorToastIn {
    0% { transform: translateX(-50%) translateY(-30px) scale(0.85); opacity: 0; }
    60% { transform: translateX(-50%) translateY(4px) scale(1.04); opacity: 1; }
    100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

@keyframes errorToastOut {
    0% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-20px) scale(0.92); opacity: 0; }
}

/* --- Submit Button --- */
.login-btn {
    position: relative;
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 35%, #ec4899 70%, #f59e0b 100%);
    background-size: 200% 200%;
    color: white;
    font-size: 16px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    overflow: hidden;
    letter-spacing: 0.5px;
    margin-top: 8px;
    animation: btnReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both, btnGradientShift 6s ease infinite;
    box-shadow:
        0 10px 28px rgba(99, 102, 241, 0.35),
        0 4px 12px rgba(236, 72, 153, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

@keyframes btnGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes btnReveal {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Shimmer effect */
.login-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.6s ease;
}

.login-btn:hover::before {
    left: 100%;
}

.login-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 40px rgba(79, 70, 229, 0.35),
        0 0 60px rgba(99, 102, 241, 0.1);
    background: linear-gradient(135deg, #5b52f0, #8b5cf6);
}

.login-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.25);
}

.login-btn .btn-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.login-btn .btn-content .btn-icon {
    font-size: 17px;
    transition: transform 0.3s ease;
}

.login-btn:hover .btn-content .btn-icon {
    transform: translateX(4px);
}

/* --- Loading State --- */
.login-btn.loading {
    pointer-events: none;
    opacity: 0.85;
}

.login-btn.loading .btn-content .btn-text,
.login-btn.loading .btn-content .btn-icon {
    display: none;
}

.login-spinner {
    display: none;
    position: relative;
    z-index: 1;
}

.login-btn.loading .login-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.spinner-circle {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spinnerRotate 0.7s linear infinite;
}

@keyframes spinnerRotate {
    to { transform: rotate(360deg); }
}

.spinner-text {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.login-btn:disabled {
    cursor: not-allowed;
}

/* --- Footer --- */
.login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(99, 102, 241, 0.08);
    animation: footerReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}

@keyframes footerReveal {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Security badge at bottom */
.security-badge-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(99, 102, 241, 0.06));
    border: 1px solid rgba(6, 182, 212, 0.15);
    border-radius: 10px;
}

.security-badge-bottom i {
    font-size: 14px;
    color: #0891b2;
    animation: shieldPulse 2s ease-in-out infinite;
}

@keyframes shieldPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.security-badge-bottom span {
    font-size: 10px;
    color: #0e7490;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.security-badge-bottom .lock-dots {
    display: flex;
    gap: 3px;
    margin-left: 2px;
}

.security-badge-bottom .lock-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #0891b2;
    opacity: 0.5;
    animation: dotBlink 1.5s ease-in-out infinite;
}

.security-badge-bottom .lock-dot:nth-child(2) { animation-delay: 0.2s; }
.security-badge-bottom .lock-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBlink {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* --- Copyright (inside card) --- */
.login-copyright-inner {
    text-align: center;
    margin-top: 16px;
    padding: 14px 20px;
    background: rgba(99, 102, 241, 0.03);
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: 12px;
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: 0.5px;
    line-height: 1.8;
    animation: footerReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

.anka-link {
    color: #6366f1;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 11px;
    transition: all 0.3s ease;
}

.anka-link:hover {
    color: #4f46e5;
    text-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
}

/* --- Responsive --- */
@media (max-width: 480px) {
    .login-container {
        padding: 16px;
    }

    .login-card {
        padding: 40px 28px 36px;
        border-radius: 24px;
    }

    .login-logo-icon {
        width: 120px;
        height: 120px;
    }

    .security-badge {
        padding: 8px 14px;
    }

    .security-badge span {
        font-size: 10px;
    }

    .login-input-group input {
        padding: 15px 15px 15px 46px;
        font-size: 14px;
    }

    .login-btn {
        padding: 15px;
        font-size: 15px;
    }
}

@media (max-height: 700px) {
    .login-card {
        padding: 36px 36px 32px;
    }

    .login-logo {
        margin-bottom: 28px;
    }

    .login-logo-icon {
        width: 120px;
        height: 120px;
        margin-bottom: 8px;
    }

    .login-form {
        gap: 14px;
    }

    .security-badge {
        margin-bottom: 20px;
    }

    .login-footer {
        margin-top: 20px;
        padding-top: 16px;
    }
}

/* --- Input autofill override --- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #1e293b !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    border-color: #c7d2fe !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* --- Selection --- */
::selection {
    background: rgba(99, 102, 241, 0.2);
    color: #1e293b;
}

/* --- Success animation --- */
@keyframes successPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.login-btn.success {
    animation: successPulse 1s ease-out;
}


/* ============================================================
   Glass / Seffaf Mod (login-card'a 'transparent' class verilirse)
   Beyaz card kalkar, logo card disinda ustte yuzer, OTO KOÇ + rainbow
   cizgi basliga entegre. Hard rollback: login.php'den 'transparent' class'i kaldir.
   ============================================================ */
.login-card.transparent {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(18px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    overflow: visible !important;
    padding: 90px 36px 32px !important;
    animation: none !important;
}
.login-card.transparent::before { display: none !important; }
.login-card.transparent::after  { display: none !important; }

.login-card.transparent .login-logo {
    position: absolute;
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 5;
}
.login-card.transparent .login-logo-icon {
    width: 150px;
    height: 150px;
    margin: 0;
}
.login-card.transparent .login-logo-icon img {
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #ffffff 0%, #fef7e8 70%, #fde68a 100%);
    padding: 18px;
    box-shadow:
        0 12px 40px rgba(244, 114, 182, 0.5),
        0 0 32px rgba(245, 158, 11, 0.5),
        0 0 0 5px rgba(255, 255, 255, 0.85);
}

.login-card.transparent .stage-title {
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin: 0 0 6px;
    text-shadow: 0 2px 12px rgba(15, 23, 42, 0.35);
    background: linear-gradient(90deg, #fff 0%, #fde68a 50%, #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.login-card.transparent .stage-title::after {
    content: '';
    display: block;
    width: 80%;
    height: 3px;
    margin: 8px auto 0;
    background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6, #06b6d4, #f59e0b);
    background-size: 300% 100%;
    border-radius: 2px;
    animation: gradientLine 4s ease infinite;
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.6);
}

.login-card.transparent .input-wrap input,
.login-card.transparent .login-input {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    color: #1e293b !important;
}
.login-card.transparent .input-wrap input::placeholder { color: #64748b; }

.login-card.transparent .login-footer,
.login-card.transparent .secure-link {
    color: #fff !important;
}
.login-card.transparent .login-footer * { color: #fff !important; }
.login-card.transparent .secure-link {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}