body {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  background: #f0f6fa;
  color: #1a1f36;
  text-align: center;
}

.page-title {
  margin: 20px 0;
  font-size: 26px;
  color: #15827f;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 50px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;  /* rapat sikit */
}

.card {
  width: 280px; /* lock kecik sikit dari 300px */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0,0,0,.1);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

.card-header {
  background: linear-gradient(90deg, #1aa7a5, #27ae60);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
}
.logo-small {
  height: 28px;
  width: auto;
  border-radius: 6px;
}

.thumb {
  height: 180px;
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.card:hover .thumb img {
  transform: scale(1.05);
}

.body {
  padding: 14px;
}
.name {
  margin: 0 0 6px;
  font-size: 18px;
  color: #15827f;
}
.desc {
  margin: 0 0 12px;
  font-size: 14px;
  color: #606a86;
}
.price {
  font-weight: 700;
  color: #2ecc71;
  font-size: 16px;
  margin-bottom: 12px;
}

.cta {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.btn-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;   /* buang underline */
  font-size: 14px;
  color: #fff !important;  /* force text putih walaupun <a> */
}

/* Info Button */
.btn.info {
  background: #1a73e8;
}
.btn.info:hover {
  background: #1259b2;
}

/* Booking Button */
.btn.book {
  background: #25d366;
}
.btn.book:hover {
  background: #1ebe57;
}

/* ========== Floating WhatsApp ========== */
.whatsapp{
  position:fixed;bottom:80px;right:20px;z-index:1100;
  background:#25d366;color:white;border-radius:50%;width:55px;height:55px;
  display:flex;justify-content:center;align-items:center;
  box-shadow:0 5px 15px rgba(0,0,0,.3);transition:.3s;
}
.whatsapp:hover{transform:scale(1.1)}
.whatsapp svg{width:30px;height:30px;fill:white}

/* ========== Bottom Nav ========== */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:white;box-shadow:0 -2px 8px rgba(0,0,0,.1);
  display:flex;justify-content:space-around;align-items:center;
  height:60px;z-index:1000;
}
.bottom-nav a{
  text-decoration:none;color:#5f6c86;font-size:12px;
  display:flex;flex-direction:column;align-items:center;
}
.bottom-nav a svg{width:22px;height:22px;margin-bottom:3px;fill:#5f6c86}
.bottom-nav a.active, .bottom-nav a:hover{color:#1aa7a5}
.bottom-nav a.active svg, .bottom-nav a:hover svg{fill:#1aa7a5}