/* GOSANA WIJAYA — arah B "PEPALIHAN" (pilihan pemilik; lihat ARAH-FABLE.md). Tanpa build.
   Warna diambil dari bahan di tapak: paras (bidang), ijuk (tinta), bata (aksen), abu atap, prada hanya garis 1px. */
@font-face{font-family:"Bodoni Gosana";src:url(../huruf/BodoniModa-Judul.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Gosana";src:url(../huruf/BodoniModa-Miring.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken";src:url(../huruf/HankenGrotesk-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken";src:url(../huruf/HankenGrotesk-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --paras:#e9e6e0; --paras-2:#dcd7ce; --ijuk:#1d1916; --andesit:#5a524b; --abu:#82786e;
  --bata:#9f4326; --bata-dalam:#8a3a21; --genteng:#e08a52; --prada:#c99a4b;
  --malam:#170f0b; --malam-2:#231812; --gading:#f1e7d8;
  --tepi:56px; --lambat:1100ms; --alun:cubic-bezier(.2,.7,.1,1);
  --judul:"Bodoni Gosana","Bodoni MT","Didot",Georgia,serif; --ui:"Hanken",system-ui,-apple-system,"Segoe UI",sans-serif;
  --aman-b:env(safe-area-inset-bottom,0px);
  /* pepalihan: --u = satu anak tangga (tinggi irisan = n × u), --wi = lebar irisan, --siar = nat antar-irisan */
  --lh:100vh; --u:min(12.2vh,7.6vw); --wi:min(13.9vw,22.2vh); --siar:6px; --kaki-b:56px; --cap:56px; --fj:min(5.55vw,9vh);
}
@supports (height:1svh){:root{--lh:100svh; --u:min(12.2svh,7.6vw); --wi:min(13.9vw,22.2svh); --fj:min(5.55vw,9svh)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paras);color:var(--ijuk);font-family:var(--ui);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;border-radius:0}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lewati{position:fixed;left:var(--tepi);top:-80px;z-index:99;background:var(--ijuk);color:var(--paras);padding:12px 16px;font-size:14px}
.lewati:focus{top:12px}
.kap{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}

/* ── kepala ── */
.kepala{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:14px var(--tepi);min-height:72px;color:var(--ijuk);transition:color .5s var(--alun);pointer-events:none}
.kepala>*{pointer-events:auto}
.kepala.terang{color:var(--gading);text-shadow:0 0 18px rgba(23,15,11,.6),0 1px 2px rgba(23,15,11,.4)}
.kepala[data-alas]{text-shadow:none}
/* di bawah perjalanan, kepala beralas warna bagian di bawahnya — teks yang bergulir tidak menabrak merek & navigasi */
.kepala::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s linear,background-color .35s linear}
.kepala[data-alas]::before{opacity:1}
.kepala[data-alas="venue"]::before{background:var(--bata-dalam)}.kepala[data-alas="kembaran"]::before{background:var(--paras)}.kepala[data-alas="pilot"]::before{background:var(--malam)}.kepala[data-alas="dtb"]::before{background:var(--ijuk)}
.merek{display:inline-flex;align-items:center;min-height:44px;font-family:var(--judul);font-size:16px;letter-spacing:.32em;text-transform:uppercase;white-space:nowrap}
/* merek demo: "oleh Digital Twin Bali" kecil di bawah nama tempat (pola subsitus DTB), menaut ke situs utama */
.merek-kelompok{display:flex;flex-direction:column;line-height:1}
.merek-kelompok .merek{min-height:30px}
.oleh-dtb{display:inline-flex;align-items:center;min-height:22px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;opacity:.78;transition:opacity .4s}
.oleh-dtb:hover,.oleh-dtb:focus-visible{opacity:1}
.oleh-dtb>span{margin-right:.5em}
.kepala nav a.luar i{font-style:normal;margin-left:6px;font-size:11px}
.kepala nav{display:flex;align-items:center;gap:4px;white-space:nowrap}
.kepala nav a,.bhs button{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;position:relative}
.kepala nav a::after{content:"";position:absolute;left:15px;right:15px;bottom:11px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--alun)}
.kepala nav a:hover::after,.kepala nav a:focus-visible::after{transform:scaleX(1)}
.bhs{display:flex;margin-left:14px}
.bhs button{padding:0 9px;min-width:44px;justify-content:center;opacity:.72}
.bhs button[aria-pressed="true"]{opacity:1}
.bhs button[aria-pressed="true"]::after{content:"";position:absolute;left:9px;right:9px;bottom:11px;height:1px;background:currentColor}

