*{

box-sizing:border-box;

}



body{

margin:0;

font-family:
"Segoe UI",
Arial,
sans-serif;

background:#f2f5f7;

color:#333;

}



/* HEADER */


.header{

background:
linear-gradient(
135deg,
#087f3f,
#0b9b52
);

padding:45px 20px;

color:white;

}



.logo-container{

display:flex;

justify-content:center;

align-items:center;

gap:45px;

}



.logo-image{

width:130px;

height:130px;

object-fit:contain;

background:white;

padding:10px;

border-radius:20px;

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

}



.title{

text-align:center;

}



.title h1{

font-size:75px;

letter-spacing:4px;

margin:0;

font-weight:900;

}



.title h2{

font-size:25px;

margin:5px 0;

font-weight:500;

}



.title p{

font-size:20px;

margin:0;

}



/* CONTENT */


.container{

width:90%;

max-width:850px;

margin:40px auto;

}



.search-box,
.hasil{

background:white;

padding:35px;

border-radius:20px;

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

margin-bottom:30px;

}



.search-box h2,
.hasil h2{

font-size:30px;

margin-top:0;

color:#087f3f;

}



.search-area{

display:flex;

gap:15px;

}



input{

flex:1;

padding:18px;

font-size:18px;

border-radius:12px;

border:1px solid #ccc;

}



button{

background:#087f3f;

color:white;

border:none;

padding:18px 40px;

font-size:18px;

border-radius:12px;

cursor:pointer;

}



button:hover{

background:#066832;

}



/* DATA */


.data{

background:#f8faf9;

padding:25px;

border-radius:15px;

}



.item{

margin-bottom:25px;

}



.item span{

display:block;

font-size:16px;

color:#666;

}



.item strong{

display:block;

font-size:24px;

margin-top:5px;

}



#status{

color:#087f3f;

}



.informasi{

margin-top:20px;

background:#e8f6ed;

border-left:6px solid #087f3f;

padding:20px;

border-radius:12px;

color:#075c2d;

}



.informasi h3{

margin-top:0;

}



/* FOOTER */


footer{

background:#087f3f;

color:white;

text-align:center;

padding:20px;

margin-top:50px;

}



/* HP */


@media(max-width:700px){


.logo-container{

flex-direction:column;

gap:20px;

}



.title h1{

font-size:50px;

}



.search-area{

flex-direction:column;

}



button{

width:100%;

}



}