/* ===========================
   Macker AI Pro Login
=========================== */

.macker-login-page{
    position:relative;
    width:100%;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:80px 20px;

    overflow:hidden;
}

.macker-background{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at top,#3b82f650 0%,transparent 45%),
    radial-gradient(circle at bottom,#9333ea40 0%,transparent 45%),
    linear-gradient(180deg,#060913,#0b1220);

    z-index:1;
}

.macker-login-card{

    position:relative;
    z-index:5;

    width:100%;
    max-width:560px;

    padding:45px;

    border-radius:26px;

    background:rgba(15,23,42,.82);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
    0 0 80px rgba(59,130,246,.25);
}

/* Logo */

.macker-logo{

    text-align:center;
    margin-bottom:30px;

}

.macker-logo h1{

    color:#fff;
    font-size:42px;
    margin-bottom:8px;

}

.macker-logo p{

    color:#cbd5e1;
    font-size:15px;

}

/* Tabs */

.macker-tabs{

    display:flex;
    gap:10px;

    margin-bottom:25px;

}

.macker-tabs button{

    flex:1;

    height:48px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-weight:600;

    color:#fff;

    background:#1e293b;

    transition:.25s;

}

.macker-tabs button.active{

    background:linear-gradient(90deg,#06b6d4,#8b5cf6);

}

/* Form */

.macker-form{

    display:flex;
    flex-direction:column;

    gap:18px;

}

.macker-input input{

    width:100%;

    height:55px;

    padding:0 18px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.15);

    background:#111827;

    color:#fff;

    font-size:16px;

}

.macker-input input:focus{

    outline:none;

    border-color:#3b82f6;

}

/* Options */

.macker-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:14px;

    color:#d1d5db;

}

.macker-options a{

    color:#60a5fa;

    text-decoration:none;

}

/* Button */

.macker-btn{

    height:56px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    color:#fff;

    font-size:17px;

    font-weight:700;

    background:linear-gradient(90deg,#06b6d4,#8b5cf6);

}

/* Divider */

.macker-divider{

    text-align:center;

    margin:30px 0 20px;

    color:#cbd5e1;

}

/* Social */

.macker-socials{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.social-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:54px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    background:#1f2937;

    color:#fff;

    font-size:15px;

    transition:.25s;

}

.social-btn:hover{

    background:#374151;

}

.social-btn img{

    width:22px;

    height:22px;

}

/* Mobile */

@media(max-width:768px){

.macker-login-card{

    padding:30px;

}

.macker-logo h1{

    font-size:34px;

}

}