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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#f8fbff;
    color:#2d3748;

}
/*==================================================
    LOGIN PAGE
==================================================*/

.login-wrapper{
    min-height: 100vh;
    background: #FFF8F8;
}

/*========== LEFT SIDE ==========*/

.login-left{
    background: linear-gradient(135deg, #FF9D9D 0%, #FFC5AA 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px;
    position: relative;
    overflow: hidden;
}

.login-left::before{
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(255,255,255,.12);
    border-radius: 50%;
    top: -120px;
    left: -120px;
}

.login-left::after{
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    background: rgba(255,255,255,.10);
    border-radius: 50%;
    bottom: -100px;
    right: -100px;
}

.login-intro{
    position: relative;
    z-index: 2;
    max-width: 500px;
    color: #FFFFFF;
}

.login-logo{
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    margin-bottom: 30px;
}

.login-heading{
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.login-description{
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 35px;
}

.login-feature{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feature-item{
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .95rem;
}

.feature-item i{
    font-size: 20px;
}

/*========== RIGHT SIDE ==========*/

.login-right{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    padding: 40px;
}

.login-card{
    width: 100%;
    max-width: 460px;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 45px rgba(0,0,0,.08);
}

.login-card h2{
    color: #333;
}

.login-card .text-muted{
    font-size: .95rem;
}

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

.form-label{
    font-weight: 500;
    color: #555;
}

.input-group-text{
    background: #FFFFFF;
    border: 1px solid #E9ECEF;
    border-right: none;
}

.form-control{
    border-left: none;
    height: 50px;
    font-size: .95rem;
}

.form-control:focus{
    border-color: #FF9D9D;
    box-shadow: none;
}

.input-group:focus-within .input-group-text{
    border-color: #FF9D9D;
}

#togglePassword{
    border-left: none;
    background: #FFFFFF;
}

#togglePassword:hover{
    background: #FFF3F3;
}

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

.btn-login{
    height: 50px;
    background: #FF9D9D;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    transition: .3s;
}

.btn-login:hover{
    background: #ff8787;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255,157,157,.35);
}

/*========== ALERT ==========*/

.alert{
    border-radius: 12px;
}

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

.login-footer{
    text-align: center;
    margin-top: 25px;
    color: #999;
    font-size: .9rem;
}
/*==================================================
    MOBILE
==================================================*/

@media (max-width: 991.98px){

    .login-right{
        min-height:100vh;
        padding:30px 20px;
        background:#FFF8F8;
    }

    .login-card{
        width:100%;
        max-width:100%;
        padding:30px 25px;
        border-radius:20px;
        box-shadow:0 10px 30px rgba(0,0,0,.08);
    }

    .login-card h2{
        font-size:28px;
    }

    .login-card p{
        font-size:15px;
    }

    .btn-login{
        height:52px;
        font-size:16px;
    }

    .form-control{
        height:52px;
        font-size:15px;
    }

    .input-group-text,
    #togglePassword{
        height:52px;
    }

    .login-footer{
        font-size:13px;
    }

}
.login-illustration{


    display:flex;

    justify-content:center;

    animation:float 5s ease-in-out infinite;

}

.login-illustration svg{

    max-width:100%;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}
.mobile-logo{

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

}

.mobile-logo .login-logo{

    margin:auto;

}
/*==================================================
    SIDEBAR ADMIN
==================================================*/

.wrapper{
    display:flex;
    min-height:100vh;
}

/* Sidebar */

.sidebar{

    width:270px;
    background:#FFFFFF;
    border-right:1px solid #ececec;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:25px 20px;
    z-index:999;

}

/* Header */

.sidebar-header{

    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:40px;

}

.sidebar-logo{

    width:55px;
    height:55px;
    background:#FF9D9D;
    color:#FFFFFF;
    border-radius:15px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:26px;

}

.sidebar-title h5{

    margin:0;
    font-weight:600;
    color:#333;

}

.sidebar-title small{

    color:#888;

}

/* Menu */

.sidebar-menu{

    list-style:none;
    padding:0;
    margin:0;
    flex:1;

}

.sidebar-menu li{

    margin-bottom:10px;

}

.sidebar-menu a{

    display:flex;
    align-items:center;
    gap:15px;
    text-decoration:none;
    color:#555;
    padding:14px 18px;
    border-radius:12px;
    transition:.3s;
    font-weight:500;

}

.sidebar-menu a i{

    width:25px;
    text-align:center;
    font-size:20px;

}

.sidebar-menu a:hover{

    background:#FFF1F1;
    color:#FF9D9D;

}

.sidebar-menu a.active{

    background:#FF9D9D;
    color:#FFFFFF;

}

/* Footer */

.sidebar-footer{

    border-top:1px solid #ececec;
    padding-top:20px;

}

.sidebar-footer a{

    display:flex;
    align-items:center;
    gap:15px;
    text-decoration:none;
    color:#555;
    padding:12px 18px;
    border-radius:12px;
    transition:.3s;
    margin-bottom:8px;

}

.sidebar-footer a:hover{

    background:#FFF1F1;

}

.sidebar-footer i{

    width:25px;
    text-align:center;
    font-size:20px;

}

.sidebar-footer .text-danger:hover{

    background:#FFE7E7;

}

/* Main Content */

.main-content{

    margin-left:270px;
    width:calc(100% - 270px);
    padding:30px;

}
/*==================================================
    SIDEBAR RESPONSIVE
==================================================*/

@media (max-width:991.98px){

    .sidebar{

        width:80px;
        padding:20px 10px;

    }

    .sidebar-title,
    .sidebar-menu span,
    .sidebar-footer span{

        display:none;

    }

    .sidebar-header{

        justify-content:center;

    }

    .sidebar-menu a,
    .sidebar-footer a{

        justify-content:center;
        padding:15px;

    }

    .main-content{

        margin-left:80px;
        width:calc(100% - 80px);

    }

}
/*==================================================
    DASHBOARD ADMIN
==================================================*/

/*========== TOPBAR ==========*/

.dashboard-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.dashboard-title h3{
    margin:0;
    font-size:28px;
    font-weight:700;
    color:#2d3748;
}

.dashboard-title p{
    margin:5px 0 0;
    color:#6c757d;
    font-size:15px;
}

.dashboard-topbar .btn{
    background:#FFFFFF;
    border:none;
    padding:10px 18px;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,.06);
    font-weight:500;
}

.dashboard-topbar .btn:hover{
    background:#FFF8F8;
}

/*========== WELCOME CARD ==========*/

