/* ===================================================================
   DIES SPORT CENTER
   MEMBER PORTAL
   LOGIN PAGE

   File : login.css
   Author : ChatGPT + Ihfan
=================================================================== */


/* ===================================================================
   GOOGLE FONT
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/* ===================================================================
   ROOT COLOR
=================================================================== */

:root{

    --primary:#FFD54F;
    --primary-hover:#FFE082;

    --dark:#111111;
    --dark2:#171717;
    --dark3:#222222;

    --white:#ffffff;

    --text:#d7d7d7;
    --text-light:#9f9f9f;

    --border:#333333;

    --radius:18px;

    --transition:.35s;

}


/* ===================================================================
   RESET
=================================================================== */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html,
body{

    width:100%;
    height:100%;

    font-family:'Poppins',sans-serif;

    background:var(--dark);

    overflow:hidden;

}


/* ===================================================================
   WRAPPER
=================================================================== */

.dsc-login-wrapper{

    display:flex;

    width:100%;

    height:100vh;

}


/* ===================================================================
   LEFT PANEL
=================================================================== */

.dsc-login-left{

    position:relative;

    width:50%;

    height:100vh;

    background:url("../img/login.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    overflow:hidden;

}


/* ===================================================================
   OVERLAY
=================================================================== */

.dsc-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(0,0,0,.35),

            rgba(0,0,0,.75)

        );

}


/* ===================================================================
   LEFT CONTENT
=================================================================== */

.dsc-left-content{

    position:relative;

    z-index:2;

    height:100%;

    padding:50px 60px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}


/* ===================================================================
   BRAND
=================================================================== */

.dsc-brand{

    display:flex;

    flex-direction:column;

}

.dsc-logo{

    width:90px;

    margin-bottom:20px;

}

.dsc-brand h2{

    color:#ffffff;

    font-size:34px;

    font-weight:700;

    margin-bottom:6px;

}

.dsc-brand span{

    color:var(--primary);

    letter-spacing:3px;

    font-size:14px;

    font-weight:500;

}


/* ===================================================================
   HERO
=================================================================== */

.dsc-hero{

    max-width:520px;
    margin-top: 100px;

}


.dsc-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:var(--primary);

    font-size:13px;

    letter-spacing:4px;

    font-weight:600;

}


.dsc-hero h1{

    color:#ffffff;

    font-size:50px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:22px;

}


.dsc-hero p{

    color:var(--text);

    font-size:16px;

    line-height:30px;

}


/* ===================================================================
   FEATURES
=================================================================== */

.dsc-features{

    margin-top:30px;

}


.feature-item{

    display:flex;

    align-items:center;

    margin-bottom:12px;

    color:#ffffff;

    font-size:15px;

    font-weight:500;

}


.feature-item i{

    width:26px;

    color:var(--primary);

    font-size:17px;

}


/* ===================================================================
   FEATURE HOVER
=================================================================== */

.feature-item{

    transition:var(--transition);

}

.feature-item:hover{

    transform:translateX(5px);

}


/* ===================================================================
   ANIMATION
=================================================================== */

.dsc-brand{

    animation:fadeDown .8s ease;

}

.dsc-hero{

    animation:fadeLeft 1s ease;

}

.dsc-features{

    animation:fadeUp 1.2s ease;

}


/* ===================================================================
   KEYFRAME
=================================================================== */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-30px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/* ===================================================================
   RIGHT PANEL
=================================================================== */

.dsc-login-right{

    width:50%;

    height:100vh;

    background:var(--dark2);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:60px;

}


/* ===================================================================
   LOGIN CARD
=================================================================== */

.dsc-login-card{

    width:100%;

    max-width:480px;

    animation:fadeRight .8s ease;

}


.dsc-login-header{

    margin-bottom:35px;

}


.dsc-login-header h2{

    color:#ffffff;

    font-size:42px;

    font-weight:700;

    margin-bottom:10px;

}


.dsc-login-header p{

    color:var(--text-light);

    line-height:28px;

    font-size:15px;

}


/* ===================================================================
   FORM
=================================================================== */

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:10px;

    color:#ffffff;

    font-weight:600;

    font-size:14px;

}


/* ===================================================================
   INPUT GROUP
=================================================================== */