/* ── perjalanan: satu panggung lekat, digerakkan gulir ── */
.perjalanan{position:relative;height:830vh;height:calc(100svh * 8.3)}
.panggung{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paras)}
.lapis{position:absolute;inset:0}
.jangkar{position:absolute;left:0;top:250vh;top:250svh}

/* lembar: hero B — judul di rongga atas-kiri, empat irisan naik ke kanan di atas satu bataran */
.lembar{background:var(--paras);color:var(--ijuk)}
.teks-b{position:absolute;left:var(--tepi);top:calc(var(--lh) - var(--kaki-b) - var(--cap) - 3.9*var(--u) - 3.02*var(--fj));bottom:calc(var(--kaki-b) + var(--cap) + 18px);
  display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.judul-b{font-family:var(--judul);font-weight:400;font-size:var(--fj);line-height:1.05;letter-spacing:-.014em;white-space:nowrap}
.judul-b i{color:var(--bata)}
.label-karya{margin-bottom:clamp(14px,2.2vh,26px);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--andesit);pointer-events:auto;white-space:nowrap}
.label-karya a{color:var(--bata);border-bottom:1px solid rgba(159,67,38,.45);padding-bottom:2px}
.label-karya a:hover{border-color:var(--bata)}
.pengantar{width:min(350px,25vw);font-size:16px;line-height:1.62;color:#3a332d}
.datum{position:absolute;left:var(--tepi);right:var(--tepi);bottom:calc(var(--kaki-b) + var(--cap));height:1px;background:rgba(29,25,22,.2)}
.pepalihan{position:absolute;right:var(--tepi);bottom:var(--kaki-b);display:flex;align-items:flex-end;gap:var(--siar)}
.pepalihan::after{content:"";position:absolute;left:-14px;right:-14px;bottom:calc(var(--cap) - 3px);height:3px;background:var(--ijuk)}  /* bataran */
.iris{width:var(--wi)}
.iris.griya{width:calc(var(--wi) * 1.3)}
.iris a{display:block}
.foto{display:block;position:relative;height:calc(var(--n) * var(--u));background:var(--paras-2)}
.foto::before{content:"";position:absolute;left:-7px;right:0;top:-7px;height:1px;background:var(--ijuk)}   /* lis: bibir anak tangga, menjorok ke sisi yang lebih rendah */
.iris.griya .foto{background:none}
.iris.griya .foto::before{background:var(--prada)}
.foto picture,.foto img{display:block;width:100%;height:100%}
.foto img{object-fit:cover;transition:transform 1.6s var(--alun)}
.foto picture{overflow:hidden}
.iris a:hover img,.iris a:focus-visible img{transform:scale(1.04)}
/* satu undak disorot: lis-nya menebal jadi bata, namanya ikut */
.foto::before{transition:background-color .5s,box-shadow .5s}.cap b{transition:color .5s}
@media (hover:hover){.iris a:hover .foto::before,.iris a:focus-visible .foto::before{background:var(--bata);box-shadow:0 -1px 0 var(--bata)}.iris a:hover .cap b,.iris a:focus-visible .cap b{color:var(--bata)}}
.cap{display:flex;align-items:baseline;gap:9px;height:var(--cap);padding-top:17px;white-space:nowrap}
.cap i{font-family:var(--judul);font-style:italic;font-size:15px;color:var(--bata);min-width:1.1em}
.cap b{font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.cap em{margin-left:3px;font-family:var(--judul);font-style:italic;font-size:15px;color:var(--andesit)}
.gulir{position:absolute;left:var(--tepi);bottom:0;height:var(--kaki-b);display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--andesit)}
.gulir i{display:block;width:1px;height:26px;background:var(--bata);transform-origin:top;animation:turun 2.8s var(--alun) infinite}
@keyframes turun{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
/* masuk: irisan tumbuh dari bataran, satu per satu */
.js .foto picture{clip-path:inset(100% 0 0 0)}
.js .foto::before{opacity:0}
.js.siap .foto picture{clip-path:inset(0);transition:clip-path 1.25s var(--alun) calc(var(--d) * 140ms + 150ms)}
.js.siap .foto::before{opacity:1;transition:opacity .6s linear calc(var(--d) * 140ms + 1100ms)}
.js .teks-b,.js .cap,.js .gulir{opacity:0}
.js.siap .teks-b,.js.siap .cap,.js.siap .gulir{opacity:1;transition:opacity 1.2s var(--alun) .2s}
.js.siap .cap{transition-delay:calc(var(--d) * 140ms + 800ms)}

/* kori: irisan Griya. Satu gambar; jendela (clip-path) dan skala diatur skrip dari irisan → layar penuh */
.kori{pointer-events:none;will-change:clip-path;transform-origin:var(--px,50%) var(--py,80%)}
.kori img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;will-change:transform}
.teduh{position:absolute;inset:0;opacity:0;background:linear-gradient(180deg,rgba(23,15,11,.6) 0,rgba(23,15,11,.18) 22%,rgba(23,15,11,0) 42%,rgba(23,15,11,0) 55%,rgba(23,15,11,.8) 100%)}
#ket-kori{pointer-events:none;opacity:0;visibility:hidden;color:var(--gading)}
.ket-kori{position:absolute;left:var(--tepi);bottom:44px;width:min(400px,36vw)}
.ket-kori b{display:block;font-family:var(--judul);font-weight:400;font-style:italic;font-size:clamp(34px,3.6vw,56px);line-height:1.1}
.ket-kori span{display:block;margin-top:14px;font-size:16px;line-height:1.6}

/* bukaan pintu: lapis udara tampak lewat persegi seukuran daun pintu, lalu melebar */
.udara{background:var(--malam);will-change:clip-path;visibility:hidden}
.udara img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--lambat) var(--alun)}
.udara img.poster.kini{opacity:1}
.udara canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity 1400ms var(--alun);pointer-events:none;touch-action:pan-y}
.tiga-d .udara canvas{opacity:1}
.bebas .udara canvas{pointer-events:auto;touch-action:none;cursor:grab}
.udara .tirai{position:absolute;inset:0;pointer-events:none;background:radial-gradient(95% 80% at 0 100%,rgba(23,15,11,.74) 0,rgba(23,15,11,.46) 36%,rgba(23,15,11,0) 70%),linear-gradient(180deg,rgba(23,15,11,.72) 0,rgba(23,15,11,.5) 9%,rgba(23,15,11,0) 27%,rgba(23,15,11,0) 50%,rgba(23,15,11,.8) 100%);opacity:var(--tirai,1)}
.di-udara .udara .tirai{transition:opacity .8s var(--alun)}
/* catatan batas lahan hanya muncul bila garisnya memang ada (model termuat), tidak di atas poster */
.panggung:not(.tiga-d) .bab [data-t="b0_c"]{display:none}
.bebas .udara .tirai{opacity:.35}
.bingkai{position:absolute;left:0;top:0;border:1px solid var(--prada);pointer-events:none;opacity:0;will-change:transform,width,height}

