:root {
  --nav-offset: 80px;
  --hmyd-green: #008000;
  --dark-bg: #1F2937;
  --text-input : #0f172a;
  --text-primary : #F8F9FA /* Warna teks default */
   
}
/* bikin scrollnya halus */
html { scroll-behavior: smooth; }

/* semua section yang jadi target anchor punya margin scroll di atas */
section[id]{
  scroll-margin-top: calc(var(--nav-offset) + 8px); /* +8px biar ada nafas */
}

body {
  font-family: 'Inter', Arial, sans-serif;
  background: var(--dark-bg); /* Warna latar belakang halaman */
  color: var(--text-primary); 
}

/* Navbar */
.navbar-nav .nav-link:hover {
  color: var(--hmyd-green) !important;
  text-decoration: underline;
  text-underline-offset: 15px;
}
.navbar .nav-link.active {
  color: var(--hmyd-green);
  font-weight: 700; /* Membuatnya lebih tebal (ini sudah bold) */
  text-decoration: underline; /* BARU: Menambah garis bawah */
  text-underline-offset: 15px; /* BARU: Memberi jarak antara teks dan garis bawah */
}

.navbar-brand img {
  margin-bottom: 15px;
  height: 40px; /* Ubah tinggi logo menjadi 60px */
  width: auto;
}
.btn-hmyd,
.btn-hmyd:hover{
  background-color: var(--hmyd-green);
  color: var(--text-primary); /* Warna teks pada tombol */
  border: none; /* Menghapus border default */
  border-radius: 8px;
}

/* Hero section */
.text-hmyd-green {
  color: var(--hmyd-green) !important;  /* Warna hijau utama */
}
.hero-desc {
  color: var(--text-primary);             /* Teks deskripsi lebih terang, abu muda */
  max-width: 550px;           /* Maks lebar deskripsi supaya enak dibaca */
  font-size: 2rem
}

.hero-stats .stat-item h2 {
  font-size: 2rem;            /* Angka statistik besar */
  font-weight: 700;           /* Bold */
  margin-bottom: 0;           /* Tanpa margin bawah */
}

.hero-stats .stat-item small {
  display: block;             /* Keterangan statistik di bawah angka */
  margin-top: 4px;            /* Jarak ke atas */
  font-size: 1rem;            /* Ukuran font sedang */
}

.hero-img-wrap {
  background: none;           /* Tidak ada background tambahan */
  border-radius: 18px;        /* Sudut bulat di container gambar */
  padding: 0;                 /* Tidak ada padding */
  max-width: 500px;           /* Maks lebar container gambar */
}

.hero-img {
  border-radius: 14px;        /* Sudut gambar bulat */
  box-shadow: 0 8px 32px rgba(0,0,0,0.21); /* Efek bayangan besar */
  width: 100%;                /* Gambar mengikuti lebar parent */
  height: auto;               /* Tinggi otomatis */
  display: block;             /* Tampilkan sebagai blok (tidak inline) */
  opacity: 0.6;
}

@media (max-width: 991px) {
  .hero-section .container {
    flex-direction: column !important; /* Stack ke bawah di layar kecil */
    text-align: center;                /* Teks rata tengah */
  }
  .hero-img-wrap {
    margin: 32px auto 0;               /* Margin atas di mobile, gambar tengah */
  }
  .hero-stats {
    justify-content: center;           /* Statistik rata tengah di mobile */
  }
  .layanan-section {
    padding: 1.5rem 0;        /* Padding atas bawah dikurangi */
  }
  .section-title {
    font-size: 1.3rem;        /* Judul mengecil */
  }
  .card-layanan {
    padding: 1.3rem;          /* Padding card mengecil */
  }
  .layanan-section .container {
    height: auto !important; /* override h-100 di mobile */
    padding-bottom: 15px;    
  }
  .tentang-title {
    font-size: 1.5rem;
  }
  .card-advantage {
    min-height: 200px;
    padding: 1.2rem 0.8rem 1.1rem 0.8rem;
  }
    .proses-title {
    font-size: 1.5rem;
  }
  .proses-card {
    min-height: 180px;
    padding: 1.1rem 0.7rem 1rem 0.7rem;
  }
  .proses-number {
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
  }
  .kontak-title { font-size: 1.7rem; } 
}