.dashboard-welcome{
    background:linear-gradient(135deg,#FF9D9D,#FFC5AA);
    border-radius:22px;
    padding:35px;
    color:#FFFFFF;
    margin-bottom:30px;
    box-shadow:0 15px 35px rgba(255,157,157,.25);
}

.dashboard-welcome h2{
    margin-bottom:12px;
    font-size:30px;
    font-weight:700;
}

.dashboard-welcome p{
    margin:0;
    line-height:1.8;
    font-size:15px;
}

/*========== CARD STATISTIK ==========*/

.dashboard-card{
    background:#FFFFFF;
    border-radius:18px;
    padding:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
    transition:.3s;
    height:100%;
}

.dashboard-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.dashboard-card h3{
    margin:0;
    font-size:34px;
    font-weight:700;
    color:#FF9D9D;
}

.dashboard-card p{
    margin:8px 0 0;
    color:#6c757d;
    font-size:15px;
}

.dashboard-card i{
    font-size:48px;
    color:#FFC5AA;
}

/*========== CARD CONTENT ==========*/

.dashboard-info{

    border:none;
    border-radius:20px;
    box-shadow:0 5px 20px rgba(0,0,0,.05);

}

.dashboard-info .card-body{

    padding:30px;

}

.dashboard-info h5{

    font-weight:600;
    margin-bottom:20px;
    color:#2d3748;

}

.dashboard-info p{

    color:#6c757d;
    line-height:1.8;

}

.dashboard-info ul li{

    color:#495057;
    padding:6px 0;

}

.dashboard-info ul li i{

    color:#198754;

}

/*========== DROPDOWN ==========*/

.dropdown-menu{
    border:none;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    padding:10px;
}

.dropdown-item{
    border-radius:10px;
    padding:10px 15px;
}

.dropdown-item:hover{
    background:#FFF3F3;
}

.dropdown-item i{
    margin-right:8px;
}

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

@media(max-width:991.98px){

    .dashboard-topbar{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }

    .dashboard-welcome{
        padding:28px;
    }

    .dashboard-welcome h2{
        font-size:24px;
    }

    .dashboard-card{
        padding:22px;
    }

    .dashboard-card h3{
        font-size:28px;
    }

    .dashboard-card i{
        font-size:40px;
    }

}
/*==================================================
    BUTTON
==================================================*/

.btn-pink{

    background:#FF9D9D;
    color:#FFFFFF;
    border:none;
    border-radius:12px;
    padding:10px 18px;
    font-weight:500;
    transition:.3s;

}

.btn-pink:hover{

    background:#ff8787;
    color:#FFFFFF;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(255,157,157,.35);

}

.btn-pink:focus{

    box-shadow:none;

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

.form-label{
    font-weight:600;
    color:#495057;
    margin-bottom:8px;
}

.form-control{
    border:1px solid #dee2e6;
    border-radius:12px;
    padding:12px 15px;
    transition:.3s;
}

.form-control:focus{
    border-color:#FF9D9D;
    box-shadow:0 0 0 .2rem rgba(255,157,157,.25);
}

.form-control[readonly]{
    background:#f8f9fa;
}
/*==================================================
    LANDING PAGE
==================================================*/

:root{

    --primary:#FF9D9D;
    --secondary:#FFC5AA;
    --white:#FFFFFF;
    --dark:#2d3748;
    --text:#6c757d;

}

/*==================================================
    NAVBAR
==================================================*/

.landing-navbar{

    padding:18px 0;
    background:transparent;
    transition:.35s ease;
    z-index:999;

}

.landing-navbar.scrolled{

    background:#FFFFFF;
    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.landing-logo{

    font-size:32px;
    font-weight:700;
    color:var(--primary)!important;
    letter-spacing:1px;

}

.landing-navbar .nav-link{

    color:var(--dark)!important;
    font-weight:500;
    margin:0 10px;
    position:relative;
    transition:.3s;

}

.landing-navbar .nav-link:hover{

    color:var(--primary)!important;

}

.landing-navbar .nav-link.active{

    color:var(--primary)!important;

}

.landing-navbar .nav-link::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:3px;
    background:var(--primary);
    border-radius:20px;
    transition:.3s;

}

.landing-navbar .nav-link:hover::after,
.landing-navbar .nav-link.active::after{

    width:100%;

}

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

.btn-landing-login{

    border:2px solid var(--primary);
    color:var(--primary);
    padding:10px 26px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;

}

.btn-landing-login:hover{

    background:var(--primary);
    color:#FFFFFF;

}

.btn-landing-register{

    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#FFFFFF;
    padding:10px 26px;
    border:none;
    border-radius:50px;
    font-weight:600;
    transition:.3s;

}

.btn-landing-register:hover{

    color:#FFFFFF;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(255,157,157,.35);

}

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

.landing-hero{

    min-height:100vh;
    display:flex;
    align-items:center;
    background:linear-gradient(135deg,#FFF8F7 0%, #FFF3EE 45%, #FFFFFF 100%);
    position:relative;
    overflow:hidden;

}

.landing-hero::before{

    content:"";
    position:absolute;
    width:600px;
    height:600px;
    border-radius:50%;
    background:rgba(255,157,157,.18);
    top:-220px;
    right:-180px;

}

.landing-hero::after{

    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(255,197,170,.22);
    bottom:-180px;
    left:-150px;

}

.landing-content{

    position:relative;
    z-index:2;

}

.landing-content h1{

    font-size:60px;
    font-weight:700;
    color:var(--dark);
    line-height:1.25;
    margin-bottom:20px;

}

.landing-content h1 span{

    color:var(--primary);

}

.landing-content p{

    font-size:17px;
    color:var(--text);
    line-height:1.9;
    margin-bottom:35px;
    max-width:560px;

}

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

.btn-landing-primary{

    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#FFFFFF;
    padding:15px 36px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
    margin-right:15px;

}

.btn-landing-primary:hover{

    color:#FFFFFF;
    transform:translateY(-3px);
    box-shadow:0 15px 25px rgba(255,157,157,.35);

}

.btn-landing-outline{

    border:2px solid var(--primary);
    color:var(--primary);
    padding:15px 36px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;

}

.btn-landing-outline:hover{

    background:var(--primary);
    color:#FFFFFF;

}

/*========== IMAGE ==========*/

.landing-image{

    position:relative;
    z-index:2;

}

.landing-image img{

    width:125%;
    max-width:none;
    animation:landingFloat 5s ease-in-out infinite;

}

@keyframes landingFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}
/*==================================================
    STATISTIK
==================================================*/

.landing-statistic{

    margin-top:-80px;
    position:relative;
    z-index:10;
    padding-bottom:80px;

}

.stat-card{

    background:#FFFFFF;
    border-radius:22px;
    padding:35px 25px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;

}

.stat-card:hover{

    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(255,157,157,.20);

}

.stat-card h2{

    font-size:42px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:10px;

}

.stat-card p{

    margin:0;
    color:var(--text);
    font-size:16px;
    font-weight:500;

}

/*==================================================
    TENTANG
==================================================*/

.landing-about{

    padding:100px 0;
    background:#FFFFFF;

}

.section-subtitle{

    display:inline-block;
    padding:10px 22px;
    background:#FFF1ED;
    color:var(--primary);
    border-radius:50px;
    font-weight:600;
    font-size:15px;

}

.section-title{

    font-size:42px;
    font-weight:700;
    color:var(--dark);
    line-height:1.4;
    margin-bottom:20px;

}

.section-title span{

    color:var(--primary);

}

.section-description{

    color:var(--text);
    line-height:1.9;
    font-size:16px;

}

.landing-about img{

    width:70%;
    max-width:520px;
    display:block;
    margin:auto;

}

/*========== ABOUT CARD ==========*/

.about-card{

    background:#FFFFFF;
    border-radius:20px;
    padding:30px;
    height:100%;
    border:1px solid #F3F3F3;
    transition:.35s;

}

.about-card:hover{

    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.about-card i{

    width:65px;
    height:65px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:18px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#FFFFFF;
    font-size:28px;
    margin-bottom:20px;

}

.about-card h5{

    font-weight:600;
    color:var(--dark);
    margin-bottom:15px;

}

.about-card p{

    margin:0;
    color:var(--text);
    line-height:1.8;
    font-size:15px;

}

/*==================================================
    FITUR
==================================================*/

.landing-feature{

    padding:100px 0;
    background:#FFF8F8;

}

.feature-card{

    background:#FFFFFF;
    border-radius:22px;
    padding:40px 30px;
    text-align:center;
    height:100%;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.feature-card:hover{

    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(255,157,157,.18);

}

.feature-card i{

    width:90px;
    height:90px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto 25px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#FFFFFF;
    font-size:34px;

}

.feature-card h5{

    color:var(--dark);
    font-size:22px;
    font-weight:600;
    margin-bottom:15px;

}

.feature-card p{

    color:var(--text);
    line-height:1.8;
    margin:0;
    font-size:15px;

}
/*==================================================
    CARA KERJA
==================================================*/

.landing-process{

    padding:100px 0;
    background:#FFFFFF;

}

.process-card{

    position:relative;
    background:#FFFFFF;
    border-radius:22px;
    padding:40px 30px;
    text-align:center;
    height:100%;
    border:1px solid #F2F2F2;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
    transition:.35s;

}

.process-card:hover{

    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(255,157,157,.18);

}

.process-number{

    position:absolute;
    top:20px;
    right:20px;
    width:38px;
    height:38px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#FFFFFF;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:700;
    font-size:15px;

}

.process-card i{

    width:90px;
    height:90px;
    margin:10px auto 25px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#FFF4F2;
    color:var(--primary);
    border-radius:50%;
    font-size:34px;

}

.process-card h5{

    color:var(--dark);
    font-weight:600;
    margin-bottom:15px;

}

.process-card p{

    margin:0;
    color:var(--text);
    line-height:1.8;
    font-size:15px;

}

/*==================================================
    CTA
==================================================*/

.landing-cta{

    padding:100px 0;
    background:#FFF8F8;

}

.cta-box{

    background:linear-gradient(135deg,var(--primary),var(--secondary));
    border-radius:30px;
    padding:60px;
    color:#FFFFFF;
    box-shadow:0 20px 40px rgba(255,157,157,.25);

}

.cta-box h2{

    font-size:38px;
    font-weight:700;
    margin-bottom:15px;

}

.cta-box p{

    margin:0;
    font-size:16px;
    line-height:1.8;
    opacity:.95;

}

.cta-box .btn{

    border-radius:50px;
    padding:14px 35px;
    font-weight:600;
    color:var(--primary);

}

.cta-box .btn:hover{

    transform:translateY(-3px);

}

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

.landing-footer{

    background:#FFFFFF;
    padding:80px 0 30px;
    border-top:1px solid #F1F1F1;

}

.landing-footer h3{

    color:var(--primary);
    font-weight:700;
    margin-bottom:20px;

}

.landing-footer h5{

    color:var(--dark);
    font-weight:600;
    margin-bottom:20px;

}

.landing-footer p{

    color:var(--text);
    line-height:1.8;

}

.footer-menu{

    list-style:none;
    margin:0;
    padding:0;

}

.footer-menu li{

    margin-bottom:12px;

}

.footer-menu a{

    text-decoration:none;
    color:var(--text);
    transition:.3s;

}

.footer-menu a:hover{

    color:var(--primary);
    padding-left:5px;

}

.landing-footer hr{

    margin:50px 0 25px;
    color:#EAEAEA;

}

.landing-footer .fa-solid{

    color:var(--primary);

}

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

@media(max-width:991.98px){

    .landing-navbar{

        background:#FFFFFF;
        box-shadow:0 5px 20px rgba(0,0,0,.08);

    }

    .landing-navbar .navbar-collapse{

        background:#FFFFFF;
        padding:20px;
        margin-top:15px;
        border-radius:18px;

    }

    .landing-navbar .nav-link{

        margin:10px 0;

    }

    .landing-hero{

        padding:130px 0 80px;
        text-align:center;

    }

    .landing-content h1{

        font-size:42px;

    }

    .landing-content p{

        margin:auto;
        margin-bottom:35px;

    }

    .landing-image{

        margin-top:50px;

    }

    .landing-image img{

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

    }

    .landing-statistic{

        margin-top:0;
        padding-top:30px;

    }

    .section-title{

        font-size:32px;

    }

    .cta-box{

        padding:40px 30px;
        text-align:center;

    }

    .cta-box h2{

        font-size:30px;

    }

}

@media(max-width:576px){

    .landing-content h1{

        font-size:34px;

    }

    .landing-content p{

        font-size:15px;

    }

    .btn-landing-primary,
    .btn-landing-outline{

        display:block;
        width:100%;
        margin:0 0 15px;

    }

    .stat-card h2{

        font-size:34px;

    }

    .feature-card,
    .about-card,
    .process-card{

        padding:30px 25px;

    }

    .cta-box{

        padding:35px 25px;

    }

    .landing-footer{

        text-align:center;

    }

}

/*==================================================
                USER LOGIN
==================================================*/

.auth-page{

    font-family:'Poppins',sans-serif;
    background:#fff7f6;

    height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:18px;

}

.auth-container{

    width:100%;

    max-width:1050px;

    height:calc(100vh - 36px);

    margin:auto;
}

.auth-card{

    background:#fff;

    height:100%;

    border-radius:24px;

    overflow:hidden;

}

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

.auth-banner{

    position:relative;

    height:100%;

    min-height:unset;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:linear-gradient(135deg,#FF9D9D 0%,#FFC5AA 100%);

}

/* Decorative Circle */

.banner-circle{

    position:absolute;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(6px);

    animation:float 8s ease-in-out infinite;

}

.banner-circle-1{

    width:260px;
    height:260px;

    top:-70px;
    left:-80px;

}

.banner-circle-2{

    width:170px;
    height:170px;

    right:40px;
    top:130px;

    animation-delay:2s;

}

.banner-circle-3{

    width:320px;
    height:320px;

    right:-120px;
    bottom:-100px;

    animation-delay:4s;

}

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.banner-content{

    position:relative;

    z-index:2;

    color:#fff;

    width:100%;

    max-width:430px;

    padding:32px 38px;

}

.banner-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:rgba(255,255,255,.18);

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

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:28px;

}

.banner-content h1{

    font-size:54px;

    margin-bottom:8px;

    font-weight:800;

    line-height:1;

}

.banner-content h4{

    font-size:24px;

    margin-bottom:18px;

    font-weight:600;

    line-height:1.5;


}

.banner-content p{

    font-size:15px;

    line-height:1.9;

    color:rgba(255,255,255,.92);

    margin-bottom:24px;

}
/*==================================================
                BANNER FEATURE
==================================================*/

.banner-feature{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:40px;

}

.banner-feature div{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 15px;
    font-size:13px;

    border-radius:50px;

    background:rgba(255,255,255,.16);

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

    color:#fff;

    font-size:14px;

    font-weight:500;

    transition:.3s;

}

.banner-feature div:hover{

    transform:translateY(-4px);

    background:rgba(255,255,255,.25);

}

.banner-feature i{

    font-size:16px;

}

/*==================================================
                BUTTON BACK
==================================================*/

.btn-back-home{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:11px 22px;

    border-radius:50px;

    background:#ffffff;

    color:#FF7F7F;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.btn-back-home:hover{

    background:#fff4f4;

    color:#ff6d6d;

    transform:translateY(-4px);

}

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

.auth-form-area{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    min-height:620px;

    position:relative;

}

.form-container{

    width:100%;

    max-width:460px;

    padding:40px;

    position:relative;

}

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

.form-box{

    display:none;

    animation:fadeUp .45s ease;

}

.form-box.active{

    display:block;

}

.form-header{

    margin-bottom:35px;

}

.form-header h2{

    font-size:28px;

    font-weight:700;

    color:#FF9D9D;

    margin-bottom:10px;

}

.form-header p{

    color:#7a7a7a;

    font-size:15px;

    line-height:1.8;

}

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

.form-floating{

    margin-bottom:0;

}

.form-floating>.form-control{

    height:52px;

    border-radius:16px;

    border:1px solid #e8e8e8;

    box-shadow:none;

    transition:.3s;

    font-size:15px;

    background:#ffffff;

}

.form-floating>.form-control:focus{

    border-color:#FF9D9D;

    box-shadow:0 0 0 .20rem rgba(255,157,157,.18);

}

.form-floating>label{

    color:#999;

    padding-left:18px;

    font-size:14px;

}

.form-floating>label i{

    color:#FF9D9D;

}
/*==================================================
                PASSWORD
==================================================*/

.password-group{

    position:relative;

}

.password-toggle{

    position:absolute;

    top:50%;

    right:18px;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border:none;

    background:transparent;

    color:#999;

    border-radius:50%;

    transition:.3s;

    z-index:10;

}

.password-toggle:hover{

    background:#f5f5f5;

    color:#FF9D9D;

}

.password-toggle:focus{

    outline:none;

    box-shadow:none;

}

/*==================================================
                CHECKBOX
==================================================*/

.form-check-input{

    cursor:pointer;

    border:1px solid #d9d9d9;

    box-shadow:none;

}

.form-check-input:checked{

    background-color:#FF9D9D;

    border-color:#FF9D9D;

}

.form-check-input:focus{

    box-shadow:0 0 0 .2rem rgba(255,157,157,.20);

}

.form-check-label{

    cursor:pointer;

    font-size:14px;

    color:#666;

}

.forgot-password{

    font-size:14px;

    color:#FF8A8A;

    text-decoration:none;

    transition:.3s;

}

.forgot-password:hover{

    color:#ff6d6d;

}

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

.btn-auth-primary{

    width:100%;

    height:56px;

    border:none;

    border-radius:16px;

    background:linear-gradient(135deg,#FF9D9D,#FFC5AA);

    color:#fff;

    font-size:16px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 12px 30px rgba(255,157,157,.28);

}

.btn-auth-primary:hover{

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(255,157,157,.35);

}

.btn-auth-primary:focus{

    box-shadow:none;

}

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

.form-footer{

    margin-top:28px;

    text-align:center;

    color:#666;

    font-size:15px;

}

.switch-form{

    border:none;

    background:none;

    color:#FF8A8A;

    font-weight:600;

    margin-left:5px;

    transition:.3s;

}

.switch-form:hover{

    color:#ff6d6d;

    text-decoration:underline;

}

/*==================================================
                ALERT
==================================================*/

.alert{

    border:none;

    border-radius:14px;

    font-size:14px;

    margin-bottom:25px;

}

.alert-success{

    background:#ebfff2;

    color:#2e7d32;

}

.alert-danger{

    background:#fff0f0;

    color:#d32f2f;

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.form-box.hide{

    animation:fadeOut .25s ease forwards;

}

@keyframes fadeOut{

    from{

        opacity:1;

        transform:translateY(0);

    }

    to{

        opacity:0;

        transform:translateY(-15px);

    }

}

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

@media (max-width:991.98px){

    .auth-page{

        padding:20px;

    }

    .auth-banner{

        display:none;

    }

    .auth-form-area{

        min-height:auto;

    }

    .form-container{

        max-width:100%;

        padding:45px;

    }

}

@media (max-width:767.98px){

    .auth-card{

        border-radius:22px;

    }

    .form-container{

        padding:35px 25px;

    }

    .form-header h2{

        font-size:28px;

    }

    .banner-content h1{

        font-size:56px;

    }

}

@media (max-width:575.98px){

    .auth-page{

        padding:15px;

    }

    .auth-card{

        border-radius:18px;

    }

    .form-container{

        padding:28px 20px;

    }

    .form-header h2{

        font-size:24px;

    }

    .form-header p{

        font-size:14px;

    }

    .btn-auth-primary{

        height:52px;

        font-size:15px;

    }

}
/*==============================
    USER DROPDOWN
==============================*/

.dropdown-menu{

    min-width:220px;

    border:none;

    border-radius:18px;

    padding:10px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.dropdown-item{

    border-radius:12px;

    padding:12px 15px;

    font-weight:500;

    transition:.3s;

}

.dropdown-item:hover{

    background:#FFF3F3;

}

.dropdown-divider{

    margin:8px 0;

}
/*====================================================
    DIAGNOSA PAGE
====================================================*/

.diagnosa-section{

    padding:140px 0 80px;

    background:#FFF8F8;

    min-height:100vh;

}

.diagnosa-wrapper{

    max-width:980px;

    margin:auto;

}

/*====================================================
    HEADING
====================================================*/

.diagnosa-heading{

    text-align:center;

    margin-bottom:50px;

}

.heading-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:linear-gradient(135deg,#FF9D9D,#FFC5AA);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:30px;

    box-shadow:0 15px 35px rgba(255,157,157,.35);

}

.heading-subtitle{

    display:inline-block;

    padding:8px 20px;

    border-radius:50px;

    background:#FFECEC;

    color:#FF7F7F;

    font-size:14px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:15px;

}

.diagnosa-heading h1{

    font-size:42px;

    font-weight:700;

    color:#24324B;

    margin-bottom:20px;

}

.diagnosa-heading p{

    max-width:720px;

    margin:auto;

    color:#6E7485;

    line-height:1.9;

    font-size:16px;

}

/*====================================================
    PROGRESS
====================================================*/

.progress-card{

    background:#fff;

    border-radius:22px;

    padding:28px;

    box-shadow:0 12px 35px rgba(0,0,0,.05);

    margin-bottom:30px;

}

.progress-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.progress-header h6{

    font-size:18px;

    font-weight:600;

    color:#24324B;

    margin-bottom:4px;

}

.progress-header small{

    color:#8C93A8;

}

.progress-counter{

    background:#FF9D9D;

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

}

.progress{

    height:12px;

    border-radius:50px;

    background:#F3F3F3;

    overflow:hidden;

}

.progress-bar{

    width:0;

    background:linear-gradient(90deg,#FF9D9D,#FFC5AA);

    transition:.4s;

}

/*====================================================
    SEARCH
====================================================*/

.search-card{

    display:flex;

    align-items:center;

    gap:15px;

    background:#fff;

    border-radius:22px;

    padding:18px 25px;

    box-shadow:0 12px 35px rgba(0,0,0,.05);

    margin-bottom:40px;

}

.search-card i{

    color:#FF9D9D;

    font-size:20px;

}

.search-card input{

    flex:1;

    border:none;

    outline:none;

    font-size:16px;

    background:transparent;

    color:#24324B;

}

.search-card input::placeholder{

    color:#A5AABA;

}
/*====================================================
    GEJALA CARD
====================================================*/

.gejala-item{

    margin-bottom:28px;

}

.gejala-card{

    background:#FFFFFF;

    border:2px solid transparent;

    border-radius:24px;

    padding:28px;

    transition:all .35s ease;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.gejala-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.gejala-card.active{

    border-color:#FF9D9D;

    background:#FFF5F5;

}

/*====================================================
    HEADER
====================================================*/

.gejala-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

}

.gejala-left{

    display:flex;

    align-items:flex-start;

    gap:18px;

    flex:1;

}

.gejala-checkbox{

    width:22px;

    height:22px;

    cursor:pointer;

    accent-color:#FF9D9D;

    margin-top:6px;

}

.kode-gejala{

    display:inline-block;

    background:#FFE8E8;

    color:#E96A6A;

    padding:6px 14px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

    margin-bottom:14px;

}

.judul-gejala{

    font-size:22px;

    font-weight:600;

    color:#24324B;

    margin-bottom:10px;

    line-height:1.5;

}


/*====================================================
    DESKRIPSI
====================================================*/

.gejala-desc{

    margin-top:20px;

    padding-left:40px;

    color:#6F7687;

    font-size:15px;

    line-height:1.8;

}
/*====================================================
    CERTAINTY FACTOR
====================================================*/

.cf-container{

    display:none;

    margin-top:28px;

    padding-top:25px;

    border-top:1px solid #EFEFEF;

    animation:fadeUp .35s ease;

}

.cf-title{

    font-size:16px;

    font-weight:600;

    color:#24324B;

    margin-bottom:18px;

}

.cf-list{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.cf-button{

    min-width:82px;

    padding:12px 20px;

    border-radius:14px;

    border:2px solid #ECECEC;

    background:#FFFFFF;

    color:#6F7687;

    font-size:14px;

    font-weight:600;

    text-align:center;

    cursor:pointer;

    transition:.3s;

}

.cf-button:hover{

    border-color:#FF9D9D;

    color:#FF7B7B;

    background:#FFF5F5;

}

.btn-check:checked + .cf-button{

    background:#FF9D9D;

    color:#FFFFFF;

    border-color:#FF9D9D;

    box-shadow:0 8px 20px rgba(255,157,157,.30);

}

.cf-keterangan{

    margin-top:18px;

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.cf-keterangan span{

    padding:8px 14px;

    border-radius:50px;

    background:#F8F8F8;

    color:#7B8192;

    font-size:13px;

}

/*====================================================
    ACTION BUTTON
====================================================*/

.diagnosa-action{

    margin-top:45px;

    display:flex;

    justify-content:flex-end;

    gap:15px;

}

.btn-reset{

    border:none;

    background:#EEEEEE;

    color:#555;

    padding:14px 28px;

    border-radius:14px;

    font-weight:600;

    transition:.3s;

}

.btn-reset:hover{

    background:#DDDDDD;

}

.btn-submit{

    border:none;

    background:linear-gradient(135deg,#FF9D9D,#FFC5AA);

    color:#FFFFFF;

    padding:14px 34px;

    border-radius:14px;

    font-weight:600;

    transition:.3s;

    box-shadow:0 15px 35px rgba(255,157,157,.30);

}

.btn-submit:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 45px rgba(255,157,157,.45);

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

    .diagnosa-heading h1{

        font-size:34px;

    }

    .progress-header{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .gejala-header{

        flex-direction:column;

        gap:18px;

    }

    .status-gejala{

        align-self:flex-end;

    }

}

@media(max-width:768px){

    .diagnosa-section{

        padding:110px 18px 60px;

    }

    .diagnosa-heading h1{

        font-size:28px;

    }

    .diagnosa-heading p{

        font-size:15px;

    }

    .gejala-card{

        padding:22px;

    }

    .gejala-left{

        gap:14px;

    }

    .judul-gejala{

        font-size:18px;

    }

    .cf-list{

        gap:10px;

    }

    .cf-button{

        flex:1 1 calc(50% - 10px);

        min-width:unset;

    }

    .diagnosa-action{

        flex-direction:column;

    }

    .btn-reset,

    .btn-submit{

        width:100%;

    }

}

@media(max-width:480px){

    .cf-button{

        flex:1 1 100%;

    }

}

/* =====================================================
   HALAMAN HASIL DIAGNOSA
===================================================== */

.hasil-page{

    font-family:'Poppins',sans-serif;
    background:#FFF8F8;
    color:#444;
    overflow-x:hidden;

}

/* =====================================================
   BACKGROUND
===================================================== */

.hasil-page::before{

    content:"";

    position:fixed;

    top:-220px;
    left:-180px;

    width:550px;
    height:550px;

    background:linear-gradient(
        135deg,
        rgba(255,157,157,.18),
        rgba(255,197,170,.10)
    );

    border-radius:50%;

    z-index:-2;

}

.hasil-page::after{

    content:"";

    position:fixed;

    right:-180px;
    bottom:-180px;

    width:450px;
    height:450px;

    background:linear-gradient(
        135deg,
        rgba(255,197,170,.16),
        rgba(255,157,157,.08)
    );

    border-radius:50%;

    z-index:-2;

}

/* =====================================================
   HEADER
===================================================== */

.hasil-header-section{

    padding-top:110px;
    padding-bottom:15px;

}

.hasil-header-card{

    background:#FFFFFF;

    border-radius:30px;

    padding:35px;

    border:1px solid #FFE4D9;

    box-shadow:
        0 18px 45px rgba(0,0,0,.05);

    position:relative;

    overflow:hidden;

}

.hasil-header-card::before{

    content:"";

    position:absolute;

    right:-80px;
    top:-80px;

    width:220px;
    height:220px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        rgba(255,157,157,.18),
        rgba(255,197,170,.15)
    );

}

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

.hasil-icon-circle{

    width:90px;
    height:90px;

    border-radius:50%;

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

    flex-shrink:0;

    background:linear-gradient(
        135deg,
        #FF9D9D,
        #FFC5AA
    );

    color:#FFFFFF;

    font-size:34px;

    box-shadow:
        0 15px 30px rgba(255,157,157,.30);

}

/* =====================================================
   TITLE
===================================================== */

.hasil-header-card h2{

    font-size:2rem;

    font-weight:700;

    color:#444;

    margin-bottom:15px;

}

.hasil-header-card h2 span{

    color:#FF8A8A;

}

.hasil-header-card p{

    color:#777;

    line-height:1.9;

    margin-bottom:0;

    font-size:.98rem;

}

/* =====================================================
   SUBTITLE
===================================================== */

.section-subtitle{

    display:inline-block;

    background:#FFF1EE;

    color:#FF8D8D;

    font-size:.82rem;

    font-weight:600;

    padding:8px 18px;

    border-radius:30px;

    letter-spacing:.5px;

}

/* =====================================================
   BUTTON PRINT
===================================================== */

.btn-print{

    background:linear-gradient(
        135deg,
        #FF9D9D,
        #FFC5AA
    );

    color:#FFFFFF;

    border:none;

    border-radius:50px;

    padding:14px 30px;

    font-weight:600;

    transition:.35s;

    box-shadow:
        0 10px 25px rgba(255,157,157,.25);

}

.btn-print:hover{

    color:#FFFFFF;

    transform:translateY(-3px);

    box-shadow:
        0 18px 35px rgba(255,157,157,.35);

}

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

.hasil-content{

    padding-top:10px;
    padding-bottom:40px;

}

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

@media(max-width:991px){

    .hasil-header-card{

        padding:35px;

    }

    .hasil-header-card .d-flex{

        flex-direction:column;

        text-align:center;

    }

    .hasil-icon-circle{

        margin-bottom:20px;

    }

}

@media(max-width:576px){

    .hasil-header-section{

        padding-top:110px;

    }

    .hasil-header-card{

        padding:25px;

        border-radius:22px;

    }

    .hasil-header-card h2{

        font-size:1.5rem;

    }

    .btn-print{

        width:100%;

        margin-top:20px;

    }

}
/* =====================================================
   HASIL DIAGNOSA
===================================================== */

.hasil-card{

    background:#FFFFFF;

    border-radius:30px;

    padding:40px;

    border:1px solid #FFE4D9;

    box-shadow:
        0 15px 40px rgba(0,0,0,.05);

    position:relative;

    overflow:hidden;

}

.hasil-card::before{

    content:"";

    position:absolute;

    top:-70px;
    right:-70px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        rgba(255,157,157,.18),
        rgba(255,197,170,.15)
    );

}

/* =====================================================
   BADGE
===================================================== */

.hasil-badge{

    display:inline-block;

    background:#FFF1EE;

    color:#FF8D8D;

    padding:10px 20px;

    border-radius:50px;

    font-size:.85rem;

    font-weight:600;

}

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

.hasil-icon{

    width:120px;
    height:110px;

    margin:auto;

    border-radius:50%;

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

   


}

.hasil-icon img{

    width:150px;
    height:150px;

    object-fit:contain;

}

/* =====================================================
   NAMA PENYAKIT
===================================================== */

.hasil-penyakit{

    font-size:1.9rem;

    font-weight:700;

    color:#444;

    margin-bottom:10px;

}

/* =====================================================
   PERSENTASE
===================================================== */

.hasil-persentase{

    font-size:3rem;

    font-weight:700;

    background:linear-gradient(
        135deg,
        #FF9D9D,
        #FFC5AA
    );

    -webkit-background-clip:text;

    background-clip: text;

    -webkit-text-fill-color:transparent;

    margin:15px 0;

}

/* =====================================================
   STATUS
===================================================== */

.hasil-status{

    display:inline-block;

    background:#EAFBF1;

    color:#2E9B62;

    padding:10px 24px;

    border-radius:40px;

    font-size:.9rem;

    font-weight:600;

}

/* =====================================================
   INFO HASIL
===================================================== */

.hasil-info{

    margin-top:35px;

    background:#FFF7F6;

    border-radius:20px;

    padding:25px;

    border-left:5px solid #FF9D9D;

    color:#666;

    line-height:1.9;

    font-size:.95rem;

}

/* =====================================================
   CARD DESKRIPSI & SOLUSI
===================================================== */

.info-card{

    background:#FFFFFF;

    border-radius:30px;

    padding:30px;

    border:1px solid #FFE4D9;

    box-shadow:
        0 15px 40px rgba(0,0,0,.05);

}

/* =====================================================
   HEADER CARD
===================================================== */

.info-header{

    display:flex;

    align-items:center;

    margin-bottom:25px;

}

.info-header h5{

    margin-bottom:3px;

    font-size:1.2rem;

    font-weight:600;

    color:#444;

}

.info-header small{

    color:#999;

}

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

.info-icon{

    width:60px;

    height:60px;

    margin-right:18px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #FF9D9D,
        #FFC5AA
    );

    color:#FFFFFF;

    font-size:24px;

}

/* =====================================================
   BODY
===================================================== */

.info-body{

    color:#666;

    line-height:1.9;

    font-size:.95rem;

}

/* =====================================================
   SOLUSI
===================================================== */

.solusi-list{

    list-style:none;

    margin:0;

    padding:0;

}

.solusi-list li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:18px;

    color:#555;

    line-height:1.8;

}

.solusi-list li:last-child{

    margin-bottom:0;

}

.solusi-list i{

    color:#FF9D9D;

    margin-top:5px;

    font-size:1rem;

}

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

@media(max-width:991px){

    .hasil-card{

        margin-bottom:25px;

    }

    .hasil-icon{

        width:100px;

        height:100px;

        font-size:42px;

    }

    .hasil-persentase{

        font-size:2.5rem;

    }

}

@media(max-width:576px){

    .hasil-card,

    .info-card{

        padding:25px;

        border-radius:22px;

    }

    .hasil-penyakit{

        font-size:1.5rem;

    }

    .hasil-persentase{

        font-size:2.2rem;

    }

    .info-header{

        flex-direction:column;

        text-align:center;

    }

    .info-icon{

        margin-right:0;

        margin-bottom:15px;

    }

}
/* =====================================================
   SUMMARY CARD
===================================================== */

.summary-card{

    background:#FFFFFF;

    border:1px solid #FFE4D9;

    border-radius:28px;

    padding:30px 25px;

    text-align:center;

    box-shadow:
        0 15px 35px rgba(0,0,0,.05);

    transition:.35s;

    height:100%;

}

.summary-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 25px 45px rgba(255,157,157,.15);

}

.summary-icon{

    width:75px;

    height:75px;

    margin:0 auto 20px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #FF9D9D,
        #FFC5AA
    );

    color:#FFFFFF;

    font-size:30px;

    box-shadow:
        0 12px 30px rgba(255,157,157,.25);

}

.summary-card h3{

    font-size:1.3rem;

    font-weight:700;

    color:#444;

    margin-bottom:8px;

}

.summary-card p{

    color:#888;

    margin:0;

    font-size:.92rem;

}

/* =====================================================
   PENYAKIT LAIN
===================================================== */

.penyakit-item{

    padding:22px 0;

    border-bottom:1px solid #F2E2DD;

}

.penyakit-item:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.penyakit-item h6{

    font-size:1rem;

    font-weight:600;

    color:#444;

    margin-bottom:5px;

}

.penyakit-item small{

    color:#999;

}

/* =====================================================
   PERSENTASE
===================================================== */

.persentase-lain{

    font-size:1rem;

    font-weight:700;

    color:#FF8D8D;

}

/* =====================================================
   PROGRESS BAR
===================================================== */

.progress{

    height:10px;

    border-radius:50px;

    background:#F8EAE7;

    overflow:hidden;

}

.progress-palm{

    background:linear-gradient(
        90deg,
        #FF9D9D,
        #FFC5AA
    );

    border-radius:50px;

    transition:width .8s ease;

}

/* =====================================================
   ANIMASI PROGRESS
===================================================== */

.progress-palm{

    animation:progressAnimation 1.2s ease;

}

@keyframes progressAnimation{

    from{

        width:0;

    }

}

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

@media(max-width:991px){

    .summary-card{

        padding:25px;

    }

    .summary-icon{

        width:65px;

        height:65px;

        font-size:26px;

    }

}

@media(max-width:576px){

    .summary-card{

        border-radius:22px;

        padding:22px;

    }

    .summary-card h3{

        font-size:1.1rem;

    }

    .summary-icon{

        width:60px;

        height:60px;

        font-size:22px;

        border-radius:18px;

    }

    .penyakit-item{

        padding:18px 0;

    }

    .persentase-lain{

        font-size:.9rem;

    }

}
/* =====================================================
   TABEL GEJALA
===================================================== */

.hasil-table{

    margin-top:15px;

}

.hasil-table thead{

    background:#FFF2EF;

}

.hasil-table thead th{

    border:none;

    color:#555;

    font-weight:600;

    padding:18px;

    white-space:nowrap;

}

.hasil-table tbody td{

    padding:18px;

    vertical-align:middle;

    border-color:#F5E5E2;

}

.hasil-table tbody tr{

    transition:.3s;

}

.hasil-table tbody tr:hover{

    background:#FFF9F8;

}

.hasil-table .badge{

    background:#FFF2EF !important;

    color:#FF8D8D !important;

    padding:10px 15px;

    border-radius:50px;

    font-weight:600;

    font-size:.82rem;

}

/* =====================================================
   BUTTON ACTION
===================================================== */

.hasil-action{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.hasil-action .btn{

    min-width:200px;

    padding:14px 28px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.hasil-action .btn-light{

    border:1px solid #FFE4D9;

    background:#FFFFFF;

}

.hasil-action .btn-light:hover{

    background:#FFF5F3;

    transform:translateY(-3px);

}

.hasil-action .btn-landing-primary:hover,

.hasil-action .btn-landing-outline:hover{

    transform:translateY(-3px);

}

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

.hasil-card,

.info-card,

.summary-card{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =====================================================
   CUSTOM SCROLLBAR


::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#FFF4F2;

}

::-webkit-scrollbar-thumb{

    background:#FFC5AA;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#FF9D9D;

}
*/
/* =====================================================
   PRINT
===================================================== */

@media print{

    body{

        background:#FFFFFF !important;

    }

    .landing-navbar,

    .landing-footer,

    .hasil-action,

    .btn,

    .dropdown{

        display:none !important;

    }

    .hasil-header-section{

        padding-top:20px;

    }

    .hasil-header-card,

    .hasil-card,

    .info-card,

    .summary-card{

        box-shadow:none !important;

        border:1px solid #DDD;

        page-break-inside:avoid;

    }

    .progress{

        border:1px solid #DDD;

    }

}

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

@media(max-width:992px){

    .hasil-action{

        flex-direction:column;

    }

    .hasil-action .btn{

        width:100%;

    }

}

@media(max-width:768px){

    .hasil-table{

        font-size:.9rem;

    }

    .hasil-table thead th,

    .hasil-table tbody td{

        padding:14px;

    }

}

@media(max-width:576px){

    .hasil-table{

        font-size:.85rem;

    }

    .hasil-table thead th,

    .hasil-table tbody td{

        padding:12px 10px;

    }

    .hasil-action{

        gap:12px;

    }

    .hasil-action .btn{

        min-width:100%;

        padding:13px 20px;

    }

}
/* ======================================================
   RIWAYAT DIAGNOSA
   BAGIAN 1
====================================================== */

.riwayat-page{

    background:#FFF8F7;

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

    position:relative;

    overflow-x:hidden;

}

/* ================= BACKGROUND ================= */

.riwayat-page::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    background:#FFE2D7;

    border-radius:50%;

    top:-120px;
    left:-120px;

    opacity:.45;

}

.riwayat-page::after{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    background:#FFD4C2;

    border-radius:50%;

    right:-100px;
    top:420px;

    opacity:.25;

}

/* ================= HEADER ================= */

.riwayat-header-section{

    padding-top:135px;

    padding-bottom:50px;

    position:relative;

    z-index:2;

}

.riwayat-header-card{

    background:#FFFFFF;

    border-radius:28px;

    padding:45px;

    box-shadow:

        0 18px 45px rgba(0,0,0,.06);

}

.section-subtitle{

    display:inline-block;

    padding:8px 18px;

    background:#FFE8DF;

    color:#E96F5B;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

}

.section-title{

    font-size:34px;

    font-weight:700;

    color:#303030;

}

.section-title span{

    color:#FF9D9D;

}

.section-description{

    color:#707070;

    line-height:1.8;

    margin-top:15px;

    margin-bottom:0;

}

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

.riwayat-icon-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #FF9D9D,
        #FFC5AA
    );

    color:#FFFFFF;

    font-size:36px;

    box-shadow:

        0 18px 35px rgba(255,157,157,.30);

}

/* ================= CTA ================= */

.landing-cta{

    margin-top:70px;

    margin-bottom:70px;

}

.cta-box{

    background:linear-gradient(
        135deg,
        #FF9D9D,
        #FFC5AA
    );

    border-radius:30px;

    padding:50px;

    color:#FFFFFF;

    box-shadow:

        0 20px 45px rgba(255,157,157,.28);

}

.cta-box h2{

    font-weight:700;

    margin-bottom:15px;

}

.cta-box p{

    margin-bottom:0;

    opacity:.95;

    line-height:1.8;

}

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

@media(max-width:991px){

    .riwayat-header-card{

        padding:30px;

        text-align:center;

    }

    .riwayat-icon-circle{

        margin:auto;

        margin-bottom:20px;

    }

    .section-title{

        font-size:28px;

    }

    .cta-box{

        padding:35px 25px;

        text-align:center;

    }

}
/* ======================================================
   RIWAYAT DIAGNOSA
   BAGIAN 2
====================================================== */

/* ================= SUMMARY CARD ================= */

.summary-card{

    background:#FFFFFF;

    border-radius:24px;

    padding:30px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

    transition:.3s;

    height:100%;

}

.summary-card:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 45px rgba(0,0,0,.08);

}

.summary-icon{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #FF9D9D,
        #FFC5AA
    );

    color:#FFFFFF;

    font-size:28px;

}

.summary-card h3{

    font-size:28px;

    font-weight:700;

    color:#333;

    margin-bottom:8px;

}

.summary-card p{

    margin:0;

    color:#777;

    font-size:15px;

}

/* ================= INFO CARD ================= */

.info-card{

    background:#FFFFFF;

    border-radius:24px;

    padding:35px;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.info-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:35px;

}

.info-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFE8DF;

    color:#FF8E8E;

    font-size:24px;

}

.info-header h5{

    margin:0;

    font-weight:700;

    color:#333;

}

.info-header small{

    color:#888;

}

/* ================= LIST RIWAYAT ================= */

.riwayat-item{

    background:#FFFDFC;

    border:1px solid #FFE7DE;

    border-radius:18px;

    padding:22px 25px;

    margin-bottom:18px;

    transition:.3s;

}

.riwayat-item:last-child{

    margin-bottom:0;

}

.riwayat-item:hover{

    transform:translateY(-4px);

    border-color:#FFB8A2;

    box-shadow:0 15px 35px rgba(255,157,157,.15);

}

.riwayat-icon{

    width:60px;

    height:60px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #FF9D9D,
        #FFC5AA
    );

    color:#FFFFFF;

    font-size:24px;

    flex-shrink:0;

}

