/* =========================================================
   bahan.css  -  semua style khusus halaman Bahan (1 file)
   Isi: 1) latar & teks bagian atas   2) galeri foto bahan
   ========================================================= */

/* ===== Latar & teks bagian atas halaman ===== */

#bahan {
  background-image: url('../IMAGE/bg-bahan.jpeg');      /* ganti gambar latar di sini */
}

#bahan .penanda,
#bahan h1,
#bahan h2 {
  color: #831843;
}

#bahan .judul-tengah p {
  color: #000000;
  font-size: 16px;              /* UKURAN TEKS KECIL: sekarang 16px. Ubah sesuai selera, mis. 18px */
}

/* ===== Galeri foto bahan (kartu foto yang bisa dibuka) ===== */

/* Judul galeri */

.judul-tengah.judul-galeri {
  margin-top: 64px;
}

/* Grid foto: 5 kolom di desktop, 4 di tablet, 2 di HP */

.grid-bahan {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;             /* kartu foto tetap sejajar walau nama panjang */
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .grid-bahan {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 560px) {
  .grid-bahan {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* Satu item = nama di atas + kartu foto */

.item-bahan {
  display: flex;
  flex-direction: column;
}

.nama-bahan {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 2.6em;            /* ruang 2 baris, supaya semua kartu tetap sejajar */
  margin: 0 0 8px;
  color: var(--tua);
  font-size: 21px;
  line-height: 1.15;
  text-align: center;
}

/* Kartu foto */

/* Galeri kartu foto dengan efek flip */
.kartu-foto {
  perspective: 900px;
  aspect-ratio: 1 / 1;
  border-radius: 19px;
  box-shadow: 0 10px 24px rgba(190,24,93,.12);
}

.flip-dalam {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, .2, .2, 1);
}

.kartu-foto:hover .flip-dalam {
  transform: rotateY(180deg);
}

.flip-depan,
.flip-belakang {
  position: absolute;
  inset: 0;
  border-radius: 19px;
  border: 2px solid var(--pink3);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-depan {
  background: #fff;
}

.kartu-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--pink2);
}

.flip-belakang {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #fbcfe8, #f9a8d4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  text-align: center;
  color: #831843;
}

.flip-kategori {
  font-family: 'Playball', cursive;
  font-size: 26px;
  line-height: 1.1;
  color: #be185d;
}

.flip-garis {
  width: 40px;
  height: 3px;
  border-radius: 3px;
  background: #fff;
}

.flip-belakang p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.flip-tombol {
  margin-top: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  background: #be185d;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s;
}

.flip-tombol:hover {
  background: #9d174d;
}