.dsc-input-group{

    display:flex;

    align-items:center;

    background:var(--dark3);

    border:1px solid var(--border);

    border-radius:14px;

    overflow:hidden;

    transition:var(--transition);

}


.dsc-input-group:hover{

    border-color:var(--primary);

}


.dsc-input-group:focus-within{

    border-color:var(--primary);

    box-shadow:0 0 15px rgba(255,213,79,.18);

}


/* ===================================================================
   ICON
=================================================================== */

.dsc-input-group span{

    width:55px;

    height:54px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#999;

    font-size:18px;

}


/* ===================================================================
   INPUT
=================================================================== */

.dsc-input-group input{

    flex:1;

    height:54px;

    background:none;

    border:none;

    outline:none;

    color:#ffffff;

    font-size:15px;

    padding-right:10px;

}


.dsc-input-group input::placeholder{

    color:#777;

}


/* Bootstrap Override */

.dsc-input-group .form-control{

    background:transparent;

    border:none;

    box-shadow:none;

    color:#ffffff;

}

.dsc-input-group .form-control:focus{

    background:transparent;

    border:none;

    box-shadow:none;

    color:#ffffff;

}


/* ===================================================================
   PASSWORD BUTTON
=================================================================== */

.dsc-password-btn{

    width:55px;

    height:54px;

    border:none;

    background:none;

    color:#999;

    cursor:pointer;

    transition:var(--transition);

}


.dsc-password-btn:hover{

    color:var(--primary);

}


/* ===================================================================
   REMEMBER
=================================================================== */

.custom-control-label{

    color:var(--text);

    cursor:pointer;

}


/* ===================================================================
   FORGOT PASSWORD
=================================================================== */

.dsc-forgot{

    color:var(--primary);

    font-size:13px;

    text-decoration:none;

    transition:var(--transition);

}


.dsc-forgot:hover{

    color:#ffffff;

    text-decoration:none;

}


/* ===================================================================
   LOGIN BUTTON
=================================================================== */

.dsc-btn-login{

    width:100%;

    height:56px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:#111;

    font-size:18px;

    font-weight:700;

    transition:.3s;

}


.dsc-btn-login:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);

    box-shadow:0 10px 30px rgba(255,213,79,.25);

}


.dsc-btn-login:focus{

    outline:none;

    box-shadow:none;

}


/* ===================================================================
   DIVIDER
=================================================================== */

.dsc-divider{

    position:relative;

    margin:35px 0;

    text-align:center;

}


.dsc-divider::before{

    content:"";

    position:absolute;

    top:50%;

    left:0;

    width:100%;

    height:1px;

    background:#303030;

}


.dsc-divider span{

    position:relative;

    background:var(--dark2);

    padding:0 18px;

    color:#888;

    font-size:13px;

}


/* ===================================================================
   LINK
=================================================================== */

.dsc-login-card p{

    color:var(--text);

    font-size:15px;

}


.dsc-login-card a{

    color:var(--primary);

    text-decoration:none;

    transition:var(--transition);

}


.dsc-login-card a:hover{

    color:#ffffff;

}


/* ===================================================================
   FOOTER
=================================================================== */

.dsc-footer{

    margin-top:35px;

    text-align:center;

    color:#777;

    font-size:13px;

}


/* ===================================================================
   RESPONSIVE
=================================================================== */

@media (max-width:991px){

    .dsc-login-wrapper{

        flex-direction:column;

    }

    .dsc-login-left{

        width:100%;

        height:320px;

    }

    .dsc-login-right{

        width:100%;

        height:auto;

        min-height:calc(100vh - 320px);

        padding:40px;

    }

    .dsc-left-content{

        padding:40px;

    }

    .dsc-hero h1{

        font-size:42px;

    }

}


@media (max-width:768px){

    .dsc-login-left{

        display:none;

    }

    .dsc-login-right{

        width:100%;

        min-height:100vh;

        padding:30px;

    }

    .dsc-login-card{

        max-width:100%;

    }

    .dsc-login-header{

        text-align:center;

    }

    .dsc-login-header h2{

        font-size:34px;

    }

}


@media (max-width:576px){

    .dsc-login-right{

        padding:25px;

    }

    .dsc-login-header h2{

        font-size:28px;

    }

    .dsc-btn-login{

        height:52px;

        font-size:16px;

    }

}


/* ===================================================================
   ANIMATION
=================================================================== */

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}