*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}


body{
    background:#f3f7ff;
    color:#222;
}



/* HEADER */

header{
    background:#0879e8;
    padding:18px 25px;
    display:flex;
    align-items:center;
}

.logo{
    display:flex;
    align-items:center;
}

.logo-img{
    height:38px;      /* Sesuaikan jika ingin lebih besar/kecil */
    width:auto;
    display:block;
}




/* HERO */

.hero{

    min-height:650px;
    background:

    radial-gradient(circle at top right,#32b5ff,transparent 35%),
    linear-gradient(135deg,#006be6,#008cff);

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

    padding:40px 30px;

    overflow:hidden;

}




.content{

    width:50%;
    color:white;

    animation:slideLeft .8s ease;

}




.content h1{

    font-size:40px;
    line-height:0.9;
    font-weight:600;

}


.content h1 span{

    color:#ffd900;
    font-size:85px;

}



.subtitle{

    font-size:22px;
    margin:20px 0;

}




.item{

    background:white;

    color:#0057b8;

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

    padding:15px;

    border-radius:40px;

    display:flex;

    gap:15px;

    align-items:center;

    margin:12px 0;

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

}



.item:first-letter{

    font-size:25px;

}


.item b{

    font-size:18px;

}


.item span{

    color:#555;

    font-size:14px;

}





button{

    border:none;

    cursor:pointer;

    background:#ffd900;

    color:#0756aa;

    font-size:17px;

    font-weight:bold;

    padding:17px 35px;

    border-radius:40px;

    margin-top:20px;

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

    transition:.3s;

}



button:hover{

    transform:scale(1.05);

}




/* PHONE IMAGE */


.phone{

    width:50%;

    text-align:center;

    animation:slideRight .8s ease;

}



.phone img{

    width:360px;

    max-width:100%;

    filter:drop-shadow(0 20px 20px rgba(0,0,0,.3));

}






/* FORM */


.form-box{

    background:white;

    width:90%;

    max-width:450px;

    margin:-60px auto 40px;

    position:relative;

    padding:30px;

    border-radius:25px;

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

}



.form-box h2{

    text-align:center;

    color:#0879e8;

    margin-bottom:20px;

}



label{

    display:block;

    margin-top:15px;

    font-weight:bold;

}



input,
select{

    width:100%;

    padding:15px;

    margin-top:8px;

    border-radius:12px;

    border:1px solid #ddd;

    font-size:16px;

}



.form-box button{

    width:100%;

    background:#0879e8;

    color:white;

}





/* ANIMATION */


@keyframes slideLeft{

from{

transform:translateX(-100px);

opacity:0;

}

to{

transform:translateX(0);

opacity:1;

}

}



@keyframes slideRight{

from{

transform:translateX(100px);

opacity:0;

}

to{

transform:translateX(0);

opacity:1;

}

}





/* MOBILE */


@media(max-width:768px){


.hero{

    flex-direction:column;

    padding:30px 15px;

}



.content{

    width:100%;

    text-align:center;

}



.content h1{

    font-size:45px;

}


.content h1 span{

    font-size:65px;

}



.item{

    text-align:left;

}



.phone{

    width:100%;

    margin-top:30px;

}



.phone img{

    width:280px;

}



.form-box{

    margin-top:20px;

}


}