*{  margin:0;  padding:0;  box-sizing:border-box;  font-family:'Poppins',sans-serif;}html{  scroll-behavior:smooth;}body{  background:#f4f6f9;  color:#333;  overflow-x:hidden;}.hero{  position:relative;  height:420px;  background:  url('https://images.unsplash.com/photo-1521587760476-6c12a4b040da?q=80&w=1600&auto=format&fit=crop')  center/cover no-repeat;  display:flex;  align-items:center;  justify-content:center;  overflow:hidden;}.overlay{  position:absolute;  width:100%;  height:100%;  background:  linear-gradient(  rgba(10,20,40,0.82),  rgba(10,20,40,0.88)  );}.hero-content{  position:relative;  z-index:2;  width:90%;  max-width:1200px;  text-align:center;  color:white;}.logo-area{  display:flex;  align-items:center;  justify-content:center;  gap:20px;  margin-bottom:25px;  flex-wrap:wrap;}.logo{  width:90px;  height:90px;  background:white;  border-radius:50%;  padding:15px;  box-shadow:  0 10px 25px rgba(0,0,0,0.25);}.logo-text h1{  font-size:48px;  font-weight:800;  margin-bottom:10px;  letter-spacing:1px;  text-shadow:  0 4px 20px rgba(0,0,0,0.3);}.logo-text p{  font-size:18px;  opacity:0.92;  max-width:700px;  margin:auto;  line-height:1.8;}.search-box{  margin-top:35px;  display:flex;  justify-content:center;  gap:12px;  flex-wrap:wrap;}.search-box input{  width:480px;  max-width:95%;  padding:16px 22px;  border:none;  border-radius:60px;  outline:none;  font-size:15px;  box-shadow:  0 10px 25px rgba(0,0,0,0.15);}.search-box button{  padding:16px 28px;  border:none;  border-radius:60px;  background:  linear-gradient(  135deg,  #ffb703,  #ffd166  );  color:#222;  font-weight:700;  cursor:pointer;  transition:0.3s;}.search-box button:hover{  transform:translateY(-2px);  box-shadow:  0 10px 20px rgba(0,0,0,0.18);}.section-title{  text-align:center;  margin:70px 0 40px;  padding:0 20px;}.section-title h2{  font-size:42px;  font-weight:600;  letter-spacing:1px;  color:#1e293b;  position:relative;  display:inline-block;  margin-bottom:18px;  font-family:'Poppins',sans-serif;}.section-title h2::after{  content:'';  position:absolute;  left:50%;  transform:translateX(-50%);  bottom:-10px;  width:55px;  height:2px;  border-radius:20px;  background:#94a3b8;}.section-title p{  font-size:16px;  font-weight:400;  color:#64748b;  letter-spacing:0.3px;  line-height:1.8;}@media(max-width:768px){  .section-title h2{    font-size:32px;  }  .section-title p{    font-size:14px;  }}.container{  width:90%;  max-width:1200px;  margin:auto;  display:grid;  grid-template-columns:  repeat(auto-fit, minmax(280px, 1fr));  gap:30px;  padding-bottom:60px;}.kategori-card{  background:white;  border-radius:28px;  overflow:hidden;  position:relative;  box-shadow:  0 10px 30px rgba(0,0,0,0.08);  transition:0.35s;  border:1px solid #eef1f5;}.kategori-card:hover{  transform:  translateY(-10px);  box-shadow:  0 18px 40px rgba(0,0,0,0.15);}.kategori-image{  position:relative;  overflow:hidden;}.kategori-image img{  width:100%;  height:240px;  object-fit:cover;  transition:0.5s;}.kategori-card:hover .kategori-image img{  transform:scale(1.08);}.kategori-badge{  position:absolute;  top:18px;  left:18px;  background:rgba(255,255,255,0.95);  backdrop-filter:blur(10px);  padding:8px 16px;  border-radius:30px;  font-size:13px;  font-weight:700;  color:#1e3a5f;  box-shadow:  0 5px 15px rgba(0,0,0,0.1);}.kategori-body{  position:relative;  padding:  0 25px 30px;  text-align:center;}.kategori-icon{  width:85px;  height:85px;  margin:  -45px auto 20px;  border-radius:50%;  background:  linear-gradient(  135deg,  #ffb703,  #ffd166  );  display:flex;  align-items:center;  justify-content:center;  font-size:38px;  border:6px solid white;  box-shadow:  0 10px 20px rgba(0,0,0,0.12);}.kategori-body{  display:flex;  flex-direction:column;  align-items:center;  padding:5px 28px 30px;  min-height:300px;}.kategori-icon{  width:68px;  height:68px;  margin:  -38px auto 22px;  border-radius:22px;  background:  rgba(255,255,255,0.95);  backdrop-filter:blur(10px);  display:flex;  align-items:center;  justify-content:center;  font-size:30px;  color:#1e293b;  border:  1px solid #eef2f7;  box-shadow:  0 10px 25px rgba(0,0,0,0.06);}.kategori-body h3{  font-size:26px;  font-weight:600;  color:#1e293b;  letter-spacing:0.4px;  margin-bottom:14px;  line-height:1.3;}.kategori-body p{  color:#64748b;  font-size:15px;  line-height:1.6;  font-weight:400;  max-width:280px;  margin:0 auto 18px;}.btn-kategori{  margin-top:auto;  display:inline-block;  width:100%;  padding:15px;  border-radius:14px;  text-decoration:none;  font-weight:600;  color:white;  text-align:center;  background:  linear-gradient(  135deg,  #1e3a5f,  #27496d  );  transition:.3s;}@media(max-width:768px){  .kategori-body{    padding:0 22px 28px;  }  .kategori-body h3{    font-size:22px;  }  .kategori-body p{    font-size:14px;  }  .kategori-icon{    width:60px;    height:60px;    font-size:26px;    border-radius:18px;  }}.kategori-info{  display:flex;  justify-content:center;  gap:10px;  flex-wrap:wrap;  margin-bottom:25px;}.kategori-info span{  background:#eef3f9;  color:#1e3a5f;  padding:8px 14px;  border-radius:30px;  font-size:12px;  font-weight:700;}.btn-kategori{  display:inline-block;  width:100%;  padding:15px;  border-radius:14px;  text-decoration:none;  font-weight:700;  letter-spacing:0.5px;  color:white;  background:  linear-gradient(  135deg,  #1e3a5f,  #27496d  );  transition:0.3s;}.btn-kategori:hover{  transform:translateY(-2px);  background:  linear-gradient(  135deg,  #14263f,  #1e3a5f  );}.pagination{  display:flex;  justify-content:center;  gap:10px;  margin-bottom:70px;  flex-wrap:wrap;}.pagination button{  padding:12px 16px;  border:none;  border-radius:10px;  background:#dbe4ee;  cursor:pointer;  font-weight:600;  transition:0.3s;}.pagination button:hover,.pagination button.active{  background:#1e3a5f;  color:white;}footer{  background:#14263f;  color:white;  text-align:center;  padding:30px 20px;}footer p{  opacity:0.9;  line-height:1.8;}@media(max-width:768px){  .hero{    height:auto;    padding:70px 0;  }  .logo-area{    flex-direction:column;  }  .logo{    width:75px;    height:75px;  }  .logo-text h1{    font-size:34px;  }  .logo-text p{    font-size:15px;  }  .section-title h2{    font-size:30px;  }  .kategori-image img{    height:220px;  }  .kategori-body{    padding:0 20px 25px;  }  .kategori-body h3{    font-size:24px;  }  .kategori-icon{    width:75px;    height:75px;    font-size:32px;  }  .search-box{    flex-direction:column;    align-items:center;  }  .search-box button{    width:220px;  }}