*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;
    margin:0;
    padding:0;

    font-family:"Segoe UI",sans-serif;

}

body{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #081426 0%,
        #0f3d91 50%,
        #2563eb 100%
    );

}

.login-card{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:420px;

    max-width:92vw;

    background:#fff;

    border-radius:28px;

    padding:45px;

    text-align:center;

    box-shadow:
        0 25px 80px rgba(0,0,0,.30);

    z-index:20;

}

.logo{

    width:90px;

    margin-bottom:25px;

}

h1{

    font-size:46px;

    color:#111827;

    margin-bottom:8px;

}

.subtitle{

    color:#6b7280;

    font-size:20px;

}
.login-form{

    margin-top:35px;

    text-align:left;

}

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    color:#374151;

    font-size:14px;

    font-weight:600;

}

.form-group input{

    width:100%;

    height:52px;

    border:1px solid #d1d5db;

    border-radius:12px;

    padding:0 16px;

    font-size:15px;

    outline:none;

    transition:.25s;

}

.form-group input:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

.login-form button{

    width:100%;

    height:54px;

    margin-top:12px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.login-form button:hover{

    background:#1d4ed8;

}
@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(18px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
/* =========================================================
   BACKGROUND LOGO
========================================================= */

.bg-logo{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}

.bg-logo::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

    background:radial-gradient(
    circle,
    rgba(59,130,246,.28) 0%,
    rgba(59,130,246,.15) 40%,
    transparent 75%
);

    animation:bgGlow 12s ease-in-out infinite;

}

.bg-logo img{

    width:950px;

    opacity:.18;

    animation:logoFloat 20s ease-in-out infinite;

    filter:

        brightness(1.2)

        drop-shadow(0 0 60px rgba(255,255,255,.15))

        drop-shadow(0 0 150px rgba(37,99,235,.25));

}


/* Hareket */

@keyframes logoFloat{

    0%{

        transform:
            translate(-35px,-20px)
            rotate(-5deg)
            scale(1);

    }

    25%{

        transform:
            translate(40px,-10px)
            rotate(3deg)
            scale(1.05);

    }

    50%{

        transform:
            translate(20px,30px)
            rotate(6deg)
            scale(1.08);

    }

    75%{

        transform:
            translate(-25px,15px)
            rotate(-3deg)
            scale(1.04);

    }

    100%{

        transform:
            translate(-35px,-20px)
            rotate(-5deg)
            scale(1);

    }

}

/* Mavi ışık */

@keyframes bgGlow{

    0%,
    100%{

        transform:scale(1);

        opacity:.7;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

}
/* ==========================================================
   PREMIUM BACKGROUND LIGHTING
========================================================== */

/* Sol Spot */

body::before{

    content:"";

    position:fixed;

    top:-300px;

    left:-250px;

    width:700px;

    height:1600px;

    background:linear-gradient(
        70deg,
        rgba(255,255,255,.22),
        rgba(255,255,255,.06),
        transparent 70%
    );

    transform:rotate(-25deg);

    filter:blur(60px);

    mix-blend-mode:screen;

    animation:leftSpot 10s ease-in-out infinite;

    pointer-events:none;

}


/* Sağ Spot */

body::after{

    content:"";

    position:fixed;

    top:-300px;

    right:-250px;

    width:700px;

    height:1600px;

    background:linear-gradient(
        -70deg,
        rgba(59,130,246,.35),
        rgba(59,130,246,.08),
        transparent 70%
    );

    transform:rotate(25deg);

    filter:blur(70px);

    mix-blend-mode:screen;

    animation:rightSpot 12s ease-in-out infinite;

    pointer-events:none;

}


/* Ortam Işığı */

.bg-logo::after{

    content:"";

    position:absolute;

    width:1100px;

    height:1100px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02),
            transparent 75%
        );

    animation:ambientLight 12s ease-in-out infinite;

}


/* Logo */

.bg-logo img{

    width:950px;

    opacity:.12;

    user-select:none;

    animation:

        logoFloat 22s ease-in-out infinite;

    filter:

        brightness(1.15)

        drop-shadow(0 0 40px rgba(255,255,255,.20))

        drop-shadow(0 0 90px rgba(59,130,246,.35))

        drop-shadow(0 0 180px rgba(59,130,246,.18));

}


/* Sol Spot Hareketi */

@keyframes leftSpot{

    0%,100%{

        transform:rotate(-25deg) translateX(0);

    }

    50%{

        transform:rotate(-18deg) translateX(50px);

    }

}

@keyframes rightSpot{

    0%,100%{

        transform:rotate(25deg) translateX(0);

    }

    50%{

        transform:rotate(18deg) translateX(-50px);

    }

}

/* Sağ Spot Hareketi */

@keyframes rightLight{

    0%{

        transform:
            translate(0,0)
            scale(1);

    }

    25%{

        transform:
            translate(-60px,25px)
            scale(1.05);

    }

    50%{

        transform:
            translate(-120px,90px)
            scale(1.18);

    }

    75%{

        transform:
            translate(-40px,20px)
            scale(1.06);

    }

    100%{

        transform:
            translate(0,0)
            scale(1);

    }

}


/* Ortam Işığı */

@keyframes lightSweep{

    0%{

        transform:

            rotate(25deg)

            translateX(-1200px);

    }

    100%{

        transform:

            rotate(25deg)

            translateX(1200px);

    }

}

.logo-light{

    position:absolute;

    width:260px;

    height:1400px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.65),

            rgba(255,255,255,.15),

            transparent

        );

    transform:

        rotate(25deg)

        translateX(-1200px);

    filter:blur(20px);

    animation:lightSweep 8s linear infinite;

}
.password-group{position:relative}.password-group input{padding-right:52px}.password-group .toggle-password{position:absolute;top:0;right:0;width:50px;height:52px;margin:0;border:0;border-radius:0 12px 12px 0;background:transparent;color:#64748b;font-size:15px}.password-group .toggle-password:hover{background:#eff5ff;color:#2563eb}.login-error{margin:24px 0 -10px;padding:12px 14px;border:1px solid #fecaca;border-radius:10px;background:#fef2f2;color:#b91c1c;font-size:13px;text-align:left}.login-error i{margin-right:6px}.login-home-link{display:inline-block;margin-top:22px;color:#52647a;font-size:14px;font-weight:600;text-decoration:none}.login-home-link:hover{color:#2563eb}.login-form button:disabled{opacity:.75;cursor:wait}@media(max-width:575px){.login-card{padding:32px 24px;border-radius:20px}.login-card .logo{width:70px;margin-bottom:15px}.login-card h1{font-size:36px}.subtitle{font-size:17px}}