/* CSS Kustom Sederhana */
body {
  font-family: "Montserrat", sans-serif;
  background-color: #f8f9fa; /* Warna latar belakang sangat terang */
}
.hero-section {
  background-color: #0d6efd; /* Biru Bootstrap */
  color: white;
  padding: 80px 0;
  margin-bottom: 40px;
}
.tech-tag {
  font-family: "Roboto Mono", monospace;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 5px;
  margin-right: 5px;
  font-size: 0.9em;
}
.card-module {
  transition: transform 0.3s ease-in-out;
  border-left: 5px solid #ffc107; /* Warna aksen Oranye */
}
.card-module:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.list-group-item {
  border: none;
  padding: 10px 15px;
  transition: background-color 0.2s;
}
.list-group-item:hover {
  background-color: #e9ecef;
}
/* CSS untuk membuat seluruh area list item menjadi link */
.list-group-item a {
  /* Wajib: membuat tautan mengisi seluruh ruang */
  display: block;
  padding: var(--bs-list-group-item-padding-y)
    var(--bs-list-group-item-padding-x);
  margin: calc(-1 * var(--bs-list-group-item-padding-y))
    calc(-1 * var(--bs-list-group-item-padding-x));

  /* Mengatasi tumpukan dan visual */
  position: relative;
  z-index: 1;

  /* Hapus dekorasi bawaan */
  text-decoration: none;
  color: #0d6efd;
}
.hero-section {
  /* Tinggi default (bisa diatur oleh padding Bootstrap py-5) */
  /* Pastikan tidak ada min-height atau height yang memaksakan ukuran penuh di sini */
  display: flex;
  align-items: center;
}

/* Kunci: MEDIA QUERY untuk MENARGETKAN HANYA LAYAR MOBILE/TABLET KECIL */
/* Max-width: 991.98px menargetkan ukuran layar di bawah 'large' (lg) Bootstrap */
@media (max-width: 991.98px) {
  .hero-section {
    /* Menerapkan Full-Height hanya di HP/Tablet Kecil */
    /* 100vh - (Tinggi Navbar Bootstrap: sekitar 56px) */
    min-height: calc(100vh - 56px);

    /* Pastikan konten di tengah vertikal di HP */
    display: flex;
    align-items: center;
  }
}
.scroll-down-indicator {
  /* Penempatan di paling bawah hero section */
  position: absolute;
  bottom: 20px; /* Jarak dari bawah layar */
  left: 50%;
  transform: translateX(-50%); /* Menengahkan elemen */
  z-index: 10;
}

/* Styling SVG Panah */
#scrollArrow {
  fill: #ffffff; /* Warna panah (putih) */
  /* Hapus semua properti animation: jika ada */
}

/* 1. Definisi Animasi Masuk (Dari Kanan ke Kiri) */
@keyframes slideInRight {
  from {
    transform: translateX(100%); /* Mulai di luar viewport (geser ke kanan) */
    opacity: 0;
  }
  to {
    transform: translateX(0); /* Berakhir di posisi normal */
    opacity: 1;
  }
}

/* 2. Definisi Animasi Keluar (Geser ke Kanan) */
@keyframes slideOutRight {
  from {
    transform: translateX(0); /* Mulai di posisi normal */
    opacity: 1;
  }
  to {
    transform: translateX(
      100%
    ); /* Berakhir di luar viewport (geser ke kanan) */
    opacity: 0;
  }
}

/* 3. Terapkan Animasi pada Toast Bootstrap */
.toast-slide {
  animation-duration: 0.5s; /* Kecepatan animasi */
  animation-fill-mode: both;
}

/* Terapkan saat Toast muncul */
.toast.showing-slide {
  animation-name: slideInRight;
}

/* Terapkan saat Toast muncul dan terlihat */
.toast.show-slide {
  opacity: 1;
  transform: none;
}

/* Terapkan saat Toast menghilang */
.toast.hide-slide {
  animation-name: slideOutRight;
}
/* Peningkatan Estetika Dasar */
.toast-slide-custom {
  /* Meningkatkan kontras dan bentuk */
  border-radius: 14px !important; /* Sudut lebih melengkung */

  /* Bayangan yang lebih dalam dan lembut (memberi efek 'floating') */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35),
    /* Bayangan Utama */ 0 6px 15px rgba(0, 0, 0, 0.15) !important; /* Bayangan Sekunder */

  /* Lebar yang proporsional untuk tampilan HP */
  max-width: 340px;
  min-width: 310px;

  /* Gunakan warna dark/hitam agar terlihat premium */
  background-color: #1a1a1a !important; /* Hitam pekat */
}

/* 2. Tata Letak Isi (Agar Daftar Proyek lebih rapi) */
.toast-slide-custom .toast-body {
  padding: 1.25rem; /* Padding yang lebih besar */
}

.toast-slide-custom h6 {
  font-size: 1.05rem; /* Judul sedikit lebih besar */
  font-weight: 600 !important; /* Sedikit lebih tebal */
  margin-bottom: 6px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Garis pemisah tipis */
  padding-bottom: 5px;
}

.toast-slide-custom small {
  display: block; /* Memastikan teks kecil berada di baris baru */
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 3. Gaya Daftar Proyek */
.toast-slide-custom ul {
  margin-top: 10px !important;
  padding-left: 0; /* Hilangkan padding bawaan */
  list-style: none; /* Hilangkan bullet bawaan */
}

.toast-slide-custom ul li {
  font-size: 0.875rem !important;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  padding-left: 15px; /* Ruang untuk bullet kustom */
}

/* Bullet Kustom (menggunakan pseudo-element) */
.toast-slide-custom ul li::before {
  content: "•";
  color: #00bcd4; /* Warna aksen (bisa ganti ke warna tema Anda) */
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

/* 4. Tombol Tutup */
.toast-slide-custom .btn-close-white {
  /* Meningkatkan ukuran tombol tutup */
  transform: scale(1.1);
  margin: 1.25rem 1rem 0 auto !important;
}

.badge-vip {
  background: linear-gradient(45deg, #ffc107, #ff9800);
  color: #000;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative; /* Penting untuk posisi kilauan */
  overflow: hidden; /* Memotong kilauan agar tetap di dalam label */
  display: inline-block;
  /* TAMBAHKAN INI */
  white-space: nowrap; /* Mencegah teks turun ke bawah */
  flex-shrink: 0; /* Mencegah label menyusut di dalam flexbox */
  margin-left: 10px; /* Memberi jarak aman dari teks judul */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: default;
  user-select: none;
}

/* Elemen kilauan transparan */
.badge-vip::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -150%; /* Mulai dari luar kiri */
  width: 50%;
  height: 200%;
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(30deg);
  animation: shine-animation 3s infinite; /* Berulang setiap 3 detik */
}

/* Animasi mengkilap */
@keyframes shine-animation {
  0% {
    left: -150%;
  }
  30% {
    left: 150%;
  } /* Bergerak cepat ke kanan */
  100% {
    left: 150%;
  } /* Jeda diam sebelum mengulang kembali */
}

.badge-vip:hover {
  filter: brightness(1.1);
  transition: 0.3s;
}