.riwayat-kode{

    display:inline-block;

    background:#FFE7DE;

    color:#E96F5B;

    padding:4px 12px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

    margin-bottom:8px;

}

.riwayat-item h5{

    margin-bottom:8px;

    font-weight:600;

    color:#333;

}

.riwayat-meta{

    color:#888;

    font-size:14px;

}

.riwayat-meta span{

    display:inline-flex;

    align-items:center;

}

/* ================= PERSENTASE ================= */

.riwayat-persentase{

    font-size:26px;

    font-weight:700;

    color:#FF7D7D;

}

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

.btn-landing-outline{

    border:2px solid #FFB6A4;

    color:#FF7D7D;

    background:#FFFFFF;

    border-radius:50px;

    padding:10px 24px;

    font-weight:600;

    transition:.3s;

}

.btn-landing-outline:hover{

    background:#FF9D9D;

    color:#FFFFFF;

    border-color:#FF9D9D;

}
/* ======================================================
   RIWAYAT DIAGNOSA
   BAGIAN 3
====================================================== */

/* ================= FILTER ================= */

.form-label{

    font-weight:600;

    color:#555;

    margin-bottom:10px;

}

.form-control,
.form-select{

    height:55px;

    border:1px solid #FFD8CC;

    border-radius:14px;

    padding:0 18px;

    box-shadow:none;

    transition:.3s;

    font-size:15px;

}