/* bab di atas model */
#bab-bab,.alat,.undak{color:var(--gading)}
#bab-bab{pointer-events:none}
.bab{position:absolute;left:var(--tepi);bottom:44px;width:min(480px,40vw);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .9s var(--alun),transform .9s var(--alun),visibility 0s .9s}
.di-udara .bab.kini{opacity:1;visibility:visible;transform:none;transition:opacity .9s var(--alun) .15s,transform .9s var(--alun) .15s,visibility 0s}
.bab h2{font-family:var(--judul);font-weight:400;font-size:clamp(40px,4.6vw,76px);letter-spacing:-.012em;line-height:1.02;display:flex;align-items:baseline;gap:.32em}
.bab h2 i{font-size:.36em;color:var(--genteng);letter-spacing:.02em;transform:translateY(-.9em)}
.bab p{margin-top:16px;font-size:17px;line-height:1.6;max-width:27em}
.bab .catat{margin-top:12px;font-size:13px;line-height:1.55;opacity:.86;max-width:34em;padding-top:12px;border-top:1px solid rgba(241,231,216,.3)}
.bebas .bab{opacity:0!important;visibility:hidden!important}

.alat{position:absolute;right:var(--tepi);top:84px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;opacity:0;visibility:hidden;transition:opacity .8s var(--alun),visibility 0s .8s}
.di-udara .alat{opacity:1;visibility:visible;transition:opacity .8s var(--alun),visibility 0s}
.tbl{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 12px 0 14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.tbl i{display:inline-block;width:22px;height:1px;background:currentColor;opacity:.5;transition:width .5s var(--alun),opacity .5s,background .5s}
.tbl:hover i,.tbl[aria-pressed="true"] i{width:34px;opacity:1}
.tbl[aria-pressed="true"] i{background:var(--prada)}
.tbl[hidden]{display:none}
/* alas tipis: tombol di atas model/poster yang terang tetap terbaca */
.alat{gap:4px}
.alat .tbl{background:rgba(23,15,11,.44);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.muat,.undak{text-shadow:0 0 12px rgba(23,15,11,.9),0 1px 2px rgba(23,15,11,.5)}
.muat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.86;min-height:20px;text-align:right}

/* undak: empat anak tangga = empat bab, naik ke arah merajan (rupa yang sama dengan pepalihan di hero) */
.undak{position:absolute;right:var(--tepi);bottom:40px;display:flex;align-items:flex-end;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;opacity:0;visibility:hidden;transition:opacity .6s var(--alun),visibility 0s .6s}
.di-udara .undak{opacity:1;visibility:visible;transition:opacity .6s var(--alun),visibility 0s}
.undak button{display:block;width:104px;text-align:left;padding:14px 0 10px;min-height:44px;border-bottom:1px solid rgba(241,231,216,.55);position:relative;opacity:.86;transition:opacity .5s,border-color .5s;margin-bottom:calc((var(--i) - 1) * 14px)}
.undak button+button::before{content:"";position:absolute;left:0;bottom:-15px;height:15px;width:1px;background:rgba(241,231,216,.55)}
.undak button:hover{opacity:1}
.undak button[aria-current="step"]{opacity:1;border-color:var(--genteng)}
.undak button[aria-current="step"]::after{content:"";position:absolute;left:0;bottom:-3px;width:5px;height:5px;background:var(--genteng)}
.bebas .undak{opacity:0;pointer-events:none}

/* ── bagian sesudah perjalanan ── */
.bagian{position:relative;padding:clamp(72px,9vw,132px) var(--tepi)}
.kisi{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.besar{font-family:var(--judul);font-weight:400;font-size:clamp(30px,3.5vw,56px);line-height:1.14;letter-spacing:-.012em}
/* tombol: satu rupa untuk semua ajakan */
.tombol{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 22px;border:1px solid currentColor;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;transition:background-color .4s,color .4s,border-color .4s}
.tombol b{font-weight:500}
.tombol i,.masuk i{font-style:normal;transition:transform .5s var(--alun)}
.tombol:hover i,.tombol:focus-visible i,a.pintu:hover .masuk i,a.pintu:focus-visible .masuk i{transform:translateX(5px)}
[hidden]{display:none!important}

.upacara{background:var(--bata-dalam);color:var(--gading)}
.upacara .kiri{grid-column:1/6}
.upacara .kanan{grid-column:7/13}
.upacara .kiri .ket{margin-top:28px;max-width:30em;font-size:16px;line-height:1.65}
.baris li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:baseline;padding:26px 0 24px}
.baris h3,.baris h4{font-family:var(--judul);font-weight:400;font-size:clamp(22px,2.3vw,36px);letter-spacing:-.008em;line-height:1.2}
.baris p{font-size:16px;line-height:1.55}
/* baris berundak: tiap upacara mundur satu langkah — pepalihan dalam huruf. Saat masuk pandang, undak itu "dibangun":
   tiang (kiri) naik, lantai (garis bawah) ditarik, lalu namanya muncul — gerak yang sama dengan irisan di hero */
.undakan li{margin-left:calc(var(--k,0) * 8.33%);position:relative}
.undakan li:nth-child(2){--k:1}.undakan li:nth-child(3){--k:2}
.undakan li+li{padding-left:22px}
.undakan li+li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(241,231,216,.4);transform-origin:bottom}
.undakan li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(241,231,216,.5);transform-origin:left}
.js .undakan.naik,.js .petak.naik{opacity:1;transform:none}
.js .undakan li::before{transform:scaleY(0);transition:transform .8s var(--alun) calc(var(--k,0) * 180ms)}
.js .undakan li::after{transform:scaleX(0);transition:transform 1.2s var(--alun) calc(var(--k,0) * 180ms + 160ms)}
.js .undakan li>*{opacity:0;transform:translateY(14px);transition:opacity .9s var(--alun) calc(var(--k,0) * 180ms + 320ms),transform .9s var(--alun) calc(var(--k,0) * 180ms + 320ms)}
.js .undakan.tampak li::before,.js .undakan.tampak li::after,.js .undakan.tampak li>*{transform:none;opacity:1}
/* venue serbaguna: terpisah dari undak Manusa Yadnya */
.lintas{margin-top:clamp(44px,5vw,72px);padding-top:22px;border-top:3px solid var(--gading)}
.lintas h3{opacity:.92}
.lintas>p:first-of-type{margin-top:14px;font-family:var(--judul);font-size:clamp(20px,1.9vw,28px);line-height:1.3;letter-spacing:-.006em;max-width:24em}
.layanan{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 30px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.kutip{margin-top:14px;font-size:14px;opacity:.92}
.upacara .tombol{margin-top:32px;background:var(--gading);color:var(--bata-dalam);border-color:var(--gading)}
.upacara .tombol:hover,.upacara .tombol:focus-visible{background:transparent;color:var(--gading)}
/* petak foto: keping berlis seperti irisan hero; tumbuh dari dasarnya */
.petak{margin-top:clamp(40px,4.6vw,76px);display:flex;align-items:flex-end;gap:var(--siar)}
.keping{position:relative;width:min(72%,300px)}
.keping::before{content:"";position:absolute;left:-7px;right:0;top:-7px;height:1px;background:var(--gading)}
.keping picture,.keping>img{display:block;width:100%;aspect-ratio:10/11;overflow:hidden}
.keping img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.keping figcaption{margin-top:12px;font-size:13px;line-height:1.5;opacity:.88}
.petak.banyak .keping{flex:1 1 0;width:auto}
.petak.banyak .keping picture,.petak.banyak .keping>img{aspect-ratio:auto;height:calc(150px + var(--n) * 54px)}
.js .keping picture,.js .keping>img{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--alun) calc(var(--n,1) * 150ms)}
.js .keping::before,.js .keping figcaption{opacity:0;transition:opacity .7s linear calc(var(--n,1) * 150ms + 900ms)}
.js .petak.tampak .keping picture,.js .petak.tampak .keping>img{clip-path:inset(0)}
.js .petak.tampak .keping::before{opacity:1}.js .petak.tampak .keping figcaption{opacity:.88}

