/* ==========================================================
   Slider empat musim Jepang (di bawah tombol hero)
   + hero transparan agar motif Jepang di latar ikut terlihat
   ========================================================== */

/* Hero transparan: foto memudar sendiri (mask), lapisan kuning dibuat tembus */
@media (max-width: 1040px) {
  .hero-bg { height: 58%; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); }
  .hero--photo::before {
    background: linear-gradient(180deg, rgb(251 188 5 / 0) 0%, rgb(251 188 5 / 0) 30%, rgb(251 188 5 / .55) 48%, rgb(251 188 5 / .35) 70%, rgb(251 188 5 / .15) 100%);
  }
  [data-view="beranda"] .hero--photo { min-height: 0; padding-top: clamp(15rem, 52vw, 22rem); }
}
@media (min-width: 1041px) {
  .hero-bg { -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 58%); mask-image: linear-gradient(90deg, transparent 18%, #000 58%); }
  .hero--photo::before { background: linear-gradient(90deg, rgb(251 188 5 / .45) 0%, rgb(251 188 5 / .3) 35%, rgb(251 188 5 / 0) 60%); }
}

/* Slider */
.seasons { margin-top: 1.5rem; position: relative; }
.seasons-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: var(--radius); scrollbar-width: none; overscroll-behavior-x: contain;
  box-shadow: 0 12px 28px -14px rgb(60 64 67 / .55);
}
.seasons-track::-webkit-scrollbar { display: none; }
.seasons-track:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; }
.season { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 16 / 9; background: var(--tint-blue); }
.season img { width: 100%; height: 100%; object-fit: cover; display: block; }
.season figcaption {
  position: absolute; left: .75rem; bottom: .75rem; right: .75rem; max-width: max-content;
  display: grid; gap: .05rem; padding: .5rem .8rem; border-radius: 12px;
  background: rgb(255 255 255 / .88); color: var(--gray-900); line-height: 1.3;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.season figcaption strong { font-size: var(--fs-sm); }
.season figcaption span { font-size: var(--fs-xs); color: var(--gray-700); }

.seasons-ui { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: .75rem; }
.seasons-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgb(255 255 255 / .7); color: var(--gray-900);
}
.seasons-btn:hover { background: #fff; }
.seasons-btn svg { width: 20px; height: 20px; fill: currentColor; }
.seasons-dots { display: flex; gap: .4rem; }
.seasons-dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: var(--pill); cursor: pointer;
  background: rgb(32 33 36 / .25); transition: width .25s, background-color .25s;
}
.seasons-dots button[aria-current="true"] { width: 26px; background: var(--blue-700); }
.seasons-dots button:nth-child(2)[aria-current="true"] { background: var(--green-600); }
.seasons-dots button:nth-child(3)[aria-current="true"] { background: var(--red-600); }
.seasons-dots button:nth-child(4)[aria-current="true"] { background: var(--blue-ink); }