.form-control:focus,
.form-select:focus{

    border-color:#FF9D9D;

    box-shadow:0 0 0 .2rem rgba(255,157,157,.15);

}

.form-control::placeholder{

    color:#B0B0B0;

}

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

.btn-landing-primary{

    background:linear-gradient(
        135deg,
        #FF9D9D,
        #FFC5AA
    );

    border:none;

    color:#FFFFFF;

    border-radius:50px;

    padding:12px 28px;

    font-weight:600;

    transition:.3s;

}

.btn-landing-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(255,157,157,.25);

}

/* ================= EMPTY STATE ================= */

.empty-history{

    text-align:center;

    padding:60px 20px;

}

.empty-history img{

    width:180px;

    margin-bottom:25px;

}

.empty-history h4{

    font-weight:700;

    color:#444;

    margin-bottom:15px;

}

.empty-history p{

    color:#888;

    max-width:500px;

    margin:auto;

    line-height:1.8;

}

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

.landing-footer{

    background:#FFFFFF;

    padding:70px 0 25px;

    margin-top:80px;

    border-top:1px solid #F3E6E1;

}

.landing-footer h3{

    color:#FF8D8D;

    font-weight:700;

    margin-bottom:20px;

}

.landing-footer h5{

    font-weight:600;

    color:#444;

    margin-bottom:20px;

}