/* dua pintu: dua daun berundak di atas satu bataran; saat masuk pandang, tiap daun membuka dari porosnya */
.pintu3{background:var(--paras);color:var(--ijuk)}
.pintu3 .kisi{align-items:end}
.pintu3 .atas{grid-column:1/6;grid-row:1;align-self:start}
.pintu3 .atas p.ket{margin-top:24px;max-width:30em;color:#3a332d}
.pintu3 .ketiga{grid-column:1/6;grid-row:2;align-self:end;max-width:30em;padding-top:16px;border-top:1px solid rgba(29,25,22,.24);font-size:15px;line-height:1.55;color:#3a332d}
.pintu3 .ketiga a{white-space:nowrap;border-bottom:1px solid var(--bata);padding-bottom:1px;color:var(--ijuk)}
.pintu-baris{grid-column:7/13;grid-row:1/3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3vw,44px);align-items:end}
.pintu{display:block;position:relative}
/* baris bersama (subgrid) agar garis bataran sejajar walau panjang teks berbeda */
@supports (grid-template-rows:subgrid){.pintu-baris{grid-template-rows:auto auto auto auto}.pintu{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}.pintu .daun{align-self:end}}
.pintu .daun{position:relative;aspect-ratio:5/9.8;max-height:62vh;max-height:62svh;overflow:hidden;background:var(--paras-2)}
.pintu:nth-child(1) .daun{aspect-ratio:5/8.4;max-height:53vh;max-height:53svh}
.pintu .daun img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--alun),clip-path 1.4s var(--alun)}
.pintu:nth-child(2) .daun img{transition-delay:0s,.18s}
.js .pintu-baris .daun img{clip-path:inset(0 50% 0 50%)}
.js .pintu-baris.tampak .daun img{clip-path:inset(0)}
a.pintu:hover .daun img,a.pintu:focus-visible .daun img{transform:scale(1.045)}
.pintu h3{margin-top:18px;padding-top:16px;border-top:3px solid var(--ijuk);font-family:var(--judul);font-weight:400;font-size:clamp(17px,2vw,30px);letter-spacing:-.008em;line-height:1.2}
.pintu p{margin-top:8px;font-size:15px;line-height:1.5;color:#3a332d;max-width:22em}
.masuk{display:inline-flex;align-items:center;gap:12px;margin-top:14px;min-height:44px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--bata)}
.masuk b{font-weight:500;border-bottom:1px solid currentColor;padding-bottom:3px}

