/* Halaman contoh villa: tur foto digerakkan gulir. Memakai token dari ../assets/css/style.css
   Satu gagasan: tiap pergantian ruang terasa seperti melangkah maju (foto lama mendekat, foto baru terbuka seperti bingkai pintu). */
.hal-villa { background: #000; }
.hal-villa .merek { opacity: 1; }
.nav__kembali { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ivory-2); padding: 10px 0; transition: color .4s; }
.nav__kembali:hover { color: var(--ivory); }
.hal-villa .nav { background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); box-shadow: none; backdrop-filter: none; }

.tur { position: relative; height: calc(100svh + 7 * 118svh); }
.tur__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #000; }

/* ---------- slide ---------- */
.slide { position: absolute; inset: 0; overflow: hidden; background: #000; }
.slide:not(:first-child) { opacity: 0; visibility: hidden; }
.slide__media { position: absolute; inset: 0; transform-origin: 50% 55%; will-change: transform; }
.slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide__fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* Foto tidak dipotong bila orientasinya berlawanan dengan layar: tampil utuh di atas latar buram dari foto yang sama */
/* Foto potret di layar lanskap: utuh, digeser agak ke kanan supaya keterangan punya ruang di kiri.
   Foto lanskap di layar potret (HP): memenuhi layar dan bergeser pelan dari kiri ke kanan saat digulir (diatur villa.js), jadi seluruh foto terlihat. */
@media (orientation: landscape) {
  .slide.p .slide__fg { object-fit: contain; object-position: 64% 50%; }
  .slide.p .slide__cap { max-width: min(340px, 26vw); }
}
@media (min-aspect-ratio: 2/1) { .slide.l .slide__fg { object-fit: contain; object-position: 50% 50%; } }
.slide__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, .74) 100%); }

.slide__cap { position: absolute; left: var(--gutter); bottom: clamp(64px, 12vh, 130px); max-width: min(560px, 84vw); opacity: 0; pointer-events: none; will-change: opacity, transform; }
.slide__cap h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.04; text-shadow: 0 2px 36px rgba(0, 0, 0, .7); }
.slide__cap p { margin-top: 16px; max-width: 38ch; color: rgba(231, 222, 211, .9); text-shadow: 0 1px 20px rgba(0, 0, 0, .75); }

/* ---------- pembuka ---------- */
.tur__buka { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; text-align: center; gap: 18px; padding: calc(var(--nav-h) + 12px) var(--gutter) 40px; pointer-events: none; background: radial-gradient(ellipse 58% 52% at 50% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 100%); }
.tur__buka h1 { font: 400 clamp(2.6rem, 6.6vw, 6.2rem)/1.04 var(--f-display); max-width: 13ch; text-shadow: 0 2px 40px rgba(0, 0, 0, .55); }
.tur__buka p { color: rgba(231, 222, 211, .88); font-size: clamp(1rem, 1.3vw, 1.15rem); letter-spacing: .04em; text-shadow: 0 1px 20px rgba(0, 0, 0, .6); }

/* ---------- daftar ruang (desktop) ---------- */
.tur__daftar { position: absolute; z-index: 12; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 4px; justify-items: end; }
.tur__daftar button { position: relative; padding: 9px 0 9px 34px; font: 400 .72rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: rgba(231, 222, 211, .5); text-shadow: 0 1px 12px rgba(0, 0, 0, .7); transition: color .5s var(--ease); }
.tur__daftar button::before { content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 1px; background: currentColor; transform: scaleX(.35); transform-origin: right; transition: transform .6s var(--ease); }
.tur__daftar button:hover { color: rgba(231, 222, 211, .85); }
.tur__daftar button.on { color: var(--ivory); }
.tur__daftar button.on::before { transform: scaleX(1); }

/* ---------- penutup ---------- */
.tur__akhir { position: absolute; inset: 0; z-index: 14; display: grid; place-content: center; justify-items: center; text-align: center; gap: 22px; padding: 0 var(--gutter); opacity: 0; visibility: hidden; background: rgba(0, 0, 0, .62); }
.tur__akhir h2 { max-width: 17ch; font-size: clamp(2.2rem, 5.2vw, 4.6rem); text-shadow: 0 2px 40px rgba(0, 0, 0, .6); }
.tur__akhir p { max-width: 46ch; color: rgba(231, 222, 211, .88); }
.tur__balik { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ivory-2); padding: 12px 0; transition: color .4s; }
.tur__balik:hover { color: var(--ivory); }

.tur__ket { position: absolute; z-index: 12; right: var(--gutter); bottom: 18px; font-size: .74rem; letter-spacing: .08em; color: rgba(231, 222, 211, .62); text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.tur__cue { position: absolute; z-index: 12; left: 50%; bottom: 26px; width: 1px; height: 52px; background: rgba(231, 222, 211, .25); overflow: hidden; transition: opacity .5s; }
.tur__cue i { position: absolute; left: 0; top: 0; width: 1px; height: 22px; background: var(--ivory); animation: turun 2s var(--ease) infinite; }
@keyframes turun { from { transform: translateY(-24px); } to { transform: translateY(54px); } }
.tur__bar { position: absolute; z-index: 15; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(231, 222, 211, .14); }
.tur__bar i { position: absolute; inset: 0; background: var(--ivory); transform: scaleX(0); transform-origin: left; }

@media (max-width: 900px) { .tur__daftar { display: none; } }
@media (max-width: 760px) {
  .nav__kembali { display: none; }
  .tur { height: calc(100svh + 7 * 100svh); }
  .slide__cap { bottom: 96px; }
  .tur__ket { left: var(--gutter); right: auto; bottom: 22px; font-size: .7rem; }
  .tur__cue { bottom: 56px; }
}

/* Gerak dikurangi / tanpa JS: tampil statis, ruang ditumpuk ke bawah */
html:not(.js) .tur, html.diam .tur { height: auto; }
html:not(.js) .tur__stage, html.diam .tur__stage { position: relative; height: auto; overflow: visible; display: grid; gap: 56px; padding: calc(var(--nav-h) + 24px) var(--gutter) 80px; }
html:not(.js) .slide, html.diam .slide { position: relative; inset: auto; opacity: 1 !important; visibility: visible !important; overflow: visible; background: none; display: grid; gap: 18px; }
html:not(.js) .slide__media, html.diam .slide__media { position: relative; inset: auto; transform: none !important; aspect-ratio: 3 / 2; overflow: hidden; background: #000; }
html:not(.js) .slide.p .slide__media, html.diam .slide.p .slide__media { aspect-ratio: 4 / 5; max-width: 560px; }
html:not(.js) .slide__fg, html.diam .slide__fg { object-fit: contain !important; }
html:not(.js) .slide__scrim, html.diam .slide__scrim, html:not(.js) .tur__daftar, html.diam .tur__daftar, html:not(.js) .tur__cue, html.diam .tur__cue, html:not(.js) .tur__bar, html.diam .tur__bar { display: none; }
html:not(.js) .slide__cap, html.diam .slide__cap { position: relative; inset: auto; opacity: 1 !important; transform: none !important; pointer-events: auto; }
html:not(.js) .tur__buka, html.diam .tur__buka, html:not(.js) .tur__akhir, html.diam .tur__akhir { position: relative; inset: auto; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto; padding: 0; place-content: start; text-align: left; justify-items: start; background: none; }
html:not(.js) .tur__buka, html.diam .tur__buka { order: -1; }
html:not(.js) .tur__ket, html.diam .tur__ket { position: relative; inset: auto; }
@media (prefers-reduced-motion: reduce) { .tur__cue i { animation: none; } }