.landing-footer p{

    color:#777;

    line-height:1.8;

}

.footer-menu{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-menu li{

    margin-bottom:12px;

}

.footer-menu a{

    color:#777;

    text-decoration:none;

    transition:.3s;

}

.footer-menu a:hover{

    color:#FF8D8D;

    padding-left:5px;

}

.landing-footer hr{

    margin:40px 0 20px;

    border-color:#F1E5DF;

}

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

@media(max-width:991px){

    .info-card{

        padding:25px;

    }

    .info-header{

        flex-direction:column;

        text-align:center;

    }

    .riwayat-item{

        text-align:center;

    }

    .riwayat-item .d-flex{

        flex-direction:column;

        align-items:center;

    }

    .riwayat-icon{

        margin-bottom:15px;

    }

    .riwayat-persentase{

        margin:20px 0;

    }

    .summary-card{

        margin-bottom:20px;

    }

}

@media(max-width:576px){

    .info-card{

        padding:20px;

    }

    .summary-card{

        padding:22px;

    }

    .summary-card h3{

        font-size:24px;

    }

    .riwayat-item{

        padding:18px;

    }

    .riwayat-item h5{

        font-size:18px;

    }

    .btn-landing-primary,
    .btn-landing-outline{

        width:100%;

        margin-top:10px;

    }

}
/* ======================================================
   RIWAYAT DIAGNOSA
   BAGIAN 4
====================================================== */

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

.riwayat-header-card,
.summary-card,
.info-card,
.riwayat-item,
.cta-box{

    animation:fadeUp .7s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ================= TRANSITION ================= */

*{

    transition:
        background .3s,
        color .3s,
        border-color .3s,
        box-shadow .3s;

}

/* ================= SCROLLBAR ================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#FFF6F4;

}

::-webkit-scrollbar-thumb{

    background:#FFC5AA;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#FF9D9D;

}

/* ================= SELECTION ================= */

::selection{

    background:#FFB8A8;

    color:#FFFFFF;

}

/* ================= PRINT ================= */

@media print{

    .landing-navbar,
    .landing-footer,
    .landing-cta,
    .btn,
    .dropdown,
    #searchRiwayat,
    #filterPenyakit,
    #resetFilter{

        display:none !important;

    }

    body{

        background:#FFFFFF;

    }

    .riwayat-header-section{

        padding-top:0;

    }

    .riwayat-header-card,
    .summary-card,
    .info-card{

        box-shadow:none;

        border:1px solid #DDD;

    }

    .riwayat-item{

        page-break-inside:avoid;

        border:1px solid #DDD;

        box-shadow:none;

    }

}

/* ================= SMOOTH SCROLL ================= */

html{

    scroll-behavior:smooth;

}

/* ================= HOVER EFFECT ================= */

.summary-card:hover .summary-icon{

    transform:rotate(10deg) scale(1.08);

}

.riwayat-item:hover .riwayat-icon{

    transform:scale(1.08);

}

.info-card:hover{

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

/* ================= CTA BUTTON ================= */

.cta-box .btn{

    border-radius:50px;

    padding:14px 34px;

    font-weight:600;

}

.cta-box .btn:hover{

    transform:translateY(-2px);

}

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

.footer-menu a i{

    width:18px;

    text-align:center;

    margin-right:8px;

}

.landing-footer p i{

    color:#FF9D9D;

}

/* ================= SMALL DEVICE ================= */

@media(max-width:576px){

    .riwayat-header-section{

        padding-top:110px;

    }

    .riwayat-header-card{

        padding:22px;

    }

    .riwayat-icon-circle{

        width:75px;

        height:75px;

        font-size:30px;

    }

    .section-title{

        font-size:24px;

    }

    .section-description{

        font-size:14px;

    }

}
/* ======================================================
   PROFIL
   BAGIAN 1
====================================================== */

.profil-page{

    background:#FFF8F7;

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

    position:relative;

    overflow-x:hidden;

}

/* ================= BACKGROUND ================= */

.profil-page::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    background:#FFE2D7;

    border-radius:50%;

    top:-120px;
    left:-120px;

    opacity:.45;

}

.profil-page::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    background:#FFD9CB;

    border-radius:50%;

    right:-100px;
    top:450px;

    opacity:.25;

}

