/* =========================
   IKASU MASYARAKAT STYLE
========================= */


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


body{

    background:#eef5ff;

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

    color:#333;

}



/* NAVBAR */

.user-navbar{

    background:linear-gradient(
        135deg,
        #0d6efd,
        #0b3d91
    );

    padding:25px 8%;

    color:white;

    box-shadow:0 5px 20px rgba(0,0,0,.15);

}



.user-navbar h2{

    font-size:32px;

    font-weight:800;

    margin:0;

}



.user-navbar span{

    opacity:.9;

}





/* CONTAINER */

.user-container{

    width:90%;

    max-width:900px;

    margin:50px auto;

}







/* CARD */

.user-card{

    background:white;

    padding:40px;

    border-radius:25px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.08);

}







/* TITLE */

.user-title{

    text-align:center;

    margin-bottom:35px;

}



.user-title h2{

    color:#0d6efd;

    font-weight:700;

    font-size:32px;

}



.user-title p{

    color:#777;

}







/* FORM */

.form-label{

    font-weight:600;

    color:#333;

}



.form-control,
.form-select{


    border-radius:15px;

    padding:13px 15px;

    border:1px solid #dbe4f0;

}



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

    border-color:#0d6efd;

    box-shadow:0 0 0 .2rem rgba(13,110,253,.15);

}







/* BUTTON */


.btn-ikasu{


    display:inline-flex;

    align-items:center;

    gap:8px;


    background:#0d6efd;

    color:white;


    border:none;


    padding:14px 35px;


    border-radius:50px;


    font-weight:600;


    transition:.3s;


}



.btn-ikasu:hover{

    background:#084298;

    transform:translateY(-3px);

}





/* RESPONSIVE */

@media(max-width:768px){


.user-card{

    padding:25px;

}


.user-title h2{

    font-size:25px;

}


}