.venue-kap{margin-top:26px;opacity:.82}
.upacara .kiri .venue-kap+.ket{margin-top:12px}

/* pilot: malam yang sama dengan model; potret dalam irisan berlis prada (keluarga pepalihan), rekaman berundak */
.pilot{background:var(--malam);color:var(--gading)}
.pilot .kisi{align-items:start}
.potret{grid-column:1/5;position:relative;margin-top:8px}
.potret::before{content:"";position:absolute;left:-9px;right:0;top:-9px;height:1px;background:var(--prada)}
.potret img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.potret figcaption{margin-top:14px;font-family:var(--judul);font-style:italic;font-size:17px;opacity:.86}
.js .potret.naik img{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--alun) .1s}
.js .potret.naik.tampak img{clip-path:inset(0)}
.pilot-teks{grid-column:6/13;padding-left:clamp(0px,3vw,48px)}
.pilot-kap{color:var(--genteng)}
.pilot .besar{margin-top:16px;max-width:14em}
.pilot .ket{margin-top:22px;font-size:17px;line-height:1.6;max-width:30em}
.rekam{margin-top:clamp(40px,4.4vw,64px)}
.rekam>.kap{opacity:.74}
.rekam .baris{margin-top:6px}
.rekam .baris h4{font-size:clamp(19px,1.8vw,26px)}
.rekam .baris li{padding:18px 0 16px}
.rekam-cat{margin-top:20px;font-size:15px;line-height:1.55;opacity:.88;max-width:34em}
.tautan-pribadi{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tautan-pribadi a{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:6px;align-items:end;padding:18px 20px 16px;border:1px solid rgba(241,231,216,.32);transition:border-color .4s,color .4s}
.tautan-pribadi a .kap{grid-column:1/3;opacity:.7;font-size:11px}
.tautan-pribadi a b{font-family:var(--judul);font-weight:400;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.006em;overflow-wrap:anywhere}
.tautan-pribadi a i{font-style:normal;transition:transform .5s var(--alun)}
.tautan-pribadi a:hover,.tautan-pribadi a:focus-visible{border-color:var(--genteng);color:var(--genteng)}
.tautan-pribadi a:hover i,.tautan-pribadi a:focus-visible i{transform:translate(3px,-3px)}

/* ajakan DTB: bidang ijuk; dua tombol besar (situs utama terang, WhatsApp bergaris) */
.ajak{background:var(--ijuk);color:var(--gading)}
.ajak .kisi{align-items:end}
.ajak .kiri{grid-column:1/7}
.ajak .kanan{grid-column:8/13;display:flex;flex-direction:column;gap:12px}
.ajak .ket{margin-top:24px;max-width:30em;font-size:16px;line-height:1.65;opacity:.9}
.ajak-merek{display:flex;align-items:center;gap:12px;margin-bottom:26px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.ajak-merek img{width:36px;height:36px}
.tombol.besar-t{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:16px;min-height:92px;padding:0 28px;border-color:rgba(241,231,216,.38);text-transform:none;letter-spacing:0}
.tombol.besar-t b{font-family:var(--judul);font-weight:400;font-size:clamp(20px,2.3vw,34px);letter-spacing:-.008em;line-height:1.15;overflow-wrap:anywhere}
.tombol.besar-t i{font-size:20px}
.tombol.besar-t.utama{background:var(--gading);color:var(--ijuk);border-color:var(--gading)}
.tombol.besar-t:hover,.tombol.besar-t:focus-visible{border-color:var(--genteng);color:var(--genteng)}
.tombol.besar-t.utama:hover,.tombol.besar-t.utama:focus-visible{background:var(--genteng);border-color:var(--genteng);color:var(--ijuk)}
.kaki{background:var(--ijuk);color:var(--gading);padding:0 var(--tepi) calc(36px + var(--aman-b))}
.dibuat{display:inline-flex;align-items:center;gap:16px;padding:8px 0 30px;min-height:44px;border:0!important}
.dibuat img{width:44px;height:44px}
.dibuat>span{display:flex;flex-direction:column;gap:4px}
.dibuat .kap{opacity:.7;font-size:11px}
.dibuat b{font-family:var(--judul);font-weight:400;font-size:24px;letter-spacing:.02em}
.dibuat i{font-style:normal;opacity:.6;transition:transform .5s var(--alun),opacity .4s}
.dibuat:hover i,.dibuat:focus-visible i{transform:translate(3px,-3px);opacity:1}
.kaki .garis{border-top:1px solid rgba(241,231,216,.22);padding-top:28px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;line-height:1.6}
.kaki .garis p{max-width:44em;opacity:.86}
.kaki a{border-bottom:1px solid rgba(224,138,82,.8);padding-bottom:1px}

/* muncul saat masuk pandang: satu gerak, tidak berulang */
.js .naik{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--alun),transform 1.1s var(--alun)}
.js .naik.tampak{opacity:1;transform:none}

/* uji: merender poster bab dari model (alat/poster.mjs) */
.tangkap .kepala,.tangkap #bab-bab,.tangkap .alat,.tangkap .undak,.tangkap .tirai,.tangkap .lewati,.tangkap #ket-kori{display:none!important}

/* ── tanpa JS: hero diam + bab bertumpuk ── */
.tanpa-js .perjalanan{height:auto}
.tanpa-js .panggung{position:relative}
.tanpa-js .kori,.tanpa-js .udara,.tanpa-js .alat,.tanpa-js .undak,.tanpa-js .bingkai,.tanpa-js #ket-kori,.tanpa-js #bab-bab{display:none}
.tanpa-js .iris.griya .foto img{width:100%;height:100%;object-fit:cover}

/* desktop sempit: irisan lebih ramping → keterangan miring turun ke baris kedua, judul sedikit lebih kecil agar tidak menyentuh lis Venue */
@media (max-width:1180px){:root{--fj:min(5vw,9vh);--cap:74px}.cap{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-content:start}.cap em{grid-column:2;margin:1px 0 0}}
@supports (height:1svh){@media (max-width:1180px){:root{--fj:min(5vw,9svh)}}}

/* ── layar sempit / tegak: judul di atas, pepalihan mengisi bawah; di model, undak menjadi rel tegak ── */
@media (max-width:760px),(max-aspect-ratio:4/5){
  :root{--tepi:20px; --u:min(7.5vh,16.4vw); --wi:calc((100vw - 52px) / 4.35); --siar:4px; --kaki-b:calc(50px + var(--aman-b)); --cap:58px; --fj:min(9.7vw,5.3vh)}
  @supports (height:1svh){:root{--u:min(7.5svh,16.4vw); --fj:min(9.7vw,5.3svh)}}
  .kepala{padding:8px var(--tepi);min-height:60px}
  /* kepala HP: Tur 360° + Hubungi + satu tombol bahasa (menampilkan bahasa yang lain) */
  .kepala nav a:not(.utama):not(.pintas){display:none}
  .kepala nav{gap:0}
  .kepala nav a{padding:0 7px;font-size:11px;letter-spacing:.14em}.kepala nav a::after{left:7px;right:7px}
  .bhs{margin-left:0}.bhs button{font-size:11px;min-width:40px;padding:0 6px}.bhs button[aria-pressed="true"]{display:none}
  .merek{font-size:12.5px;letter-spacing:.2em}
  .teks-b{top:74px;bottom:auto;right:var(--tepi);display:block}
  .pengantar{margin-top:14px;width:auto;max-width:calc(100% - var(--wi) - 14px);font-size:14.5px;line-height:1.55}
  .iris.griya{width:calc(var(--wi) * 1.35)}
  .pepalihan{left:var(--tepi);right:var(--tepi)}
  .pepalihan::after{left:-8px;right:-8px;height:2px;bottom:calc(var(--cap) - 2px)}
  .foto::before{left:-4px;top:-5px}
  .cap{padding-top:12px;column-gap:5px}
  .cap i{font-size:12px;min-width:0}
  .cap b{font-size:9.5px;letter-spacing:.12em}
  .cap em{font-size:12px;line-height:1.25;margin:2px 0 0;white-space:normal}
  .gulir{font-size:10px;letter-spacing:.2em;gap:10px}.gulir i{height:18px}
  .ket-kori{right:var(--tepi);width:auto;bottom:calc(40px + var(--aman-b))}
  .ket-kori span{font-size:15px}
  .bab{left:var(--tepi);right:var(--tepi);width:auto;bottom:calc(34px + var(--aman-b))}
  .bab h2{font-size:42px}.bab p{font-size:15.5px;margin-top:10px;max-width:none}.bab .catat{font-size:12.5px;margin-top:10px;padding-top:10px}
  .udara .tirai{background:linear-gradient(180deg,rgba(23,15,11,.62) 0,rgba(23,15,11,.3) 18%,rgba(23,15,11,0) 34%,rgba(23,15,11,0) 44%,rgba(23,15,11,.9) 84%)}
  .alat{top:62px;right:auto;left:calc(var(--tepi) - 8px);align-items:flex-start}
  .muat{text-align:left;padding-left:14px}
  /* rel tegak di sudut atas (di luar pelinggih pada bab Merajan): empat nama tetap terbaca; panjang garis = tingkat (Lobi terpendek di bawah, Merajan terpanjang di atas) */
  .undak{right:calc(var(--tepi) - 8px);bottom:auto;top:62px;flex-direction:column-reverse;align-items:flex-end;font-size:10px;letter-spacing:.18em;padding:2px 8px 2px 0;background:rgba(23,15,11,.44);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .undak button{width:auto;min-height:44px;margin:0;padding:0 0 0 16px;border:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;text-shadow:0 0 12px rgba(23,15,11,.9)}
  .undak button+button::before{display:none}
  .undak button::after{content:"";position:static;display:block;height:1px;width:calc(8px + var(--i) * 9px);background:currentColor;opacity:.7}
  .undak button[aria-current="step"]::after{position:static;width:calc(8px + var(--i) * 9px);height:2px;background:var(--genteng);opacity:1}
  .kisi{display:block}
  .upacara .kanan,.ajak .kanan{margin-top:40px}
  .potret{width:78%;margin:0 0 40px}
  .pilot .ket{font-size:16px}
  .tautan-pribadi{grid-template-columns:1fr}
  .label-karya{font-size:10px;letter-spacing:.18em;margin-bottom:12px}
  .oleh-dtb{font-size:9px;letter-spacing:.16em;min-height:18px}
  .merek-kelompok .merek{min-height:26px}
  .baris li{grid-template-columns:1fr;gap:6px;padding:22px 0 20px}
  .undakan li{margin-left:calc(var(--k,0) * 18px)}
  .keping{width:62%}
  .lintas .tombol,.upacara .tombol{width:100%;justify-content:space-between}
  .pintu-baris{gap:12px;margin-top:40px}
  .pintu h3{font-size:17px;margin-top:12px;padding-top:10px;border-top-width:2px}.pintu p{font-size:13px;line-height:1.45}
  .masuk{font-size:11px;letter-spacing:.16em;margin-top:8px}
  .pintu3 .ketiga{margin-top:36px}
  .tombol.besar-t{grid-template-columns:minmax(0,1fr) auto;row-gap:4px;padding:16px 20px;min-height:84px}
  .tombol.besar-t .kap{grid-column:1/3}
  .tombol.besar-t b{font-size:22px}
  .kaki .garis{display:block}.kaki .garis p+p{margin-top:14px}
}
@media (max-width:760px) and (max-height:700px){
  .pengantar{font-size:13px;line-height:1.5;margin-top:10px}
  .teks-b{top:66px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .naik{opacity:1;transform:none}
  .gulir i{transform:none}
}

/* pindah halaman (beranda ↔ tur ↔ darat): larut pelan, bukan potong — peramban lama mengabaikan aturan ini */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:cubic-bezier(.3,.1,.2,1)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ── WEB6: menu ringkas HP ── */
.tbl-menu{display:none}
.menu{position:fixed;inset:0;z-index:60;background:var(--paras,#e9e6e0);color:var(--ijuk,#1d1916);display:flex;flex-direction:column;padding:76px 20px 28px}
.menu nav{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.menu nav a{font-family:var(--judul);font-size:30px;line-height:1.2;min-height:56px;display:flex;align-items:center;border-bottom:1px solid rgba(29,25,22,.14)}
.tutup-menu{position:absolute;right:10px;top:10px;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:inherit}
.tutup-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2}
.bhs-menu{display:flex;gap:8px;margin-top:22px}
.bhs-menu button{min-width:56px;min-height:48px;border:1px solid rgba(29,25,22,.3);background:none;color:inherit;font:500 12px/1 var(--ui);letter-spacing:.2em}
.bhs-menu button[aria-pressed="true"]{background:var(--ijuk,#1d1916);color:var(--paras,#e9e6e0)}
@media (max-width:760px),(max-aspect-ratio:4/5){
  .tbl-menu{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font:500 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;background:none;border:0;color:inherit}
  .kepala nav a.pintas,.kepala .bhs{display:none}
}