/* ================= HEADER ================= */

.profil-header-section{

    padding-top:135px;

    padding-bottom:55px;

    position:relative;

    z-index:2;

}

.profil-header-card{

    background:#FFFFFF;

    border-radius:30px;

    padding:45px;

    box-shadow:

        0 20px 45px rgba(0,0,0,.06);

}

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

.profil-icon-circle{

    width:120px;

    height:90px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(

        135deg,

        #FF9D9D,

        #FFC5AA

    );

    color:#FFFFFF;

    font-size:34px;

    box-shadow:

        0 18px 35px rgba(255,157,157,.28);

}

/* ================= TITLE ================= */

.section-subtitle{

    display:inline-block;

    padding:8px 18px;

    background:#FFE9E1;

    color:#FF7D7D;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

}

.section-title{

    font-size:34px;

    font-weight:700;

    color:#333;

}

.section-title span{

    color:#FF9D9D;

}

.section-description{

    color:#777;

    line-height:1.8;

    margin-top:15px;

    margin-bottom:0;

}

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

.profil-content{

    position:relative;

    z-index:2;

}

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

@media(max-width:991px){

    .profil-header-card{

        padding:30px;

        text-align:center;

    }

    .profil-icon-circle{

        margin:auto;

        margin-bottom:20px;

    }

    .section-title{

        font-size:28px;

    }

}

