/* Pengaturan font utama */
body {
  font-family: "Inter", sans-serif;
}

/* 
  Ini adalah trik rahasia untuk membuat efek desain seperti di referensi Anda.
  Kita menumpuk gradien putih (kiri) ke transparan (kanan) di atas gambar background.
*/
.hero-bg-split {
  background-image:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.9) 45%,
      rgba(255, 255, 255, 0) 75%
    ),
    url("https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?auto=format&fit=crop&q=80&w=2000");
  /* Gambar sementara, nanti bisa diganti foto udara/drone Desa Sidodadi */
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* Animasi Hover Kotak Statistik (Fill Left to Right) */
.stat-card {
  position: relative;
  overflow: hidden;
  background-color: white;
  z-index: 1;
}

/* Kotak hijau tersembunyi yang siap bergeser */
.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #16a34a; /* Warna text-green-600 Tailwind */
  z-index: -1;
  transform: scaleX(0); /* Awalnya lebarnya 0 */
  transform-origin: left; /* Mulai membesar dari kiri */
  transition: transform 0.5s ease-in-out;
}

/* Saat mouse masuk, kotak hijau membesar ke kanan */
.stat-card:hover::before {
  transform: scaleX(1);
}

/* Mengubah warna teks judul (h3) dan paragraf (p) menjadi putih saat di-hover */
.stat-card:hover h3,
.stat-card:hover p {
  color: white !important;
}

/* ================= BAGIAN 2: EFEK MASKING PETA ================= */
.desa-mask-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.15));
  transition: transform 0.4s ease;
}

.desa-mask-container:hover {
  transform: translateY(-10px);
}

/* SVG digunakan sebagai cetakan (clip-path) */
.desa-shape {
  width: 100%;
  height: auto;
}

/* Gambar di dalam cetakan */
.desa-image {
  transition: transform 0.7s ease;
}

.desa-mask-container:hover .desa-image {
  transform: scale(1.1); /* Efek zoom in pelan saat di-hover */
}

/* Garis batas luar (Outline) */
.desa-outline {
  fill: none;
  stroke: #15803d; /* Warna hijau */
  stroke-width: 5.5; /* PERUBAHAN: Ketebalan diperbesar dari 4 menjadi 10 */
  stroke-dasharray: 20000; /* PERUBAHAN: Angka diperbesar drastis agar menutupi seluruh keliling desa */
  stroke-dashoffset: 20000; /* Harus sama dengan dasharray */
  animation: drawOutline 10s forwards ease-in-out;
}

/* ================= BAGIAN 4: SLIDER CAPSTONE ================= */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.text-shadow-md {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@keyframes drawOutline {
  to {
    stroke-dashoffset: 0;
  }
}

/* Penyesuaian gradien untuk layar HP agar teks tetap terbaca */
@media (max-width: 1023px) {
  .hero-bg-split {
    background-image:
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.95) 60%,
        rgba(255, 255, 255, 0) 100%
      ),
      url("https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?auto=format&fit=crop&q=80&w=1000");
  }
}