body{margin:0;font-family:Segoe UI;background:#f4f6f8}
.navbar{background:#0f172a;color:#fff;padding:15px 40px;display:flex;justify-content:space-between}
.logo span{color:#22c55e}
nav a{color:#fff;margin:0 10px;text-decoration:none}

.hero{height:65vh;background:url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6') center/cover}
.hero-box{background:rgba(0,0,0,.6);height:100%;color:#fff;text-align:center;padding-top:150px}

.search{display:flex;gap:10px;justify-content:center;margin-top:20px}
.search input,.search select{padding:8px}
.search button{background:#22c55e;color:#fff;border:none;padding:10px}

.section{padding:50px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:25px}
.card{background:#fff;border-radius:12px;overflow:hidden;padding-bottom:15px;cursor:pointer}
.card img{width:100%;height:180px;object-fit:cover}
.card h3{padding:10px}
.price{padding-left:10px;color:#16a34a;font-weight:bold}
.card button{margin:10px;background:#22c55e;color:#fff;border:none;padding:8px}

.badge{position:absolute;background:#22c55e;color:#fff;padding:4px 10px}
.badge.sewa{background:#2563eb}

.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7)}
.modal-content{background:#fff;width:90%;max-width:600px;margin:60px auto;padding:20px;border-radius:12px}
.close{float:right;font-size:22px;cursor:pointer}

.action a{display:inline-block;margin:10px;padding:12px 18px;color:#fff;border-radius:6px;text-decoration:none}
.wa{background:#22c55e}
.email{background:#2563eb}

.gray{background:#eef2f7}
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.review-card{background:#fff;padding:20px;border-radius:12px}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.contact input,.contact textarea{width:100%;padding:10px;margin:8px 0}
.contact button{background:#22c55e;color:#fff;border:none;padding:10px}

footer{text-align:center;background:#0f172a;color:#fff;padding:20px}
.about-home{
  padding:60px 50px;
  background:#ffffff;
}

.about-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

.about-text h2{
  font-size:32px;
  margin-bottom:15px;
  color:#0f172a;
}

.about-text p{
  color:#475569;
  line-height:1.8;
  margin-bottom:15px;
}

.about-text ul{
  list-style:none;
  padding:0;
}

.about-text li{
  margin:8px 0;
  color:#16a34a;
  font-weight:500;
}

.about-image img{
  width:100%;
  border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}

@media(max-width:900px){
  .about-container{
    grid-template-columns:1fr;
  }
}
.wa-float{
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: #fff;
  padding: 12px 18px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  z-index: 9999;
}

.wa-float img{
  width: 26px;
}

@media(max-width:600px){
  .wa-float span{
    display: none;
  }
}
.fasilitas-card img,
.gallery img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:12px;
}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:15px;
  font-weight:600;
}

.faq-item{
  background:#fff;
  padding:15px;
  border-radius:10px;
  margin-bottom:10px;
  cursor:pointer;
}

.faq-item p{
  display:none;
  margin-top:8px;
}