/* =====================================================
   BPM IBITEK
   SISTEM PENJAMINAN MUTU
   STYLE.CSS
===================================================== */


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

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


html,
body{

    width:100%;

    min-height:100%;

    font-family:'Nunito',Arial,sans-serif;

    color:#333;

    background:#fff;

}


a{
    text-decoration:none;
}


img{
    max-width:100%;
}





/* =====================
   CONTAINER
===================== */


.container{

    max-width:1100px;

    margin:auto;

    padding-left:20px;

    padding-right:20px;

}





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


.navbar{

    height:75px;

    background:#fff;

    box-shadow:
    0 3px 15px rgba(0,0,0,.12);

    position:sticky;

    top:0;

    z-index:9999;

}



.navbar-brand{

    display:flex;

    align-items:center;

}



.logo-spm{

    width:55px;

    height:55px;

    object-fit:contain;

    margin-right:10px;

}



.navbar-brand span{

    font-size:22px;

    font-weight:800;

    color:#005baa;

}



.nav-link{

    font-size:15px;

    font-weight:600;

    color:#333!important;

    padding:10px 15px!important;

}



.nav-link:hover{

    color:#005baa!important;

}







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


.btn-primary{

    background:#005baa!important;

    border:none!important;

    padding:12px 30px;

    border-radius:30px;

    font-weight:700;

}



.btn-primary:hover{

    background:#003b73!important;

}



.btn-outline-primary{

    border:2px solid #005baa;

    color:#005baa;

    border-radius:30px;

    padding:8px 22px;

    font-weight:700;

}



.btn-outline-primary:hover{

    background:#005baa;

    color:white;

}






/* =====================
   HERO INDEX.PHP
===================== */

.hero{

    position:relative;

    min-height:620px;

    display:flex;

    align-items:center;

    padding:120px 0 90px;

    overflow:hidden;

    background:
    linear-gradient(
        rgba(0,91,170,.82),
        rgba(0,59,115,.88)
    ),
    url("../img/bg2.png?v=");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}


/* Overlay tambahan */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(0,91,170,.15),
            rgba(255,255,255,.05)
        );

}


/* Gelombang bawah */

.hero::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:-60px;

    height:120px;

    background:#fff;

    border-radius:100% 100% 0 0;

}


/* Isi Hero */

.hero .container{

    position:relative;

    z-index:2;

}


.hero h1{

    color:#fff;

    font-size:52px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:20px;

    text-shadow:
        0 4px 15px rgba(0,0,0,.30);

}


.hero p{

    color:#fff;

    font-size:18px;

    line-height:34px;

    max-width:650px;

    margin-bottom:35px;

    text-shadow:
        0 2px 10px rgba(0,0,0,.25);

}


/* Tombol */

.hero .btn-primary{

    background:#fff!important;

    color:#005baa!important;

    border:none;

    padding:14px 35px;

    border-radius:40px;

    font-weight:700;

    transition:.3s;

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

}


.hero .btn-primary:hover{

    background:#f5f5f5!important;

    color:#003b73!important;

    transform:translateY(-3px);

}


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

@media(max-width:991px){

.hero{

    min-height:520px;

    padding:100px 0 70px;

}

.hero h1{

    font-size:40px;

}

.hero p{

    font-size:17px;

    line-height:30px;

}

}


@media(max-width:768px){

.hero{

    min-height:460px;

    text-align:center;

    padding:90px 0 60px;

}

.hero h1{

    font-size:32px;

}

.hero p{

    font-size:16px;

    line-height:28px;

    margin-left:auto;

    margin-right:auto;

}

.hero .btn{

    width:100%;

}

.hero::after{

    height:70px;

    bottom:-35px;

}

}







/* =====================
   SECTION INDEX
===================== */


.section{

    padding:70px 0;

}



.section-title{

    text-align:center;

    margin-bottom:45px;

}



.section-title h2{

    font-size:32px;

    font-weight:800;

    color:#005baa;

}



.section-title p{

    color:#666;

}





/* =====================
   CARD LAYANAN
===================== */


.card-service{

    height:100%;

    padding:35px;

    background:#fff;

    border-radius:20px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}



.card-service:hover{

    transform:translateY(-8px);

}



.card-service i{

    color:#005baa;

}



.card-service h4{

    font-weight:700;

    margin:15px 0;

}



.card-service p{

    color:#666;

}







/* =====================
   MAGANG.PHP
===================== */


/* HEADER */

.page-header{

    padding:60px 0 35px;

    background:#f4f9ff;

    text-align:center;

}



.page-header h1{

    color:#005baa;

    font-size:34px;

    font-weight:800;

}



.page-header p{

    color:#666;

}






/* GAMBAR MAGANG */


.magang-image{

    padding:40px 0;

    background:#f8f9fa;

    text-align:center;

}



.magang-image .container{

    max-width:1100px;
    margin:0 auto;
    padding-left:20px;
    padding-right:20px;

}

.magang-image img{

    display:block;
    width:100%;
    max-width:100%;
    height:auto;

    border-radius:20px;

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

}