@media (max-width: 767px) {
  .tentang-section {
    padding: 1.2rem 0;
    border-radius: 10px;
  }
  .card-advantage {
    margin-bottom: 1.3rem;
  }
  .row.g-4 {
    row-gap: 1.2rem;
  }
    .proses-section {
    padding: 1.2rem 0;
    border-radius: 10px;
  }
  .proses-card {
    margin-bottom: 1.2rem;
  }
  .kontak-card { padding: 1.25rem !important; }

}

/* Layanan Section */
.layanan-section .container {
  background: #394358;   /* Warna abu gelap */
  border-radius: 15px;   /* Sudut membulat untuk section */
  height: 380px;
}
 .section-title {
  color: var(--text-primary);           /* Teks judul putih */
  font-size: 2rem;       /* Ukuran font besar */
  font-weight: 700;      /* Tebal */
  padding-top: 20px;
  padding-left: 20px;
}
.card-layanan {
  background: #242d3b;         /* Card lebih gelap dari section */
  color: var(--text-primary);                 /* Teks putih default */
  border-radius: 14px;         /* Sudut membulat card */
  transition: 
  transform 0.3s cubic-bezier(.33,1.6,.55,1),
  box-shadow 0.3s cubic-bezier(.33,1.6,.55,1);
    
  min-height: 260px;           /* Tinggi min card (agar rata) */
  display: flex;               /* Flex agar konten kolom */
  flex-direction: column;      /* Konten searah vertikal */
  gap: 10;
  padding-left: 20px;
}
.card-layanan i {
  color: var(--hmyd-green);              /* Hijau utama */
  margin-bottom: 16px;         /* Jarak ke judul */
  font-size: 2rem;           /* Ukuran icon besar */
}
.card-layanan h4 {
  font-size: 1.5rem;           /* Ukuran judul besar */
  font-weight: 700;            /* Tebal */
}
.text-layanan {
  color: var(--text-primary);              /* Warna abu terang */
  font-size: 1.1rem;             /* Ukuran font normal */
  margin-bottom: 0;            /* Tanpa margin bawah */
  line-height: 1.5;            /* Jarak antar baris */
}
.card-layanan:hover, .card-layanan:focus-within {
  transform: translateY(-9px) scale(1.02);    /* Card naik & membesar dikit */
  box-shadow: 0 12px 36px 0 rgba(0,0,0,0.16); /* Bayangan lebih besar */
  z-index: 2;                                 /* Naik ke atas di stack */
}

