/* ==========================================================
   Author Login Page
========================================================== */

.author-login-page{

    position: relative;

    min-height: calc(100vh - 180px);

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding:80px 0;

    background:
    radial-gradient(circle at top left,#fff2d8 0%,transparent 28%),
    radial-gradient(circle at bottom right,#ffe2d8 0%,transparent 25%),
    linear-gradient(135deg,#fffdf9 0%,#fff7ef 45%,#fff2e8 100%);
}


/* ===========================================
   Decorative Background
=========================================== */

.author-login-page::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,170,0,.28),
    rgba(255,130,40,.12),
    transparent 70%);

    filter:blur(8px);

}


.author-login-page::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-150px;

    bottom:-150px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,90,90,.18),
    rgba(255,140,0,.10),
    transparent 72%);

    filter:blur(10px);

}


/* ===========================================
Floating Glow Circles
=========================================== */

.author-login-page .container{

    position:relative;

    z-index:5;

}

.author-login-page .container::before{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#ff9d00;

    left:8%;

    top:20%;

    box-shadow:

    0 0 25px rgba(255,157,0,.7),

    0 0 60px rgba(255,157,0,.35);

}


.author-login-page .container::after{

    content:"";

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;

    background:#ff5e62;

    right:12%;

    bottom:25%;

    box-shadow:

    0 0 20px rgba(255,94,98,.8),

    0 0 45px rgba(255,94,98,.4);

}


/* ===========================================
Glass Card
=========================================== */

.author-login-page .card{

    position:relative;

    z-index:10;

    border:none;

    border-radius:26px;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:

    0 25px 60px rgba(0,0,0,.10),

    0 0 0 1px rgba(255,255,255,.35);

    transition:.35s;

}


.author-login-page .card:hover{

    transform:translateY(-5px);

    box-shadow:

    0 35px 70px rgba(0,0,0,.14),

    0 0 0 1px rgba(255,255,255,.45);

}


/* ===========================================
Logo
=========================================== */

.author-login-page img{

    max-height:70px;

}


/* ===========================================
Inputs
=========================================== */

.author-login-page .form-control{

    height:56px;

    border:none;

    background:#f5f7fb;

    border-radius:14px;

    box-shadow:none;

    transition:.25s;

}


.author-login-page .form-control:focus{

    background:#fff;

    border:1px solid #ff9d00;

    box-shadow:

    0 0 0 .25rem rgba(255,157,0,.18);

}


.author-login-page .input-group-text{

    background:#f5f7fb;

    border:none;

}


/* ===========================================
Button
=========================================== */

.author-login-page .btn-primary{

    height:58px;

    border:none;

    border-radius:14px;

    font-weight:700;

    letter-spacing:.4px;

    background:
    linear-gradient(135deg,
    #ff9d00,
    #ff7a18,
    #ff5e62);

    box-shadow:

    0 15px 35px rgba(255,122,24,.35);

}


.author-login-page .btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:

    0 20px 45px rgba(255,122,24,.45);

}


/* ===========================================
Links
=========================================== */

.author-login-page a{

    color:#ff7a18;

    font-weight:600;

    transition:.25s;

}

.author-login-page a:hover{

    color:#ff5e62;

}


/* ===========================================
Responsive
=========================================== */

@media(max-width:768px){

.author-login-page{

padding:40px 15px;

}

.author-login-page::before{

width:280px;
height:280px;

}

.author-login-page::after{

width:250px;
height:250px;

}

}



/* ==========================================
Brand Panel
========================================== */

.author-brand-panel{

    position:relative;

    z-index:5;

    padding-right:70px;

}

.author-brand-panel h1{

    font-size:58px;

    font-weight:800;

    line-height:1.15;

    color:#14213d;

    margin:30px 0;

}

.author-brand-panel h1 span{

    background:linear-gradient(
        135deg,
        #ff9d00,
        #ff7a18,
        #ff5e62
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
background-clip:text;
}

.author-brand-panel p{

    font-size:18px;

    color:#5f6575;

    line-height:1.9;

    margin-bottom:40px;

}

/* Badge */

.brand-badge{

    display:inline-flex;

    align-items:center;

    padding:12px 24px;

    border-radius:50px;

    background:#fff;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    color:#ff7a18;

    font-weight:700;

}

/* Features */

.brand-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.brand-features div{

    display:flex;

    align-items:center;

    gap:15px;

    padding:20px;

    border-radius:18px;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(15px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.3s;

}

.brand-features div:hover{

    transform:translateY(-6px);

}

.brand-features i{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:24px;

    color:#fff;

    background:linear-gradient(
        135deg,
        #ff9d00,
        #ff7a18,
        #ff5e62
    );

    box-shadow:0 15px 35px rgba(255,122,24,.35);

}

.brand-features span{

    font-weight:600;

    color:#14213d;

    line-height:1.5;

}


/* Responsive */

@media(max-width:992px){

.author-brand-panel{

display:none;

}

}

/* ==========================================================
Floating Premium Shapes
========================================================== */

.author-login-page .shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    z-index:1;

    animation:floatAnimation 9s ease-in-out infinite;

}


/* Top Left */

.shape-one{

    width:140px;

    height:140px;

    top:8%;

    left:8%;

    background:

    radial-gradient(circle,

    rgba(255,170,0,.40),

    rgba(255,170,0,.08),

    transparent);

}


/* Top Right */

.shape-two{

    width:85px;

    height:85px;

    top:12%;

    right:14%;

    background:

    radial-gradient(circle,

    rgba(255,94,98,.35),

    rgba(255,94,98,.05),

    transparent);

    animation-delay:2s;

}


/* Bottom Left */

.shape-three{

    width:90px;

    height:90px;

    bottom:15%;

    left:16%;

    background:

    radial-gradient(circle,

    rgba(255,140,0,.30),

    rgba(255,140,0,.05),

    transparent);

    animation-delay:4s;

}


/* Bottom Right */

.shape-four{

    width:180px;

    height:180px;

    bottom:6%;

    right:7%;

    background:

    radial-gradient(circle,

    rgba(255,120,0,.22),

    rgba(255,94,98,.06),

    transparent);

    animation-delay:1.5s;

}


/* Small Floating Dots */

.shape-five{

    width:16px;

    height:16px;

    top:30%;

    left:42%;

    background:#ff9d00;

    box-shadow:

    0 0 20px rgba(255,157,0,.65);

    animation-duration:6s;

}


.shape-six{

    width:12px;

    height:12px;

    bottom:26%;

    right:35%;

    background:#ff5e62;

    box-shadow:

    0 0 20px rgba(255,94,98,.55);

    animation-duration:8s;

}



/* ==========================================
Animation
========================================== */

@keyframes floatAnimation{

0%{

transform:

translateY(0)

translateX(0)

rotate(0deg);

}

25%{

transform:

translateY(-18px)

translateX(10px)

rotate(4deg);

}

50%{

transform:

translateY(8px)

translateX(-12px)

rotate(-4deg);

}

75%{

transform:

translateY(-10px)

translateX(8px)

rotate(3deg);

}

100%{

transform:

translateY(0)

translateX(0)

rotate(0deg);

}

}

.author-login-page .card::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:26px;

background:

linear-gradient(

135deg,

rgba(255,255,255,.9),

rgba(255,255,255,.15)

);



 /* Standard */
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    mask-composite: exclude;

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;



}