@media(max-width:576px){

    .profil-header-section{

        padding-top:110px;

    }

    .profil-header-card{

        padding:22px;

    }

    .profil-icon-circle{

        width:75px;

        height:75px;

        font-size:28px;

    }

    .section-title{

        font-size:24px;

    }

    .section-description{

        font-size:14px;

    }

}
/* ======================================================
   PROFIL
   BAGIAN 2
====================================================== */

/* ================= PROFILE CARD ================= */

.profile-card{

    background:#FFFFFF;

    border-radius:28px;

    padding:35px;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:.3s;

    height:100%;

}

.profile-card:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

/* ================= FOTO ================= */

.profile-photo{

    width:170px;

    height:170px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid #FFF3EE;

    box-shadow:0 12px 30px rgba(255,157,157,.25);

}

.profile-card h3{

    margin-top:25px;

    margin-bottom:10px;

    font-size:28px;

    font-weight:700;

    color:#333;

}

.profile-card p{

    color:#888;

    margin-bottom:20px;

}

/* ================= BADGE ================= */

.profile-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:10px 22px;

    border-radius:50px;

    background:#FFE8DF;

    color:#FF7F7F;

    font-size:14px;

    font-weight:600;

}

/* ================= PROFILE INFO ================= */

.profile-info{

    margin-top:30px;

}