/* Tentang Section*/
.tentang-title {
  color: var(--text-primary);           /* Teks judul putih */
  font-size: 2rem;       /* Ukuran font besar */
  font-weight: 700;      /* Tebal */
  margin-bottom: 8px;            /* Sedikit jarak bawah */
}
.tentang-subtitle {
  color: var(--text-primary);                /* Abu terang */
  font-size: 1.08rem;            /* Ukuran sedang */
  margin-bottom: 70px;
}
.card-advantage {
  background: var(--text-primary);              /* Card putih */
  border-radius: 14px;           /* Sudut card membulat */
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.08); /* Bayangan lembut */
  transition: 
    transform 0.25s cubic-bezier(.33,1.6,.55,1),
    box-shadow 0.25s cubic-bezier(.33,1.6,.55,1);
  padding: 2rem 1.2rem 1.5rem 1.2rem; /* Padding nyaman */
  min-height: 270px;             /* Tinggi minimum agar rata */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.icon-adv i {
  color: #008000;                /* Hijau utama */
  font-size: 2rem;               /* Icon sangat besar */
  display: inline-block;
}
.card-advantage h4 {
  color: #292929;                   /* Teks gelap di card putih */
  font-size: 1.5rem;           /* Ukuran judul besar */
  font-weight: 700;            /* Tebal */
}
.card-advantage p {
  color: #5C5C5C;                  /* Teks gelap, nyaman dibaca */
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Proses Section*/
.proses-title {
  color: var(--text-primary);           /* Teks judul putih */
  font-size: 2rem;       /* Ukuran font besar */
  font-weight: 700;      /* Tebal */
  margin-bottom: 8px;            /* Sedikit jarak bawah */
}
.proses-subtitle {
  color: var(--text-primary);                /* Abu terang */
  font-size: 1.08rem;            /* Ukuran sedang */
  margin-bottom: 70px;
}
.proses-card {
  background: transparent;    /* Card transparan (tidak putih) */
  border-radius: 12px;        /* Sudut card membulat */
  padding: 1.6rem 1rem 1.2rem 1rem;  /* Padding dalam card */
  color: #fff;                /* Semua teks card putih */
  display: flex;              /* Kolom vertikal */
  flex-direction: column;
  align-items: center;        /* Semua konten di tengah */
  min-height: 270px;
}
.proses-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: var(--hmyd-green);        /* Hijau utama */
  color: var(--text-primary);                /* Angka putih */
  font-size: 2.3rem;          /* Angka besar */
  font-weight: 700;
  border-radius: 10px;        /* Sudut kotak membulat */
  margin-bottom: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  letter-spacing: -2px;
}
.proses-card h4 {
  color: var(--text-primary);                /* Judul putih */
  font-size: 1.5rem;           /* Ukuran judul besar */
  font-weight: 700;            /* Tebal */
  margin-bottom: 1rem;
}
.proses-card p {
  color:  var(--text-primary);             /* Abu terang */
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Jangkauan Section */
.jangkauan-title {
  color: #fff;                /* Judul putih */
  font-weight: 700;      /* Tebal */
  margin-bottom: 8px;
}
.jangkauan-subtitle {
  color: var(--text-primary);                /* Abu terang */
  font-size: 1.08rem;            /* Ukuran sedang */
  margin-bottom: 70px;
}
.jangkauan-map-wrap {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 4 / 3;        /* Menyesuaikan dengan proporsi peta */
  border-radius: 18px;
  overflow: hidden;
}

.map-img {
  width: 100%;
  height: 100%;
  object-fit: contain;           /* Mengisi kontainer proporsional */
}

/* Kontak Section */
.kontak-header {                          /* Pembungkus judul + subjudul */
  max-width: 680px;                       /* Batasi lebar agar mudah dibaca */
}
.kontak-title {                           /* Judul utama */
  color: var(--text-primary);                /* Judul putih */
  font-weight: 700;      /* Tebal */
  margin-bottom: 8px;
}

.kontak-subtitle {                        /* Subjudul */
  color: var(--text-primary);                /* Abu terang */
  font-size: 1.08rem;            /* Ukuran sedang */
  margin-bottom: 70px;
}
.kontak-card {                            /* Kartu putih yang membungkus form */
  border: 1px solid rgba(0,0,0,0.05);     /* Garis halus */
  border-radius: 14px;                    /* Sudut membulat besar */
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Bayangan lembut */
  color: #5C5C5C;
  font-size: 1.08rem;
}

.form-control {                           /* Dasar input Bootstrap, kita haluskan */
  border-color: #dce3ee;                  /* Warna border lembut */
  border-radius: 4px;                    /* Sudut membulat */
  background: var(--text-primary);                       /* Latar putih bersih */
  color: var(--text-input);                         /* Teks gelap agar kontras */
  transition: border-color .2s, box-shadow .2s; /* Animasi fokus halus */
}
.form-control:focus {                     /* Saat fokus di field */
  border-color: var(--hmyd-green);        /* Border hijau */
  box-shadow: 0 0 0 4px rgba(0,128,0,.15);/* Glow hijau lembut */
  outline: 0;                             /* Hilangkan outline default */
}
.btn-hmyd {                               /* Tombol hijau utama (override aman) */
  background-color: var(--hmyd-green) !important; /* Hijau brand */
  color: var(--text-primary)!important;                 /* Teks putih */
  border: 0;                              /* Tanpa border */
}
.btn-hmyd:hover {                         /* Hover tombol */
  filter: brightness(0.95);               /* Sedikit gelap saat hover */
}

.btn-hmyd:focus-visible {                 /* Aksesibilitas: fokus keyboard */
  box-shadow: 0 0 0 4px rgba(0,128,0,.2); /* Ring fokus hijau */
  outline: 0;
}

/* Footer */
.footer-hmyd {
  background:var(--text-primary);              /* sama dengan navbar yang putih */
  color:#5C5C5C;                   /* teks utama gelap seperti navbar */
  border-top:1px solid #e9ecef;    /* garis pemisah halus di atas */
}
.footer-heading { 
  color:var(--hmyd-green);                   /* heading warna utama */
  font-weight:700;                 /* tebal */
  font-size:0.95rem;               /* sedikit kecil */
}
.footer-hmyd a,
.footer-hmyd a:link,
.footer-hmyd a:visited {
  color:#5C5C5C !important;    /* link & visited jadi gelap, bukan biru/ungu */
  text-decoration:none;        /* tanpa underline default */
}

footer-logo{
  height:35px;                     /* seragam, tidak terlalu besar */
  width:auto;
  vertical-align:middle;           /* biar sejajar teks */
  display:inline-block;
}