/* 📁 public/css/main.css */

:root { 
  --tosca-light: #1fb195;  /* ✅ Tosca Menengah */
  --navy: #0d4f43;         /* Hijau Tosca Segar untuk komponen utama */
  --bg-soft: #f4f8f7;      /* Latar belakang section penunjang */
}

/* ── Navbar ── */
.navbar { 
  background: var(--navy); 
}
.navbar-brand img { 
  height: 60px; 
}
.navbar-brand span { 
  color: #ffffff; 
  font-weight: bold; 
  font-size: 18px; 
} 
.navbar .nav-link { 
  color: #fff !important; 
}
.navbar .nav-link:hover { 
  color: #d0e8d9 !important; 
}
.btn-login { 
  background: #d0e8d9; 
  color: var(--navy); 
  font-weight: bold; 
  border: none; 
}
.btn-login:hover { 
  background: #ffffff; 
  color: var(--navy); 
}

/* ── Hero ── */
.hero {
  background: linear-gradient(135deg, var(--navy), #167d6a);
  min-height: 500px;
  display: flex; 
  align-items: center;
  color: white;
}
.hero h1 { 
  font-size: 42px; 
  font-weight: bold; 
}
.hero h1 span { 
  color: #d0e8d9; 
}
.hero p { 
  font-size: 18px; 
  color: #ccc; 
}
.btn-gold { 
  background: #d0e8d9; 
  color: var(--navy); 
  font-weight: bold; 
  border: none; 
  padding: 12px 30px; 
}
.btn-gold:hover { 
  background: #ffffff; 
  color: var(--navy); 
}

/* ── Section ── */
.section-title { 
  font-size: 28px; 
  font-weight: bold; 
  color: var(--navy); 
}
.section-title span { 
  color: var(--tosca-light); 
}

/* ── Profil ── */
#profil { 
  background: #f8f9fa; 
}

/* ── Galeri ── */
.galeri-img {
  width: 100%; 
  height: 360px;
  object-fit: cover;
  border-radius: 10px;
  transition: 0.3s;
}
.galeri-placeholder {
  width: 100%; 
  height: 200px;
  background: #e0e0e0;
  border-radius: 10px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  color: #aaa; 
  font-size: 40px;
}

/* ── Paket ── */
.paket-card { 
  border: none; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
  border-radius: 12px; 
  transition: 0.3s; 
}
.paket-card:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 8px 25px rgba(0,0,0,0.15); 
}
.paket-card .card-header { 
  background: var(--navy); 
  color: white; 
  border-radius: 12px 12px 0 0 !important; 
}
.paket-harga { 
  font-size: 24px; 
  font-weight: bold; 
  color: var(--navy); 
}

/* ── Kelebihan ── */
#kelebihan { 
  background: var(--bg-soft);   
  color: #333333;               
}
#kelebihan .section-title { 
  color: var(--navy);           
}
.kelebihan-icon { 
  font-size: 40px; 
  color: var(--navy);           
}
#kelebihan p.text-white-50, 
#kelebihan .text-muted {
  color: #555555 !important;    
}

/* ── FAQ ── */
.accordion-button:not(.collapsed) { 
  background: var(--navy); 
  color: white; 
}
.accordion-button:focus { 
  box-shadow: none; 
}

/* ── Footer ── */
footer { 
  background: #093830; 
  color: #ccc; 
}
footer h6 { 
  color: #ffffff; 
}
footer a { 
  color: #aaa; 
  text-decoration: none; 
}
footer a:hover { 
  color: #ffffff; 
}
.sosmed-btn {
  width: 50px; 
  height: 50px;
  border-radius: 50%;
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 22px; 
  color: white;
  text-decoration: none;
}
.btn-fb { background: #1877f2; }
.btn-ig { background: #e1306c; }
.btn-wa { background: #25d366; }


/* 📱 ── PENGATURAN KHUSUS RESPONSIVE MOBILE (Layar di bawah 768px) ── */
@media (max-width: 768px) {
  /* Menyesuaikan tinggi hero & teks rata tengah agar seimbang di HP */
  .hero {
    min-height: 380px;
    padding: 50px 0;
    text-align: center; 
  }

  /* Mengurangi ukuran font agar tidak terpotong di layar kecil */
  .hero h1 {
    font-size: 28px;
  }
  .hero p {
    font-size: 15px;
  }

  /* Membuat tombol login/hero memanjang penuh agar mudah ditekan di HP */
  .btn-gold {
    padding: 10px 20px;
    font-size: 15px;
    width: 100%; 
  }

  /* Menyesuaikan ukuran judul section di mobile */
  .section-title {
    font-size: 22px;
    text-align: center; 
  }

  /* Menyesuaikan tinggi gambar galeri agar tidak terlalu jangkung */
  .galeri-img {
    height: 360px;
  }
  .galeri-placeholder {
    height: 200px;
    font-size: 30px;
  }

  /* Memberikan jarak vertikal yang aman saat grid kelebihan menumpuk ke bawah */
  #kelebihan .col-md-4,
  #kelebihan .col-6 {
    margin-bottom: 20px;
    text-align: center;
  }
}