/* Halaman utama: satu layar penuh, latar berganti per etalase ternak (gaya Hanare) */
.beranda { overflow: hidden; height: 100%; background: #04110a; }
html:has(.beranda) { height: 100%; }
.beranda .top { background: none; backdrop-filter: none; }

.panggung { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; --aksen: #f1c65a; }
.latar, .partikel, .latar-cadangan, .redup { position: absolute; inset: 0; width: 100%; height: 100%; }
.latar { display: block; }
.latar-cadangan { display: none; }
.latar-cadangan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; transform: scale(1.06); }
.latar-cadangan img.on { opacity: 1; }
.tanpa-gl .latar { display: none; }
.tanpa-gl .latar-cadangan { display: block; }
.partikel { pointer-events: none; }
/* gelap di kiri & bawah supaya teks terbaca, seperti di referensi */
.redup {
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 15, 9, 0.72) 0%, rgba(4, 15, 9, 0.38) 32%, rgba(4, 15, 9, 0) 58%),
    linear-gradient(0deg, rgba(4, 15, 9, 0.7) 0%, rgba(4, 15, 9, 0) 28%),
    linear-gradient(180deg, rgba(4, 15, 9, 0.45) 0%, rgba(4, 15, 9, 0) 18%);
}

.hero-isi { position: absolute; left: var(--g); top: 50%; transform: translateY(-42%); max-width: min(560px, 46vw); z-index: 2; }
.judul {
  font-family: var(--serif); font-weight: 700; font-size: clamp(44px, 5.6vw, 84px); line-height: 0.98; letter-spacing: 0.005em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.judul span { display: block; }
.judul em { font-style: normal; color: var(--aksen); transition: color 1.2s ease; }
.lead { margin-top: 22px; max-width: 30em; font-size: 15px; line-height: 1.6; color: rgba(244, 236, 211, 0.85); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.aksi { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.tbl {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 11px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  transition: transform 0.25s var(--spring, ease), box-shadow 0.25s;
}
.tbl:hover { transform: translateY(-2px); }
.tbl-terang { background: linear-gradient(180deg, #fbf3e6, #e7d6bd); color: #13351f; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 #fff; }
.tbl-gelap { background: rgba(4, 15, 9, 0.82); color: var(--cream); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(244, 236, 211, 0.12); }
.tbl-gelap span { font-size: 9px; }

/* Pilihan 01-04 di kiri bawah */
.musim { position: absolute; left: var(--g); bottom: 34px; z-index: 2; }
.musim ol { list-style: none; margin: 0; padding: 0 0 10px; display: flex; align-items: flex-end; gap: 26px; border-bottom: 1px solid rgba(244, 236, 211, 0.22); position: relative; }
.musim button {
  display: flex; align-items: flex-end; gap: 10px; padding: 0; background: none; border: 0; cursor: pointer; color: rgba(244, 236, 211, 0.5);
  font: inherit; text-align: left; transition: color 0.3s;
}
.musim button:hover { color: rgba(244, 236, 211, 0.85); }
.musim b { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 15px; line-height: 1; transition: font-size 0.5s var(--spring, ease), color 0.5s; }
.musim .nama { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2; }
.musim .ras { display: block; max-height: 0; overflow: hidden; opacity: 0; font-family: var(--serif); font-style: italic; font-size: 15px; letter-spacing: 0.01em; white-space: nowrap; transition: max-height 0.5s, opacity 0.5s; }
.musim .on button { color: var(--cream); }
.musim .on b { font-size: 46px; color: var(--aksen); }
.musim .on .ras { max-height: 22px; opacity: 0.9; }
/* garis penanda di bawah pilihan aktif */
.musim .garis { position: absolute; bottom: -1px; height: 2px; background: var(--aksen); transition: left 0.6s var(--spring, ease), width 0.6s var(--spring, ease), background 1s; }

.lokasi {
  position: absolute; right: var(--g); bottom: 34px; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px; background: rgba(4, 15, 9, 0.55); backdrop-filter: blur(10px);
  font-size: 15px; font-weight: 500; transition: opacity 0.4s;
}
.lokasi span { width: 7px; height: 7px; border-radius: 50%; background: var(--aksen); box-shadow: 0 0 10px var(--aksen); }
.lokasi.ganti { opacity: 0; }

/* Video rantai pasok */
.putar { padding: 0; border: 0; background: #000; width: min(1100px, 92vw); max-height: 90vh; border-radius: 12px; overflow: hidden; color: var(--cream); }
.putar::backdrop { background: rgba(2, 9, 5, 0.85); backdrop-filter: blur(6px); }
.putar video { display: block; width: 100%; max-height: 90vh; background: #000; }
.putar .tutup { position: absolute; top: 10px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(4, 15, 9, 0.7); color: var(--cream); font-size: 26px; line-height: 1; }

@media (max-width: 1180px) and (min-width: 761px) {
  .lokasi { bottom: auto; top: 84px; }
}
/* HP: teks di atas, pilihan 2x2 di bawah */
@media (max-width: 760px) {
  .hero-isi { top: 110px; transform: none; max-width: none; right: var(--g); }
  .judul { font-size: 52px; }
  .lead { font-size: 15px; max-width: 26em; }
  .redup {
    background:
      linear-gradient(180deg, rgba(4, 15, 9, 0.78) 0%, rgba(4, 15, 9, 0.35) 38%, rgba(4, 15, 9, 0) 55%),
      linear-gradient(0deg, rgba(4, 15, 9, 0.85) 0%, rgba(4, 15, 9, 0) 34%);
  }
  .musim { right: var(--g); bottom: 92px; }
  .musim ol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; border: 0; padding: 0; }
  .musim .garis { display: none; }
  .musim li { border-bottom: 1px solid rgba(244, 236, 211, 0.18); padding-bottom: 10px; }
  .musim .on { border-color: var(--aksen); }
  .musim .on b { font-size: 34px; }
  .musim .ras { white-space: normal; font-size: 14px; }
  .musim .on .ras { max-height: 40px; }
  .lokasi { left: var(--g); right: auto; bottom: 30px; font-size: 13px; padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .judul em, .musim *, .lokasi { transition: none; }
}