@media (min-width: 1041px) {
  .seasons { max-width: 560px; }
  .seasons-ui { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .seasons-track { scroll-behavior: auto; } }

/* Penyesuaian: foto tidak menumpuk di belakang teks */
@media (max-width: 1040px) {
  .hero-bg { height: clamp(250px, 68vw, 400px); -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); object-position: 70% 25%; }
  [data-view="beranda"] .hero--photo { padding-top: calc(clamp(250px, 68vw, 400px) - 2.5rem); }
  .hero--photo::before { background: none; }
}
@media (min-width: 1041px) {
  .hero-bg { left: auto; right: 0; width: 60%; object-position: 30% center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%); mask-image: linear-gradient(90deg, transparent 0%, #000 32%); }
  .hero--photo::before { background: none; }
}

/* Slide keberangkatan: bisa diklik ke galeri */
.season--link { display: block; color: inherit; text-decoration: none; }
.season-cap {
  position: absolute; left: .75rem; bottom: .75rem; right: 6.5rem; max-width: max-content;
  display: grid; gap: .05rem; padding: .5rem .8rem; border-radius: 12px; line-height: 1.3;
  background: rgb(255 255 255 / .88); color: var(--gray-900); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.season-cap strong { font-size: var(--fs-sm); }
.season-cap span { font-size: var(--fs-xs); color: var(--gray-700); }
.season-go {
  position: absolute; right: .75rem; bottom: .75rem; padding: .55rem .9rem; border-radius: var(--pill);
  background: var(--red-600); color: #fff; font-weight: 800; font-size: var(--fs-sm);
  box-shadow: 0 6px 14px -6px rgb(197 34 31 / .6);
}
.season--link:hover .season-go, .season--link:focus-visible .season-go { background: var(--red-700); }
.seasons-dots button:nth-child(5)[aria-current="true"] { background: var(--red-600); }
@media (max-width: 420px) { .season-cap span { display: none; } }

/* Galeri: keadaan kosong */
.gallery .gallery-empty { grid-column: 1 / -1; padding: 2rem 1rem; border: 2px dashed rgb(32 33 36 / .2); border-radius: var(--radius); text-align: center; color: var(--gray-700); }
.gallery--berangkat img { aspect-ratio: 4 / 3; }

/* ==========================================================
   HERO KOMPUTER: foto layar penuh & utuh (tidak terpotong),
   teks + slider musim berdampingan tepat di bawahnya.
   HP tidak berubah: pembungkus .hero-stage dibuat "tidak ada" (display: contents).
   ========================================================== */
.hero-stage { display: contents; }
.hero-bg-blur, .scroll-cue { display: none; }

@media (min-width: 1041px) {
  [data-view="beranda"] .hero--photo { display: block; min-height: 0; padding: 0; overflow: visible; isolation: auto; }
  .hero--photo::before { display: none; }

  .hero-stage {
    display: block; position: relative; overflow: hidden;
    height: max(460px, calc(100svh - var(--header-total, 122px)));
    background: var(--tint-blue);
  }
  /* salinan buram mengisi sisi kiri-kanan bila rasio foto berbeda dengan layar */
  .hero-stage .hero-bg-blur {
    display: block; position: absolute; left: -40px; top: -40px; width: calc(100% + 80px); height: calc(100% + 80px);
    object-fit: cover; filter: blur(30px) saturate(1.08); transform: scale(1.04); z-index: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  /* foto utama: utuh, tidak dipotong */
  .hero-stage .hero-bg {
    position: relative; inset: auto; left: 0; right: auto; z-index: 1;
    display: block; width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    -webkit-mask-image: none; mask-image: none;
  }
  .scroll-cue {
    display: inline-flex; align-items: center; gap: .4rem; position: absolute; z-index: 2;
    left: 50%; bottom: 1.25rem; transform: translateX(-50%);
    padding: .6rem 1.1rem; border: 0; border-radius: var(--pill); cursor: pointer;
    background: rgb(255 255 255 / .92); color: var(--gray-900); font: 700 var(--fs-sm) var(--font-body);
    box-shadow: 0 8px 20px -8px rgb(32 33 36 / .55);
  }
  .scroll-cue:hover { background: #fff; }
  .scroll-cue svg { width: 18px; height: 18px; fill: currentColor; animation: cue-bob 1.6s ease-in-out infinite; }
  @keyframes cue-bob { 50% { transform: translateY(3px); } }

  [data-view="beranda"] .hero--photo .hero-grid {
    width: min(100% - 2.5rem, var(--container));
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3.5rem; align-items: center;
    padding-block: 3.5rem 7rem;
  }
  .hero--photo .hero-copy { max-width: none; }
  .hero--photo .hero-copy h1 { max-width: 14ch; }
  .hero--photo .seasons { max-width: none; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }

/* Foto header komputer: bawaan = isi layar penuh (tanpa sisi kosong); "contain" = tampil utuh */
@media (min-width: 1041px) {
  .hero-stage:not([data-fit="contain"]) .hero-bg { object-fit: cover; object-position: 50% var(--hero-focus, 25%); }
  .hero-stage:not([data-fit="contain"]) .hero-bg-blur { display: none; }
}

/* Foto header tanpa kedip: disembunyikan sementara sampai diketahui apakah ada foto unggahan */
.hero-bg, .hero-bg-blur { transition: opacity .45s ease; }
.hero-pending .hero-bg, .hero-pending .hero-bg-blur { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero-bg, .hero-bg-blur { transition: none; } }