*{
box-sizing:border-box;
}

body{
margin:0;
font-family:'Segoe UI',Arial,sans-serif;
background:#f4f7fb;
color:#222;
}


/* HEADER */

.header{

background:linear-gradient(135deg,#005bea,#00c6fb);
color:white;
padding:70px 20px;
text-align:center;

}


.header h1{

font-size:45px;
margin:0;

}


.header p{

font-size:20px;

}


.header input{

margin-top:25px;
width:90%;
max-width:600px;
padding:18px 25px;
border:none;
border-radius:50px;
font-size:17px;
outline:none;

}



/* JUDUL */

h2{

text-align:center;
margin:50px 0 20px;
font-size:32px;

}



/* CARD */

.container{

display:grid;
grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:25px;

padding:30px;

max-width:1100px;
margin:auto;

}



.card{

background:white;

border-radius:25px;

overflow:hidden;

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

transition:.3s;

}


.card:hover{

transform:translateY(-10px);

}



.card img{

width:100%;
height:200px;
object-fit:cover;

}



.card h3{

padding:0 20px;

font-size:23px;

}



.card b{

padding:0 20px;

color:#0066ff;

}



.card p{

padding:0 20px;

color:#666;

line-height:1.6;

}



/* TOMBOL WA */

.card a{

display:block;

padding:20px;

}



.card button{

width:100%;

background:#25D366 !important;

color:white !important;

border:none;

padding:15px;

font-size:17px;

border-radius:50px;

cursor:pointer;

font-weight:bold;

transition:.3s;

}



.card button:hover{

background:#128C7E !important;

}



/* MOBILE */

@media(max-width:600px){

.header h1{

font-size:32px;

}


.logo{
width:120px;
height:120px;
object-fit:contain;
margin-bottom:15px;
filter:drop-shadow(0 5px 10px rgba(0,0,0,.2));
}
/* NAVBAR */

.navbar{

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

padding:15px 40px;

background:white;

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

position:sticky;

top:0;

z-index:10;

}


.brand{

display:flex;
align-items:center;
gap:15px;

font-size:22px;

font-weight:bold;

color:#005bea;

}


.brand img{

width:45px;
height:45px;

object-fit:contain;

}



.menu{

display:flex;

gap:25px;

}



.menu a{

text-decoration:none;

color:#333;

font-weight:600;

}



.menu a:hover{

color:#0066ff;

}



/* HP */

@media(max-width:700px){

.navbar{

flex-direction:column;

gap:15px;

}


.menu{

flex-wrap:wrap;

justify-content:center;

gap:15px;

}

}
.filter{

text-align:center;
margin:30px;

}


.filter button{

background:#005bea;
color:white;

border:none;

padding:12px 25px;

margin:5px;

border-radius:30px;

cursor:pointer;

}


.filter button:hover{

background:#003f9e;

}
.kategori-home{

display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
margin-top:30px;

}



.kategori-card{

width:160px;

background:white;

padding:15px;

border-radius:15px;

text-decoration:none;

color:#333;

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

transition:.3s;

}



.kategori-card:hover{

transform:translateY(-5px);

}



.icon{

font-size:32px;

}



.kategori-card h3{

font-size:18px;

margin:8px 0;

color:#005bea;

}



.kategori-card p{

font-size:13px;

margin:0;

color:#666;

}