@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap");
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Space Grotesk", sans-serif;
}

/* Custom Dark Mode Styling Kelas */
body.dark-mode {
  background-color: #121212 !important;
  color: #f3f4f6 !important;
}

body.dark-mode header,
body.dark-mode nav a,
body.dark-mode button,
body.dark-mode section,
body.dark-mode footer,
body.dark-mode div[class*="bg-white"] {
  border-color: #ffffff !important;
}

body.dark-mode .bg-white {
  background-color: #1e1e1e !important;
  color: #f3f4f6 !important;
}

body.dark-mode .text-neutral-700,
body.dark-mode .text-neutral-600 {
  color: #cbd5e1 !important;
}

/* --- Polaroid Photo (Besar & Proporsional) --- */
.hero-photo-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
}

.polaroid-card {
  background-color: #ffffff;
  padding: 14px 14px 20px 14px;
  border: 4px solid #000000;
  box-shadow: 8px 8px 0px 0px #000000; /* Shadow sedikit disesuaikan agar proporsional */
  transform: rotate(2deg);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  width: 100%;
  max-width: 290px; /* Dikecilkan dari 340px */
  position: relative;
}

.polaroid-card:hover {
  transform: rotate(0deg);
}

.polaroid-img-box {
  width: 100%;
  height: 280px; /* Dikecilkan dari 340px agar fotonya tidak terlalu besar */
  background-color: #e2e8f0;
  border: 3px solid #000000;
  overflow: hidden;
}

.polaroid-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Memastikan foto mengisi penuh kotak tanpa gepeng */
  display: block;
}

.polaroid-caption {
  margin-top: 18px;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  color: #000;
}

.polaroid-stamp {
  position: absolute;
  bottom: -15px;
  left: -15px;
  background-color: #ec4899;
  color: #fff;
  padding: 6px 12px;
  border: 3px solid #000;
  box-shadow: 3px 3px 0px 0px #000;
  font-size: 12px;
  font-weight: 800;
  transform: rotate(-6deg);
}

/* --- Perbesar Wadah Utama Hero Section --- */
.hero-container,
main {
  max-width: 1200px !important; /* Memperlebar area maksimum website */
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Mengatur jarak antara teks dan foto agar renggang dan tidak menumpuk */
.hero-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5rem; /* Jarak renggang antara kiri dan kanan */
  width: 100%;
}

/* Memaksa area foto bergeser pas ke sisi kanan */
.hero-photo-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
}