/* FORM MAGANG */


.form-box{

    background:white;

    padding:40px;

    border-radius:20px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.1);

}



.form-box .alert-info{

    background:#eef7ff;

    border:none;

    border-left:5px solid #005baa;

    border-radius:15px;

    padding:25px;

}



.form-box .alert-info h5{

    color:#005baa;

    font-weight:800;

}



.form-section-title{

    color:#005baa;

    font-size:22px;

    font-weight:800;

    margin:30px 0 25px;

}



.form-section-title i{

    margin-right:8px;

}



.form-box label{

    font-weight:700;

    margin-bottom:8px;

}



.form-control{

    height:45px;

    border-radius:20px;

    padding-left:20px;

}



.form-control:focus{

    border-color:#005baa;

    box-shadow:

    0 0 0 .2rem rgba(0,91,170,.15);

}



textarea.form-control{

    height:120px;

}



input[type="file"]{

    height:auto;

    padding:8px 15px;

}



.form-box small{

    color:#777;

}



.form-box hr{

    margin:35px 0;

}





.form-box .btn{

    padding:12px 25px;

    border-radius:30px;

    font-weight:700;

}







/* =====================
   MAP
===================== */


iframe{

    width:100%;

    height:400px;

    border:0;

    border-radius:15px;

}






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


.footer{

    background:#003b73;

    color:white;

    padding:40px 0;

}



.footer p{

    margin:0;

}







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


@media(max-width:991px){


.navbar{

    height:auto;

}


.navbar-collapse{

    background:white;

    padding:15px;

    border-radius:10px;

    margin-top:10px;

}


}





@media(max-width:768px){


.hero{

    min-height:450px;

    text-align:center;

}



.hero h1{

    font-size:32px;

}



.hero p{

    font-size:16px;

    line-height:26px;

}



.hero .btn{

    width:100%;

}



.section{

    padding:50px 0;

}



.page-header h1{

    font-size:28px;

}



.magang-image img{

        width:100%;
        border-radius:15px;

    }



.form-box{

    padding:25px;

}



.form-box .btn{

    width:100%;

    margin-top:10px;

}



iframe{

    height:300px;

}


}


/* =====================================================
   LOGIN PAGE
   BPM IBITEK
===================================================== */


.login-section{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:100px 20px 60px;


    background:

    linear-gradient(
        135deg,
        #005baa,
        #003b73
    );

}



/* CARD LOGIN */

.login-card{


    width:100%;

    max-width:420px;


    background:#fff;


    padding:40px;


    border-radius:25px;


    box-shadow:

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


}




.login-logo{


    text-align:center;

}



.login-logo img{


    width:90px;

    height:90px;

    object-fit:contain;


    margin-bottom:15px;


}



.login-logo h2{


    font-size:24px;

    font-weight:800;

    color:#005baa;

}



.login-logo p{


    color:#666;

    font-size:14px;


}




.login-card hr{


    margin:25px 0;


}




.login-card h4{


    color:#003b73;

    font-weight:800;


}





.login-card label{


    font-weight:700;

}



.login-card .form-control{


    height:45px;

    border-radius:25px;

    padding-left:20px;


}



.login-card .form-control:focus{


    border-color:#005baa;


    box-shadow:

    0 0 0 .2rem rgba(0,91,170,.15);


}




.login-card .btn-primary{


    width:100%;

    height:48px;

}




.login-card a{


    color:#005baa;

    font-weight:600;


}




.login-card a:hover{


    color:#003b73;


}




/* =====================================================
   NOTIFICATION
===================================================== */


.alert{


    border-radius:15px;


}



.alert-success{


    border-left:

    5px solid #198754;


}



.alert-danger{


    border-left:

    5px solid #dc3545;


}






/* =====================================================
   UPLOAD DOCUMENT
===================================================== */


.upload-box{


    background:#fff;


    padding:40px;


    border-radius:20px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.10);


}



.upload-box h3{


    color:#005baa;

    font-weight:800;


}



.upload-box .btn{


    border-radius:30px;

}





.document-card{


    background:white;


    padding:30px;


    border-radius:20px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.08);


    transition:.3s;


}



.document-card:hover{


    transform:translateY(-5px);


}



.document-card i{


    color:#005baa;


}







/* =====================================================
   ADMIN LOGIN RESPONSIVE
===================================================== */


@media(max-width:576px){


.login-section{


    padding:80px 15px 40px;


}



.login-card{


    padding:25px;


}



.login-logo h2{


    font-size:20px;


}


}




/* =====================================================
   BACKGROUND CACHE FIX
===================================================== */


/*
Gunakan:

url("../img/bg1.png?v=1")

atau

url("../img/bg2.png?v=2")

atau

url("../img/bg4.png?v=4")

*/


.hero{


background:

linear-gradient(

rgba(0,91,170,.82),

rgba(0,59,115,.88)

),

url("../img/bg1.png?v=1");


background-size:cover;

background-position:center;

background-repeat:no-repeat;


}