/* Janévalla Bandung — mockup v2.
Tata letaknya bukan kira-kira: koordinat tiap elemen dibaca langsung dari
XML slide di dalam "Website Mockup Design.pptx" (kanvas 18288000x10287000
EMU = 16:9) lalu dipakai apa adanya sebagai persen di dalam .stage.
Karena itu .stage HARUS 16:9 -- persen di kotak beraspek lain akan
menggeser semuanya. Sisa layar di luar stage diisi tekstur beton yang sama,
jadi letterbox-nya tidak kelihatan. */
:root {
--beton: #FACF04; /* kuning brand, solid */
--beton-rgb: 250,207,4; /* komponen rgb-nya, untuk rgba() -- ditulis ulang build_v2 */
/* Sampul (halaman 1-2, deck Canva hal. 5-6): warna solid, lalu tekstur,
lalu vektor gedung, lalu isi. Grain-nya dipakai bersama modul tekstur. */
--sampul: #59384E;
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--tinta: #17161a;
--plum: #522a44;
--plum-rgb: 82,42,68;
/* Aksen terpisah (Site design). Tombol, panah carousel, dan titik navigasi
dulu satu warna --plum; sekarang masing-masing bisa diisi sendiri, dan
yang dibiarkan kosong tetap ikut --plum. */
--tombol-latar: var(--plum);
--panah: var(--plum);
--panah-rgb: var(--plum-rgb);
--titik: var(--plum);
--titik-rgb: var(--plum-rgb);
--gelap-neon: #14082e;
--font-teks: "Karla", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--font-judul: "Monument Extended", "Poppins", var(--font-teks);
--font-serif: "Karla", Georgia, serif; /* baris "The Origins of": Karla tebal miring */
/* 1pt = 1/1440 lebar slide (20 inci pada 72pt/inci). */
--pt: 0.0694cqw;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Gulir mendatar dipakai untuk menggeser carousel; tanpa ini usapan dua jari
ke samping di macOS/Chrome memicu "kembali/maju" riwayat peramban. */
html, body { overscroll-behavior-x: none; }
body {
margin: 0; color: var(--tinta); font: 400 16px/1.6 var(--font-teks);
overflow-x: hidden; isolation: isolate;
background: var(--beton);
}
/* Tekstur di atas warna latar: lapisan tetap di z -1 (di bawah semua isi, di
atas latar body). Pola bawaan adalah mask SVG yang diwarnai --tekstur-warna;
tekstur unggahan sendiri dipasang sebagai gambar ubin. Dipilih lewat
, kekuatannya --tekstur-kuat (0..1). */
body::before {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
opacity: var(--tekstur-kuat, 0); background: var(--tekstur-warna, var(--tinta));
-webkit-mask: var(--tekstur, none) 0 0 / var(--tekstur-ukuran, 28px) repeat;
mask: var(--tekstur, none) 0 0 / var(--tekstur-ukuran, 28px) repeat;
}
html:not([data-tekstur]) body::before, html[data-tekstur=""] body::before { display: none; }
html[data-tekstur="titik"] { --tekstur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='1.7' fill='%23fff'/%3E%3C/svg%3E"); }
html[data-tekstur="garis"] { --tekstur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M-4 32 32-4M-4 4 4-4M24 32l8-8' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E"); }
html[data-tekstur="kisi"] { --tekstur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M0 .5H28M.5 0V28' stroke='%23fff'/%3E%3C/svg%3E"); }
html[data-tekstur="silang"] { --tekstur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M-4 32 32-4M-4-4l36 36' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E"); }
html[data-tekstur="kertas"] { --tekstur-ukuran: 180px; --tekstur: var(--grain); }
html[data-tekstur="beton"] { --tekstur-ukuran: 240px; --tekstur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.32' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-tekstur="gambar"] body::before {
background: var(--tekstur-gambar) 0 0 / var(--tekstur-ukuran, 320px) repeat;
-webkit-mask: none; mask: none;
}
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--font-judul); font-weight: 800; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
/* ---------- Deck ----------
Satu scroll = satu section, tidak ada halaman yang menggeser. Section
ditumpuk di tempat dan ditukar, persis seperti menekan panah di deck Canva.
Isi yang lebih tinggi dari layar tetap bisa digulir di dalam section-nya
sendiri; deck baru pindah setelah gulirannya mentok. */
.deck { position: fixed; inset: 0; z-index: 2; overflow: hidden; }
.slide {
position: absolute; inset: 0; display: grid; place-items: center;
overflow: hidden; overscroll-behavior: contain;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .7s ease, visibility 0s linear .7s;
}
.slide.aktif {
opacity: 1; visibility: visible; pointer-events: auto;
transition: opacity .7s ease, visibility 0s;
}
/* Titik penunjuk posisi di kanan layar. */
.deck-titik {
position: fixed; right: 18px; top: 50%; translate: 0 -50%; z-index: 40;
display: flex; flex-direction: column; gap: 10px;
}
.deck-titik button {
width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
background: rgba(var(--titik-rgb),.32); transition: background-color .3s ease, height .3s ease;
}
.deck-titik button[aria-current="true"] { background: var(--titik); height: 22px; }
/* Dua halaman pertama berlatar plum: titik plum hilang di sana. */
body:has(#top.aktif) .deck-titik button, body:has(#origins.aktif) .deck-titik button { background: rgba(255,255,255,.4); }
body:has(#top.aktif) .deck-titik button[aria-current="true"],
body:has(#origins.aktif) .deck-titik button[aria-current="true"] { background: #fff; }
/* ---------- Menu atas ----------
Satu bar tetap untuk seluruh deck. Muncul mulai section ke-3 (di deck
navigasinya memang baru ada dari slide 3). Sorotan menandai section aktif;
"Book Now" tautan keluar jadi tidak pernah tersorot. */
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 40;
display: flex; justify-content: flex-end; gap: clamp(14px, 2.6vw, 46px);
padding: 22px max(18px, 4vw);
opacity: 0; pointer-events: none; transition: opacity .5s ease;
/* Kuning tembus pandang yang memudar ke bawah, seperti versi ponsel: kartu
yang mengintip dari atas (Facilities) dan tulisan tegak lewat di bawah
menu, dan tanpa ini labelnya tercetak di atas foto. */
background: linear-gradient(to bottom, rgba(var(--beton-rgb),.94) 55%, rgba(var(--beton-rgb),0));
padding-bottom: 34px;
}
.topbar.tampil { opacity: 1; pointer-events: auto; }
.topbar-menu { display: contents; }
.topbar a { position: relative; font-size: clamp(15px, 1.35vw, 21px); font-weight: 700; color: var(--tinta); }
.topbar a span { position: relative; }
.topbar a span::after {
content: ""; position: absolute; left: 50%; right: 50%; bottom: -7px; height: 2px;
background: var(--plum); transition: left .3s ease, right .3s ease;
}
.topbar a:hover span::after { left: 0; right: 0; }
.topbar a[aria-current="true"] { color: var(--plum); font-weight: 700; }
.topbar a[aria-current="true"] span::after { left: 0; right: 0; }
/* Titik penanda di kiri label yang aktif. */
.topbar a[aria-current="true"] span::before {
content: ""; position: absolute; left: -12px; top: 50%; translate: 0 -50%;
width: 6px; height: 6px; border-radius: 999px; background: var(--plum);
}
/* ---------- Slogan yang berpindah ----------
"Bold with Originality" / "Rich with Character": di kiri-kanan tengah 24 HOUR
pada slide Origins, lalu meluncur ke pojok bawah slide intro. Lebar
max-content + translate -100% supaya teksnya bisa rata kanan ke satu jangkar
tanpa lompatan perataan saat berpindah. */
.slogan-terbang { position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none;
opacity: 0; transition: opacity .5s ease; }
.slogan-terbang .stage { background: none; }
.slogan-terbang[data-pos="1"], .slogan-terbang[data-pos="2"] { opacity: 1; }
.slogan-terbang .sudut {
position: absolute; margin: 0; width: max-content; top: calc(var(--y) * 1%); left: calc(var(--x) * 1%);
translate: var(--tr, 0) 0;
transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1), translate .9s cubic-bezier(.4,0,.2,1);
}
/* Slogan berpusat di garis tengah huruf 24 HOUR (~52.4% tinggi kanvas). */
/* Di halaman sampul slogannya putih; begitu mendarat di intro yang kuning ia
kembali ke warna aksen. */
.slogan-terbang .sudut { transition-property: left, top, translate, color; }
.slogan-terbang[data-pos="0"] .sudut, .slogan-terbang[data-pos="1"] .sudut { color: var(--origins, #fff); }
/* Slogan statis (dipakai di ponsel) ikut putih: section origins berlatar plum. */
#origins .sudut { color: var(--origins, #fff); }
.slogan-terbang .slogan-1 { --x: 28.8; --y: 50.3; --tr: -100%; } /* 2% jarak dari huruf 2 */ /* posisi awal = posisi Origins */
.slogan-terbang .slogan-2 { --x: 71.2; --y: 50.3; --tr: 0; }
.slogan-terbang[data-pos="2"] .slogan-1, .slogan-terbang[data-pos="3"] .slogan-1 { --x: 9.77; --y: 89.44; --tr: 0; }
.slogan-terbang[data-pos="2"] .slogan-2, .slogan-terbang[data-pos="3"] .slogan-2 { --x: 88; --y: 89.44; --tr: -100%; } /* 88, bukan 91.11: menjauh dari tombol WhatsApp */
/* !important: mengalahkan .el.teks { display: flex } yang datang belakangan. */
.hanya-ponsel { display: none !important; }
@media (max-width: 759px), (max-height: 429px) {
.hanya-desktop { display: none !important; }
.hanya-ponsel { display: flex !important; }
}
/* ---------- Logo yang berpindah ----------
Satu lockup (mark + wordmark, sesuai brand guideline tidak boleh terpisah)
untuk seluruh deck; posisinya berpindah antar section persis seperti di
Canva (tengah -> atas-tengah -> pojok kiri atas). --x/--w adalah kotak
MARK-nya; wordmark 3.5x lebar mark, dipusatkan di bawahnya. */
.logo-terbang { position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none;
transition: opacity .4s ease; }
/* Di section kontak logonya statis (ikut menggulir bersama isinya); lapisan
terbang dipadamkan dan lockup salinan di dalam section yang tampil. */
/* Geometrinya tetap seperti pos 3 -- tanpa ini --x/--y/--w kosong di pos 4,
width-nya jadi auto, dan logonya membesar sekejap sambil memudar. */
.logo-terbang[data-pos="4"] { opacity: 0; }
.logo-terbang[data-pos="4"] .logo-lockup { --x: 5.4; --y: 7.31; --w: 2.3; }
/* Section kontak tidak punya .stage, jadi kotak 16:9 yang dipakai lapisan
terbang dihitung ulang di sini: lebar min(100vw, 100svh*16/9), dipusatkan.
Angkanya = posisi 3 (x 5.4 - 2.3*1.25, y 7.31, lebar 2.3*3.5). */
.logo-lockup.logo-statis { /* spesifisitas > .logo-lockup, yang ditulis sesudahnya */
--sw: min(100vw, calc(100svh * 16 / 9)); --sh: calc(var(--sw) * 9 / 16);
--logo: var(--logo-gelap, #fff); z-index: 3; pointer-events: none;
left: calc((100vw - var(--sw)) / 2 + var(--sw) * .02525);
top: calc((100svh - var(--sh)) / 2 + var(--sh) * .0731);
width: calc(var(--sw) * .0805);
}
.logo-terbang .stage { background: none; }
.logo-lockup {
position: absolute; display: flex; flex-direction: column; align-items: center;
left: calc((var(--x) - var(--w) * 1.25) * 1%); top: calc(var(--y) * 1%);
width: calc(var(--w) * 3.5 * 1%);
transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1),
width .9s cubic-bezier(.4,0,.2,1), opacity .5s ease;
}
/* Mark dan wordmark PNG dipakai sebagai mask, warnanya dari --logo: jadi
bisa diganti dari Site design (gelap di kuning, terang di atas menara).
![]()
di dalamnya transparan, hanya memberi ukuran/rasio. */
.logo-mark, .logo-word {
display: block; background: var(--logo, #fff); transition: background-color .6s ease;
-webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.logo-mark img, .logo-word img { display: block; width: 100%; height: auto; opacity: 0; }
/* Site design: "pakai warna aslinya". Mask dilepas supaya berkas logo tampil
apa adanya -- gradien, dua warna, emboss -- bukan silhouette satu warna. */
html[data-logo-asli] .logo-mark, html[data-logo-asli] .logo-word {
background: none; -webkit-mask: none; mask: none;
}
html[data-logo-asli] .logo-mark img, html[data-logo-asli] .logo-word img { opacity: 1; }
/* Sama untuk vektor gedung: tanpa ini brightness(0) invert(1) memutihkannya,
jadi panel yang sudah berwarna di berkasnya tetap tampil putih. */
html[data-gedung-asli] .tirai .menara, html[data-gedung-asli] #origins .lineart { filter: none; }
.logo-mark { width: calc(100% / 3.5); margin-bottom: 8%; }
.logo-word { width: 100%; }
/* Logo versi putih di semua section (permintaan 2026-09-17); --logo-gelap dan
--logo-terang tetap bisa diisi dari Site design kalau mau dibedakan. */
.logo-terbang[data-pos="0"] .logo-lockup { --x: 47.4; --y: 37.0; --w: 5.2; --logo: var(--logo-terang, #fff); }
.logo-terbang[data-pos="1"] .logo-lockup { --x: 48.15; --y: 7.51; --w: 3.7; --logo: var(--logo-gelap, #fff); }
.logo-terbang[data-pos="2"] .logo-lockup { --x: 5.4; --y: 7.31; --w: 2.3; --logo: var(--logo-terang, #fff); }
.logo-terbang[data-pos="3"] .logo-lockup { --x: 5.4; --y: 7.31; --w: 2.3; --logo: var(--logo-gelap, #fff); }
/* ---------- Cincin pemuatan ----------
Menutup layar sampai aset halaman pertama selesai dimuat dan pop-up
pengumuman sempat terbuka. Determinate: busurnya terisi dari kosong ke penuh
mengikuti jumlah berkas yang sudah selesai (app.js menulis --p dan
aria-valuenow), bukan animasi berputar yang tidak berarti apa-apa. */
.pemuat {
position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; gap: 14px;
grid-auto-flow: row; background: var(--sampul); color: #fff;
transition: opacity .45s ease, visibility 0s linear .45s;
}
.pemuat[data-selesai] { opacity: 0; visibility: hidden; pointer-events: none; }
.pemuat-cincin { width: clamp(76px, 12vmin, 120px); height: auto; transform: rotate(-90deg); }
.pemuat-jalur, .pemuat-isi {
fill: none; stroke-width: 5; r: 52; cx: 60; cy: 60;
}
.pemuat-jalur { stroke: rgba(255,255,255,.22); }
.pemuat-isi {
stroke: currentcolor; stroke-linecap: round;
stroke-dasharray: 326.73; /* 2 * pi * 52 */
stroke-dashoffset: calc(326.73 * (1 - var(--p, 0)));
transition: stroke-dashoffset .25s ease;
}
.pemuat-angka { margin: 0; font-size: 13px; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .pemuat-isi { transition: none; } }
/* ---------- Tirai ----------
Dua menara neon yang di slide 1 menutup di tengah lalu membuka ke sudut
di slide 2. Posisi tutup/buka keduanya diambil dari XML slide. */
.tirai { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none;
transition: background-color .9s ease; }
/* Saat tertutup, latar gelap di balik kedua panel: di kanvas potret ponsel
(asio 0.45-0.5) sambungan diagonalnya menyisakan serpihan di tepi yang
tidak tertutup gambar menara, dan kuning halaman mengintip di sana. Latar
ini senada dengan tepi gambar, dan memudar begitu tirainya membuka. */
/* Gambar latar situs (Site design) juga dipakai di halaman 1-2: tanpa ini
sampul solid menutupinya dan dua halaman pertama tampak tidak ikut setelan. */
.tirai[data-buka="0"], .tirai[data-buka="1"] {
background: var(--sampul) var(--latar-gambar, none) center/cover no-repeat;
}
/* Lapisan tekstur: anak absolut (bukan item grid), digambar sebelum .stage,
jadi ia duduk di atas warna solid dan di bawah vektor gedung. */
.tirai::before {
content: ""; position: absolute; inset: 0; opacity: 0;
background: #fff; transition: opacity .9s ease;
-webkit-mask: var(--grain) 0 0 / 180px repeat; mask: var(--grain) 0 0 / 180px repeat;
}
.tirai[data-buka="0"]::before, .tirai[data-buka="1"]::before { opacity: .06; }
.tirai .stage { background: none; }
.tirai .menara {
/* Vektor gedung dijadikan garis putih tipis apa pun warna berkas aslinya:
brightness(0) membuatnya hitam pekat, invert(1) membalikkannya jadi putih,
dan alfa berkas tetap utuh. Jadi aset boleh diganti tanpa menyesuaikan CSS.
Tidak dicerminkan lagi (--flip 1): kedua salinan di deck memang sama arah. */
/* Berkas panelnya diekspor dari deck SUDAH dengan transparansi 15%
(alfa maksimumnya 40/255), jadi di sini tidak diturunkan lagi -- kalau
dikali .15 sekali lagi, garisnya tinggal 2% dan nyaris tak terlihat.
Vektor tengah di halaman 2 sebaliknya beralfa penuh, jadi ia yang
diturunkan ke .15 di aturannya sendiri. */
opacity: var(--tirai-kuat, 1); filter: brightness(0) invert(1);
transition: left 1.15s cubic-bezier(.4,0,.2,1), top 1.15s cubic-bezier(.4,0,.2,1), opacity .8s ease;
}
/* Kedua panel memakai gambar yang sama, tapi yang kanan diputar 180 derajat
dari yang kiri (-135 -> +45). Siluet menara itu asimetris, jadi hanya
dengan pembalikan ini keduanya saling mengunci seperti kepingan puzzle
di sepanjang diagonal -- kalau rotasinya sama, keduanya cuma bertumpuk
sejajar dan menyisakan celah.
Posisi tutup & buka dua-duanya titik-simetris terhadap pusat layar; angka
ini memang sudah begitu di slide 1 dan slide 2 deck. */
/* Berkasnya sudah berisi panel yang diputar (ekspor Canva), jadi di sini tidak
ada rotasi: X/Y = sudut kiri-atas kotak pembatas di deck hal. 5 (kanvas
1920x1080) -- kiri -1403.3/-1434.2, kanan 688.5/-610.7. Dicocokkan dengan
PNG ekspor halaman itu: tumpang tindih garisnya 84%.
Yang terbuka menggeser keduanya keluar ~35% lebar kanvas. */
.tirai .m-kiri { --x: -73.09; --y: -132.80; }
.tirai .m-kanan { --x: 35.86; --y: -56.55; }
.tirai[data-buka="1"] .m-kiri { --x: -108.09; --y: -149.80; }
.tirai[data-buka="1"] .m-kanan { --x: 70.86; --y: -39.55; }
.tirai[data-buka="2"] .m-kiri { --x: -108.09; --y: -149.80; opacity: 0; }
.tirai[data-buka="2"] .m-kanan { --x: 70.86; --y: -39.55; opacity: 0; }
.stage {
position: relative; width: min(100%, calc(100svh * 16 / 9)); aspect-ratio: 16 / 9;
container-type: size;
}
.slide .stage { overflow: hidden; }
/* Satu penempat untuk semua: persis kotak dari XML slide. */
.el {
position: absolute;
left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
transform: rotate(var(--rot, 0deg)) scaleX(var(--flip, 1));
}
.el.teks { display: flex; align-items: flex-start; line-height: 1.15; }
.el.tengah { justify-content: center; text-align: center; }
.el img { width: 100%; height: 100%; object-fit: contain; }
.el.isi img { object-fit: cover; }
img.el { object-fit: contain; }
.judul { font-family: var(--font-judul); color: var(--plum); }
.sudut { font-size: calc(28 * var(--pt)); font-weight: 700; color: var(--plum); letter-spacing: .01em; white-space: nowrap; }
.sudut.kanan { justify-content: flex-end; text-align: right; }
.sudut.pusat { justify-content: center; text-align: center; }
.nav-tk { font-size: calc(18 * var(--pt)); color: #000; }
.nav-tk:hover { text-decoration: underline; text-underline-offset: .35em; }
/* ---------- Menara neon ---------- */
.menara { pointer-events: none; }
.menara img { object-fit: fill; }
/* ---------- Slide 1: splash ---------- */
#top .lockup { animation: naikHalus 1.1s cubic-bezier(.2,.7,.2,1); }
@keyframes naikHalus { from { opacity: 0; transform: translateY(3cqh) scale(.9); } }
@keyframes terbangMasuk { from { opacity: 0; transform: translate(-6%, 34%); } }
/* Keterangan kamar/produk/acara yang berganti: muncul naik halus, bukan
berganti seketika -- di desktop maupun tumpukan ponsel. */
.rdesk:not([hidden]) { animation: naikHalus .55s ease both; }
@keyframes pudarMasuk { from { opacity: 0; } }
/* Secret Corner & Happening: fade-in polos, tanpa geseran (permintaan). */
.sdesk:not([hidden]), #sudut .sjudul, #happening .sjudul { animation: pudarMasuk .6s ease both; }
/* ---------- Slide 2: origins ---------- */
/* Line-art bangunannya tersingkap dari bawah ke atas seperti sedang
digambar. Sumbernya raster, jadi tidak bisa animasi garis sungguhan --
clip-path wipe memberi kesan yang sama tanpa perlu SVG path. */
#origins .lineart {
/* Sama seperti menara: diputihkan lalu diturunkan ke ~20%, seperti di deck. */
opacity: var(--gedung-kuat, .15); mix-blend-mode: normal; filter: brightness(0) invert(1);
clip-path: inset(100% 0 0 0);
transition: clip-path 1.6s cubic-bezier(.35,0,.2,1), opacity .8s ease;
}
.js-v2 #origins.tampil .lineart { clip-path: inset(0 0 0 0); }
#origins .serif {
font-family: var(--font-serif); font-weight: 700;
font-size: calc(30 * var(--pt)); letter-spacing: .1em; color: var(--origins, #fff);
}
#origins .h24 { font-size: calc(134 * var(--pt)); line-height: .9; color: var(--origins, #fff); letter-spacing: -.015em; }
/* ---------- Slide 3: intro ---------- */
#intro .isi-teks {
font-size: calc(24 * var(--pt)); line-height: 1.7; color: var(--plum);
flex-direction: column; gap: .9em;
}
#intro .isi-teks strong { font-weight: 700; }
/* Menara menyapu masuk dari kiri-atas, seperti transisi slide 3 -> 4 di deck. */
#intro .menara { transition: transform 1.15s cubic-bezier(.2,.7,.2,1), opacity .9s ease; }
.js-v2 #intro .menara { opacity: 0; transform: rotate(-142.8deg) translate(-38%, 0); }
.js-v2 #intro.tampil .menara { opacity: 1; transform: rotate(-142.8deg); }
/* ---------- Slide 4-7: OUR ROOM ---------- */
/* Pembungkus ini transparan di desktop -- kartunya tetap diposisikan
terhadap stage. Di layar sempit ia jadi wadah carousel tersendiri. */
.rstrip, .fstrip { display: contents; }
.rcard {
position: absolute; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
transition: left .85s cubic-bezier(.2,.7,.2,1), top .85s cubic-bezier(.2,.7,.2,1),
width .85s cubic-bezier(.2,.7,.2,1), height .85s cubic-bezier(.2,.7,.2,1),
opacity .5s ease;
}
.rcard img, .rcard video { width: 100%; height: 100%; object-fit: cover; }
/* Bayangan hanya di kartu tengah supaya ia lepas dari latar; kartu samping polos. */
.rcard[data-p="0"], .fslide[data-p="0"] { box-shadow: var(--bayang-aktif, 0 22px 50px rgba(0,0,0,.38)); }
/* Koordinat langsung dari slide: sisi kiri/kanan separuh keluar kanvas,
yang aktif membesar ke tengah. */
.rcard[data-p="-1"] { --x: -10.28; --y: 27.49; --w: 38.39; --h: 45.22; opacity: 1; z-index: 1; }
.rcard[data-p="0"] { --x: 23.74; --y: 19.04; --w: 52.52; --h: 62.13; opacity: 1; z-index: 3; }
.rcard[data-p="1"] { --x: 71.71; --y: 27.49; --w: 38.16; --h: 45.22; opacity: 1; z-index: 1; }
.rcard[data-p="x"] { --x: 23.74; --y: 19.04; --w: 52.52; --h: 62.13; opacity: 0; z-index: 0; pointer-events: none; }
/* Judul kamar aktif: 79pt di slide 5-7. Titik y deck-nya 11.01%, tapi pada
ukuran itu kotak barisnya menyentuh tepi atas gambar; dinaikkan sedikit
supaya ada jarak antara nama kamar dan fotonya. */
.rjudul {
position: absolute; left: 0; right: 0; top: 10.8%; z-index: 4;
text-align: center; font-size: calc(62 * var(--pt)); line-height: 1;
transition: opacity .45s ease, transform .45s ease;
}
.rjudul[hidden] { display: none; }
/* Nama kamar terbang ke tempatnya, sama seperti judul fasilitas. Bedanya:
fasilitas punya satu elemen per item yang saling menggantikan, sedangkan
ini SATU elemen yang isinya berganti -- jadi keadaan awalnya dipasang ulang
lewat kelas .terbang setiap kali kamarnya berubah. */
.js-v2 .rjudul {
transition: transform .8s cubic-bezier(.3,.8,.25,1), opacity .55s ease;
will-change: transform;
}
/* Naik saja, tanpa geser mendatar: kotak judul ini selebar panggung dan
teksnya rata tengah, jadi geser mendatar tidak terlihat -- yang terjadi
cuma kotaknya menjorok ke luar layar. */
.js-v2 .rjudul.terbang { transform: translateY(26%); opacity: 0; }
/* Deskripsi tepat di bawah gambar aktif (gambar berakhir di 81.17%). */
.rdesk {
position: absolute; left: 25%; right: 25%; top: 86%; z-index: 4;
text-align: center; color: var(--plum);
font-size: calc(15 * var(--pt)); line-height: 1.55;
}
.rdesk[hidden] { display: none; }
/* Panah di tepi kiri/kanan: bagian bawah sudah terisi wordmark, label
"OUR ROOM", dan deskripsi. */
.rnav-btn {
position: absolute; top: 50%; translate: 0 -50%; z-index: 5;
width: 3.4cqw; height: 3.4cqw; min-width: 36px; min-height: 36px; border-radius: 999px;
border: .12cqw solid rgba(var(--panah-rgb),.4); background: transparent; color: var(--panah);
font-size: 1.6cqw; cursor: pointer; line-height: 1;
}
/* Pembungkus ini tidak boleh ikut menata di desktop -- tombolnya menempel
di tepi kiri/kanan gambar. Di layar sempit baru jadi baris tombol. */
.rnav { display: contents; }
.rnav-prev { left: 1.5%; }
.rnav-next { right: 1.5%; }
.rnav-btn:hover { background: rgba(var(--panah-rgb),.15); }
/* ---------- SECRET CORNER ----------
Kartunya .rcard yang sama dengan kamar; yang disetel ulang di sini hanya
posisinya -- dinaikkan supaya nama produk, kalimatnya, dan nama komunitas
muat di bawah gambar. */
/* Dua bedanya dengan kamar: kartunya POTRET (produknya botol, gantungan
kunci, pin -- foto tegak), dan kartu sisi tidak menjulur keluar kanvas
karena kedua tepi sudah dipakai tulisan tegak.
Panggungnya selalu 16:9, jadi persen lebar dan tinggi tidak sebanding:
lebar% = tinggi% x 3/4 x 9/16 = tinggi% x 0.421875 untuk potret 3:4. */
/* Kartu 4:5 seperti foto potret Instagram, dan ukurannya SAMA di Secret Corner
maupun Happening. Di kanvas 16:9, lebar% = 0.45 x tinggi% memberi 4:5 pas:
(w*16)/(h*9) = 0.8. Tengah 27x60, samping 19.8x44. */
#sudut .rcard[data-p="-1"], #happening .rcard[data-p="-1"] { --x: 15.65; --y: 18; --w: 19.8; --h: 44; }
#sudut .rcard[data-p="0"], #happening .rcard[data-p="0"] { --x: 36.50; --y: 10; --w: 27.0; --h: 60; }
#sudut .rcard[data-p="1"], #happening .rcard[data-p="1"] { --x: 64.55; --y: 18; --w: 19.8; --h: 44; }
#sudut .rcard[data-p="x"], #happening .rcard[data-p="x"] { --x: 36.50; --y: 10; --w: 27.0; --h: 60; }
/* Panah di kiri/kanan gambar seperti Rooms, setinggi tengah kartu (Secret
Corner 10+60/2 = 40%). Celah antara tulisan tegak dan kartu sisi: 8%-16%. */
#sudut .rnav-btn { top: 40%; translate: 0 -50%; }
#sudut .rnav-prev { left: 9.5%; }
#sudut .rnav-next { right: 9.5%; }
/* Happening memakai kartu yang sama persis dengan Secret Corner, jadi panah dan
teksnya duduk di ketinggian yang sama juga. Yang khas Happening hanya judul
satu baris dan keterangan tiga baris (selengkapnya di pop-up). */
#happening .sjudul { top: 76%; white-space: nowrap; font-size: calc(40 * var(--pt)); }
#happening .sdesk { top: 82.5%; left: 24%; right: 24%; }
#happening .rnav-btn { top: 40%; bottom: auto; translate: 0 -50%; }
#happening .rnav-prev { left: 9.5%; }
#happening .rnav-next { right: 9.5%; }
#happening .sdesk-kata { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#happening .sdesk-kata p + p { margin-top: .4em; }
.sdesk-tombol { margin-top: 8px; padding: 7px 16px; font-size: calc(12 * var(--pt)); }
/* Nama produk di kartu sisi: kecil, di bawah gambarnya sendiri. Yang tengah
sudah punya judul besar, jadi labelnya disembunyikan di sana. */
.slabel {
position: absolute; left: 0; right: 0; top: 100%; padding-top: .5em;
text-align: center; color: var(--plum); letter-spacing: .12em;
font-size: calc(13 * var(--pt)); font-weight: 700;
}
.rcard[data-p="0"] .slabel, .rcard[data-p="x"] .slabel { display: none; }
/* Judul terbang seperti nama kamar, tapi di BAWAH gambar. */
.sjudul {
position: absolute; left: 0; right: 0; top: 76%; z-index: 4;
text-align: center; font-size: calc(58 * var(--pt)); line-height: 1;
transition: opacity .45s ease, transform .45s ease;
}
.js-v2 .sjudul {
transition: transform .8s cubic-bezier(.3,.8,.25,1), opacity .55s ease;
will-change: transform;
}
.js-v2 .sjudul.terbang { transform: translateY(26%); opacity: 0; }
.sdesk {
position: absolute; left: 22%; right: 22%; top: 82.5%; z-index: 4;
text-align: center; color: var(--plum);
}
.sdesk[hidden] { display: none; }
.sdesk-kata { font-size: calc(16 * var(--pt)); line-height: 1.5; }
.sdesk-mitra { font-size: calc(14 * var(--pt)); letter-spacing: .06em; opacity: .8; margin-top: .4em; }
.sjudul-tegak { font-size: calc(46 * var(--pt)); font-weight: 800; letter-spacing: .12em; }
/* Hampir sebesar judul di kiri. Kalimatnya hampir dua kali lebih panjang, jadi
spasi hurufnya dirapatkan dan kotaknya (di build_v2.py) dilebarkan --
nowrap supaya ia patah keluar layar kalau suatu saat kepanjangan, bukan
melipat diam-diam jadi dua baris di tengah gambar. */
/* Sama persis dengan judul tegak di kiri (atas permintaan): ukuran, bobot, dan
spasi hurufnya satu paket, supaya kedua sisi terbaca sebagai sepasang. */
.stempat { font-size: calc(46 * var(--pt)); font-weight: 800; letter-spacing: .12em;
white-space: nowrap; color: var(--plum); }
/* ---------- Slide 8-10: FACILITIES ---------- */
.fslide {
position: absolute; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
transition: left .85s cubic-bezier(.2,.7,.2,1), top .85s cubic-bezier(.2,.7,.2,1),
width .85s cubic-bezier(.2,.7,.2,1), height .85s cubic-bezier(.2,.7,.2,1),
opacity .5s ease;
}
.fslide img, .fslide video { width: 100%; height: 100%; object-fit: cover; }
.fslide[data-p="-1"] { --x: 25.40; --y: -20.97; --w: 38.16; --h: 45.22; opacity: 1; }
.fslide[data-p="0"] { --x: 30.96; --y: 20.73; --w: 50.01; --h: 59.27; opacity: 1; z-index: 2; }
.fslide[data-p="1"] { --x: 25.40; --y: 77.42; --w: 38.16; --h: 45.22; opacity: 1; }
.fslide[data-p="x"] { --x: 25.40; --y: 28.31; --w: 38.16; --h: 45.22; opacity: 0; pointer-events: none; }
/* Label tegak di sisi kartu yang BELUM aktif. Begitu kartunya ke tengah,
label ini hilang dan yang "berdiri lalu rebah" adalah judul deskripsinya
(.fjudul di bawah) -- bukan salinan teks di bawah gambar. */
.flabel {
position: absolute; left: -1.1cqw; bottom: 0; margin: 0; white-space: nowrap;
transform-origin: left bottom; rotate: -90deg;
font-size: calc(43 * var(--pt)); color: var(--plum); font-family: var(--font-judul);
transition: opacity .4s ease;
/* Tidak lebih panjang dari kartunya: nama acara yang panjang ("ROAD TO
POCARI SWEAT RUN BDG 2026") kalau dibiarkan menjulur jauh melewati kartu
dan menimpa kolom keterangan di sebelahnya. --h milik kartu diwarisi. */
max-width: calc(var(--h) * 1cqh); overflow: hidden; text-overflow: ellipsis;
}
.fslide[data-p="0"] .flabel { opacity: 0; }
/* pointer-events:none supaya lapisan teks ini tidak menghalangi klik pada
kartu di belakangnya; anak yang memang tombol dikembalikan ke auto. */
/* display:none membuat teksnya kedip mati-hidup dan animasinya terpotong.
Dipakai opacity+visibility seperti .slide, jadi yang keluar sempat memudar
sementara yang masuk terbang naik. */
.fteks {
position: absolute; inset: 0; z-index: 3; pointer-events: none;
opacity: 0; visibility: hidden;
transition: opacity .55s ease, visibility 0s linear .55s;
}
.fteks[hidden] { display: block; }
.fteks:not([hidden]) {
opacity: 1; visibility: visible;
transition: opacity .55s ease, visibility 0s;
}
/* Titik jangkarnya tetap 7.75/33.99 seperti di slide, tapi tingginya
mengalir: nama panjang menambah baris ke bawah, bukan menimpa isinya. */
.fteks-in { height: auto; }
.fjudul { font-size: calc(70 * var(--pt)); line-height: .95; color: var(--plum); }
/* Judul berupa ikon/logo: setinggi kira-kira satu baris judul, dibuat hitam
apa pun warna aslinya supaya seragam dengan teks di sebelahnya. */
.fjudul img { display: block; height: calc(80 * var(--pt)); width: auto; max-width: 100%;
object-fit: contain; object-position: left; filter: brightness(0); }
/* Kapital dimatikan di Site design: label yang di-uppercase CSS ikut. */
html[data-kapital="0"] .menu-sub, html[data-kapital="0"] .mbagian { text-transform: none; }
/* Judul fasilitas "terbang" ke tempatnya, sama seperti logo Janévalla yang
berpindah antar section: satu elemen yang digeser dengan transform, bukan
dua elemen yang saling menggantikan. Transisi, bukan @keyframes -- keyframes
selalu mulai dari nol dan itu yang membuat gerakannya terasa terpotong saat
fasilitas diganti sebelum animasinya selesai. */
.js-v2 .fjudul {
transform: translate(-6%, 34%);
transition: transform .8s cubic-bezier(.3,.8,.25,1), opacity .55s ease;
will-change: transform;
}
.js-v2 .fteks:not([hidden]) .fjudul { transform: none; }
.fisi { font-size: calc(15 * var(--pt)); line-height: 1.6; color: var(--plum); margin-top: 1.6cqh; }
.fisi p + p { margin-top: .7em; }
.fteks button, .fteks a { pointer-events: auto; }
.fnav {
position: absolute; left: 83%; top: 50%; translate: 0 -50%; z-index: 5;
display: flex; flex-direction: column; gap: .9cqw;
}
.fnav button {
width: 3.4cqw; height: 3.4cqw; min-width: 34px; min-height: 34px; border-radius: 999px;
border: .12cqw solid rgba(var(--panah-rgb),.4); background: transparent; color: var(--panah);
font-size: 1.6cqw; cursor: pointer; line-height: 1;
}
.fnav button:hover:not(:disabled) { background: rgba(var(--panah-rgb),.12); }
.fnav button:disabled { opacity: .3; cursor: default; }
/* Label bagian: OUR ROOM & FACILITIES sengaja setebal dan sebesar judul
sekunder, bukan keterangan kecil seperti di deck. */
/* Ajakan di bawah carousel, dikotakkan seperti tombol Book Now. Bukan tombol
sungguhan -- yang diklik gambarnya, ini cuma penunjuk. */
/* Sekarang tepat di ATAS gambar (bukan di bawah carousel): kotaknya lebih
kecil supaya muat di sela judul dan gambar. */
.klik-hint { display: flex; justify-content: center; align-items: flex-start; z-index: 4; }
.klik-hint span {
background: var(--tombol-latar); color: var(--tombol-teks, #fff); font-weight: 700; letter-spacing: .04em;
font-size: calc(11 * var(--pt)); padding: .45em 1.3em; white-space: nowrap;
}
.label-kanan { font-size: calc(46 * var(--pt)); font-weight: 800; letter-spacing: .02em;
justify-content: flex-end; text-align: right; }
#fac-h { font-size: calc(58 * var(--pt)); font-weight: 800; letter-spacing: .04em; }
/* Footer hak cipta mendarat di section mana pun yang terakhir, dan ia sudah
membawa wordmark -- yang di pojok panggung disembunyikan supaya tidak dobel. */
/* ---------- Sisi kanan bar: Book Now + switch bahasa ----------
"Book Now" dikeluarkan dari daftar nav supaya tidak ikut disorot sebagai
section dan selalu berdampingan dengan pilihan bahasa. */
.topbar-aksi {
margin-left: auto; display: flex; align-items: center;
gap: clamp(10px, 1.6vw, 22px); flex: 0 0 auto;
}
.topbar-pesan {
background: var(--tombol-latar); color: var(--tombol-teks, #fff) !important; padding: 9px 18px;
letter-spacing: .04em; white-space: nowrap;
}
.topbar-pesan span::after, .topbar-pesan span::before { display: none; }
.topbar-pesan:hover { background: var(--tinta); }
.topbar-langs { display: flex; align-items: center; gap: 8px; }
.topbar-lang {
font-weight: 700; letter-spacing: .06em; opacity: .45;
font-size: clamp(13px, 1.05vw, 16px) !important;
}
.topbar-lang + .topbar-lang::before {
content: ""; display: inline-block; width: 1px; height: .95em; margin-right: 8px;
background: currentColor; opacity: .4; vertical-align: -.1em;
}
.topbar-lang:hover { opacity: 1; color: var(--plum); }
.topbar-lang.kini { opacity: 1; color: var(--plum); }
/* ---------- WhatsApp mengambang ---------- */
/* Satu sumber jarak bawah untuk KEDUA tombol mengambang: megafon menumpuk di
atas WhatsApp dengan menambahkan tinggi WA ke angka yang sama, jadi menaikkan
satu tanpa satunya akan membuat mereka saling menabrak. */
:root { --apung-bawah: calc(clamp(14px, 2vw, 28px) + 22px); }
/* Ikon saja, bulat seperti megafon; labelnya di tooltip dan aria-label. */
.wa {
position: fixed; right: clamp(14px, 2vw, 28px); bottom: var(--apung-bawah); z-index: 45;
width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center;
background: #25d366; color: #fff;
box-shadow: 0 10px 26px rgba(0,0,0,.28);
transition: transform .22s ease, box-shadow .22s ease;
}
.wa:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.34); }
@media (max-width: 759px), (max-height: 429px) { .wa { right: 16px; } }
/* ---------- Megafon + pop-up pengumuman ----------
Megafon duduk tepat di atas tombol WhatsApp; jaraknya dihitung dari tinggi
.wa + sela, bukan angka tetap, supaya tidak meleset saat label WA
disembunyikan di layar sempit. */
.megafon {
position: fixed; right: clamp(14px, 2vw, 28px);
bottom: calc(var(--apung-bawah) + 52px + 12px); /* bertumpuk di atas WhatsApp */
z-index: 45; width: 52px; height: 52px; border: 0; border-radius: 999px; cursor: pointer;
display: grid; place-items: center; background: var(--tombol-latar); color: var(--tombol-teks, #fff);
box-shadow: 0 10px 26px rgba(0,0,0,.3);
transition: transform .22s ease, box-shadow .22s ease;
}
.megafon:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.38); }
/* Keterangan saat kursor menyentuh, di sebelah KIRI tombol -- keduanya
menempel di tepi kanan layar, jadi ke arah mana pun yang lain akan keluar
halaman. Murni CSS: teksnya diambil dari data-tip yang ditulis build. */
.wa[data-tip]::after, .megafon[data-tip]::after {
content: attr(data-tip);
position: absolute; right: calc(100% + 12px); top: 50%;
translate: 8px -50%; opacity: 0; pointer-events: none;
background: var(--tombol-latar); color: var(--tombol-teks, #fff); white-space: nowrap;
font-size: 13px; font-weight: 600; letter-spacing: .01em; line-height: 1;
padding: 10px 14px; border-radius: 999px;
box-shadow: 0 8px 22px rgba(0,0,0,.28);
transition: opacity .18s ease, translate .18s ease;
}
.wa:hover::after, .wa:focus-visible::after,
.megafon:hover::after, .megafon:focus-visible::after { opacity: 1; translate: 0 -50%; }
/* Layar sentuh tidak punya hover, dan keterangannya cukup panjang untuk
menyeberangi layar sempit. */
@media (max-width: 759px), (hover: none) {
.wa[data-tip]::after, .megafon[data-tip]::after { content: none; }
}
/* Pop-up potret: rasio 9:16 mengikuti sumber videonya, dibatasi tinggi layar
supaya tidak pernah terpotong di ponsel pendek. */
/* Dibuka dengan showModal(), tapi muncul dengan lembut seperti pop-up menu:
app.js menambah .tampil di frame berikutnya dan melepasnya sebelum close(). */
.promo { border: 0; padding: 0; background: none; max-width: none; max-height: none;
opacity: 0; transition: opacity .3s ease; }
.promo.tampil { opacity: 1; }
.promo::backdrop { opacity: 0; transition: opacity .3s ease; }
.promo.tampil::backdrop { opacity: 1; }
.promo::backdrop { background: rgba(23,22,26,.72); backdrop-filter: blur(6px); }
.promo-in {
position: relative; width: min(86vw, calc(86svh * 9 / 16)); aspect-ratio: 9 / 16;
overflow: hidden; background: #000; box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.promo-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-tutup, .promo-suara {
position: absolute; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 999px;
background: rgba(0,0,0,.45); color: #fff; cursor: pointer; display: grid; place-items: center;
backdrop-filter: blur(4px);
}
.promo-tutup { top: 12px; right: 12px; font-size: 24px; line-height: 1; }
.promo-suara { top: 12px; left: 12px; }
.promo-suara[aria-pressed="true"] { background: var(--plum); }
@media (max-width: 759px), (max-height: 429px) {
.megafon { right: 16px; bottom: calc(var(--apung-bawah) + 52px + 10px);
width: 48px; height: 48px; }
}
/* ---------- Petunjuk ketuk di halaman pertama ---------- */
.petunjuk-tap {
position: absolute; left: 0; right: 0; bottom: clamp(26px, 6vh, 64px); z-index: 9;
text-align: center; color: #fff; font-size: 13px; letter-spacing: .16em;
text-transform: uppercase; opacity: .82; pointer-events: none;
text-shadow: 0 2px 10px rgba(0,0,0,.55);
animation: kedip 2.4s ease-in-out infinite;
}
@keyframes kedip { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
/* ---------- Kilau tombol ajakan ----------
Book Now, WhatsApp, dan megafon: seberkas cahaya menyapu dari kiri ke
kanan tiap 3,2 detik, seperti tombol Book Now di situs sementara. Dibuat
dari background-image yang digeser, bukan pseudo-elemen: ::after kedua
tombol mengambang sudah dipakai keterangan hover, dan overflow:hidden
akan memotong keterangan itu. Mati di prefers-reduced-motion. */
@keyframes kilau { 0%, 42% { background-position: 100% 0; } 72%, 100% { background-position: 0% 0; } }
.topbar-pesan, .wa, .megafon {
background-image: linear-gradient(100deg, transparent 42%, var(--kilau) 50%, transparent 58%);
background-size: 250% 100%; background-repeat: no-repeat; background-position: 100% 0;
animation: kilau 3.2s ease-in-out infinite;
}
.topbar-pesan { --kilau: rgba(var(--beton-rgb),.55); }
/* Sapuan memakan 30% siklus (0,96 s); jeda 1/3 siklus = tidak pernah dua tombol
berkilau bersamaan, jadi tetap satu titik fokus. */
.wa { --kilau: rgba(255,255,255,.55); animation-delay: 1.07s; }
.megafon { --kilau: rgba(var(--beton-rgb),.6); animation-delay: 2.13s; }
#top { cursor: pointer; }
/* ---------- FAQ ---------- */
.faq-judul { font-size: calc(70 * var(--pt)); }
.faq-list {
position: absolute; left: 12%; right: 12%; top: 20%; bottom: 6%;
overflow-y: auto; overscroll-behavior: contain; padding-right: 6px;
}
.faq {
border-bottom: 1px solid rgba(var(--plum-rgb),.22);
font-size: calc(17 * var(--pt));
}
.faq summary {
cursor: pointer; list-style: none; padding: calc(14 * var(--pt)) 2.2cqw calc(14 * var(--pt)) 0;
font-weight: 700; color: var(--plum); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; font-weight: 400; }
.faq[open] summary::after { content: "\2013"; }
.faq-a { padding: 0 2.2cqw calc(14 * var(--pt)) 0; line-height: 1.65; color: var(--tinta); }
/* ---------- Overlay booking (widget FastBooking) ----------
Overlay biasa, bukan