.profile-info-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px 0;

    border-bottom:1px solid #F6EAE6;

}

.profile-info-item:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.profile-info-item i{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    background:#FFF2EC;

    color:#FF8C8C;

    font-size:18px;

    flex-shrink:0;

}

.profile-info-item small{

    display:block;

    color:#999;

    margin-bottom:4px;

    font-size:13px;

}

.profile-info-item strong{

    color:#333;

    font-size:15px;

    font-weight:600;

    word-break:break-word;

}

/* ================= INFO CARD ================= */

.info-card{

    background:#FFFFFF;

    border-radius:28px;

    padding:35px;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.info-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:35px;

}

.info-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFE8DF;

    color:#FF8A8A;

    font-size:24px;

}

.info-header h5{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:#333;

}

.info-header small{

    color:#888;

}

/* ================= DETAIL ================= */

.detail-item{

    background:#FFFDFC;

    border:1px solid #FFE5DA;

    border-radius:18px;

    padding:20px;

    height:100%;

    transition:.3s;

}

.detail-item:hover{

    border-color:#FFB8A2;

    box-shadow:0 10px 25px rgba(255,157,157,.12);

}

.detail-item label{

    display:block;

    color:#999;

    font-size:13px;

    font-weight:600;

    margin-bottom:10px;

}

.detail-value{

    color:#333;

    font-size:17px;

    font-weight:600;

    line-height:1.6;

    word-break:break-word;

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

.forgot-password{

    font-size:.92rem;

    font-weight:500;

    color:#FF8E8E;

    text-decoration:none;

    transition:.3s;

}

.forgot-password:hover{

    color:#FF6F6F;

    text-decoration:underline;

}
/* =====================================================
   LUPA PASSWORD
===================================================== */

.auth-form-wrapper{

    height:100%;

    min-height:640px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:55px 50px;

}

.auth-logo{

    text-align:center;

    margin-bottom:20px !important;

}

.auth-logo img{

    width:90px;

    height:auto;

}

.auth-title{

    text-align:center;

    font-size:2.25rem;

    font-weight:700;

    color:#2C3550;

    margin-bottom:8px;

}

.auth-subtitle{

    text-align:center;

    color:#7A7A7A;

    font-size:.96rem;

    line-height:1.7;

    margin-bottom:35px;

}

.banner-content{

    max-width:420px;

    margin:auto;

}

.banner-feature{

    margin-top:35px;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.banner-feature div{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px 18px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

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

    color:#fff;

    font-size:15px;

    font-weight:500;

}

.banner-feature i{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.18);

    font-size:18px;

}

.input-group{

    margin-bottom:20px;

}

.input-group-text{

    background:#FFF5F5;

    color:#FF8E8E;

    border:1px solid #FFD3D3;

}

.form-control{

    height:56px;

    border-color:#FFD3D3;

}

.form-control:focus{

    border-color:#FF9D9D;

    box-shadow:0 0 0 .2rem rgba(255,157,157,.18);

}

.btn-auth-primary{

    margin-top:8px;

    height:56px;

    font-size:1rem;

    font-weight:600;

}

.auth-link{

    display:inline-block;

    margin-top:25px;

    color:#FF8E8E;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.auth-link:hover{

    color:#FF6B81;

    text-decoration:underline;

}

.alert{

    margin-bottom:25px;

}

@media (max-width:991px){

    .auth-form-wrapper{

        min-height:auto;

        padding:40px 30px;

    }

    .banner-feature{

        display:none;

    }

    .auth-title{

        font-size:2rem;

    }

    .auth-subtitle{

        margin-bottom:25px;

    }

}

@media (max-width:576px){

    .auth-form-wrapper{

        padding:30px 22px;

    }

    .auth-logo img{

        width:75px;

    }

    .auth-title{

        font-size:1.8rem;

    }

}