{"id":352,"date":"2025-10-14T07:55:31","date_gmt":"2025-10-14T07:55:31","guid":{"rendered":"https:\/\/transhoteljakarta.com\/?page_id=352"},"modified":"2026-05-18T06:37:35","modified_gmt":"2026-05-18T06:37:35","slug":"home","status":"publish","type":"page","link":"https:\/\/transhoteljakarta.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n \n \n Trans Hotel Jakarta \u2014 Elegant Feels. Effortless Stay.<\/title>\n\n <!-- Fonts -->\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700&family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap\"\n rel=\"stylesheet\" \/>\n\n <!-- Font Awesome -->\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\" \/>\n\n <style>\n :root {\n --ink: #1b1d1f;\n --paper: #fff;\n --muted: #6f747b;\n --line: #e8e8e8;\n --accent: #b8a47a;\n --btn: #111;\n --btn-ink: #fff;\n --nav-h: 76px;\n --nav-alpha: 0.18;\n --shadow-1: 0 10px 24px rgba(0, 0, 0, 0.08);\n --shadow-2: 0 26px 70px rgba(0, 0, 0, 0.16);\n --font-sans: \"Montserrat\", system-ui, sans-serif;\n --font-serif: \"Spectral\", serif;\n --ivory: #faf8f5;\n --dawn: #f4f6f8;\n --bottom-gutter: 96px;\n --nav-logo-h: calc(var(--nav-h) - 18px);\n --ink: #1b1d1f;\n --muted: #6f747b;\n --line: #e8e8e8;\n --accent: #b8a47a;\n --teaser: 7.5vw;\n \/* lebar teaser kiri-kanan *\/\n --gutter: 28px;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n html,\n body {\n margin: 0 !important;\n padding: 0 !important;\n overflow-x: hidden !important;\n height: 100%;\n -webkit-text-size-adjust: 100%;\n text-size-adjust: 100%;\n }\n\n body {\n font-family: var(--font-sans);\n color: var(--ink);\n background: #fff;\n scroll-behavior: smooth;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button {\n font-family: var(--font-sans);\n cursor: pointer;\n }\n\n #about,\n #art-of-stay,\n #meetings,\n #dining,\n #leisure,\n #gallery,\n #offers,\n #nearby,\n #location {\n scroll-margin-top: calc(var(--nav-h) + 12px);\n }\n\n a:focus-visible,\n button:focus-visible {\n outline: 2px solid #0003;\n outline-offset: 2px;\n }\n\n @media (prefers-reduced-motion: reduce) {\n * {\n animation-duration: 0.001ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.001ms !important;\n }\n }\n\n \/* Top progress *\/\n #progress {\n position: fixed;\n left: 0;\n top: 0;\n height: 3px;\n background: #111;\n width: 0;\n z-index: 300;\n }\n\n \/* ===== NAVBAR ===== *\/\n .header {\n position: fixed;\n inset: 0 0 auto 0;\n height: var(--nav-h);\n padding: 0 clamp(16px, 4vw, 56px);\n color: #fff;\n transition: 0.25s;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n gap: 28px;\n background: rgba(255, 255, 255, var(--nav-alpha));\n -webkit-backdrop-filter: blur(calc(var(--nav-alpha) * 16px));\n backdrop-filter: blur(calc(var(--nav-alpha) * 16px));\n z-index: 1200;\n border-bottom: 1px solid transparent;\n }\n\n .header a,\n .header .menu>li>a {\n color: inherit;\n }\n\n .header.scrolled {\n background: #fff;\n color: var(--ink);\n box-shadow: var(--shadow-1);\n border-color: var(--line);\n }\n\n .logo img {\n height: var(--nav-logo-h);\n object-fit: contain;\n }\n\n .menu {\n list-style: none;\n display: flex;\n gap: clamp(8px, 1vw, 14px);\n }\n\n .menu>li>a {\n text-transform: uppercase;\n letter-spacing: 0.12em;\n font-size: 12px;\n font-weight: 600;\n display: flex;\n align-items: center;\n height: var(--nav-h);\n padding: 0 4px;\n opacity: 0.95;\n background-image: linear-gradient(currentColor, currentColor);\n background-size: 0% 1px;\n background-repeat: no-repeat;\n background-position: 0 100%;\n transition: background-size 0.26s ease, opacity 0.2s;\n }\n\n .menu>li>a:hover {\n background-size: 100% 1px;\n opacity: 1;\n }\n\n .nav-right {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .corp-logo {\n height: var(--nav-logo-h);\n object-fit: contain;\n }\n\n .corp-logo-wrap {\n position: relative;\n display: inline-block;\n height: var(--nav-logo-h);\n width: 100px;\n }\n\n .corp-logo-wrap img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: contain;\n transition: opacity 0.35s ease;\n }\n\n .corp-logo.white {\n opacity: 1;\n }\n\n .corp-logo.color {\n opacity: 0;\n }\n\n .corp-logo-wrap.scrolled .white {\n opacity: 0;\n }\n\n .corp-logo-wrap.scrolled .color {\n opacity: 1;\n }\n\n \/* --- CORPORATE (THG) --- *\/\n .corp-link {\n display: inline-block;\n height: var(--nav-logo-h);\n }\n\n \/* scroll swap (diseragamkan ke state header.scrolled) *\/\n .header.scrolled .corp-logo.white {\n opacity: 0;\n }\n\n .header.scrolled .corp-logo.color {\n opacity: 1;\n }\n\n \/* HOVER swap (baru) *\/\n .corp-link:hover .corp-logo.white {\n opacity: 0;\n }\n\n .corp-link:hover .corp-logo.color {\n opacity: 1;\n }\n\n \/* === RESPONSIVE NAV LAYOUT (mobile & tablet) === *\/\n @media (max-width: 1024px) {\n\n .burger {\n order: 2;\n }\n\n \/* --- Struktur grid --- *\/\n .header {\n padding: 0 16px;\n grid-template-columns: auto auto 1fr auto;\n \/* tambah satu kolom untuk corp logo *\/\n align-items: center;\n column-gap: 8px;\n \/* rapat tapi masih ada sedikit spasi *\/\n }\n\n \/* --- Pindahkan posisi corp logo ke kanan logo utama --- *\/\n .corp-link {\n order: initial;\n \/* abaikan urutan flex dari nav-right *\/\n grid-column: 2;\n \/* letakkan di kolom kedua, setelah logo utama *\/\n justify-self: start;\n }\n\n \/* --- Logo utama tetap di kolom pertama --- *\/\n .logo {\n grid-column: 1;\n }\n\n \/* --- Nav center tetap di tengah, burger tetap kanan --- *\/\n .nav-center {\n grid-column: 3;\n }\n\n .nav-right {\n grid-column: 4;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n \/* --- Sembunyikan CTA (Book Now) tapi biarkan burger tampil --- *\/\n .nav-cta {\n display: none !important;\n }\n\n \/* --- Atur ukuran logo corp biar proporsional --- *\/\n .corp-logo-wrap {\n width: 70px;\n }\n }\n\n \/* Tampilkan kembali language switcher di menu mobile *\/\n @media (max-width: 1024px) {\n .mnav-panel .lang-wrap {\n display: block !important;\n }\n\n \/* Sembunyikan menu tengah (THE HOTEL dan lainnya) *\/\n .nav-center {\n display: none !important;\n }\n\n \/* Pastikan wrapper tombol bahasa tetap relatif *\/\n .lang-wrap {\n position: relative;\n }\n\n \/* Posisi dropdown persis di bawah tombol *\/\n .lang-menu {\n position: absolute;\n top: 100%;\n \/* tepat di bawah lang-btn *\/\n left: 0;\n width: max-content;\n min-width: 100%;\n background: inherit;\n opacity: 0;\n visibility: hidden;\n transform: translateY(-8px);\n transition: all 0.25s ease;\n z-index: 999;\n }\n\n \/* Saat tombol aktif (lang-menu dibuka) *\/\n .lang-wrap.open .lang-menu {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n }\n\n }\n\n\n .lang-wrap {\n position: relative;\n }\n\n .lang-btn {\n height: 40px;\n padding: 0 14px;\n background: transparent;\n color: inherit;\n border-radius: 0 !important;\n }\n\n .lang-menu {\n position: absolute;\n top: calc(100% + 6px);\n right: 0;\n background: #fff;\n border: 1px solid var(--line);\n box-shadow: var(--shadow-1);\n display: none;\n flex-direction: column;\n min-width: 180px;\n z-index: 10000;\n overflow: hidden;\n border-radius: 0 !important;\n pointer-events: none;\n }\n\n .lang-wrap.open .lang-menu {\n display: flex;\n pointer-events: auto;\n }\n\n .lang-menu a {\n padding: 10px 14px;\n color: var(--ink);\n display: block;\n }\n\n .lang-menu a:hover {\n background: #f6f6f6;\n }\n\n\n .burger {\n display: none;\n background: transparent;\n border: 1px solid #ffffff55;\n height: 40px;\n width: 40px;\n border-radius: 10px;\n color: inherit;\n }\n\n .header.scrolled .burger {\n border-color: var(--line);\n color: var(--ink);\n }\n\n @keyframes ctaShimmer {\n 0% {\n background-position: -160% 0;\n }\n\n 70%,\n 100% {\n background-position: 280% 0;\n }\n }\n\n .nav-cta {\n position: relative;\n overflow: hidden;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0 26px;\n height: 42px;\n border-radius: 999px;\n background: #111;\n color: #fff;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.22em;\n text-transform: uppercase;\n border: 1px solid rgba(255, 255, 255, 0.16);\n box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.07);\n transition: box-shadow 0.38s ease, border-color 0.38s ease,\n opacity 0.4s ease, transform 0.4s ease;\n min-width: 160px;\n margin: 0 0 0 16px;\n cursor: pointer;\n \/* Tersembunyi di hero \u2014 muncul saat header jadi putih *\/\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n transform: translateY(-4px);\n text-decoration: none;\n }\n\n \/* Shimmer sweep *\/\n .nav-cta::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(110deg,\n transparent 32%,\n rgba(184, 164, 122, 0.28) 50%,\n transparent 68%);\n background-size: 260% 100%;\n animation: ctaShimmer 4.2s ease-in-out infinite;\n border-radius: inherit;\n pointer-events: none;\n }\n\n \/* Hover fill \u2014 slide up from bottom *\/\n .nav-cta::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, #c9aa7c 0%, #8d6b3c 100%);\n border-radius: inherit;\n transform: translateY(106%);\n transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);\n pointer-events: none;\n z-index: 0;\n }\n\n .nav-cta>* {\n position: relative;\n z-index: 1;\n }\n\n .header.scrolled .nav-cta {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n color: #fff;\n }\n\n .nav-cta:hover::after {\n transform: translateY(0);\n }\n\n .nav-cta:hover::before {\n animation: none;\n opacity: 0;\n }\n\n .nav-cta:hover {\n border-color: rgba(184, 164, 122, 0.48);\n box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);\n }\n\n @media (max-width: 1024px) {\n .nav-center {\n display: none;\n }\n\n .burger {\n display: inline-grid;\n place-items: center;\n }\n }\n\n \/* ===== Mobile Drawer ===== *\/\n .mnav {\n position: fixed;\n inset: 0;\n display: none;\n z-index: 2147483646;\n transition: opacity 0.3s ease;\n pointer-events: none;\n }\n\n .mnav.open {\n display: block;\n opacity: 1;\n pointer-events: auto;\n }\n\n .mnav-backdrop {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.45);\n z-index: 0;\n }\n\n .mnav-panel {\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: min(88vw, 360px);\n background: #fff;\n box-shadow: -12px 0 40px rgba(0, 0, 0, 0.22);\n display: flex;\n flex-direction: column;\n padding: 16px;\n transform: translateX(100%);\n transition: transform 0.3s ease;\n z-index: 1;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior: contain;\n }\n\n .mnav-close {\n align-self: flex-end;\n background: none;\n border: 1px solid #eee;\n height: 36px;\n width: 36px;\n }\n\n .mnav ul {\n list-style: none;\n margin-top: 8px;\n }\n\n .mnav a {\n display: block;\n padding: 12px;\n color: #000;\n font-weight: 700;\n position: relative;\n z-index: 1;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n }\n\n .mnav a:hover {\n background: #f7f7f7;\n }\n\n \/* === SMOOTH SIDEBAR ANIMATION === *\/\n\n .mnav.open .mnav-panel {\n transform: translateX(0);\n }\n\n \/* Prevent fixed overlays (cookie\/FAB) from blocking drawer taps on mobile *\/\n body.mnav-open .cookiebar,\n body.mnav-open .fab-booking,\n body.mnav-open .fab-popup,\n body.mnav-open #fabBooking,\n body.mnav-open #fabPopup {\n opacity: 0 !important;\n pointer-events: none !important;\n }\n\n\n \/* ===== HERO ===== *\/\n .hero {\n position: relative;\n height: 100vh;\n min-height: 560px;\n overflow: hidden;\n background: #000;\n }\n\n .hero .poster,\n .hero video,\n .overlay {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .hero .poster,\n .hero video,\n .overlay {\n pointer-events: none;\n }\n\n .hero video {\n opacity: 0;\n transition: opacity 0.6s;\n }\n\n .hero video.show {\n opacity: 1;\n }\n\n .overlay {\n z-index: 1;\n background: linear-gradient(180deg,\n rgba(0, 0, 0, 0.42),\n rgba(0, 0, 0, 0.64));\n }\n\n \/* Logo & area kanan tidak mengganggu layout *\/\n .logo {\n min-width: 0;\n }\n\n .nav-right {\n display: flex;\n align-items: center;\n gap: 10px;\n white-space: nowrap;\n }\n\n \/* Kurangi jarak grid supaya ruang tengah lebih lega *\/\n .header {\n grid-template-columns: auto 1fr auto;\n gap: clamp(12px, 2vw, 28px);\n }\n\n \/* Kalau masih terlalu panjang di layar sempit desktop,\n boleh aktifkan horizontal scroll halus di area menu (optional) *\/\n .nav-center {\n overflow: auto;\n scrollbar-width: none;\n }\n\n .nav-center::-webkit-scrollbar {\n display: none;\n }\n\n @media (max-width: 1280px) {\n .menu {\n gap: clamp(6px, 0.8vw, 10px);\n }\n\n .menu>li>a {\n letter-spacing: 0.1em;\n }\n }\n\n \/* Di <=1024px, kamu sudah hide .nav-center & pakai drawer \u2014 tetap dipertahankan *\/\n\n\n \/* Modal (Date dropdown) *\/\n .modal {\n position: absolute;\n display: none;\n z-index: 1600;\n }\n\n .modal.open {\n display: block;\n animation: slideDown 0.25s ease forwards;\n }\n\n .modal .card {\n position: absolute;\n background: #fff;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\n border: 1px solid var(--line);\n border-radius: 4px;\n margin: 0;\n overflow: hidden;\n }\n\n @keyframes slideOut {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .modal .backdrop {\n display: none;\n }\n\n .cal header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n }\n\n .cal h4 {\n font-size: 15px;\n font-weight: 600;\n }\n\n .navbtn {\n border: none;\n background: none;\n font-size: 18px;\n cursor: pointer;\n }\n\n .grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 4px;\n text-align: center;\n font-size: 14px;\n }\n\n .grid strong {\n font-size: 12px;\n color: #888;\n }\n\n .day {\n padding: 8px;\n cursor: pointer;\n border-radius: 50%;\n transition: 0.2s;\n }\n\n .day:hover {\n background: #f3f3f3;\n }\n\n .day.disabled {\n color: #ccc;\n cursor: default;\n }\n\n .day.checkin,\n .day.checkout {\n background: #111 !important;\n color: #fff !important;\n font-weight: 500;\n border-radius: 50%;\n }\n\n .day.in-range {\n background: #f3f3f3;\n border-radius: 0;\n }\n\n .actions {\n display: flex;\n justify-content: space-between;\n margin-top: 12px;\n }\n\n .actions button {\n border: none;\n background: none;\n font-size: 14px;\n cursor: pointer;\n }\n\n .hover-tip {\n position: fixed;\n \/* semula absolute *\/\n background: #000;\n color: #fff;\n font-size: 12px;\n padding: 3px 8px;\n border-radius: 4px;\n transform: translateX(-50%);\n display: none;\n pointer-events: none;\n z-index: 5000;\n \/* > z-index #dateModal (2600) supaya di atas *\/\n white-space: nowrap;\n }\n\n \/* Sections *\/\n .section {\n padding: 80px clamp(16px, 5vw, 56px);\n }\n\n .section h2 {\n font-style: italic;\n }\n\n .section.alt {\n background: var(--ivory);\n }\n\n .section.gray {\n background: var(--dawn);\n }\n\n .section p.lead {\n color: var(--muted);\n max-width: 780px;\n margin-top: 10px;\n }\n\n .sep {\n height: 1px;\n background: linear-gradient(90deg,\n transparent,\n var(--line),\n transparent);\n margin: 40px 0;\n }\n\n \/* ===== ABOUT \u2014 Editorial Split ===== *\/\n .about-editorial {\n background: linear-gradient(180deg,\n rgba(0, 0, 0, 0.02),\n rgba(0, 0, 0, 0)),\n var(--ivory);\n padding: clamp(56px, 7vw, 96px) 24px;\n }\n\n .about-editorial .about-wrap {\n max-width: 1320px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 0.9fr 0.9fr;\n \/* image sedikit dominan *\/\n gap: clamp(24px, 4vw, 64px);\n align-items: start;\n }\n\n \/* ---- Copy column ---- *\/\n #about .kicker {\n display: inline-block;\n font-size: 12px;\n letter-spacing: 0.22em;\n text-transform: uppercase;\n color: var(--muted);\n margin-bottom: 14px;\n opacity: 0.8;\n }\n\n #about .display {\n font-family: var(--font-serif);\n font-weight: 700;\n font-style: italic;\n font-size: clamp(32px, 5vw, 56px);\n line-height: 1.08;\n letter-spacing: -0.02em;\n margin: 0 0 18px;\n }\n\n #about .divider {\n height: 1px;\n width: clamp(120px, 24vw, 240px);\n background: linear-gradient(90deg, currentColor, transparent 80%);\n opacity: 0.35;\n margin: 8px 0 22px;\n }\n\n #about .lead {\n font-size: clamp(15px, 1.8vw, 18px);\n line-height: 1.9;\n color: var(--muted);\n margin-bottom: 16px;\n }\n\n #about .about-copy p {\n font-size: clamp(14px, 1.6vw, 16px);\n line-height: 1.9;\n color: var(--ink);\n margin: 0 0 8px;\n }\n\n \/* ---- Media column ---- *\/\n #about .about-media {\n position: relative;\n margin: 0;\n \/* NO border-radius *\/\n }\n\n #about .about-media img {\n display: block;\n width: 100%;\n height: min(72vh, 760px);\n object-fit: cover;\n border: none;\n border-radius: 0;\n \/* bayangan sedikit dikurangi biar terasa \u201cmenempel\u201d *\/\n box-shadow: 0 16px 60px rgba(0, 0, 0, 0.1);\n transform: translateZ(0);\n will-change: transform, filter, opacity;\n transition: transform 900ms cubic-bezier(0.19, 1, 0.22, 1),\n filter 900ms ease, opacity 900ms ease, -webkit-mask-image 600ms ease,\n mask-image 600ms ease;\n\n \/* Fade pinggir ke background (mask) *\/\n -webkit-mask-image: radial-gradient(120% 120% at 50% 50%,\n #000 62%,\n rgba(0, 0, 0, 0) 96%);\n mask-image: radial-gradient(120% 120% at 50% 50%,\n #000 62%,\n rgba(0, 0, 0, 0) 96%);\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n }\n\n #about .about-media:hover img {\n transform: scale(1.022);\n filter: contrast(1.06) saturate(1.02);\n -webkit-mask-image: radial-gradient(120% 120% at 50% 50%,\n #000 72%,\n rgba(0, 0, 0, 0) 98%);\n mask-image: radial-gradient(120% 120% at 50% 50%,\n #000 72%,\n rgba(0, 0, 0, 0) 98%);\n }\n\n \/* Efek saat user meninggalkan section *\/\n #about.section-leaving .about-media img {\n transform: scale(0.985) translateY(10px);\n filter: blur(4px) saturate(0.92) contrast(0.98);\n opacity: 0.9;\n }\n\n \/* Fallback kalau mask tidak didukung *\/\n #about .about-media {\n --about-bg: var(--ivory);\n }\n\n #about .about-media::after {\n content: \"\";\n position: absolute;\n inset: 0;\n pointer-events: none;\n background: radial-gradient(120% 120% at 50% 50%,\n transparent 62%,\n var(--about-bg) 96%);\n }\n\n \/* Optional haluskan garis grid pada section saat aktif *\/\n .about-editorial::before {\n opacity: 0.28;\n }\n\n \/* Reduced motion *\/\n @media (prefers-reduced-motion: reduce) {\n\n .reveal,\n .reveal.in,\n .reveal.out,\n #about .about-media img {\n transition: none !important;\n transform: none !important;\n filter: none !important;\n }\n\n #about .about-media::after {\n background: none !important;\n }\n }\n\n \/* caption minimalis *\/\n #about .about-media figcaption {\n position: absolute;\n left: 0;\n bottom: -28px;\n font-size: 12px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--muted);\n opacity: 0.7;\n }\n\n \/* ---- Subtle grid lines on section (tanpa border) ---- *\/\n .about-editorial::before,\n .about-editorial::after {\n content: \"\";\n position: absolute;\n inset: 0;\n pointer-events: none;\n }\n\n .about-editorial {\n position: relative;\n }\n\n .about-editorial::before {\n background: repeating-linear-gradient(to right,\n rgba(0, 0, 0, 0.04),\n rgba(0, 0, 0, 0.04) 1px,\n transparent 1px,\n transparent 96px);\n mask-image: linear-gradient(180deg,\n transparent,\n black 20%,\n black 80%,\n transparent);\n opacity: 0.35;\n }\n\n \/* STATE dasar *\/\n .reveal {\n opacity: 0;\n transform: translateY(26px) scale(0.985);\n filter: blur(6px);\n transition: opacity 700ms cubic-bezier(0.22, 0.9, 0.25, 1),\n transform 700ms cubic-bezier(0.22, 0.9, 0.25, 1), filter 700ms ease;\n will-change: opacity, transform, filter;\n }\n\n \/* MASUK (enter) *\/\n .reveal.in {\n opacity: 1;\n transform: translateY(0) scale(1);\n filter: blur(0);\n }\n\n \/* KELUAR (leave \/ out-of-view) *\/\n .reveal.out {\n opacity: 0;\n transform: translateY(22px) scale(0.985);\n filter: blur(6px);\n }\n\n \/* Urutan: gambar dulu, lalu teks (enter) *\/\n .about-media.reveal.in {\n transition-delay: 0ms;\n }\n\n .about-copy.reveal.in {\n transition-delay: 160ms;\n }\n\n \/* Saat keluar section: teks hilang dulu, gambar menyusul *\/\n .about-copy.reveal.out {\n transition-delay: 0ms;\n }\n\n .about-media.reveal.out {\n transition-delay: 120ms;\n }\n\n \/* ---- Responsive ---- *\/\n @media (max-width: 1040px) {\n .about-editorial .about-wrap {\n grid-template-columns: 1fr;\n max-width: 860px;\n }\n\n #about .about-media img {\n height: min(52vh, 560px);\n }\n\n #about .about-media figcaption {\n position: static;\n margin-top: 10px;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n\n .reveal,\n .reveal.visible,\n #about .about-media img {\n transition: none !important;\n transform: none !important;\n filter: none !important;\n clip-path: none !important;\n }\n }\n\n \/* ===== THE ART OF STAY \u2014 LOOK & LAYOUT ===== *\/\n .art-section {\n background: linear-gradient(180deg, #0e0e0e 0%, #1a1a1a 100%);\n color: #f0e6d2;\n text-align: center;\n padding: 90px 0;\n transition: opacity 0.8s ease, transform 0.8s ease;\n }\n\n .art-section.active {\n opacity: 1;\n transform: scale(1);\n }\n\n .art-header {\n margin-bottom: 60px;\n }\n\n .art-title {\n font-family: \"Spectral\", serif;\n font-style: italic;\n font-weight: 700;\n letter-spacing: -.02em;\n font-size: clamp(32px, 5vw, 56px);\n line-height: 1.06;\n text-align: center;\n margin: 0 0 6px;\n }\n\n .art-title::after {\n content: \"\";\n display: block;\n height: 2px;\n width: 80px;\n background: #d6c38a;\n margin: 12px auto 0;\n }\n\n .art-subtitle {\n font-size: 16px;\n color: #ccc;\n font-weight: 300;\n }\n\n .art-slider {\n position: relative;\n max-width: 1200px;\n margin: 0 auto;\n overflow: hidden;\n }\n\n .art-viewport {\n overflow: hidden;\n cursor: grab;\n user-select: none;\n -webkit-user-select: none;\n touch-action: pan-y;\n overscroll-behavior-x: contain;\n }\n\n .art-viewport.dragging {\n cursor: grabbing;\n }\n\n .art-track {\n display: flex;\n gap: 24px;\n will-change: transform;\n transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);\n }\n\n .art-item {\n flex: 0 0 calc(33.33% - 16px);\n cursor: pointer;\n }\n\n .art-media img {\n width: 100%;\n height: 420px;\n object-fit: cover;\n filter: brightness(0.9);\n transition: filter 0.8s ease, transform 1s ease;\n pointer-events: none;\n -webkit-user-drag: none;\n }\n\n .art-item:hover .art-media img {\n filter: brightness(1.1);\n transform: scale(1.03);\n }\n\n .art-info {\n padding: 18px 10px;\n }\n\n .art-info h3 {\n font-size: 18px;\n font-family: var(--font-serif);\n text-transform: uppercase;\n margin-bottom: 6px;\n }\n\n .art-info p {\n color: #bbb;\n font-size: 14px;\n }\n\n \/* ===== Navigation (desktop\/default) ===== *\/\n .art-slider {\n position: relative;\n }\n\n \/* konteks posisi *\/\n .art-viewport {\n position: relative;\n z-index: 1;\n }\n\n \/* gambar di bawah tombol *\/\n\n .art-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 56px;\n height: 56px;\n display: grid;\n place-items: center;\n border-radius: 12px;\n background: rgba(0, 0, 0, 0.934);\n border: 1px solid rgba(214, 195, 138, .35);\n backdrop-filter: blur(6px);\n box-shadow: 0 10px 24px rgba(0, 0, 0, .25);\n color: #d6c38a;\n cursor: pointer;\n transition: transform .25s, background .25s, opacity .25s;\n z-index: 9;\n opacity: .95;\n }\n\n .art-nav:hover {\n background: rgb(0, 0, 0);\n transform: translateY(-50%) scale(1.05);\n }\n\n .art-prev {\n left: 12px;\n }\n\n .art-next {\n right: 12px;\n }\n\n .art-nav svg {\n width: 26px;\n height: 26px;\n color: currentColor;\n }\n\n \/* =========================================\n THE ART OF STAY \u2014 ARROWS (DROP-IN REPLACE)\n ========================================= *\/\n\n \/* pastikan slider jadi konteks posisi utk tombol *\/\n .art-slider {\n position: relative;\n }\n\n \/* viewport di bawah panah, jaga agar tidak menutupi *\/\n .art-viewport {\n position: relative;\n z-index: 1;\n cursor: grab;\n touch-action: pan-y;\n }\n\n \/* ===== Navigation (Desktop & Default) ===== *\/\n .art-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 56px;\n height: 56px;\n display: grid;\n place-items: center;\n border-radius: 12px;\n background: rgba(0, 0, 0, 0.934);\n border: 1px solid rgba(214, 195, 138, 0.35);\n backdrop-filter: blur(6px);\n box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);\n color: #d6c38a;\n cursor: pointer;\n transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease;\n z-index: 7;\n \/* di atas gambar *\/\n opacity: 0.95;\n }\n\n .art-nav:hover {\n background: rgb(0, 0, 0);\n transform: translateY(-50%) scale(1.05);\n }\n\n .art-prev {\n left: 12px;\n }\n\n .art-next {\n right: 12px;\n }\n\n .art-nav svg {\n width: 26px;\n height: 26px;\n color: currentColor;\n }\n\n \/* ===== MOBILE (\u2264768px): panah di pinggir gambar, posisi lebih atas ===== *\/\n @media (max-width: 768px) {\n .art-slider {\n position: relative !important;\n overflow: visible !important;\n }\n\n .art-nav {\n position: absolute !important;\n top: calc(35%) !important;\n \/* sedikit lebih atas dari tengah *\/\n transform: translateY(-50%) !important;\n width: 52px !important;\n height: 52px !important;\n border-radius: 14px;\n backdrop-filter: blur(10px);\n background: rgba(0, 0, 0, 0.9);\n border: 1px solid rgba(214, 195, 138, 0.45);\n box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);\n opacity: 1;\n z-index: 9999 !important;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n pointer-events: auto !important;\n transition: transform 0.25s ease, background 0.25s ease;\n }\n\n .art-nav svg {\n width: 26px;\n height: 26px;\n color: #d6c38a;\n pointer-events: none;\n }\n\n .art-prev {\n left: max(8px, env(safe-area-inset-left, 0px)) !important;\n }\n\n .art-next {\n right: max(8px, env(safe-area-inset-right, 0px)) !important;\n }\n\n .art-nav:active {\n transform: translateY(-50%) scale(0.94);\n background: rgba(18, 18, 18, 0.8);\n }\n\n .art-nav::after {\n content: \"\";\n position: absolute;\n inset: -10px;\n }\n }\n\n\n \/* ===== Modal ===== *\/\n .suite-modal {\n position: fixed;\n inset: 0;\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 3000;\n padding: clamp(14px, 2.5vw, 28px);\n overflow-y: auto;\n overscroll-behavior: contain;\n }\n\n .suite-modal.open {\n display: flex;\n animation: fadeIn 0.5s ease forwards;\n }\n\n .suite-bg {\n position: absolute;\n inset: 0;\n background-size: cover;\n background-position: center;\n filter: brightness(0.3) blur(5px);\n z-index: 1;\n }\n\n .suite-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n background: rgba(0, 0, 0, 0.5);\n cursor: pointer;\n }\n\n .suite-panel {\n position: relative;\n z-index: 3;\n background: rgba(20, 20, 20, 0.8);\n backdrop-filter: blur(14px);\n color: #f0e6d2;\n border: 1px solid rgba(214, 195, 138, 0.28);\n border-radius: 18px;\n box-shadow: 0 28px 55px rgba(0, 0, 0, 0.42);\n padding: clamp(16px, 3.2vw, 34px);\n width: 90%;\n max-width: 1000px;\n display: flex;\n flex-direction: column;\n gap: 18px;\n max-height: min(88dvh, 920px);\n overflow-y: auto;\n overflow-x: hidden;\n }\n\n #suiteModal .suite-close {\n position: sticky;\n top: 8px;\n align-self: flex-end;\n margin: 0 0 4px auto;\n inline-size: 40px;\n block-size: 40px;\n display: grid;\n place-items: center;\n padding: 0;\n border-radius: 0 !important;\n -webkit-appearance: none;\n appearance: none;\n border: 0;\n background: transparent;\n font-size: 34px;\n line-height: 1;\n color: #f0e6d2;\n cursor: pointer;\n z-index: 6;\n opacity: .88;\n transition: transform .2s ease, opacity .2s ease, color .2s ease;\n }\n\n #suiteModal .suite-close:hover {\n transform: rotate(90deg);\n opacity: 1;\n }\n\n #suiteModal .suite-close:focus-visible {\n outline: 2px solid #d6c38a;\n outline-offset: 2px;\n }\n\n .suite-content h3 {\n font-family: \"Spectral\", serif;\n font-size: 28px;\n margin-bottom: 8px;\n }\n\n .suite-content p {\n font-size: 15px;\n color: #ddd;\n margin-bottom: 20px;\n }\n\n .suite-content {\n overflow-anchor: none;\n }\n\n .suite-details {\n list-style: none;\n padding-left: 0;\n color: #bbb;\n font-size: 14px;\n line-height: 1.6;\n }\n\n .premier-details {\n list-style: none;\n padding-left: 0;\n color: #bbb;\n font-size: 14px;\n line-height: 1.6;\n }\n\n .premiersky-details {\n list-style: none;\n padding-left: 0;\n color: #bbb;\n font-size: 14px;\n line-height: 1.6;\n }\n\n .rooms-details {\n padding-left: 15px;\n }\n\n .suite-gallery {\n display: flex;\n gap: 12px;\n overflow-x: auto;\n scroll-behavior: smooth;\n padding-top: 10px;\n padding-bottom: 4px;\n scrollbar-width: thin;\n }\n\n .suite-gallery img {\n width: 300px;\n height: 200px;\n object-fit: cover;\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.6s ease;\n }\n\n .suite-gallery img.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n \/* Responsif sederhana *\/\n @media (max-width: 900px) {\n .art-item {\n flex: 0 0 calc(50% - 12px);\n }\n\n .art-prev {\n left: -50px;\n }\n\n .art-next {\n right: -50px;\n }\n }\n\n @media (max-width: 640px) {\n .art-item {\n flex: 0 0 100%;\n }\n\n .art-title {\n font-size: 32px;\n }\n\n .art-media img {\n height: 320px;\n }\n\n .suite-modal {\n align-items: center;\n justify-content: center;\n padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px));\n }\n\n .suite-panel {\n width: min(94vw, 520px);\n max-height: calc(100dvh - 16px);\n padding: 14px;\n gap: 12px;\n }\n\n .suite-gallery img {\n width: min(74vw, 280px);\n height: min(46vw, 176px);\n }\n\n .suite-content h3 {\n font-size: 24px;\n }\n\n .suite-content p {\n font-size: 14px;\n margin-bottom: 14px;\n }\n\n .suite-content,\n .suite-details,\n .premier-details,\n .premiersky-details {\n font-size: 13px;\n line-height: 1.55;\n }\n\n #suiteModal .suite-close {\n top: 2px;\n inline-size: 34px;\n block-size: 34px;\n font-size: 28px;\n }\n\n .suite-gallery {\n gap: 10px;\n padding-top: 6px;\n }\n }\n\n \/* Reduced motion *\/\n @media (prefers-reduced-motion: reduce) {\n\n .art-section .fx-up,\n .art-section .fx-left {\n transition: none !important;\n transform: none !important;\n filter: none !important;\n opacity: 1 !important;\n }\n }\n\n \/* === Suite Gallery Progress Bar === *\/\n .suite-progress {\n position: relative;\n width: 100%;\n height: 4px;\n margin-top: 16px;\n background: rgba(255, 255, 255, 0.08);\n border-radius: 3px;\n overflow: hidden;\n backdrop-filter: blur(4px);\n }\n\n .suite-progress-fill {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 0%;\n background: linear-gradient(90deg, #d6c38a 0%, #f9f3c2 100%);\n border-radius: 3px;\n transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n box-shadow: 0 0 8px rgba(214, 195, 138, 0.6);\n }\n\n \/* Subtle animation when appearing *\/\n @keyframes progressReveal {\n from {\n opacity: 0;\n transform: scaleX(0.8);\n }\n\n to {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n\n .suite-progress {\n animation: progressReveal 0.5s ease forwards;\n }\n\n \/* Responsive \u2014 thinner bar on mobile *\/\n @media (max-width: 768px) {\n .suite-progress {\n height: 3px;\n margin-top: 12px;\n }\n }\n\n \/* MEETINGS *\/\n #meetings {\n background: var(--ivory);\n text-align: center;\n position: relative;\n }\n\n #meetings h2 {\n font-family: var(--font-serif);\n font-style: italic;\n font-size: clamp(28px, 3vw, 36px);\n margin-bottom: 8px;\n }\n\n #meetings .lead {\n color: #777;\n font-size: 15px;\n margin: 0 auto 80px;\n max-width: 720px;\n text-align: center;\n \/* \u2b05\ufe0f lead di tengah *\/\n }\n\n .venues-container {\n max-width: 1180px;\n margin: 0 auto;\n }\n\n .section-title {\n font-family: \"Spectral\", serif;\n font-style: italic;\n font-weight: 700;\n letter-spacing: -.02em;\n font-size: clamp(32px, 5vw, 56px);\n line-height: 1.06;\n text-align: center;\n margin: 0 0 6px;\n }\n\n .section-subtitle {\n text-align: center;\n color: var(--muted);\n font-family: var(--font-sans);\n font-size: 15px;\n margin-bottom: 100px;\n }\n\n \/* --- Venues Layout --- *\/\n .venue-row {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 80px;\n position: relative;\n margin-bottom: 120px;\n opacity: 0;\n transform: translateY(40px);\n transition: all 0.8s ease-out;\n }\n\n .venue-row.reverse {\n flex-direction: row-reverse;\n }\n\n .venue-row.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .venue-row:nth-child(odd) {\n animation-delay: 0.2s;\n }\n\n .venue-row:nth-child(even) {\n animation-delay: 0.4s;\n }\n\n @keyframes slideUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .venue-row.left .venue-image {\n order: 1;\n }\n\n .venue-row.left .venue-text {\n order: 2;\n text-align: left;\n }\n\n .venue-row.right .venue-image {\n order: 2;\n }\n\n .venue-row.right .venue-text {\n order: 1;\n text-align: right;\n }\n\n \/* ===== DETAILS hover sync with Destination (M&E + Dining) ===== *\/\n\n \/* 1) Gambar nge-zoom saat baris di-hover (termasuk ketika hover tombol DETAILS) *\/\n .venue-row .venue-image-wrap img {\n transition: transform 700ms cubic-bezier(.19, 1, .22, 1), filter .4s ease;\n will-change: transform, filter;\n }\n\n .venue-row:hover .venue-image-wrap img {\n transform: scale(1.03);\n filter: contrast(1.04) saturate(1.02);\n }\n\n \/* 2) Underline DETAILS: default terlihat, hilang saat hover baris (sinkron dengan gambar) *\/\n .learn-more {\n position: relative;\n background: none;\n border: 0;\n text-decoration: none !important;\n \/* override rule lama *\/\n padding-bottom: 2px;\n font-weight: 800;\n \/* biar sama feel dgn Destination *\/\n letter-spacing: .08em;\n text-transform: uppercase;\n cursor: pointer;\n }\n\n .learn-more::after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 1px;\n background: currentColor;\n transform: scaleX(1);\n transform-origin: left;\n transition: transform .25s ease;\n }\n\n \/* Hilangkan garis saat hover seluruh row atau tombolnya saja *\/\n .venue-row:hover .learn-more::after,\n .learn-more:hover::after {\n transform: scaleX(0);\n }\n\n \/* (opsional) tone saat hover *\/\n .venue-row:hover .learn-more {\n color: var(--accent);\n }\n\n\n .carousel-container {\n width: 100vw;\n \/* Gunakan seluruh lebar layar *\/\n margin: 0;\n padding: 0;\n overflow: hidden;\n }\n\n .carousel-inner {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n }\n\n .carousel-item {\n flex: 0 0 auto;\n width: 33.33%;\n \/* Tiga gambar terlihat bersamaan *\/\n text-align: center;\n }\n\n .carousel-item img {\n width: 100%;\n height: auto;\n object-fit: cover;\n border-radius: 10px;\n }\n\n .carousel-caption {\n text-align: center;\n margin-top: 20px;\n }\n\n #meetings {\n background: var(--ivory);\n text-align: center;\n position: relative;\n }\n\n #meetings h2 {\n font-family: \"Spectral\", serif;\n font-style: italic;\n font-weight: 700;\n letter-spacing: -.02em;\n font-size: clamp(32px, 5vw, 56px);\n line-height: 1.06;\n text-align: center;\n margin: 0 0 6px;\n }\n\n #meetings .lead {\n color: #777;\n font-size: 15px;\n margin: 0 auto 80px;\n max-width: 720px;\n text-align: center;\n \/* \u2b05\ufe0f lead di tengah *\/\n }\n\n .venue-row.left {\n flex-direction: row;\n }\n\n .venue-row.right {\n flex-direction: row-reverse;\n }\n\n \/* Gambar & garis *\/\n .venue-image {\n position: relative;\n width: 50%;\n overflow: hidden;\n }\n\n .venue-image img {\n width: 100%;\n height: auto;\n display: block;\n transform: translateX(50px);\n opacity: 0;\n animation: slideInImage 0.7s ease forwards;\n }\n\n .venue-row.visible .venue-image img {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Saat elemen muncul di layar *\/\n .venue-row.visible .vline {\n transform: scaleY(1);\n }\n\n \/* Teks *\/\n .venue-text {\n width: 40%;\n font-family: var(--font-sans);\n }\n\n .venue-text h3 {\n font-weight: 700;\n font-size: 18px;\n letter-spacing: 0.02em;\n margin-bottom: 10px;\n }\n\n .venue-text p {\n color: #555;\n font-size: 14px;\n margin-bottom: 14px;\n line-height: 1.6;\n }\n\n .learn-more {\n border: none;\n background: none;\n font-weight: 700;\n font-size: 13px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n text-decoration: underline;\n \/* \u2b05\ufe0f sekarang underline *\/\n cursor: pointer;\n transition: color 0.3s ease;\n }\n\n .learn-more:hover {\n color: var(--accent);\n }\n\n \/* Responsif *\/\n @media (max-width: 900px) {\n .venue-row {\n flex-direction: column;\n text-align: center;\n }\n\n .venue-image,\n .venue-text {\n width: 100%;\n }\n\n .vline {\n display: none;\n }\n\n .venue-text {\n text-align: center !important;\n }\n }\n\n \/* Divider *\/\n .section-divider {\n height: 1px;\n background: rgba(0, 0, 0, 0.1);\n margin-top: 100px;\n }\n\n \/* Line beside image *\/\n .with-line::before {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n width: 1px;\n background: rgba(0, 0, 0, 0.25);\n transform: scaleY(0);\n transform-origin: top;\n transition: transform 0.6s ease;\n }\n\n .left-line::before {\n left: -40px;\n }\n\n .right-line::before {\n right: -40px;\n }\n\n .venue-row.visible .with-line::before {\n transform: scaleY(1);\n }\n\n @keyframes slideInImage {\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n \/* Text *\/\n .venue-content {\n flex: 1;\n font-family: \"Montserrat\", sans-serif;\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.6s ease;\n }\n\n .venue-row.visible .venue-content {\n opacity: 1;\n transform: translateY(0);\n }\n\n .venue-content h3 {\n font-family: \"Spectral\", serif;\n font-size: 22px;\n text-transform: uppercase;\n margin-bottom: 12px;\n }\n\n .venue-content p {\n color: #444;\n font-size: 15px;\n line-height: 1.7;\n margin-bottom: 12px;\n }\n\n .learn-btn {\n font-size: 13px;\n font-weight: 700;\n text-transform: uppercase;\n text-decoration: underline;\n background: none;\n color: #000;\n transition: color 0.3s ease;\n }\n\n .learn-btn:hover {\n color: #b8a47a;\n }\n\n \/* ==== MODAL ==== *\/\n .venue-modal {\n position: fixed;\n inset: 0;\n display: none;\n justify-content: center;\n align-items: center;\n z-index: 3000;\n overflow-y: auto;\n }\n\n .venue-modal.open {\n display: flex;\n animation: fadeIn 0.4s ease forwards;\n }\n\n .modal-bg {\n position: absolute;\n inset: 0;\n background-size: cover;\n background-position: center;\n filter: brightness(0.55) blur(2.5px);\n \/* \u2b05\ufe0f blur lebih ringan & tanpa putih *\/\n transform: scale(1.02);\n transition: all 0.4s ease;\n }\n\n .modal-panel {\n position: relative;\n background: rgba(255, 255, 255, 0.92);\n \/* semi transparan *\/\n padding: 60px;\n max-width: 800px;\n width: 90%;\n z-index: 2;\n text-align: left;\n animation: slideUp 0.6s ease forwards;\n }\n\n .modal-panel.closing {\n animation: slideOut 0.4s ease forwards;\n }\n\n .venue-modal.closing {\n animation: fadeOut 0.4s ease forwards;\n }\n\n \/* text *\/\n .modal-panel h3 {\n font-family: \"Spectral\", serif;\n font-size: 22px;\n margin-bottom: 12px;\n }\n\n .modal-panel p,\n .details li {\n font-family: \"Montserrat\", sans-serif;\n font-size: 14px;\n color: #333;\n line-height: 1.7;\n left: 10px;\n }\n\n .details {\n list-style: none;\n margin: 14px 0;\n padding: 0;\n }\n\n .modal-panel img {\n width: 100%;\n height: auto;\n margin-top: 20px;\n }\n\n \/* close button *\/\n .modal-panel .close {\n position: absolute;\n top: 18px;\n right: 22px;\n background: none;\n border: none;\n font-size: 28px;\n cursor: pointer;\n color: #222;\n transition: 0.3s;\n }\n\n .modal-panel .close:hover {\n opacity: 0.6;\n }\n\n \/* Animations *\/\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n @keyframes fadeOut {\n to {\n opacity: 0;\n visibility: hidden;\n }\n }\n\n @keyframes slideUp {\n from {\n transform: translateY(40px);\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n @keyframes slideDown {\n from {\n opacity: 1;\n transform: translateY(0);\n }\n\n to {\n opacity: 0;\n transform: translateY(60px);\n }\n }\n\n \/* === Subtle Blur Background Effect === *\/\n .modal-bg::after {\n content: \"\";\n position: absolute;\n inset: 0;\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n background: rgba(255, 255, 255, 0.05);\n }\n\n .close-btn {\n position: absolute;\n top: 20px;\n right: 20px;\n font-size: 22px;\n background: transparent;\n cursor: pointer;\n transition: transform 0.2s ease;\n }\n\n .close-btn:hover {\n transform: scale(1.15);\n }\n\n \/* --- Modal Animations --- *\/\n @keyframes modalFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n @keyframes modalSlideUp {\n from {\n transform: translateY(60px);\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n @keyframes modalSlideDown {\n from {\n opacity: 1;\n transform: translateY(0);\n }\n\n to {\n opacity: 0;\n transform: translateY(60px);\n }\n }\n\n @keyframes modalFadeOut {\n to {\n opacity: 0;\n visibility: hidden;\n }\n }\n\n \/* === Text Block === *\/\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n @keyframes slideUpModal {\n from {\n transform: translateY(40px);\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n .details li {\n font-size: 14px;\n margin: 6px 0;\n color: #333;\n font-family: \"Montserrat\", sans-serif;\n }\n\n \/* === Responsive === *\/\n @media (max-width: 900px) {\n .venue-row {\n flex-direction: column;\n text-align: center;\n }\n\n .venue-text,\n .venue-image {\n width: 100%;\n }\n\n .vline {\n display: none;\n }\n\n .venue-text {\n text-align: center !important;\n }\n }\n\n \/* ==== Blur hanya ketika modal .open + html.vm-open ==== *\/\n\n \/* Default: TIDAK ada blur sama sekali *\/\n .venue-modal {\n display: none !important;\n }\n\n .venue-modal .modal-bg {\n filter: none !important;\n }\n\n .venue-modal .modal-bg::after {\n background: transparent !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n content: \"\";\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, .30);\n \/* lapisan gelap tipis di atas foto *\/\n }\n\n \/* Aktifkan blur hanya saat modal benar-benar open DAN saklar html aktif *\/\n html.vm-open .venue-modal.open {\n display: flex !important;\n }\n\n html.vm-open .venue-modal.open .modal-bg {\n filter: brightness(.55) blur(2.5px) !important;\n }\n\n html.vm-open .venue-modal.open .modal-bg::after {\n background: rgba(255, 255, 255, .05) !important;\n -webkit-backdrop-filter: blur(6px) !important;\n backdrop-filter: blur(6px) !important;\n }\n\n \/* Layering aman *\/\n .venue-modal .modal-bg {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n\n .venue-modal .modal-panel {\n position: relative;\n z-index: 2;\n }\n\n \/* Pastikan konten & panel tidak ikut blur *\/\n #meetings,\n #meetings * {\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n filter: none !important;\n }\n\n \/* ===== Garis di samping gambar (tetap) ===== *\/\n .venue-image-wrap {\n position: relative;\n }\n\n .vline {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 1px;\n background: rgba(0, 0, 0, .25);\n transform: scaleY(0);\n transform-origin: top;\n transition: transform .6s ease;\n }\n\n \/* default di kanan *\/\n .venue-row .venue-image-wrap .vline {\n right: -25px;\n }\n\n \/* bila row.right (gambar di kanan), garis pindah ke kiri *\/\n .venue-row.right .venue-image-wrap .vline {\n left: -25px;\n right: auto;\n }\n\n .venue-row.visible .vline {\n transform: scaleY(1);\n }\n\n \/* ===== VENUE MODAL \u2014 Contact Inside (no radius) ===== *\/\n\n \/* bar kecil: subscribe + tombol proposal *\/\n .venue-modal .modal-ctas {\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 16px;\n align-items: end;\n margin-top: 18px;\n }\n\n .venue-modal .mini-news {\n display: flex;\n gap: 10px;\n margin: 0;\n border-radius: 0 !important;\n }\n\n .venue-modal .mini-news input[type=\"email\"] {\n flex: 1;\n height: 42px;\n border: 1px solid var(--line, rgba(0, 0, 0, .18));\n background: transparent;\n padding: 0 12px;\n border-radius: 0 !important;\n }\n\n .venue-modal .mini-news button {\n height: 42px;\n padding: 0 14px;\n border: 1px solid #111;\n background: #111;\n color: #fff;\n }\n\n \/* tombol pembuka form *\/\n .venue-modal .open-req {\n border: 1px solid #111;\n background: transparent;\n color: #111;\n padding: 10px 16px;\n height: 42px;\n cursor: pointer;\n transition: background .2s, color .2s;\n }\n\n .venue-modal .open-req:hover {\n background: #111;\n color: #fff;\n }\n\n \/* wrapper form proposal (tersembunyi dulu) *\/\n .venue-modal .req-wrap {\n margin-top: 18px;\n display: none;\n \/* tampilkan via JS dengan .show *\/\n }\n\n .venue-modal .req-wrap.show {\n display: block;\n animation: fadeIn .35s ease both;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n\n to {\n opacity: 1;\n transform: none;\n }\n }\n\n \/* judul kecil + garis tipis penuh *\/\n .venue-modal .req-head {\n margin: 6px 0 6px;\n font-weight: 700;\n letter-spacing: .02em;\n }\n\n .venue-modal .req-hair {\n height: 1px;\n background: rgba(0, 0, 0, .18);\n width: 100%;\n margin: 6px 0 14px;\n }\n\n \/* grid form (tanpa radius, rapi) *\/\n .venue-modal .req-form {\n display: block;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n border-radius: 0 !important;\n }\n\n .venue-modal .req-form input,\n .venue-modal .req-form select,\n .venue-modal .req-form textarea {\n width: 100%;\n border: 1px solid var(--line, rgba(0, 0, 0, .18));\n padding: 12px;\n font-size: 14px;\n background: #fff;\n border-radius: 0 !important;\n }\n\n .venue-modal .req-form textarea {\n min-height: 120px;\n resize: vertical;\n }\n\n .venue-modal .req-form .full {\n grid-column: 1 \/ -1;\n }\n\n .venue-modal .consent {\n display: flex;\n gap: 10px;\n align-items: flex-start;\n font-size: 13px;\n color: #3b3f45;\n }\n\n .venue-modal .consent input {\n width: 18px;\n height: 18px;\n accent-color: #111;\n margin-top: 2px;\n }\n\n .venue-modal .row-actions {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n margin-top: 6px;\n }\n\n .venue-modal .row-actions .left {\n color: #6f747b;\n font-size: 12px;\n }\n\n .venue-modal .row-actions .primary {\n height: 44px;\n padding: 0 16px;\n background: #111;\n color: #fff;\n border: 1px solid #111;\n }\n\n \/* select arrow flat *\/\n .venue-modal .select-wrap {\n position: relative;\n }\n\n .venue-modal .select-wrap select {\n appearance: none;\n -webkit-appearance: none;\n padding-right: 40px;\n background: #fff;\n }\n\n .venue-modal .select-wrap::after {\n content: \"\\f107\";\n font-family: \"Font Awesome 6 Free\", sans-serif;\n font-weight: 900;\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: #666;\n pointer-events: none;\n }\n\n \/* responsive *\/\n @media (max-width: 760px) {\n .venue-modal .modal-ctas {\n grid-template-columns: 1fr;\n }\n\n .venue-modal .req-form {\n grid-template-columns: 1fr;\n }\n\n .venue-modal .row-actions {\n flex-direction: column;\n align-items: stretch;\n }\n }\n\n \/* jaga gaya: tanpa radius di area modal *\/\n .venue-modal * {\n border-radius: 0 !important;\n }\n\n \/* ===== VENUE MODAL \u2014 clean, no radius, no card ===== *\/\n\n \/* kontainer modal: bisa scroll, tidak memotong panel *\/\n .venue-modal {\n position: fixed;\n inset: 0;\n display: none;\n overflow-y: auto;\n z-index: 3000;\n }\n\n \/* bg blur selalu isi viewport (ikuti scroll) *\/\n .venue-modal .modal-bg {\n position: fixed;\n \/* was absolute *\/\n inset: 0;\n background-size: cover;\n background-position: center;\n filter: brightness(.42) blur(3px);\n z-index: 0;\n }\n\n \/* shell untuk center panel dan memberi padding atas-bawah *\/\n .venue-modal .modal-shell {\n position: fixed;\n z-index: 2;\n min-height: 100%;\n display: flex;\n justify-content: center;\n padding: 7vh 24px;\n \/* ruang atas-bawah *\/\n }\n\n \/* panel konten: NO radius, NO card look *\/\n .venue-modal .modal-panel {\n width: min(96vw, 940px);\n background: rgba(255, 255, 255, .98);\n border-radius: 0 !important;\n border: none;\n box-shadow: none;\n \/* no card *\/\n padding: clamp(28px, 3.2vw, 56px);\n }\n\n \/* garis hairline atas\/bawah panel biar crisp, bukan shadow *\/\n .venue-modal .modal-panel::before,\n .venue-modal .modal-panel::after {\n content: \"\";\n display: block;\n height: 1px;\n background: rgba(0, 0, 0, .16);\n }\n\n .venue-modal .modal-panel::before {\n margin-bottom: 18px;\n }\n\n .venue-modal .modal-panel::after {\n margin-top: 18px;\n }\n\n \/* close *\/\n .venue-modal .close {\n position: absolute;\n top: 18px;\n right: 22px;\n background: none;\n border: 0;\n font-size: 28px;\n color: #222;\n cursor: pointer;\n }\n\n \/* heading + divider *\/\n .modal-head {\n margin-bottom: 14px;\n }\n\n .modal-head h3 {\n margin: 0 0 6px 0;\n font-size: clamp(20px, 2.2vw, 24px);\n letter-spacing: .02em;\n font-weight: 800;\n }\n\n .modal-head .sub {\n color: #555;\n margin: 0 0 12px 0;\n line-height: 1.7;\n font-size: 14px;\n }\n\n .modal-head .divider {\n height: 1px;\n width: 100%;\n \/* sepanjang konten *\/\n background: rgba(0, 0, 0, .18);\n \/* sama seperti line di destination *\/\n }\n\n \/* toggle proposal *\/\n .proposal-toggle {\n width: 100%;\n background: #f6f6f6;\n border: 1px solid rgba(0, 0, 0, .22);\n color: #222;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n text-transform: none;\n }\n\n .proposal-toggle i {\n transition: transform .25s ease;\n }\n\n \/* form grid *\/\n .req-form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n }\n\n .req-form .full {\n grid-column: 1 \/ -1;\n }\n\n .req-form input,\n .req-form select,\n .req-form textarea {\n width: 100%;\n background: #fff;\n border: 1px solid rgba(0, 0, 0, .18);\n border-radius: 0 !important;\n padding: 12px;\n font-size: 14px;\n }\n\n .req-form textarea {\n min-height: 120px;\n resize: vertical;\n }\n\n .select-wrap {\n position: relative;\n }\n\n .select-wrap select {\n appearance: none;\n -webkit-appearance: none;\n padding-right: 42px;\n }\n\n .select-wrap::after {\n content: \"\\f107\";\n font-family: \"Font Awesome 6 Free\", sans-serif;\n font-weight: 900;\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: #666;\n pointer-events: none;\n }\n\n \/* consent + actions *\/\n .consent {\n display: flex;\n gap: 10px;\n align-items: flex-start;\n font-size: 13px;\n color: #3b3f45;\n }\n\n .consent input {\n width: 18px;\n height: 18px;\n accent-color: #111;\n margin-top: 2px;\n }\n\n .row-actions {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n margin-top: 8px;\n }\n\n .row-actions .left {\n color: #6f747b;\n font-size: 12px;\n }\n\n .row-actions .primary {\n height: 44px;\n padding: 0 16px;\n background: #111;\n color: #fff;\n border: 1px solid #111;\n }\n\n \/* animasi buka\/tutup *\/\n .venue-modal.open {\n display: block;\n animation: fadeIn .3s ease both;\n }\n\n .venue-modal.closing {\n animation: fadeOut .24s ease both;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0\n }\n\n to {\n opacity: 1\n }\n }\n\n @keyframes fadeOut {\n to {\n opacity: 0;\n visibility: hidden\n }\n }\n\n @media (max-width: 760px) {\n .req-form {\n grid-template-columns: 1fr;\n }\n\n .row-actions {\n flex-direction: column;\n align-items: stretch;\n }\n }\n\n \/* ===== VENUE MODAL \u2014 FINAL OVERRIDE (letakkan PALING AKHIR CSS) ===== *\/\n .venue-modal {\n position: fixed !important;\n inset: 0 !important;\n display: none !important;\n \/* default: tertutup *\/\n z-index: 5000 !important;\n align-items: center !important;\n justify-content: center !important;\n overflow-y: auto !important;\n }\n\n .venue-modal.open {\n display: flex !important;\n \/* SELALU flex untuk center *\/\n }\n\n \/* Backdrop (blur hanya background modal, bukan konten halaman) *\/\n .venue-modal .modal-bg {\n position: fixed !important;\n inset: 0 !important;\n background-size: cover !important;\n background-position: center !important;\n filter: brightness(.42) blur(3px) !important;\n z-index: 0 !important;\n }\n\n \/* Panel \u2014 no card, no radius *\/\n .venue-modal .modal-panel {\n width: min(96vw, 940px) !important;\n background: rgba(255, 255, 255, .98) !important;\n border: none !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n padding: clamp(28px, 3.2vw, 56px) !important;\n position: relative !important;\n z-index: 2 !important;\n }\n\n \/* Pastikan konten section tidak ikut blur *\/\n #meetings,\n #meetings * {\n filter: none !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n }\n\n \/* Close button posisi *\/\n .venue-modal .close {\n position: absolute !important;\n top: 18px;\n right: 22px;\n background: none;\n border: 0;\n font-size: 28px;\n cursor: pointer;\n }\n\n \/* Toggle ikon rotasi *\/\n .proposal-toggle i {\n transition: transform .25s ease;\n }\n\n .proposal-toggle.is-open i {\n transform: rotate(180deg);\n }\n\n \/* === Dining base (boleh gabung dengan CSS kamu) === *\/\n #dining {\n background: var(--ivory, #faf7ef);\n text-align: center;\n position: relative;\n }\n\n #dining .section-title {\n font-family: \"Spectral\", serif;\n font-style: italic;\n font-weight: 700;\n letter-spacing: -.02em;\n font-size: clamp(32px, 5vw, 56px);\n line-height: 1.06;\n text-align: center;\n margin: 0 0 6px;\n }\n\n #dining .section-subtitle {\n color: #777;\n font-size: 15px;\n margin: 0 auto 100px;\n max-width: 720px;\n }\n\n \/* Layout sama seperti meetings *\/\n #dining .venue-row {\n display: flex;\n align-items: stretch;\n justify-content: center;\n gap: 80px;\n margin-bottom: 120px;\n opacity: 0;\n transform: translateY(40px);\n transition: .8s ease-out\n }\n\n #dining .venue-row.visible {\n opacity: 1;\n transform: translateY(0)\n }\n\n #dining .venue-row.left {\n flex-direction: row\n }\n\n #dining .venue-row.right {\n flex-direction: row-reverse\n }\n\n \/* Gambar + GARIS \u2014 FIX: overflow: visible supaya garis tidak kepotong *\/\n #dining .venue-image-wrap {\n position: relative;\n width: 100%;\n max-width: 560px;\n flex: 0 1 560px;\n aspect-ratio: 16 \/ 10;\n overflow: hidden\n }\n\n #dining .venue-image-wrap img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transform: translateX(50px);\n opacity: 0;\n animation: slideInImage .7s ease forwards\n }\n\n @keyframes slideInImage {\n to {\n opacity: 1;\n transform: translateX(0)\n }\n }\n\n \/* Garis tipis di sisi gambar *\/\n .vline {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 1px;\n background: rgba(0, 0, 0, .25);\n transform: scaleY(0);\n transform-origin: top;\n transition: transform .6s ease;\n }\n\n \/* default di kanan gambar *\/\n #dining .venue-row .venue-image-wrap .vline {\n right: -25px\n }\n\n \/* kalau row.right (gambar di kanan), pindah ke kiri *\/\n #dining .venue-row.right .venue-image-wrap .vline {\n left: -25px;\n right: auto\n }\n\n \/* tampil saat row jadi visible *\/\n #dining .venue-row.visible .vline {\n transform: scaleY(1)\n }\n\n \/* Teks *\/\n #dining .venue-text {\n width: 100%;\n max-width: 560px;\n flex: 0 1 560px;\n min-height: clamp(300px, 32vw, 360px);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n font-family: var(--font-sans, \"Montserrat\", sans-serif)\n }\n\n #dining .venue-row.right .venue-text {\n align-items: flex-end;\n }\n\n #dining .venue-text h3 {\n font-weight: 700;\n font-size: 18px;\n letter-spacing: .02em;\n margin-bottom: 10px\n }\n\n #dining .venue-text p {\n color: #555;\n font-size: 14px;\n margin-bottom: 14px;\n line-height: 1.6\n }\n\n .learn-more {\n border: none;\n background: none;\n font-weight: 700;\n font-size: 13px;\n letter-spacing: .05em;\n text-transform: uppercase;\n text-decoration: underline;\n cursor: pointer;\n transition: color .3s\n }\n\n #dining .learn-more {\n align-self: flex-start;\n }\n\n #dining .venue-row.right .learn-more {\n align-self: flex-end;\n }\n\n .learn-more:hover {\n color: var(--accent, #b8a47a)\n }\n\n \/* Responsive *\/\n @media (max-width:900px) {\n #dining .venue-row {\n flex-direction: column;\n gap: 24px;\n text-align: center\n }\n\n #dining .venue-image-wrap,\n #dining .venue-text {\n width: 100%;\n max-width: 560px;\n }\n\n #dining .venue-text {\n min-height: 0;\n align-items: center;\n }\n\n #dining .learn-more,\n #dining .venue-row.right .learn-more {\n align-self: center;\n }\n\n #dining .vline {\n display: none\n }\n }\n\n \/* Pastikan section tidak ikut blur *\/\n #dining,\n #dining * {\n filter: none !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important\n }\n\n \/* Hapus animasi, buat selalu terlihat *\/\n .vline {\n transform: scaleY(1)\n }\n\n \/* ===== OFFERS \u2014 editorial modern (no card, no radius) ===== *\/\n #offers {\n background: #fff;\n padding: 80px clamp(16px, 5vw, 56px);\n color: var(--ink, #1b1d1f);\n }\n\n #offers .offers-head {\n text-align: center;\n margin: 0 auto clamp(22px, 3vw, 36px);\n max-width: 960px;\n }\n\n #offers .offers-head h2 {\n font-family: \"Spectral\", serif;\n \/* konsisten dengan parent *\/\n font-style: italic;\n font-weight: 700;\n letter-spacing: -0.02em;\n font-size: clamp(32px, 5vw, 56px);\n line-height: 1.06;\n margin: 0 0 8px;\n }\n\n #offers .offers-head h2 em {\n font-style: italic;\n color: var(--accent, #b8a47a);\n }\n\n #offers .offers-head .lead {\n color: var(--muted, #6f747b);\n font-size: 15px;\n }\n\n \/* Grid *\/\n #offers .offers-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: clamp(16px, 2vw, 20px);\n }\n\n @media (min-width: 860px) {\n #offers .offers-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n\n \/* Tile \u2014 no card, no radius *\/\n #offers .offer {\n position: relative;\n height: clamp(360px, 52vw, 520px);\n overflow: hidden;\n \/* no radius *\/\n border: none;\n box-shadow: none;\n outline: 1px solid rgba(0, 0, 0, .08);\n \/* hairline, bukan border card *\/\n background: #0f0f10;\n isolation: isolate;\n }\n\n #offers .offer .media {\n position: absolute;\n inset: 0;\n background-image: var(--img);\n background-size: cover;\n background-position: center;\n transform: scale(1.02);\n transition: transform 800ms cubic-bezier(.19, 1, .22, 1), filter .6s ease;\n will-change: transform, filter;\n filter: saturate(1.03) contrast(.96);\n }\n\n #offers .offer .veil {\n position: absolute;\n inset: 0;\n z-index: 1;\n background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .7) 100%);\n transition: background .3s ease;\n }\n\n #offers .offer .copy {\n position: absolute;\n inset: 0;\n z-index: 2;\n display: grid;\n grid-template-rows: 1fr auto auto;\n padding: clamp(16px, 2.4vw, 24px);\n color: #fff;\n }\n\n #offers .offer .label {\n align-self: start;\n justify-self: start;\n padding: 8px 12px;\n font-size: 12px;\n letter-spacing: .18em;\n text-transform: uppercase;\n background: rgba(0, 0, 0, .35);\n border: 1px solid rgba(255, 255, 255, .18);\n }\n\n #offers .offer h3 {\n align-self: end;\n margin: 0;\n line-height: 1.08;\n text-shadow: 0 2px 12px rgba(0, 0, 0, .35);\n }\n\n #offers .offer h3 .up {\n display: block;\n font-family: \"Spectral\", serif;\n font-weight: 700;\n letter-spacing: .02em;\n font-size: clamp(22px, 3vw, 32px);\n }\n\n #offers .offer h3 .script {\n display: inline-block;\n font-family: \"Spectral\", serif;\n \/* tetap serif biar selaras (tanpa cursive asing) *\/\n font-style: italic;\n color: var(--accent, #b8a47a);\n font-size: clamp(32px, 4.5vw, 46px);\n line-height: .92;\n margin-top: -4px;\n }\n\n #offers .offer .desc {\n align-self: end;\n max-width: 90%;\n font-size: clamp(13px, 1.2vw, 14px);\n line-height: 1.7;\n color: #f2f2f2;\n opacity: .95;\n text-shadow: 0 2px 8px rgba(0, 0, 0, .35);\n margin-top: 6px;\n }\n\n @media (max-width: 768px) {\n #offers .offer {\n height: clamp(300px, 84vw, 420px);\n }\n\n #offers .offers-head h2 {\n font-size: 34px !important;\n line-height: 1.12 !important;\n }\n\n #offers .offer h3 .up {\n font-size: 20px !important;\n line-height: 1.08 !important;\n }\n\n #offers .offer h3 .script {\n font-size: 28px !important;\n line-height: 1 !important;\n margin-top: 2px !important;\n }\n\n #offers .offer .desc {\n max-width: 100% !important;\n font-size: 12px !important;\n line-height: 1.45 !important;\n }\n\n #offers .offer .copy {\n padding: 14px !important;\n }\n }\n\n @media (max-width: 420px) {\n #offers .offer h3 .up {\n font-size: 18px !important;\n }\n\n #offers .offer h3 .script {\n font-size: 24px !important;\n }\n }\n\n \/* CTA *\/\n #offers .cta {\n display: flex;\n gap: 12px;\n justify-content: center;\n padding-top: 12px;\n }\n\n #offers .btn {\n appearance: none;\n border: 1px solid rgba(255, 255, 255, .28);\n background: transparent;\n color: #fff;\n height: 40px;\n padding: 0 16px;\n font-weight: 800;\n letter-spacing: .12em;\n text-transform: uppercase;\n font-size: 12px;\n transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;\n }\n\n #offers .btn:hover {\n transform: translateY(-2px);\n border-color: rgba(255, 255, 255, .5);\n }\n\n #offers .btn.solid {\n border-color: transparent;\n background: #111;\n color: #fff;\n }\n\n #offers .btn.solid:hover {\n background: #000;\n }\n\n #offers .offer:hover .media {\n transform: scale(1.07);\n filter: contrast(1.02) saturate(1.05);\n }\n\n #offers .offer:hover .veil {\n background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .12) 40%, rgba(0, 0, 0, .82) 100%);\n }\n\n \/* No radius enforcement *\/\n #offers,\n #offers * {\n border-radius: 0 !important;\n }\n\n\n \/* ===== GALLERY \u2014 Editorial Modern (no card, no radius) ===== *\/\n #gallery {\n background: #fff;\n color: #1f1f1f;\n text-align: center;\n }\n\n \/* ===== HEADING ===== *\/\n #gallery h2 {\n font-family: \"Spectral\", serif;\n font-style: italic;\n font-weight: 700;\n letter-spacing: -0.02em;\n font-size: clamp(32px, 5vw, 56px);\n line-height: 1.06;\n margin: 22px auto 6px;\n position: relative;\n display: inline-block;\n }\n\n #gallery .lead {\n color: #7a7a7a;\n font-size: 15px;\n max-width: 720px;\n margin: 0 auto clamp(26px, 3vw, 42px);\n }\n\n \/* ===== FILTER BUTTONS ===== *\/\n #gallery .filters {\n --gap: 16px;\n display: flex;\n flex-wrap: wrap;\n gap: var(--gap);\n justify-content: center;\n margin: 0 0 clamp(22px, 3.2vw, 34px);\n }\n\n \/* ===== SUBMENU STYLES ===== *\/\n #gallery .sub-menu button.active {\n background: #111;\n color: #fff;\n }\n\n\n #gallery .filter-group {\n position: relative;\n }\n\n #gallery .filter-group .sub-menu {\n position: absolute;\n top: 100%;\n left: 0;\n background: #fff;\n display: flex;\n flex-direction: column;\n min-width: 180px;\n opacity: 0;\n visibility: hidden;\n transform: translateY(6px);\n transition: all 0.25s ease;\n box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);\n border-radius: 0;\n z-index: 10;\n }\n\n #gallery .filter-group:hover .sub-menu {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n }\n\n #gallery .sub-menu button {\n background: none;\n border: none;\n text-align: left;\n padding: 10px 16px;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: #222;\n transition: background 0.2s ease, color 0.2s ease;\n }\n\n #gallery .sub-menu button:hover {\n background: #111;\n color: #fff;\n }\n\n \/* Modern minimal look *\/\n #gallery .filter-group>button {\n position: relative;\n }\n\n \/* Hanya untuk tombol kategori utama (All, Rooms, Dining, Leisure, Events) *\/\n #gallery .filter-group>button::after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n bottom: -4px;\n height: 1px;\n background: currentColor;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.25s ease;\n }\n\n #gallery .filter-group>button:hover::after,\n #gallery .filter-group>button.active::after {\n transform: scaleX(1);\n }\n\n \/* Hapus garis dari submenu agar bersih *\/\n #gallery .sub-menu button::after {\n content: none !important;\n }\n\n \/* ==== GALLERY TOGGLE BUTTON (GLOBAL) ==== *\/\n #galMore {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 70px;\n height: 70px;\n margin: 16px auto 0;\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.9);\n border: 1px solid rgba(214, 195, 138, 0.5);\n color: #d6c38a;\n cursor: pointer;\n transition: all 0.3s ease;\n z-index: 10;\n position: relative;\n }\n\n #galMore svg {\n width: 100px;\n height: 100px;\n transition: transform 0.3s ease;\n }\n\n #galMore.active svg {\n transform: rotate(180deg);\n }\n\n \/* Item yang disembunyikan oleh limit JS (lebih stabil saat filter aktif) *\/\n #gallery .gal.is-hidden-by-limit {\n display: none !important;\n }\n\n \/* ===== MOBILE GALLERY (\u2264720px, full-width stacked, no caption) ===== *\/\n @media (max-width: 720px) {\n #gallery {\n padding: 48px 0 60px;\n }\n\n \/* Layout vertikal *\/\n #gallery .gal-grid {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 24px;\n \/* jarak antar foto *\/\n position: relative;\n }\n\n #gallery .gal {\n width: 100%;\n max-width: 100%;\n border-radius: 0;\n overflow: hidden;\n }\n\n #gallery .gal img {\n display: block;\n width: 100%;\n height: auto;\n object-fit: cover;\n }\n\n \/* Hapus teks\/caption sepenuhnya *\/\n #gallery .gal figcaption {\n display: none !important;\n }\n\n \/* Fade bawah lembut *\/\n #gallery .fade-bottom {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 140px;\n background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);\n pointer-events: none;\n z-index: 2;\n }\n\n \/* Tombol panah minimalis *\/\n\n #galMore {\n width: 48px;\n height: 48px;\n }\n\n #gallery #galMore svg {\n width: 24px;\n height: 24px;\n transition: transform 0.3s ease;\n }\n\n #gallery #galMore.active svg {\n transform: rotate(180deg);\n }\n\n #gallery #galMore:active {\n transform: scale(0.95);\n }\n\n \/* Hilangkan fade saat expanded *\/\n #gallery .gal-grid.expanded+.fade-bottom {\n display: none;\n }\n\n \/* ===== IMAGE VIEWER (Lightbox) dengan animasi slide elegan ===== *\/\n .image-viewer {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.92);\n backdrop-filter: blur(6px);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 9999;\n overflow: hidden;\n }\n\n .image-viewer.active {\n display: flex;\n animation: fadeIn 0.3s ease;\n }\n\n .image-viewer img {\n max-width: 92%;\n max-height: 88vh;\n object-fit: contain;\n border-radius: 10px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);\n transition: transform 0.4s ease, opacity 0.4s ease;\n opacity: 1;\n }\n\n \/* Tombol tutup *\/\n .viewer-close {\n position: fixed;\n top: 18px;\n right: 18px;\n width: 42px;\n height: 42px;\n background: rgba(0, 0, 0, 0.7);\n border-radius: 50%;\n border: 1px solid rgba(255, 255, 255, 0.3);\n color: white;\n font-size: 22px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 10000;\n }\n\n \/* Tombol navigasi *\/\n .viewer-nav {\n position: fixed;\n top: 50%;\n transform: translateY(-50%);\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.6);\n border: 1px solid rgba(255, 255, 255, 0.3);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 10000;\n transition: background 0.25s ease, transform 0.25s ease;\n }\n\n .viewer-nav:hover {\n background: rgba(255, 255, 255, 0.2);\n }\n\n .viewer-prev {\n left: 20px;\n }\n\n .viewer-next {\n right: 20px;\n }\n\n .viewer-nav svg {\n width: 24px;\n height: 24px;\n stroke: #d6c38a;\n }\n\n \/* Animasi transisi *\/\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n .slide-in-right {\n transform: translateX(40px);\n opacity: 0;\n }\n\n .slide-in-left {\n transform: translateX(-40px);\n opacity: 0;\n }\n\n .slide-reset {\n transform: translateX(0);\n opacity: 1;\n }\n\n \/* --- FIX SVG OVERRIDE FROM ELEMENTOR \/ GLOBAL STYLES --- *\/\n #imageViewer svg {\n width: 28px !important;\n height: 28px !important;\n max-width: none !important;\n max-height: none !important;\n min-width: 0 !important;\n min-height: 0 !important;\n flex: 0 0 auto;\n display: block;\n stroke: currentColor;\n fill: none;\n pointer-events: none;\n }\n\n \/* memastikan tombolnya tetap di tengah *\/\n #imageViewer button {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n }\n\n \/* versi mobile lebih kecil *\/\n @media (max-width: 768px) {\n #imageViewer svg {\n width: 24px !important;\n height: 24px !important;\n }\n }\n\n\n\n }\n\n\n #gallery .filters button {\n background: none;\n border: none;\n padding: 6px 2px;\n cursor: pointer;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n font-size: 12px;\n position: relative;\n color: #222;\n }\n\n #gallery .filters button:hover::after,\n #gallery .filters button.active::after {\n transform: scaleX(1);\n }\n\n \/* ===== GRID BASE \u2014 Desktop: 3 Columns ===== *\/\n #gallery .gal-grid {\n --gap: 16px;\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--gap);\n overflow: visible;\n transition: max-height 0.55s cubic-bezier(.19, 1, .22, 1), opacity 0.35s ease;\n }\n\n \/* ===== GALLERY ITEM ===== *\/\n #gallery .gal {\n position: relative;\n aspect-ratio: 4 \/ 3;\n overflow: hidden;\n }\n\n #gallery .gal img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n transform: scale(1.003);\n transition: transform 700ms cubic-bezier(.19, 1, .22, 1), filter 0.4s ease;\n }\n\n \/* Hover effect *\/\n #gallery .gal:hover img {\n transform: scale(1.03);\n filter: contrast(1.05) saturate(1.05);\n }\n\n \/* ===== CAPTION (Desktop hover only) ===== *\/\n #gallery .gal figcaption {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n padding: 12px 14px;\n background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 60%);\n color: #fff;\n font-size: 13px;\n letter-spacing: 0.04em;\n transform: translateY(8px);\n opacity: 0;\n transition: opacity 0.35s ease, transform 0.35s ease;\n }\n\n #gallery .gal:hover figcaption {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* No border-radius anywhere *\/\n #gallery .gal,\n #gallery .gal *,\n #gallery img {\n border-radius: 0 !important;\n }\n\n \/* ===== LOAD MORE (Collapsed default) ===== *\/\n #gallery .gal-grid.collapsed {\n max-height: calc(3 * (min(26vw, 340px)) + 80px);\n \/* 3 baris terlihat di desktop *\/\n overflow: hidden;\n }\n\n #gallery .gal-grid.expanded {\n max-height: none;\n overflow: visible;\n }\n\n #gallery .gal-grid.collapsed::after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 90px;\n background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%);\n pointer-events: none;\n }\n\n \/* ===== LOAD MORE BUTTON ===== *\/\n #gallery #galMore {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n margin: 24px auto 0;\n padding: 8px 10px;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 28px;\n color: #333;\n transition: opacity 0.3s ease;\n }\n\n #gallery #galMore:hover {\n opacity: 0.7;\n }\n\n #gallery #galMore i {\n transition: transform 0.35s cubic-bezier(.19, 1, .22, 1);\n }\n\n #gallery #galMore.is-open i {\n transform: rotate(180deg);\n }\n\n @media (max-width: 1024px) {\n\n #gallery .fade-bottom,\n #gallery .gal-grid.collapsed::after {\n display: none !important;\n }\n }\n\n \/* ===== GALLERY FILTER SUBMENU FIX ===== *\/\n #gallery .filter-group {\n position: relative;\n }\n\n #gallery .sub-menu {\n position: absolute;\n top: 100%;\n left: 0;\n display: none;\n flex-direction: column;\n background: #fff;\n border: 1px solid #ddd;\n box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);\n z-index: 999;\n }\n\n #gallery .filter-group.open>.sub-menu {\n display: flex;\n }\n\n #gallery .sub-menu button {\n display: block;\n padding: 8px 14px;\n text-align: left;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n\n \/* ===== LOCATION \u2014 Editorial Modern (no card, no radius) ===== *\/\n #location {\n --ink: var(--ink, #242424);\n --muted: var(--muted, #6b6b6b);\n --line: var(--line, rgba(0, 0, 0, .14));\n background: #fff;\n color: var(--ink);\n padding: clamp(56px, 7vw, 96px) clamp(18px, 6vw, 72px);\n position: relative;\n }\n\n #location::before {\n \/* aksen grid halus agar tidak basic *\/\n content: \"\";\n position: absolute;\n inset: 0;\n pointer-events: none;\n background:\n repeating-linear-gradient(to right, rgba(0, 0, 0, .04), rgba(0, 0, 0, .04) 1px, transparent 1px, transparent 96px),\n linear-gradient(180deg, rgba(0, 0, 0, .02), transparent 40%, transparent 60%, rgba(0, 0, 0, .02));\n opacity: .35;\n }\n\n \/* Head (divider solid sepanjang konten) *\/\n #location .loc-head {\n max-width: 1200px;\n margin: 0 auto clamp(24px, 3vw, 40px);\n text-align: center;\n position: relative;\n color: var(--ink);\n }\n\n #location .loc-head::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 1px;\n background: currentColor;\n opacity: .35;\n margin-bottom: 100px;\n }\n\n #location .loc-head h2 {\n font-family: \"Spectral\", serif;\n font-style: italic;\n font-weight: 700;\n letter-spacing: -.02em;\n font-size: clamp(32px, 5vw, 56px);\n line-height: 1.06;\n text-align: center;\n margin: 0 0 6px;\n }\n\n #location .loc-head .lead {\n margin: 0 auto;\n max-width: 720px;\n color: var(--muted);\n font-size: 15px;\n }\n\n \/* Layout *\/\n #location .loc-grid {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n display: grid;\n grid-template-columns: .9fr 1.1fr;\n gap: clamp(24px, 4vw, 44px);\n }\n\n #location .loc-grid::before {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 50%;\n width: 1px;\n background: var(--line);\n transform: translateX(-.5px);\n pointer-events: none;\n }\n\n @media (max-width: 980px) {\n #location .loc-grid {\n grid-template-columns: 1fr;\n }\n\n #location .loc-grid::before {\n display: none;\n }\n }\n\n \/* Info column *\/\n #location .loc-info .kicker {\n display: inline-block;\n text-transform: uppercase;\n letter-spacing: .22em;\n font-size: 12px;\n color: var(--muted);\n opacity: .85;\n margin-bottom: 10px;\n }\n\n #location .loc-info h3 {\n font-weight: 800;\n letter-spacing: .01em;\n margin: 0 0 10px;\n font-size: 18px;\n }\n\n #location .addr,\n #location .poi {\n margin: 12px 0 18px;\n line-height: 1.7;\n font-size: 14px;\n color: var(--ink);\n }\n\n #location .poi li {\n margin: 4px 0;\n }\n\n #location .hair {\n height: 1px;\n background: var(--line);\n margin: 18px 0;\n }\n\n \/* Mode tabs (underline, no pill\/no radius) *\/\n #location .modes {\n display: flex;\n gap: 18px;\n flex-wrap: wrap;\n margin: 6px 0 12px;\n }\n\n #location .modes button {\n border: none;\n background: none;\n padding: 6px 2px;\n cursor: pointer;\n color: #111;\n text-transform: uppercase;\n letter-spacing: .08em;\n font-weight: 800;\n font-size: 12px;\n position: relative;\n }\n\n #location .modes button::after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n bottom: -4px;\n height: 1px;\n background: currentColor;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform .25s ease;\n }\n\n #location .modes button.active::after,\n #location .modes button:hover::after {\n transform: scaleX(1);\n }\n\n \/* Estimasi waktu\/akses *\/\n #location .times {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 8px 14px;\n font-size: 13px;\n color: #444;\n }\n\n @media (max-width:600px) {\n #location .times {\n grid-template-columns: 1fr;\n }\n }\n\n #location .time-item {\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid var(--line);\n padding: 8px 0;\n }\n\n \/* Map column \u2014 tanpa radius, hairline tepi *\/\n #location .mapwrap {\n position: relative;\n border: 1px solid var(--line);\n background: #f0f0f0;\n overflow: hidden;\n }\n\n #location .mapwrap iframe {\n display: block;\n width: 100%;\n height: min(64vh, 560px);\n border: 0;\n filter: saturate(1.02) contrast(1.02);\n }\n\n \/* Overlay label (flat, bukan card) *\/\n #location .map-badge {\n position: absolute;\n top: 14px;\n left: 14px;\n z-index: 2;\n background: rgba(255, 255, 255, .86);\n color: #111;\n padding: 10px 12px;\n border: 1px solid var(--line);\n font-size: 12px;\n letter-spacing: .06em;\n text-transform: uppercase;\n font-weight: 800;\n }\n\n \/* CTA link bar (flat) *\/\n #location .route-bar {\n display: flex;\n gap: 18px;\n align-items: center;\n flex-wrap: wrap;\n margin-top: 12px;\n }\n\n #location .route-bar a {\n color: #111;\n text-decoration: none;\n font-size: 12px;\n letter-spacing: .08em;\n text-transform: uppercase;\n font-weight: 800;\n position: relative;\n padding-bottom: 2px;\n }\n\n #location .route-bar a::after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 1px;\n background: currentColor;\n transition: transform .25s ease;\n transform-origin: left;\n }\n\n #location .route-bar a:hover::after {\n transform: scaleX(0);\n }\n\n \/* Pastikan tidak ada radius *\/\n #location,\n #location * {\n border-radius: 0 !important;\n }\n\n \/* ============ LOCATION: sinkron tinggi & rapi ============ *\/\n\n \/* 1) grid stretch agar dua kolom sama tinggi *\/\n #location .loc-grid {\n align-items: stretch;\n }\n\n \/* 2) definisikan tinggi panel konsisten utk teks & map *\/\n #location {\n --pane-h: clamp(420px, 64vh, 560px);\n \/* satu sumber kebenaran *\/\n }\n\n \/* 3) map: penuh tinggi pane *\/\n #location .mapwrap {\n height: var(--pane-h);\n }\n\n #location .mapwrap iframe {\n height: 100%;\n }\n\n \/* 4) teks: bungkus isi ke .info-pane agar setinggi map & bisa scroll halus *\/\n #location .info-pane {\n height: var(--pane-h);\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n gap: 14px;\n overflow: hidden;\n \/* biar rapi *\/\n }\n\n #location .info-scroll {\n overflow: auto;\n \/* scroll kalau konten lebih panjang *\/\n padding-right: 4px;\n \/* ruang untuk scrollbar *\/\n scrollbar-width: thin;\n }\n\n #location .route-bar {\n margin-top: auto;\n }\n\n \/* CTA selalu di bawah *\/\n\n \/* spacing & kerapian tipografi kecil *\/\n #location .loc-info .kicker {\n margin-bottom: 8px;\n }\n\n #location .loc-info h3 {\n margin: 0 0 6px;\n }\n\n #location .hair {\n margin: 14px 0;\n }\n\n \/* tombol mode: aktif, hover, fokus (aksesibel) *\/\n #location .modes button {\n outline: none;\n }\n\n #location .modes button:focus-visible {\n box-shadow: 0 0 0 1px currentColor inset;\n \/* flat focus, tanpa radius *\/\n }\n\n #location .modes button[aria-pressed=\"true\"] {\n color: #000;\n }\n\n #location .modes button[aria-pressed=\"true\"]::after {\n transform: scaleX(1);\n }\n\n \/* responsive: kalau stack, tinggi ikuti konten (tanpa paksa pane-h) *\/\n @media (max-width:980px) {\n\n #location .info-pane,\n #location .mapwrap {\n height: auto;\n }\n\n #location {\n --pane-h: auto;\n }\n }\n\n \/* FAB *\/\n .fab {\n position: fixed;\n right: 18px;\n bottom: 18px;\n z-index: 1100;\n }\n\n .fab .btn {\n position: relative;\n width: 54px;\n height: 54px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: linear-gradient(145deg, #29df70 0%, #21b95a 100%);\n border: 1px solid rgba(255, 255, 255, 0.4);\n color: #fff;\n box-shadow: 0 10px 26px rgba(5, 32, 18, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.3);\n font-size: 22px;\n transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;\n }\n\n .fab .btn:hover {\n transform: translateY(-2px) scale(1.03);\n box-shadow: 0 14px 30px rgba(5, 32, 18, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.35);\n filter: saturate(1.06);\n }\n\n .fab .btn .tip {\n position: absolute;\n right: 64px;\n top: 50%;\n transform: translateY(-50%) translateX(6px);\n background: #111;\n color: #fff;\n padding: 6px 10px;\n font-size: 12px;\n white-space: nowrap;\n opacity: 0;\n pointer-events: none;\n transition: 0.2s;\n font-family: var(--font-sans);\n font-weight: 700;\n border-radius: 0 !important;\n }\n\n .fab .btn:hover .tip {\n opacity: 1;\n transform: translateY(-50%);\n }\n\n \/* Promo Modal flat *\/\n .promo-modal .panel {\n max-width: 100vw !important;\n max-height: 100vh !important;\n width: auto !important;\n height: auto !important;\n background: transparent;\n border: none;\n box-shadow: none;\n border-radius: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n z-index: 1;\n }\n\n .promo-modal .img-wrap {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .promo-modal .img-wrap img {\n width: 100% !important;\n height: auto !important;\n max-width: 70vw !important;\n max-height: 60vh !important;\n object-fit: contain !important;\n border-radius: 0 !important;\n }\n\n .promo-modal {\n position: fixed;\n inset: 0;\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 2000;\n }\n\n .promo-modal.open {\n display: flex;\n }\n\n .promo-modal .backdrop {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.65);\n backdrop-filter: blur(4px);\n }\n\n .promo-modal img {\n display: block;\n width: auto;\n height: auto;\n max-width: 200vw;\n max-height: 190vh;\n object-fit: contain !important;\n border-radius: 0 !important;\n }\n\n .promo-modal .close {\n position: absolute;\n top: 14px;\n right: 14px;\n background: transparent;\n border: none;\n height: 34px;\n width: 34px;\n border-radius: 0;\n display: grid;\n place-items: center;\n font-size: 16px;\n cursor: pointer;\n transition: 0.2s;\n }\n\n .promo-modal .close:hover {\n background: #fff;\n }\n\n .promo-actions {\n margin-top: 14px;\n display: flex;\n justify-content: center;\n width: 100%;\n }\n\n .promo-modal .panel,\n .promo-modal img {\n border-radius: 0 !important;\n }\n\n .promo-actions .book-now {\n padding: 10px 32px;\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n border-radius: 0 !important;\n cursor: pointer;\n transition: all 0.25s ease;\n border: 2px solid #fff !important;\n }\n\n \/* pastikan defaultnya tersembunyi *\/\n .promo-modal {\n position: fixed !important;\n inset: 0;\n display: none !important;\n }\n\n \/* kalau open -> jadi overlay *\/\n .promo-modal.open {\n display: flex !important;\n }\n\n \/* (opsional) munculkan di atas elemen lain, tapi cookie bar tetap di atas footer *\/\n .promo-modal {\n z-index: 6000 !important;\n }\n\n \/* turunkan sedikit cookie bar saat dev *\/\n .cookiebar {\n z-index: 5000 !important;\n }\n\n .promo-modal {\n z-index: 6000 !important;\n }\n\n\n\n .book-now {\n padding: 10px 28px;\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 0.08em;\n color: #fff;\n background: transparent;\n border: 1px solid #fff;\n text-transform: uppercase;\n cursor: pointer;\n transition: all 0.25s ease;\n border-radius: 0 !important;\n }\n\n .book-now:hover {\n border: 2px solid #000 !important;\n background: #000 !important;\n color: #fff !important;\n }\n\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .img-wrap {\n position: relative;\n display: inline-block;\n }\n\n .img-wrap img {\n display: block;\n width: auto;\n height: auto;\n max-width: 200vw;\n max-height: 190vh;\n object-fit: contain !important;\n border-radius: 0 !important;\n }\n\n .img-wrap .close {\n position: absolute;\n top: 10px;\n right: 10px;\n background: rgba(255, 255, 255, 0.457);\n border: none;\n height: 28px;\n width: 28px;\n font-size: 16px;\n display: grid;\n place-items: center;\n cursor: pointer;\n border-radius: 0;\n z-index: 2;\n }\n\n .img-wrap .close:hover {\n background: #fff;\n }\n\n \/* Cookie bar *\/\n .cookiebar {\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n bottom: 16px;\n z-index: 1800;\n background: #fff;\n border: 1px solid var(--line);\n border-radius: 15px !important;\n box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);\n padding: 10px 12px;\n display: none;\n gap: 10px;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n }\n\n .cookiebar .actions {\n display: flex;\n gap: 8px;\n align-items: center;\n margin: 0;\n }\n\n .cookiebar button {\n height: 34px;\n padding: 0 12px;\n border: 1px solid var(--line);\n background: #fff;\n }\n\n .cookiebar .accept {\n background: #000 !important;\n color: #fff !important;\n border: 0.5px solid #000 !important;\n }\n\n .cookiebar a {\n text-decoration: underline;\n }\n\n @media (max-width: 600px) {\n .cookiebar {\n padding: 6px 8px;\n font-size: 11px;\n white-space: nowrap;\n }\n\n .cookiebar .fulltxt {\n display: none;\n }\n\n .cookiebar .shorttxt {\n display: inline;\n }\n\n .cookiebar .actions button {\n height: 30px;\n padding: 0 10px;\n }\n }\n\n @media (min-width: 601px) {\n .cookiebar .shorttxt {\n display: none;\n }\n }\n\n \/* Policy Modal *\/\n .priv-modal {\n position: fixed;\n inset: 0;\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 2147483648 !important;\n backdrop-filter: none;\n }\n\n .priv-modal.open {\n display: flex;\n }\n\n .priv-modal .backdrop {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.45);\n }\n\n .priv-modal .panel {\n position: relative;\n z-index: 1;\n width: min(820px, 94vw);\n max-height: 86vh;\n overflow: auto;\n background: #fff;\n border: 1px solid var(--line);\n box-shadow: var(--shadow-2);\n padding: 20px;\n margin-top: 40px;\n }\n\n .priv-modal .panel h3 {\n font-family: var(--font-serif);\n margin-bottom: 10px;\n }\n\n \/* Cookie bar *\/\n .cookiebar {\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n bottom: 16px;\n z-index: 5000;\n z-index: 2147483647;\n \/* super tinggi *\/\n pointer-events: auto;\n \/* pastikan di atas header *\/\n background: #fff;\n border: 1px solid var(--line);\n border-radius: 15px !important;\n box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);\n padding: 10px 12px;\n display: none;\n \/* akan di-set flex via JS kalau belum consent *\/\n gap: 12px;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n white-space: nowrap;\n flex-wrap: nowrap;\n }\n\n \/* Pastikan overlay lain tidak memblokir klik *\/\n #progress {\n pointer-events: none;\n }\n\n .cookiebar .actions {\n display: inline-flex;\n gap: 8px;\n align-items: center;\n margin: 0;\n }\n\n .cookiebar button {\n height: 34px;\n padding: 0 12px;\n border: 1px solid var(--line);\n background: #fff;\n }\n\n .cookiebar .accept {\n background: #000 !important;\n color: #fff !important;\n border: 0.5px solid #000 !important;\n }\n\n .cookiebar a {\n text-decoration: underline;\n }\n\n \/* Mobile: tetap satu baris, tapi pakai teks pendek *\/\n @media (max-width: 600px) {\n .cookiebar {\n padding: 6px 8px;\n font-size: 11px;\n }\n\n .cookiebar .fulltxt {\n display: none;\n }\n\n .cookiebar .shorttxt {\n display: inline;\n }\n\n .cookiebar .actions button {\n height: 30px;\n padding: 0 10px;\n }\n }\n\n @media (min-width: 601px) {\n .cookiebar .shorttxt {\n display: none;\n }\n }\n\n \/* Policy Modal (tidak berubah, hanya z-index lebih tinggi dari cookiebar) *\/\n .priv-modal {\n position: fixed;\n inset: 0;\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 6000;\n }\n\n .priv-modal.open {\n display: flex;\n }\n\n .priv-modal .backdrop {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.45);\n }\n\n .priv-modal .panel {\n position: relative;\n z-index: 1;\n width: min(820px, 94vw);\n max-height: 86vh;\n overflow: auto;\n background: #fff;\n border: 1px solid var(--line);\n box-shadow: var(--shadow-2);\n padding: 20px;\n margin-top: 40px;\n }\n\n .priv-modal .panel h3 {\n font-family: var(--font-serif);\n margin-bottom: 10px;\n }\n\n .priv-modal .priv-close {\n position: absolute;\n top: 10px;\n right: 12px;\n width: 32px;\n height: 32px;\n border: 1px solid var(--line);\n background: #fff;\n border-radius: 8px;\n font-size: 20px;\n line-height: 30px;\n cursor: pointer;\n }\n\n .priv-modal .panel:focus {\n outline: 2px solid #000;\n outline-offset: 4px;\n }\n\n .cookie-gate {\n position: fixed;\n inset: 0;\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 2147483645;\n background: rgba(17, 22, 30, 0.34);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n padding: 20px;\n pointer-events: auto;\n }\n\n .cookie-gate.open {\n display: flex;\n }\n\n .cookie-gate-card {\n width: min(560px, 94vw);\n background: #fff;\n border: 1px solid var(--line);\n border-radius: 14px;\n box-shadow: 0 22px 48px rgba(0, 0, 0, 0.25);\n padding: 22px;\n text-align: left;\n }\n\n .cookie-gate-card h3 {\n margin: 0 0 8px;\n font-family: var(--font-serif);\n font-size: 23px;\n color: #12151d;\n }\n\n .cookie-gate-card p {\n margin: 0;\n color: #3f4853;\n line-height: 1.6;\n font-size: 14px;\n }\n\n .cookie-gate-actions {\n margin-top: 16px;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .cookie-gate-actions button {\n height: 38px;\n border-radius: 8px;\n padding: 0 14px;\n border: 1px solid var(--line);\n cursor: pointer;\n font-size: 13px;\n font-weight: 600;\n }\n\n .cookie-gate-actions button.primary {\n background: #101010;\n color: #fff;\n border-color: #101010;\n }\n\n .cookie-gate-actions button.ghost {\n background: #fff;\n color: #1b2430;\n }\n\n\n \/* ===== SUBSCRIBE \u2014 Editorial Modern (aligned row) ===== *\/\n #subscribe {\n --ink: var(--ink, #222);\n --muted: var(--muted, #6b6b6b);\n --line: var(--line, rgba(0, 0, 0, .22));\n --ivory: var(--ivory, #f7f4ee);\n\n background: #fff;\n color: var(--ink);\n padding: clamp(56px, 7vw, 96px) clamp(18px, 6vw, 72px);\n position: relative;\n }\n\n #subscribe .sub-wrap {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n }\n\n \/* garis atas & bawah (lebih tegas, full width konten) *\/\n #subscribe .sub-wrap::before,\n #subscribe .sub-wrap::after {\n content: \"\";\n display: block;\n height: 1px;\n width: 100%;\n background: currentColor;\n \/* solid, no gradient *\/\n opacity: .35;\n \/* bisa naikkan ke .45 jika ingin lebih tebal *\/\n }\n\n #subscribe .sub-wrap::before {\n margin-bottom: clamp(28px, 3vw, 44px);\n }\n\n #subscribe .sub-wrap::after {\n margin-top: clamp(28px, 3vw, 44px);\n }\n\n \/* headline besar *\/\n #subscribe .sub-head {\n margin-bottom: clamp(8px, 2vw, 14px);\n }\n\n #subscribe .display {\n font-family: \"Spectral\", serif;\n font-weight: 700;\n letter-spacing: -0.02em;\n font-size: clamp(36px, 6vw, 72px);\n line-height: 1.08;\n margin: 0;\n }\n\n \/* BAR sejajar: lead (kiri) \u2014 form (kanan) *\/\n #subscribe .sub-bar {\n display: grid;\n grid-template-columns: 1fr minmax(360px, 520px);\n gap: clamp(18px, 3vw, 36px);\n align-items: end;\n \/* <\u2014 sejajarkan baseline bawah *\/\n }\n\n \/* lead kiri *\/\n #subscribe .lead {\n color: var(--muted);\n font-size: 15px;\n margin:\n 0;\n \/* rapih ke baseline *\/\n }\n\n \/* form kanan: underline input + tombol sejajar *\/\n #subscribe .sub-form {\n display:\n flex;\n align-items: flex-end;\n \/* <\u2014 sejajar bawah *\/\n gap: clamp(12px, 2vw, 18px);\n }\n\n #subscribe .field {\n flex: 1;\n display: flex;\n align-items: flex-end;\n gap: 10px;\n border-bottom: 1px solid var(--line);\n \/* garis input *\/\n padding-bottom: 10px;\n }\n\n #subscribe input[type=\"email\"] {\n flex: 1;\n background: transparent;\n border: 0;\n outline: 0;\n height: 40px;\n font-size: clamp(16px, 1.6vw, 18px);\n color: var(--ink);\n }\n\n #subscribe input::placeholder {\n color:\n #8b8b8b;\n }\n\n \/* tombol italic editorial *\/\n #subscribe .sub-btn {\n border: 1px solid var(--ink);\n background:\n transparent;\n color: var(--ink);\n font-family: \"Spectral\", serif;\n font-style: italic;\n font-weight: 600;\n font-size:\n clamp(14px, 1.4vw, 16px);\n padding: 10px 20px;\n height: 44px;\n \/* tingginya pas dengan input *\/\n line-height: 1;\n cursor:\n pointer;\n transition: background .25s ease, color .25s ease, opacity .25s ease;\n }\n\n #subscribe .sub-btn:hover {\n background: #111;\n color: #fff;\n }\n\n \/* feedback kecil *\/\n #subscribe .msg {\n margin-top: 10px;\n font-size: 13px;\n color:\n var(--muted);\n opacity: 0;\n transform: translateY(6px);\n transition: opacity .25s ease, transform .25s ease;\n }\n\n #subscribe .msg.show {\n opacity: 1;\n transform: none;\n }\n\n \/* responsive: bar jadi vertikal di mobile *\/\n @media (max-width: 780px) {\n #subscribe .sub-bar {\n grid-template-columns: 1fr;\n align-items: start;\n }\n\n #subscribe .sub-form {\n width: 100%;\n }\n }\n\n \/* tanpa radius *\/\n #subscribe,\n #subscribe * {\n border-radius: 0 !important;\n }\n\n \/* ===== Footer (THG style, dark, no radius) ===== *\/\n :root {\n \/* fallback kalau variabel belum ada *\/\n --footer-bg: var(--ink, #0f162a);\n --footer-ink: var(--ivory, #f6f7f9);\n --footer-muted: rgba(255, 255, 255, .75);\n --footer-line: rgba(255, 255, 255, .10);\n --footer-accent: #e6d6a8;\n }\n\n .site-footer {\n display: grid;\n grid-template-columns: 2fr 1.1fr 1.1fr 1fr;\n gap: clamp(18px, 2.5vw, 32px);\n padding: clamp(36px, 5vw, 60px) clamp(16px, 5vw, 56px);\n background: var(--footer-bg);\n color: var(--footer-ink);\n border-top: 1px solid var(--footer-line);\n \/* full lebar layar *\/\n left: 50% !important;\n right: 50% !important;\n \/* margin-left: -50vw !important;\n margin-right: -50vw !important; *\/\n box-sizing: border-box !important;\n }\n\n @media (max-width: 980px) {\n .site-footer {\n grid-template-columns: 1fr 1fr;\n }\n }\n\n @media (max-width: 640px) {\n .site-footer {\n grid-template-columns: 1fr;\n }\n }\n\n .site-footer h4 {\n font-family: var(--font-serif, \"Spectral\", serif);\n margin: 0 0 12px;\n color: var(--footer-ink);\n font-weight: 700;\n letter-spacing: .02em;\n }\n\n .f-col {\n min-width: 0;\n }\n\n .f-about {\n padding-right: clamp(0px, 2vw, 24px);\n }\n\n \/* FOOTER LOGOS \u2013 fix: pakai grid biar width kepasang *\/\n .f-logos {\n display: flex;\n align-items: center;\n gap: clamp(14px, 2vw, 24px);\n }\n\n .f-logos .logo-link,\n .f-logos .app-link {\n display: inline-block;\n line-height: 0;\n padding: 2px;\n border-radius: 6px;\n }\n\n \/* Kontainer gambar: grid satu sel, dua img menumpuk *\/\n .f-logos .logo-swap,\n .f-logos .img-wrap {\n display: grid;\n align-items: center;\n justify-items: start;\n \/* biar lebar ngikut natural *\/\n }\n\n \/* Gambar mengikuti tinggi 50px; lebar natural *\/\n .f-logos .logo-swap img,\n .f-logos .img-wrap img {\n grid-area: 1 \/ 1;\n max-height: 50px;\n width: auto;\n object-fit: contain;\n transition: opacity .25s ease;\n user-select: none;\n -webkit-user-drag: none;\n pointer-events: none;\n }\n\n \/* state default & hover (swap mono <-> color) *\/\n .f-logos img.color {\n opacity: 0;\n }\n\n .f-logos img.mono {\n opacity: 1;\n }\n\n .f-logos .logo-link:hover img.color,\n .f-logos .logo-link:focus-visible img.color,\n .f-logos .app-link:hover img.color,\n .f-logos .app-link:focus-visible img.color {\n opacity: 1;\n }\n\n .f-logos .logo-link:hover img.mono,\n .f-logos .logo-link:focus-visible img.mono,\n .f-logos .app-link:hover img.mono,\n .f-logos .app-link:focus-visible img.mono {\n opacity: 0;\n }\n\n \/* Ring fokus *\/\n .f-logos .logo-link:focus-visible,\n .f-logos .app-link:focus-visible {\n outline: 2px solid #0003;\n outline-offset: 2px;\n }\n\n .f-kicker {\n margin: 14px 0 18px;\n color: var(--footer-muted);\n line-height: 1.6;\n max-width: 44ch;\n }\n\n .f-stores {\n display: flex;\n gap: clamp(16px, 3vw, 36px);\n align-items: center;\n }\n\n .f-stores .store {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n color: var(--footer-ink);\n text-decoration: none;\n opacity: .9;\n }\n\n .f-stores .store i {\n font-size: 22px;\n }\n\n .f-stores .store:hover {\n opacity: 1;\n text-decoration: underline;\n text-underline-offset: 3px;\n }\n\n .f-list {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n .f-list li {\n margin: 8px 0;\n display: flex;\n gap: 8px;\n align-items: flex-start;\n }\n\n .f-list a {\n color: var(--footer-muted);\n text-decoration: none;\n }\n\n .f-list a:hover {\n color: var(--footer-ink);\n text-decoration: underline;\n text-underline-offset: 3px;\n }\n\n .journal-promo {\n margin-top: 18px;\n padding-top: 14px;\n border-top: 1px solid var(--footer-line);\n }\n\n .journal-promo .hint {\n margin: 0 0 8px;\n color: var(--footer-muted);\n font-size: 12px;\n letter-spacing: .06em;\n text-transform: uppercase;\n }\n\n .journal-promo .journal-link {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n color: var(--footer-ink);\n text-decoration: none;\n font-weight: 600;\n letter-spacing: .03em;\n border-bottom: 1px solid currentColor;\n padding-bottom: 2px;\n transition: color var(--motion-lux) var(--ease-lux), border-color var(--motion-lux) var(--ease-lux), transform var(--motion-lux) var(--ease-lux);\n }\n\n .journal-promo .journal-link:hover {\n color: #f1e5c8;\n border-color: rgba(241, 229, 200, 0.85);\n transform: translateY(-1px);\n }\n\n .f-small,\n .f-small a {\n color: var(--footer-muted);\n }\n\n .f-social {\n display: flex;\n gap: 12px;\n margin-top: 6px;\n }\n\n .f-social a {\n width: 38px;\n height: 38px;\n display: grid;\n place-items: center;\n background: transparent;\n border: 1px solid var(--footer-line);\n color: var(--footer-ink);\n transition: .2s;\n }\n\n .f-social a:hover {\n background: var(--footer-ink);\n color: var(--footer-bg);\n }\n\n \/* Sembunyikan link\/icon TripAdvisor di footer social *\/\n .f-social a[title*=\"tripadvisor\" i] {\n display: none !important;\n }\n\n .f-bottom {\n grid-column: 1 \/ -1;\n text-align: center;\n margin-top: clamp(16px, 3vw, 24px);\n padding-top: clamp(12px, 2vw, 18px);\n border-top: 1px solid var(--footer-line);\n color: var(--footer-muted);\n font-size: 13px;\n }\n\n \/* Hapus radius global di komponen footer *\/\n .site-footer,\n .site-footer * {\n border-radius: 0 !important;\n }\n\n\n \/* Responsive hero spacing tuning *\/\n @media (max-width: 760px) {\n .hero-inner {\n padding-bottom: 130px;\n }\n\n .field {\n border-right: none;\n border-bottom: 1px solid var(--line);\n }\n\n .field:last-of-type {\n border-bottom: none;\n }\n\n .book {\n min-height: 48px;\n }\n }\n\n \/* Buttons font enforcement *\/\n button,\n .book,\n .apply,\n .cta {\n font-family:\n var(--font-sans) !important;\n }\n\n \/* Fix nav layout overrides *\/\n .header {\n display: flex !important;\n align-items:\n center;\n justify-content: space-between;\n padding: 0 clamp(16px, 4vw, 56px);\n height: var(--nav-h);\n }\n\n .logo img,\n .corp-logo {\n height: var(--nav-logo-h) !important;\n object-fit: contain;\n display: block;\n }\n\n .nav-right {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .corp-logo {\n max-height: var(--nav-logo-h);\n }\n\n .header.scrolled {\n background: #fff;\n color:\n var(--ink);\n box-shadow: var(--shadow-1);\n border-color: var(--line);\n }\n\n .hero .poster {\n opacity: 1;\n transition:\n opacity 0.6s ease;\n will-change: opacity, transform;\n }\n\n .hero.ready .poster {\n opacity: 0;\n }\n\n \/* Navbar fix (alpha) *\/\n .header {\n background: rgba(255, 255, 255, var(--nav-alpha));\n backdrop-filter: blur(calc(var(--nav-alpha) * 16px));\n border-bottom: 1px solid rgba(232, 232, 232, var(--nav-alpha));\n transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;\n }\n\n .header.scrolled {\n background: #fff;\n border-bottom: 1px solid #e8e8e8;\n color: #111;\n }\n\n \/* Booking Bar *\/\n .booking-wrap {\n position: absolute;\n top: 120px;\n left: 50%;\n transform: translateX(-50%);\n display:\n flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #e8e8e8;\n box-shadow:\n 0 6px 18px rgba(0, 0, 0, 0.08);\n max-width: 1080px;\n width: calc(100% - 80px);\n border-radius: 15px;\n padding: 8px 16px;\n z-index: 5;\n }\n\n .booking-bar {\n display: flex;\n flex: 1;\n }\n\n .field {\n display: flex;\n flex-direction: column;\n align-items:\n flex-start;\n gap: 4px;\n padding: 8px 12px;\n position: relative;\n border-right: none !important;\n }\n\n .field .top {\n display:\n flex;\n align-items: center;\n gap: 6px;\n }\n\n .field .ico {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none !important;\n }\n\n .field .nights,\n .field .label {\n font-size: 12px;\n text-transform:\n uppercase;\n letter-spacing: 0.08em;\n color: #8a8a8a;\n line-height: 1;\n margin-top: 3px;\n }\n\n .field .value,\n .field .counter {\n font-size: 16px;\n font-weight: 700;\n color: #111;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .field .value,\n .field .counter output {\n font-size: 16px;\n font-weight: 700;\n color: #111;\n line-height: 1;\n }\n\n .counter {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .counter button {\n font-size: 20px;\n font-weight: 500;\n border: none;\n background:\n none;\n width: 26px;\n height: 26px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n\n .counter button:hover {\n background: rgba(142, 141, 141, 0.2);\n border-radius: 50%;\n }\n\n .counter button img {\n width:\n 10px;\n height: 10px;\n }\n\n .counter output {\n min-width: 20px;\n text-align: center;\n font-weight: 700;\n font-size: 16px;\n }\n\n .field::after {\n content: \"\";\n position: absolute;\n top: 20%;\n bottom: 20%;\n right: 20%;\n width: 1px;\n background-image:\n repeating-linear-gradient(to bottom, #928e8e 0, #928e8e 6px, transparent 6px, transparent 12px);\n }\n\n .field:last-of-type::after {\n display: none;\n }\n\n .book {\n background: #cccaca;\n color: #fff;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n border-radius: 35px;\n min-width: 200px;\n height:\n 40px;\n margin: 0 0 0 20px;\n cursor: pointer;\n transition: all 0.25s ease;\n }\n\n .book:hover {\n background: #000;\n color:\n #fff;\n }\n\n @media (max-width: 991px) and (min-width: 768px) {\n .booking-wrap {\n position: absolute;\n top: auto;\n bottom:\n 30px;\n transform: translateX(-50%);\n width: 92%;\n border-radius: 12px;\n flex-direction: column;\n padding: 14px;\n }\n\n .booking-bar {\n width: 100%;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n\n .book {\n width: 100%;\n margin:\n 12px 0 0 0;\n border-radius: 8px;\n height: 44px;\n }\n }\n\n @media (max-width: 767px) {\n .booking-wrap {\n position: relative;\n top: auto;\n bottom: auto;\n transform: none;\n margin: 12px auto 0;\n width: 94%;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n flex-direction: column;\n padding: 10px;\n }\n\n .booking-bar {\n flex-direction: column;\n width:\n 100%;\n }\n\n .field {\n width: 100%;\n border-bottom: 1px solid #eaeaea;\n }\n\n .field:last-of-type {\n border-bottom: none;\n }\n\n .field::after {\n display: none;\n }\n\n .book {\n width: 100%;\n margin: 12px 0 0;\n border-radius: 6px;\n height: 48px;\n }\n\n \/* Mobile: buat Book Now lebih kontras agar terlihat aktif *\/\n #mobileBookBtn {\n background: #111 !important;\n color: #fff !important;\n border: 1px solid #111 !important;\n box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);\n }\n\n #mobileBookBtn:active {\n background: #000 !important;\n transform: translateY(1px);\n box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);\n }\n\n #mobileBookBtn:focus-visible {\n outline: 2px solid #111;\n outline-offset: 2px;\n }\n }\n\n \/* ==== BOOKING BAR: kembalikan kartu putihnya ==== *\/\n .booking-wrap {\n background: #fff !important;\n \/* kartu tetap putih *\/\n border: 1px solid #e8e8e8 !important;\n box-shadow: 0 6px 18px rgba(0, 0, 0, .08) !important;\n }\n\n \/* ==== Hapus abu-abu di area klik (tanggal) saja ==== *\/\n .booking-bar .field,\n .booking-bar button.field {\n -webkit-appearance: none;\n appearance: none;\n background: transparent !important;\n \/* hilangkan abu *\/\n border: 0 !important;\n box-shadow: none !important;\n padding: 8px 12px;\n \/* jaga spacing *\/\n border-radius: 10px;\n \/* biar hover\/focus rapi *\/\n }\n\n \/* Hover\/focus yang halus & accessible *\/\n .booking-bar button.field:hover {\n background: rgba(0, 0, 0, .04);\n }\n\n .booking-bar button.field:focus-visible {\n outline: 2px solid #111;\n outline-offset: 2px;\n }\n\n \/* Pastikan teks di dalam tetap tegas *\/\n .booking-bar .value,\n .booking-bar .nights,\n .booking-bar .label {\n color: #111 !important;\n }\n\n\n \/*\n Hero text *\/\n .hero-inner {\n position: absolute;\n bottom: 90px;\n left: 750px;\n transform: translateX(-50%);\n z-index: 2;\n text-align: center;\n max-width: 850px;\n width: 100%;\n padding: 0 16px;\n }\n\n .kicker {\n display: flex;\n justify-content:\n center;\n gap: 30px;\n font-size: 18px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: #fff;\n text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);\n opacity: 0.9;\n margin-bottom: 10px;\n margin-left: 30px;\n }\n\n .headline {\n color: #fff;\n font-family: var(--font-serif);\n font-weight: 500;\n font-size: clamp(18px, 20vw, 35px);\n line-height: 1.2;\n font-style:\n italic;\n text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);\n }\n\n @media (max-width: 768px) {\n .hero-inner {\n bottom: 35px;\n max-width: 700px;\n }\n\n .kicker {\n font-size: 10px;\n letter-spacing: 0.15em;\n }\n\n .headline {\n font-size: clamp(20px, 25vw,\n 30px);\n line-height: 1.15;\n }\n }\n\n @media (max-width: 480px) {\n .hero-inner {\n bottom: 28px;\n max-width: 90%;\n }\n\n .kicker {\n font-size: 10px;\n letter-spacing: 0.12em;\n }\n\n .headline {\n font-size: 20px;\n line-height: 1.2;\n }\n }\n\n #dateRangeBtn {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 8px 12px;\n flex: 2;\n min-width: 280px;\n }\n\n #dateRangeBtn .top {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-bottom: 6px;\n }\n\n #dateRangeBtn .ico {\n width: 22px;\n height: 22px;\n }\n\n #dateRangeBtn .nights {\n font-size: 12px;\n text-transform:\n uppercase;\n letter-spacing: 0.08em;\n color: #8a8a8a;\n }\n\n #dateRangeBtn .value {\n font-size: 16px;\n font-weight: 700;\n color: #111;\n }\n\n .field[aria-label=\"Rooms\"],\n .field[aria-label=\"Guests\"] {\n flex: 1;\n min-width: 160px;\n }\n\n \/* Swap logo\n putih\/warna utk THJ (brand utama) *\/\n \/* FIX: beri lebar ke container logo utama *\/\n .brand-swap {\n position: relative;\n display: inline-block;\n height: var(--nav-logo-h);\n width: clamp(120px, 12vw, 180px);\n \/* bebas: bisa 140px juga *\/\n }\n\n \/* Pastikan img mengisi container *\/\n .brand-swap .brand {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: contain;\n transition: opacity .25s ease;\n }\n\n .brand-swap .white {\n opacity: 1;\n }\n\n .brand-swap .color {\n opacity: 0;\n }\n\n \/* Saat header sudah\n scroll \u2192 pakai logo berwarna *\/\n .header.scrolled .brand-swap .white {\n opacity: 0;\n }\n\n .header.scrolled .brand-swap .color {\n opacity: 1;\n }\n\n \/* HOVER swap (baru) *\/\n .logo:hover .brand-swap .white {\n opacity: 0;\n }\n\n .logo:hover .brand-swap .color {\n opacity: 1;\n }\n\n \/* Signatures *\/\n #signatures {\n background-color: #fff !important;\n text-align: center;\n margin: 0 auto;\n }\n\n #signatures h2 {\n font-family: \"Spectral\", serif;\n font-style: italic;\n font-weight: 700;\n letter-spacing: -.02em;\n font-size: clamp(32px, 5vw, 56px);\n line-height: 1.06;\n text-align: center;\n margin: 0 0 6px;\n }\n\n #signatures .lead {\n font-size: 15px;\n color: #666;\n margin:\n 0 auto 40px;\n max-width: 640px;\n margin-bottom: 70px;\n }\n\n .sig-grid {\n display: flex;\n flex-direction: column;\n gap: 0.5px;\n }\n\n .sig-row-3 {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n border-bottom: 1px solid #dad9d9;\n }\n\n .sig-row-3 .sig:nth-child(1),\n .sig-row-3 .sig:nth-child(2) {\n border-right: 1px solid #dad9d9;\n }\n\n .sig-row-3 .sig:nth-child(3) {\n border-right: none;\n }\n\n .sig-row-2 {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n justify-content: center;\n max-width: 66%;\n margin: 0 auto;\n }\n\n .sig-row-2 .sig:first-child {\n border-right: 1px solid #dad9d9;\n }\n\n .sig-row-2 .sig:last-child {\n border-right: none;\n }\n\n .sig {\n display: flex;\n gap: 16px;\n padding: 28px 32px;\n align-items:\n flex-start;\n text-align: left;\n border: none;\n border-radius: 0;\n }\n\n .sig img.ico {\n width: 44px;\n height: 44px;\n margin-top: 4px;\n }\n\n .integrated img.ico {\n width: 90px;\n height: 40px;\n margin-top: 4px;\n }\n\n .sig h3 {\n font-family: var(--font-sans);\n font-weight: 700;\n font-size: 16px;\n margin: 0 0 6px;\n }\n\n .sig p {\n font-size: 14px;\n color: #555;\n margin: 0;\n line-height: 1.5;\n }\n\n @media (max-width: 768px) {\n\n .sig-row-3,\n .sig-row-2 {\n grid-template-columns: 1fr;\n max-width: 100%;\n }\n\n .sig {\n border-right: none !important;\n border-bottom: 1px solid #dad9d9;\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n .sig:last-child {\n border-bottom:\n none;\n }\n\n .integrated img.ico {\n width: 40px;\n height: 45px;\n margin-top: 4px;\n }\n }\n\n \/*=====SIGNATURES \u2014 Motion Pelan & Elegan (BARU)=====*\/\n #signatures .sig,\n #signatures h2,\n #signatures .lead {\n opacity: 0;\n transform: translateY(22px) scale(0.985);\n filter: blur(6px);\n transition: opacity 1000ms cubic-bezier(0.22, 0.9, 0.25, 1), transform 1000ms cubic-bezier(0.22, 0.9, 0.25, 1), filter 1000ms ease;\n transition-delay: var(--delay, 0ms);\n will-change: opacity, transform, filter;\n }\n\n \/* masuk viewport *\/\n #signatures .in {\n opacity: 1;\n transform: translateY(0) scale(1);\n filter: blur(0);\n }\n\n \/* keluar viewport *\/\n #signatures .out {\n opacity: 0;\n transform: translateY(18px) scale(0.985);\n filter: blur(6px);\n }\n\n \/* efek saat meninggalkan section *\/\n #signatures.section-leaving .sig img.ico {\n filter: grayscale(0.35) saturate(0.92) contrast(0.98);\n transform:\n translateY(6px) scale(0.98);\n transition: transform 700ms ease, filter 700ms ease;\n opacity: 0.95;\n }\n\n \/* opsional:\n pelembut transisi saat aktif *\/\n #signatures.section-active .sig {\n transition-duration: 1100ms;\n }\n\n \/* tetap tanpa\n radius *\/\n #signatures .sig,\n #signatures img.ico {\n border-radius: 0;\n }\n\n \/* responsif: animasi tetap pelan *\/\n @media (max-width: 768px) {\n\n #signatures .sig,\n #signatures h2,\n #signatures .lead {\n transition-duration: 900ms;\n }\n }\n\n \/*\n accessibility *\/\n @media (prefers-reduced-motion: reduce) {\n\n #signatures .sig,\n #signatures h2,\n #signatures .lead,\n #signatures.section-leaving .sig img.ico {\n transition: none !important;\n transform: none !important;\n filter: none !important;\n opacity: 1 !important;\n }\n }\n\n \/* Safety: kalau JS\/IO gagal, jangan stuck transparan *\/\n .no-io .reveal,\n .no-io #signatures .sig,\n .no-io #signatures h2,\n .no-io #signatures .lead {\n opacity: 1 !important;\n transform: none !important;\n filter: none !important;\n }\n\n \/* Meetings Section *\/\n #meetings {\n background: var(--ivory);\n text-align: center;\n position: relative;\n }\n\n #meetings .section-title {\n font-family: \"Spectral\", serif;\n font-style: italic;\n font-weight: 700;\n letter-spacing: -.02em;\n font-size: clamp(32px, 5vw, 56px);\n line-height: 1.06;\n text-align: center;\n margin: 0 0 6px;\n }\n\n #meetings .section-subtitle {\n color:\n #777;\n font-size: 15px;\n font-family: var(--font-sans);\n margin-bottom: 100px;\n }\n\n \/* Image wrapper *\/\n .venue-image-wrap {\n position: relative;\n width: 50%;\n }\n\n .venue-row.visible .venue-image-wrap img {\n opacity: 1;\n transform: translateX(0);\n }\n\n \/* Animation delay & reveal *\/\n .reveal.visible .venue-image-wrap img {\n animation: fadeSlideFromLine 1s ease forwards;\n }\n\n @keyframes fadeSlideFromLine {\n from {\n opacity: 0;\n transform: translateX(40px);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n \/* Responsive *\/\n @media (max-width: 900px) {\n .venue-row {\n flex-direction: column;\n text-align: center;\n }\n\n .venue-image-wrap,\n .venue-text {\n width: 100%;\n }\n\n .vline {\n display: none;\n }\n }\n\n \/*===Garis\n Vertikal Independen===*\/\n .vline {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 1px;\n background: rgba(0, 0, 0,\n 0.25);\n transform: scaleY(0);\n transform-origin: bottom;\n transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);\n }\n\n \/* Ballroom (gambar kiri, garis kanan) *\/\n .venue-row.left .venue-image-wrap img {\n transform: translateX(-40px);\n }\n\n .venue-row.left .vline {\n right: -25px;\n left: auto;\n }\n\n \/* Boardroom (gambar kanan, garis kiri) *\/\n .venue-row.right .venue-image-wrap img {\n transform: translateX(40px);\n }\n\n .venue-row.right .vline {\n left: -25px;\n right: auto;\n }\n\n \/*===Gambar Keluar dari Garis===*\/\n .venue-image-wrap img {\n width: 100%;\n height: auto;\n display: block;\n opacity: 0;\n transform: translateX(0);\n transition: all 0.9s cubic-bezier(0.23, 1, 0.32, 1);\n }\n\n \/*===TEKS MUNCUL TERAKHIR===*\/\n .venue-text {\n width: 40%;\n font-family: var(--font-sans);\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.7s ease-out;\n }\n\n .venue-row.visible .venue-text {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 0.55s;\n \/*\n muncul setelah gambar *\/\n }\n\n \/*===Heading & Body===*\/\n .venue-text h3 {\n font-weight: 700;\n font-size: 18px;\n letter-spacing: 0.02em;\n margin-bottom: 10px;\n }\n\n .venue-text p {\n color: #555;\n font-size: 14px;\n margin-bottom: 14px;\n line-height: 1.6;\n }\n\n \/*===Tombol===*\/\n .learn-more {\n border: none;\n background: none;\n font-weight: 700;\n font-size:\n 13px;\n text-transform: uppercase;\n text-decoration: underline;\n cursor: pointer;\n transition: color 0.3s ease;\n }\n\n .learn-more:hover {\n color: var(--accent);\n }\n\n \/*===HAPUS GARIS PANJANG & GANTI GARIS PER GAMBAR===*\/\n #meetings::before {\n display: none !important;\n }\n\n \/* Kecilkan gambar agar garis kiri\/kanan bisa sejajar di tengah *\/\n .venue-image-wrap {\n width: 42%;\n position: relative;\n }\n\n \/* Buat garis di sisi gambar *\/\n .vline {\n position: absolute;\n top: 50%;\n height:\n 100%;\n width: 1px;\n background: rgba(0, 0, 0, 0.25);\n transform: translateY(-50%) scaleY(0);\n transform-origin: center;\n transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);\n }\n\n \/* Ballroom (garis kanan gambar kiri) *\/\n .venue-row.left .vline {\n right: -25px;\n }\n\n \/* Boardroom (garis kiri gambar kanan) *\/\n .venue-row.right .vline {\n left:\n -25px;\n }\n\n \/* Saat muncul di layar *\/\n .venue-row.visible .vline {\n transform: translateY(-50%) scaleY(1);\n }\n\n \/*===MODAL\n BASE===*\/\n .venue-modal {\n position: fixed;\n inset: 0;\n display: none;\n justify-content: center;\n align-items: center;\n z-index: 4000;\n overflow-y: auto;\n }\n\n .venue-modal.open {\n display: flex;\n animation:\n modalFadeIn 0.45s ease forwards;\n }\n\n .venue-modal.closing {\n animation: modalFadeOut 0.4s ease forwards;\n }\n\n \/*\n Background image *\/\n .modal-bg {\n position: absolute;\n inset: 0;\n background-size: cover;\n background-position: center;\n filter: brightness(0.55);\n z-index: 0;\n }\n\n \/*===GLASS PANEL===*\/\n .modal-panel.glass {\n position: relative;\n max-width: 760px;\n width: 90%;\n padding: 60px 50px;\n border-radius: 0;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter:\n blur(14px);\n box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);\n color: #fff;\n z-index: 2;\n text-align: left;\n animation: slideUp 0.45s ease forwards;\n }\n\n .modal-panel.glass.closing {\n animation: slideDown 0.4s ease forwards;\n }\n\n \/* Close button *\/\n .modal-panel .close {\n position: absolute;\n top: 20px;\n right: 24px;\n background: none;\n border: none;\n font-size: 32px;\n color: #fff;\n cursor: pointer;\n transition: opacity 0.3s;\n }\n\n .modal-panel .close:hover {\n opacity: 0.6;\n }\n\n \/* Text *\/\n .modal-panel h3 {\n font-family: \"Spectral\", serif;\n font-size: 26px;\n font-weight: 600;\n margin-bottom: 12px;\n }\n\n .modal-panel p {\n font-family: \"Montserrat\", sans-serif;\n font-size: 15px;\n line-height: 1.6;\n margin-bottom: 20px;\n color: #fff;\n }\n\n .details {\n list-style: none;\n padding: 0;\n margin-bottom: 24px;\n }\n\n .modal-panel img {\n width: 100%;\n border-radius: 0;\n opacity: 0.9;\n }\n\n \/*===ANIMATIONS===*\/\n @keyframes modalFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n @keyframes modalFadeOut {\n to {\n opacity: 0;\n visibility: hidden;\n }\n }\n\n @keyframes slideUp {\n from {\n transform: translateY(40px);\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n @keyframes slideDown {\n from {\n transform: translateY(0);\n opacity: 1;\n }\n\n to {\n transform: translateY(60px);\n opacity: 0;\n }\n }\n\n \/* === REQUEST FORM BUTTON (CTA) === *\/\n .modal-cta-wrap {\n margin-top: 28px;\n text-align: center;\n }\n\n .open-req {\n background: #111;\n color: #fff;\n border: 1px solid #111;\n padding: 12px 26px;\n font-family: \"Montserrat\", sans-serif;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n transition: all 0.3s ease;\n cursor: pointer;\n border-radius: 0;\n }\n\n .open-req:hover {\n background: transparent;\n color: #111;\n }\n\n\n \/*=====VENUE MODAL\n \u2014 Request Form only=====*\/\n \/* Container: biar bisa scroll tinggi, dan ada padding atas-bawah *\/\n .venue-modal {\n position: fixed;\n inset: 0;\n display: none;\n justify-content: center;\n align-items: flex-start;\n \/* <\u2014 penting: panel\n start dari atas *\/\n padding: 6vh 24px;\n \/* ruang napas di atas & bawah *\/\n z-index: 3000;\n overflow-y: auto;\n }\n\n \/* Blur\n background harus selalu full viewport (ikut scroll) *\/\n .venue-modal .modal-bg {\n position: fixed;\n \/* <\u2014 ganti\n absolute \u2192 fixed *\/\n inset: 0;\n background-size: cover;\n background-position: center;\n filter: brightness(0.45) blur(3px);\n \/* sedikit lebih gelap agar teks terbaca *\/\n transform: none;\n z-index: 0;\n }\n\n \/* Panel putih solid *\/\n .venue-modal .modal-panel {\n position: relative;\n z-index: 2;\n width: min(92vw, 860px);\n background: rgba(255, 255, 255, .98);\n \/* lebih solid agar kontras *\/\n padding: clamp(28px, 3.5vw, 60px);\n text-align:\n left;\n border-radius: 0 !important;\n box-shadow: 0 20px 60px rgba(0, 0, 0, .22);\n max-height: none !important;\n }\n\n \/* close *\/\n .venue-modal .close {\n position: absolute;\n top: 18px;\n right: 22px;\n background: none;\n border: 0;\n font-size: 28px;\n cursor: pointer;\n color:\n #222;\n }\n\n \/* === FLOATING CLOSE BUTTON === *\/\n .venue-modal.open .close {\n position: fixed !important;\n top: 14px !important;\n right: 14px !important;\n z-index: 4 !important;\n line-height: 1;\n padding: 6px 10px;\n background: rgba(255, 255, 255, 0.9);\n border: 1px solid rgba(0, 0, 0, .12);\n border-radius: 999px;\n transition: background .2s, color .2s;\n }\n\n .venue-modal.open .close:hover {\n opacity: .8;\n background-color: #000;\n color: #fff;\n }\n\n\n \/* Hairline pemisah *\/\n .req-hair {\n height: 1px;\n background: rgba(0, 0, 0, .18);\n width: 100%;\n margin: 10px 0 16px;\n }\n\n \/* GRID form *\/\n .req-form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n }\n\n .req-form input,\n .req-form select,\n .req-form textarea {\n width: 100%;\n border: 1px solid rgba(0, 0, 0, .18);\n padding: 12px;\n font-size:\n 14px;\n background: #fff;\n border-radius: 0 !important;\n }\n\n .req-form textarea {\n min-height: 120px;\n resize: vertical;\n }\n\n .req-form .full {\n grid-column: 1 \/ -1;\n }\n\n .select-wrap {\n position: relative;\n }\n\n .select-wrap select {\n appearance:\n none;\n -webkit-appearance: none;\n padding-right: 42px;\n background: #fff;\n }\n\n .select-wrap::after {\n content: \"\\f107\";\n font-family: \"Font Awesome 6 Free\", sans-serif;\n font-weight: 900;\n position: absolute;\n right: 12px;\n top: 50%;\n transform:\n translateY(-50%);\n color: #666;\n pointer-events: none;\n }\n\n .consent {\n display: flex;\n gap: 10px;\n align-items: flex-start;\n font-size: 13px;\n color: #3b3f45;\n }\n\n .consent input {\n width: 18px;\n height: 18px;\n accent-color: #111;\n margin-top: 2px;\n }\n\n .row-actions {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n margin-top: 8px;\n }\n\n .row-actions .left {\n color: #6f747b;\n font-size: 12px;\n }\n\n .row-actions .primary {\n height: 44px;\n padding: 0 16px;\n background: #111;\n color: #fff;\n border: 1px solid #111;\n }\n\n @media (max-width: 760px) {\n .req-form {\n grid-template-columns: 1fr;\n }\n\n .row-actions {\n flex-direction: column;\n align-items: stretch;\n }\n }\n\n \/* animasi buka\/tutup\n tetap *\/\n .venue-modal.open {\n display: flex;\n animation: fadeIn .35s ease both;\n }\n\n .venue-modal.closing {\n animation:\n fadeOut .25s ease both;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0\n }\n\n to {\n opacity: 1\n }\n }\n\n @keyframes fadeOut {\n to {\n opacity: 0;\n visibility: hidden\n }\n }\n\n .proposal-toggle i {\n transition: transform .25s ease;\n }\n\n .proposal-toggle.is-open i {\n transform: rotate(180deg);\n }\n\n .venue-modal {\n position: fixed;\n inset: 0;\n display: none;\n place-items: center;\n z-index: 3000;\n overflow-y: auto !important;\n \/* biar bisa scroll konten modal *\/\n -webkit-overflow-scrolling: touch !important;\n \/* biar lancar di iPhone\/iPad *\/\n overscroll-behavior: contain;\n touch-action: pan-y;\n }\n\n .venue-modal.open {\n display: grid;\n }\n\n .proposal-toggle i {\n transition: transform .25s ease;\n }\n\n .proposal-toggle.is-open i {\n transform: rotate(180deg);\n }\n\n .venue-modal [hidden] {\n display: none !important;\n }\n\n \/*\n Hormati atribut hidden meski elemennya grid\/flex *\/\n .venue-modal [hidden] {\n display: none !important;\n }\n\n \/* Gaya\n tombol simpel, modern, tanpa radius *\/\n .open-req {\n height: 44px;\n padding: 0 16px;\n border: 1px solid #111;\n background: transparent;\n color: #111;\n letter-spacing: .02em;\n cursor: pointer;\n border-radius: 0 !important;\n transition: background .2s ease, color .2s ease;\n }\n\n .open-req:hover {\n background: #111;\n color: #fff;\n }\n\n \/* ==========================================\n 5\u2605 HOTEL EVENT REQUEST FORM \u2014 LUXE MODERN UI\n ========================================== *\/\n\n .req-form {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 12000;\n background: rgba(0, 0, 0, 0.65);\n backdrop-filter: blur(10px) saturate(140%);\n -webkit-backdrop-filter: blur(10px) saturate(140%);\n animation: fadeIn 0.3s ease both;\n padding: 24px;\n overflow-y: auto;\n }\n\n \/* === FORM CONTAINER === *\/\n .req-form form {\n background: #fff;\n width: 100%;\n max-width: 520px;\n border-radius: 14px;\n padding: clamp(36px, 4vw, 56px);\n font-family: var(--font-sans);\n box-shadow: 0 12px 50px rgba(0, 0, 0, 0.25);\n position: relative;\n overflow: hidden;\n border: 1px solid rgba(230, 230, 230, 0.8);\n transform: translateY(-4%);\n }\n\n \/* === DECORATIVE TOP BORDER === *\/\n .req-form form::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 4px;\n background: linear-gradient(90deg, #c1a45f 0%, #000 100%);\n }\n\n \/* === CLOSE BUTTON === *\/\n .req-form .close-popup {\n position: absolute;\n top: 18px;\n right: 20px;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n border: none;\n background: #111;\n color: #fff;\n font-size: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n opacity: 0.9;\n transition: all 0.25s ease;\n }\n\n .req-form .close-popup:hover {\n opacity: 1;\n background: #fff;\n color: #111;\n }\n\n \/* === HEADER === *\/\n .req-form h3 {\n font-family: \"Spectral\", serif;\n text-transform: uppercase;\n font-weight: 700;\n font-size: clamp(22px, 2.4vw, 28px);\n letter-spacing: 0.05em;\n color: #fff;\n margin-bottom: 8px;\n }\n\n .req-form p.sub {\n color: #ffffffe0;\n font-size: 15px;\n line-height: 1.7;\n margin-bottom: 28px;\n }\n\n \/* === INPUTS === *\/\n .req-form input,\n .req-form select,\n .req-form textarea {\n width: 100%;\n border: 1px solid rgba(0, 0, 0, 0.15);\n background: #fff;\n padding: 13px 15px;\n font-size: 15px;\n line-height: 1.6;\n margin-bottom: 18px;\n border-radius: 6px;\n color: #111;\n transition: all 0.25s ease;\n }\n\n .req-form input::placeholder,\n .req-form textarea::placeholder {\n color: #999;\n font-family: var(--font-sans);\n }\n\n .req-form input:focus,\n .req-form select:focus,\n .req-form textarea:focus {\n border-color: #c1a45f;\n box-shadow: 0 0 0 3px rgba(193, 164, 95, 0.15);\n outline: none;\n }\n\n .req-form textarea {\n min-height: 110px;\n resize: vertical;\n }\n\n \/* === CONSENT === *\/\n .req-form .consent {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n font-size: 13px;\n color: #ffffffe0;\n line-height: 1.5;\n margin-bottom: 24px;\n }\n\n .req-form .consent input {\n accent-color: #111;\n width: 16px;\n height: 16px;\n margin-top: 3px;\n }\n\n \/* === BUTTON === *\/\n .req-form .primary {\n display: block;\n width: 100%;\n background: #111;\n color: #fff;\n border: 1px solid #111;\n padding: 15px 20px;\n font-weight: 700;\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n cursor: pointer;\n border-radius: 6px;\n transition: all 0.3s ease;\n }\n\n .req-form .primary:hover {\n background: #fff;\n color: #111;\n }\n\n \/* === ANIMATIONS === *\/\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n \/* === RESPONSIVE TWEAK === *\/\n @media (max-width: 480px) {\n .req-form form {\n padding: 32px 24px;\n border-radius: 10px;\n }\n\n .req-form h3 {\n font-size: 20px;\n }\n }\n\n\n \/*=====DESTINATION \u2014 Editorial Modern (no card, no radius)=====*\/\n #nearby {\n background: #fff;\n color: #1f1f1f;\n }\n\n \/* Heading *\/\n #nearby h2 {\n font-family: \"Spectral\", serif;\n font-style: italic;\n font-weight: 700;\n letter-spacing: -.02em;\n font-size: clamp(32px, 5vw, 56px);\n line-height: 1.06;\n text-align: center;\n margin: 0 0 6px;\n }\n\n #nearby .lead {\n text-align: center;\n color: #7a7a7a;\n font-size: 15px;\n max-width: 720px;\n margin: 0 auto clamp(36px, 4vw, 56px);\n }\n\n \/* Grid 2 kolom + hairline tengah *\/\n #nearby .dest-grid {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap:\n clamp(24px, 3.5vw, 36px);\n }\n\n #nearby .dest-grid::before {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left:\n 50%;\n width: 1px;\n background: rgba(0, 0, 0, .12);\n transform: translateX(-.5px);\n pointer-events: none;\n }\n\n @media (max-width:880px) {\n #nearby .dest-grid {\n grid-template-columns: 1fr;\n }\n\n #nearby .dest-grid::before {\n display: none;\n }\n }\n\n \/*=====Item (bukan card)=====*\/\n .dest-item {\n display: grid;\n grid-template-rows: auto auto;\n gap: 18px;\n }\n\n \/* Media \u2014\n seragam, tanpa radius, hairline bawah *\/\n .dest-item .media {\n position: relative;\n overflow: hidden;\n background: #eee;\n border: none;\n box-shadow: none;\n height: clamp(260px, 34vw, 420px);\n \/* samakan tinggi antar gambar *\/\n }\n\n .dest-item .media img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n transform: scale(1.005);\n transition: transform 700ms cubic-bezier(.19, 1, .22, 1), filter .4s ease;\n }\n\n .dest-item .media::after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 1px;\n background: rgba(0, 0,\n 0, .22);\n }\n\n .dest-item:hover .media img {\n transform: scale(1.02);\n filter: contrast(1.04) saturate(1.02);\n }\n\n \/* Copy *\/\n .dest-item .copy {\n text-align: center;\n padding: 0 6px;\n }\n\n .dest-item .copy h3 {\n font-weight: 800;\n letter-spacing:\n .01em;\n margin: 0 0 8px;\n font-size: clamp(18px, 1.8vw, 22px);\n color: #1f1f1f;\n }\n\n .dest-item .copy p {\n color: #5a5a5a;\n font-size: 14px;\n line-height: 1.7;\n max-width: 480px;\n margin: 0 auto 14px;\n }\n\n \/* CTA underline ala Meetings *\/\n .dest-item .cta {\n display: inline-block;\n font-size: 12px;\n font-weight: 800;\n text-transform: uppercase;\n letter-spacing: .08em;\n color: #1f1f1f;\n text-decoration: none;\n position: relative;\n padding-bottom: 2px;\n }\n\n .dest-item .cta::after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 1px;\n background: currentColor;\n transform: scaleX(1);\n transform-origin: left;\n transition: transform .25s ease;\n }\n\n .dest-item:hover .cta::after {\n transform: scaleX(0);\n }\n\n \/* Reveal (selaras M&E) *\/\n #nearby .dest-item {\n opacity: 0;\n transform: translateY(22px) scale(.985);\n transition: opacity .6s cubic-bezier(.22, .9, .25, 1), transform .6s cubic-bezier(.22, .9, .25, 1);\n will-change: opacity, transform;\n }\n\n #nearby .dest-item.in {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n \/*\n Pastikan tidak ada radius di mana pun *\/\n #nearby .media,\n #nearby .media img {\n border-radius: 0 !important;\n }\n\n \/*===DESTINATION: force hairline bawah foto terlihat di atas gambar===*\/\n #nearby .dest-item .media {\n position:\n relative !important;\n overflow: hidden;\n \/* backup terakhir *\/\n border-bottom: 1px solid rgba(0, 0, 0, .28) !important;\n box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .28) !important;\n }\n\n \/* Lapisan utama: garis di ATAS gambar (paling tegas &\n anti tertutup) *\/\n #nearby .dest-item .media::after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n \/* tempel persis di bawah *\/\n height: 1px;\n background: rgba(0, 0, 0, .28);\n \/* sedikit lebih tegas agar terlihat *\/\n z-index: 3;\n \/* di atas img *\/\n pointer-events: none;\n transform: translateZ(0);\n \/* cegah blur sub-pixel *\/\n }\n\n \/*\n Pastikan IMG tak \u201cnutup\u201d garis *\/\n #nearby .dest-item .media img {\n position: absolute !important;\n inset: 0 !important;\n z-index: 1 !important;\n \/* img di bawah hairline *\/\n display: block;\n object-fit: cover;\n }\n\n \/*===DATE MODAL\n FIX (anchored popover)===*\/\n #dateModal {\n position: fixed;\n \/* jangan absolute supaya tidak \u201cgeser\u201d saat scroll *\/\n inset: 0;\n display: none;\n z-index: 2600;\n \/* di atas header & booking bar *\/\n }\n\n #dateModal.open {\n display: block;\n }\n\n #dateModal .card {\n position: fixed !important;\n margin: 0;\n z-index: 2602;\n pointer-events: auto;\n box-shadow: 0 12px 48px rgba(0, 0, 0, 0.24);\n background: #fff;\n border-radius: 16px;\n border: 1px solid #e8e8e8;\n box-sizing: border-box;\n overflow: hidden;\n transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n \/* Responsive width *\/\n #dateModal.open .card {\n width: calc(100vw - 16px);\n max-width: 520px;\n }\n\n @media (max-width: 480px) {\n #dateModal.open .card {\n width: calc(100vw - 16px);\n max-width: 100%;\n }\n }\n\n #dateModal .backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0);\n pointer-events: none;\n display: block;\n transition: background-color 0.3s ease;\n z-index: 2600;\n cursor: pointer;\n }\n\n #dateModal.open .backdrop {\n background: rgba(0, 0, 0, 0.4);\n pointer-events: auto;\n }\n\n \/* --- PATCH: taruh di paling akhir CSS --- *\/\n #dateModal.open {\n animation: none !important;\n }\n\n #dateModal.open .card {\n animation: dateSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;\n }\n\n @keyframes dateSlideIn {\n from {\n opacity: 0;\n transform: translateY(-12px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/*===PATCH HOVER KALENDER (PAKAI .day)===*\/\n #dateModal.open .day {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2.2rem;\n height: 2.2rem;\n border-radius: 8px;\n transition: background .15s ease, color .15s ease;\n }\n\n #dateModal.open .day:not(.disabled):hover {\n background: #111 !important;\n color: #fff !important;\n border-color: #111 !important;\n }\n\n \/* biar elemen lain nggak nutup interaksi *\/\n #dateModal.open .card {\n pointer-events: auto;\n }\n\n \/* opsional: bedakan jelas dengan\n rentang terpilih *\/\n #dateModal.open .day.in-range:not(.checkin):not(.checkout) {\n background: #f3f3f3 !important;\n color: inherit;\n }\n\n \/* Hover pakai class (bukan :hover) *\/\n #dateModal.open .day.hovering {\n background: #111 !important;\n color: #fff !important;\n border-color: #111 !important;\n border-radius: 8px;\n }\n\n \/* ==== Date Modal: bar aksi & tombol ==== *\/\n #dateModal .card {\n border-radius: 16px;\n \/* biar menyatu rapi dengan bar aksi *\/\n overflow: hidden;\n }\n\n #dateModal .actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 18px;\n border-top: 1px solid #e8e8e8;\n }\n\n \/* Reset = gaya ghost *\/\n #dateModal .actions .ghost {\n background: transparent;\n color: #333;\n border: 1px solid #ddd;\n border-radius: 999px;\n padding: 10px 16px;\n font-weight: 600;\n transition: background .2s ease, border-color .2s ease;\n }\n\n #dateModal .actions .ghost:hover {\n background: #f5f5f5;\n border-color: #d0d0d0;\n }\n\n \/* Done = primary solid *\/\n #dateModal .actions .done {\n background: #111;\n color: #fff;\n border: 1px solid #111;\n border-radius: 999px;\n padding: 10px 18px;\n font-weight: 700;\n letter-spacing: .06em;\n text-transform: uppercase;\n transition: filter .2s ease, transform .06s ease;\n }\n\n #dateModal .actions .done:hover {\n filter: brightness(1.06);\n }\n\n #dateModal .actions .done:active {\n transform: translateY(1px);\n }\n\n \/* ==== Calendar header spacing fix ==== *\/\n #dateModal .cal header {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 24px;\n position: relative;\n padding: 18px 0 10px;\n border-bottom: 1px solid #eee;\n }\n\n #dateModal .cal h4#monthLabel {\n margin-top: 6px;\n \/* tambahan ruang ekstra *\/\n margin-bottom: 4px;\n font-family: \"Spectral\", serif;\n font-weight: 700;\n font-size: 20px;\n letter-spacing: 0.04em;\n color: #111;\n text-transform: uppercase;\n transition: opacity .25s ease;\n }\n\n \/* Tombol kiri-kanan *\/\n #dateModal .navbtn {\n width: 36px;\n height: 36px;\n border: none;\n border-radius: 50%;\n background: rgba(17, 17, 17, 0.06);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: background .25s ease, transform .15s ease;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n }\n\n #dateModal #prev {\n left: 18px;\n }\n\n #dateModal #next {\n right: 18px;\n }\n\n #dateModal .navbtn::before {\n content: \"\";\n width: 10px;\n height: 10px;\n border-top: 2px solid #111;\n border-right: 2px solid #111;\n transform: rotate(225deg);\n display: block;\n }\n\n #dateModal #next::before {\n transform: rotate(45deg);\n }\n\n #dateModal .navbtn:hover {\n background: #111;\n }\n\n #dateModal .navbtn:hover::before {\n border-color: #fff;\n }\n\n #dateModal .navbtn:active {\n transform: translateY(-50%) scale(0.94);\n }\n\n #dateModal .cal #calendarGrid {\n transition: opacity .25s ease;\n }\n\n #dateModal .cal.switching #calendarGrid {\n opacity: 0;\n }\n\n \/* Mobile polish (ukuran font & padding kalender sedikit lebih kecil) *\/\n @media (max-width: 1024px) {\n #dateModal.open .day {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.0rem;\n height: 1.0rem;\n border-radius: 8px;\n transition: background .15s ease, color .15s ease;\n }\n\n #dateModal .cal h4#monthLabel {\n font-size: 18px\n }\n\n #dateModal .day {\n width: 2rem;\n height: 2rem;\n border-radius: 6px\n }\n\n #dateModal .actions {\n padding: 10px 14px\n }\n\n #dateModal .cal header {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 24px;\n position: relative;\n padding: 10px 0 5px;\n border-bottom: 1px solid #eee;\n }\n\n #dateModal .grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 8px;\n padding: 10px 10px 5px;\n }\n\n #dateModal .actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 10px;\n border-top: 1px solid #eee;\n }\n }\n\n\n \/* == Date modal selalu di atas popup, tapi tetap bisa di-klik *\/\n #fabPopup.active {\n z-index: 2500;\n }\n\n \/* popup *\/\n #dateModal {\n z-index: 2600;\n }\n\n \/* datepicker di atas popup *\/\n #dateModal .card {\n position: fixed !important;\n }\n\n \/* Desktop lebar mengikuti field *\/\n @media (min-width:1025px) {\n #dateModal.open .card {\n max-width: 520px;\n min-width: 320px;\n }\n }\n\n \/* Mobile: versi kecil, muncul di atas booking popup *\/\n @media (max-width:1024px) {\n #fabPopup #dateModal {\n position: fixed;\n z-index: 2600;\n }\n }\n\n \/* Matikan animasi global modal yang bikin loncat *\/\n #dateModal.open {\n animation: none !important;\n }\n\n\n \/* === FINAL FIX: Book Now di NAVBAR (cleanup) === *\/\n\n \/* Sembunyikan di desktop *\/\n .booking-mobile {\n display: none !important;\n }\n\n \/* FAB Booking *\/\n @keyframes fabGlow {\n\n 0%,\n 100% {\n box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(184, 164, 122, 0.7);\n }\n\n 60% {\n box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 0 14px rgba(184, 164, 122, 0);\n }\n }\n\n @keyframes popupFade {\n from {\n opacity: 0;\n transform: translateY(16px) scale(0.97);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n .fab-booking {\n position: fixed;\n bottom: 90px;\n right: 18px;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 22px 0 14px;\n height: 52px;\n border: none;\n border-radius: 30px;\n background: linear-gradient(135deg, #1a1a1a 0%, #2e2e2e 100%);\n color: #fff;\n cursor: pointer;\n z-index: 1010;\n font-family: var(--font-sans);\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n animation: fabGlow 2.8s ease-in-out infinite;\n transition: opacity 0.45s ease, transform 0.45s ease, background 0.3s ease, box-shadow 0.3s ease;\n opacity: 0;\n pointer-events: none;\n transform: translateY(14px);\n }\n\n .fab-booking.fab-visible {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n }\n\n .fab-booking .fab-icon {\n width: 28px;\n height: 28px;\n background: #b8a47a;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n font-size: 12px;\n }\n\n .fab-booking .fab-label {\n white-space: nowrap;\n line-height: 1;\n }\n\n .fab-booking:hover {\n background: linear-gradient(135deg, #b8a47a 0%, #9a7f5a 100%);\n transform: translateY(-3px);\n box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);\n animation: none;\n }\n\n \/* Popup overlay *\/\n .fab-popup {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.6);\n z-index: 1000;\n justify-content: center;\n align-items: center;\n }\n\n .fab-popup.active {\n display: flex;\n }\n\n \/* ==== Booking Bar langsung tanpa card ==== *\/\n .popup-booking {\n position: relative;\n background: #fff;\n width: 90%;\n max-width: 420px;\n border-radius: 20px;\n padding: 0;\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);\n box-sizing: border-box;\n text-align: left;\n animation: popupFade 0.28s ease-out;\n overflow: hidden;\n }\n\n .popup-booking-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: linear-gradient(135deg, #1a1a1a 0%, #2e2e2e 100%);\n padding: 16px 18px;\n }\n\n .popup-booking-title {\n display: flex;\n align-items: center;\n gap: 10px;\n color: #fff;\n font-family: var(--font-sans);\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n }\n\n .popup-booking-title i {\n color: #b8a47a;\n font-size: 16px;\n }\n\n \/* Tombol close di kanan atas *\/\n .close-popup {\n background: rgba(255, 255, 255, 0.15);\n border: none;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n color: #fff;\n cursor: pointer;\n line-height: 1;\n padding: 0;\n transition: background 0.2s;\n }\n\n .close-popup:hover {\n background: rgba(255, 255, 255, 0.28);\n }\n\n .popup-booking .booking-bar {\n padding: 18px;\n display: grid;\n grid-template-columns: 1fr;\n gap: 12px;\n }\n\n .popup-booking .field,\n .popup-booking .booking-bar button.field {\n width: 100%;\n border: 1px solid #ece7dd !important;\n border-radius: 12px;\n background: #fff !important;\n padding: 12px 14px;\n min-height: 74px;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n }\n\n .popup-booking .field::after {\n display: none;\n }\n\n .popup-booking .booking-bar button.field:hover {\n border-color: #d4c5a5 !important;\n background: #fff !important;\n box-shadow: 0 0 0 2px rgba(184, 164, 122, 0.12);\n }\n\n .popup-booking .booking-bar button.field:focus-visible {\n outline: none;\n border-color: #b8a47a !important;\n box-shadow: 0 0 0 3px rgba(184, 164, 122, 0.2);\n }\n\n .popup-booking .value.counter {\n width: 100%;\n justify-content: space-between;\n }\n\n .popup-booking .book {\n width: 100%;\n margin: 4px 0 0;\n height: 46px;\n border-radius: 999px;\n background: linear-gradient(135deg, #1a1a1a 0%, #2e2e2e 100%);\n border: none;\n }\n\n .popup-booking .book:hover {\n background: linear-gradient(135deg, #b8a47a 0%, #9a7f5a 100%);\n color: #fff;\n }\n\n @media (min-width: 1025px) {\n .popup-booking {\n width: min(860px, calc(100vw - 96px));\n max-width: 860px;\n border-radius: 22px;\n }\n\n .popup-booking .booking-bar {\n padding: 22px;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 14px;\n }\n\n .popup-booking #mobileDateRangeBtn,\n .popup-booking #mobileBookBtn {\n grid-column: 1 \/ -1;\n }\n }\n\n @media (min-width: 1440px) {\n .popup-booking {\n width: min(940px, calc(100vw - 140px));\n max-width: 940px;\n }\n }\n\n @media (min-width: 769px) {\n\n .fab-booking,\n .fab-popup {\n display: none !important;\n }\n }\n\n \/* Responsiveness *\/\n @media (max-width: 768px) {\n .booking-wrap:not(.popup-booking) {\n display: none;\n }\n\n .fab-booking {\n right: 18px;\n bottom: 90px;\n }\n\n .fab {\n position: fixed;\n left: calc(14px + env(safe-area-inset-left));\n right: auto;\n bottom: calc(20px + env(safe-area-inset-bottom));\n z-index: 1100;\n }\n\n .fab .btn {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n padding: 0;\n display: grid;\n place-items: center;\n font-size: 20px;\n }\n\n .fab .btn .tip {\n display: none;\n }\n }\n\n\n \/* ==== HEADER ==== *\/\n .header {\n height: 64px;\n \/* kurangi tinggi header *\/\n padding: 0 12px;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n background: rgba(255, 255, 255, var(--nav-alpha));\n -webkit-backdrop-filter: blur(calc(var(--nav-alpha) * 16px));\n backdrop-filter: blur(calc(var(--nav-alpha) * 16px));\n }\n\n \/* Logo utama (Trans Hotel Jakarta) *\/\n .logo img {\n height: 30px;\n \/* perkecil logo utama *\/\n object-fit: contain;\n }\n\n \/* Logo corp (THG) *\/\n .corp-logo-wrap {\n width: 60px;\n height: 32px;\n }\n\n \/* Spasi antar logo & hamburger *\/\n .nav-right {\n gap: 6px;\n }\n\n \/* ==== HERO ==== *\/\n .hero {\n position: relative;\n width: 100%;\n height: auto;\n \/* ikuti tinggi video *\/\n overflow: hidden;\n background: #000;\n }\n\n .hero video,\n .hero .poster {\n position: relative;\n display: block;\n width: 100%;\n height: auto;\n object-fit: contain;\n \/* tidak zoom *\/\n object-position: center;\n background-color: #000;\n }\n\n .hero .overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg,\n rgba(0, 0, 0, 0.1) 0%,\n rgba(0, 0, 0, 0.7) 90%);\n z-index: 1;\n }\n\n \/* Headline dan teks hero *\/\n .hero-inner {\n position: absolute;\n bottom: 12%;\n left: 50%;\n transform: translateX(-50%);\n text-align: center;\n width: 90%;\n color: #fff;\n z-index: 2;\n padding: 0 16px;\n }\n\n .kicker {\n font-size: 18px;\n letter-spacing: 0.15em;\n margin-bottom: 6px;\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);\n }\n\n .headline {\n font-size: clamp(18px, 20vw, 35px);\n line-height: 1.25;\n font-style: italic;\n font-weight: 500;\n text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);\n }\n\n \/* Hilangkan ruang hitam di bawah hero *\/\n body {\n background-color: #000;\n }\n\n .hero+section {\n margin-top: 0;\n padding-top: 0;\n }\n\n @media (max-width: 480px) {\n .header {\n height: 56px;\n \/* lebih ramping di HP kecil *\/\n }\n\n .logo img {\n height: 32px;\n }\n\n .corp-logo-wrap {\n width: 60px;\n height: 32px;\n }\n\n .hero-inner {\n bottom: 27%;\n left: 50%;\n }\n\n .headline {\n font-size: 23px;\n max-width: 400px;\n }\n\n .kicker {\n font-size: 10px;\n gap: 5px;\n }\n }\n\n \/* ===== NAV WRAPPER ===== *\/\n .nav-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n max-width: 50vw;\n \/* batasi agar masih ada ruang untuk logo & button kanan *\/\n margin: 0 auto;\n padding: 0;\n overflow: visible;\n }\n\n \/* ===== NAV CENTER (scrollable area) ===== *\/\n .nav-center {\n display: flex;\n justify-content: center;\n overflow-x: auto;\n overflow-y: hidden;\n white-space: nowrap;\n scroll-behavior: smooth;\n scrollbar-width: none;\n flex: 1;\n }\n\n .nav-center::-webkit-scrollbar {\n display: none;\n }\n\n \/* ===== MENU ITEMS ===== *\/\n .nav-center .menu {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 18px;\n \/* jarak antar item *\/\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n .nav-center .menu li {\n display: inline-block;\n }\n\n .nav-center .menu a {\n font-family: \"Montserrat\", sans-serif;\n font-weight: 600;\n text-decoration: none;\n font-size: 13px;\n \/* lebih kecil, rapi *\/\n letter-spacing: 0.05em;\n color: #1f1f1f;\n text-transform: uppercase;\n transition: color 0.25s ease;\n white-space: nowrap;\n }\n\n .nav-center .menu a:hover {\n color: #000;\n \/* hover tetap hitam *\/\n }\n\n \/* === WRAPPER LEVEL === *\/\n .nav-section {\n position: relative;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* === NAV WRAPPER === *\/\n .nav-wrapper {\n overflow-x: auto;\n scroll-behavior: smooth;\n scrollbar-width: none;\n -ms-overflow-style: none;\n white-space: nowrap;\n flex: 1;\n text-align: center;\n }\n\n .nav-wrapper::-webkit-scrollbar {\n display: none;\n }\n\n \/* === NAV SECTION === *\/\n .nav-section {\n position: relative;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* === AREA MENU === *\/\n .nav-wrapper {\n overflow-x: auto;\n scroll-behavior: smooth;\n scrollbar-width: none;\n -ms-overflow-style: none;\n white-space: nowrap;\n flex: 1;\n text-align: center;\n }\n\n .nav-wrapper::-webkit-scrollbar {\n display: none;\n }\n\n \/* === PANAH (KIRI \/ KANAN) === *\/\n .nav-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%) scale(0.9);\n background: none;\n border: none;\n width: 60px;\n height: 50px;\n color: rgba(0, 0, 0, 0.55);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n opacity 0.35s ease,\n transform 0.35s ease,\n color 0.25s ease;\n z-index: 10;\n\n \/* \ud83d\udd12 Default hidden & non-clickable *\/\n opacity: 0 !important;\n visibility: hidden !important;\n pointer-events: none !important;\n }\n\n \/* Posisi kiri-kanan *\/\n .nav-arrow.left {\n left: 25px;\n justify-content: flex-start;\n }\n\n .nav-arrow.right {\n right: 10px;\n justify-content: flex-end;\n }\n\n \/* Bentuk chevron *\/\n .nav-arrow::before {\n content: '';\n display: block;\n width: 12px;\n height: 12px;\n border-top: 2px solid currentColor;\n border-right: 2px solid currentColor;\n transform: rotate(45deg);\n }\n\n .nav-arrow.left::before {\n transform: rotate(-135deg);\n }\n\n \/* Hover style *\/\n .nav-arrow:hover {\n color: #000;\n }\n\n \/* === TAMPIL SAAT HOVER DI NAV SECTION === *\/\n .nav-section:hover .nav-arrow {\n opacity: 1 !important;\n visibility: visible !important;\n transform: translateY(-50%) scale(1);\n pointer-events: auto !important;\n }\n\n \/* Responsif *\/\n @media (max-width: 1024px) {\n .nav-arrow.left {\n left: -10px;\n }\n\n .nav-arrow.right {\n right: -10px;\n }\n }\n\n @media (max-width: 768px) {\n .nav-arrow {\n display: none !important;\n }\n }\n\n\n\n\n \/* === HEADER GRID FIX === *\/\n .header {\n display: grid !important;\n grid-template-columns: auto 1fr auto;\n \/* kiri | tengah | kanan *\/\n align-items: center;\n justify-content: center;\n height: var(--nav-h);\n padding: 0 clamp(20px, 4vw, 56px);\n -webkit-backdrop-filter: blur(calc(var(--nav-alpha) * 16px));\n backdrop-filter: blur(calc(var(--nav-alpha) * 16px));\n border-bottom: 1px solid rgba(232, 232, 232, var(--nav-alpha));\n position: fixed;\n inset: 0 0 auto 0;\n z-index: 1000;\n }\n\n \/* === KIRI: LOGO === *\/\n .logo {\n justify-self: start;\n display: flex;\n align-items: center;\n }\n\n .nav-center::before,\n .nav-center::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n width: 40px;\n pointer-events: none;\n background: linear-gradient(to right, rgba(0, 0, 0, .15), transparent);\n opacity: 0;\n transition: opacity .2s;\n }\n\n .nav-center::after {\n right: 0;\n transform: scaleX(-1);\n }\n\n .nav-center.has-left::before {\n opacity: .25;\n }\n\n .nav-center.has-right::after {\n opacity: .25;\n }\n\n\n\n \/* === KANAN: CTA, BAHASA, LOGO GRUP === *\/\n .nav-right {\n justify-self: end;\n display: flex;\n align-items: center;\n gap: 20px;\n white-space: nowrap;\n }\n\n \/* === BOOK NOW \u2014 enforce background only, let visibility animate === *\/\n .nav-cta {\n background: #111 !important;\n }\n\n #hero {\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100vh;\n }\n\n #heroVideo {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n background-color: #000;\n \/* fallback hitam bila video gagal load *\/\n }\n\n @media (max-width: 768px) {\n #heroVideo {\n object-fit: cover;\n height: 100vh;\n }\n }\n\n \/* Pastikan menu mulai dari item 1 (The Hotel) & tidak terdorong *\/\n .header {\n display: flex !important;\n align-items: center;\n justify-content: space-between;\n }\n\n\n \/* Header solid saat scroll, tanpa efek gelap bocor ke section bawah *\/\n .header {\n background: rgba(255, 255, 255, var(--nav-alpha));\n backdrop-filter: blur(calc(var(--nav-alpha)*16px));\n }\n\n .header.scrolled {\n background: #fff;\n color: var(--ink);\n border-bottom: 1px solid var(--line);\n }\n\n \/* === Fix anchor scroll offset for header === *\/\n #booking {\n scroll-margin-top: calc(var(--nav-h) + 20px);\n \/* sedikit lebih besar dari tinggi header *\/\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n\n \/* Hilangkan area hitam bawah hero ketika CTA ditekan (overlay hero tidak memanjang) *\/\n .hero {\n background: #000;\n position: relative;\n overflow: hidden;\n }\n\n .hero .overlay {\n pointer-events: none;\n position: absolute;\n inset: 0;\n }\n\n \/* default semua modal benar-benar tersembunyi *\/\n .suite-modal,\n .venue-modal,\n .promo-modal {\n display: none !important;\n }\n\n .suite-modal.open,\n .venue-modal.open,\n .promo-modal.open {\n display: flex !important;\n }\n\n \/* backdrop modal terpisah dari layout page *\/\n .suite-modal .suite-overlay,\n .venue-modal .modal-bg,\n .promo-modal .backdrop {\n position: fixed;\n inset: 0;\n }\n\n #meetings {\n background: var(--ivory, #faf8f2);\n text-align: center;\n position: relative;\n }\n\n #meetings h2.section-title {\n font-family: \"Spectral\", serif;\n font-style: italic;\n font-weight: 700;\n font-size: clamp(32px, 5vw, 56px);\n margin-bottom: 8px;\n }\n\n #meetings .section-subtitle {\n color: #777;\n font-size: 15px;\n margin: 0 auto 80px;\n max-width: 720px;\n }\n\n .venue-row {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 80px;\n margin-bottom: 120px;\n opacity: 0;\n transform: translateY(40px);\n transition: all 0.8s ease-out;\n }\n\n .venue-row.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .venue-image-wrap img {\n width: 100%;\n transition: transform 0.6s ease, filter 0.3s ease;\n }\n\n .venue-row:hover .venue-image-wrap img {\n transform: scale(1.03);\n filter: brightness(1.05);\n }\n\n .venue-text {\n width: 40%;\n text-align: left;\n }\n\n .venue-text h3 {\n font-size: 20px;\n font-weight: 700;\n margin-bottom: 10px;\n }\n\n .venue-text p {\n color: #555;\n font-size: 14px;\n line-height: 1.6;\n }\n\n .learn-more {\n border: none;\n background: none;\n font-weight: 700;\n font-size: 13px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n text-decoration: underline;\n cursor: pointer;\n transition: color 0.3s ease;\n }\n\n .learn-more:hover {\n color: var(--accent, #b48b45);\n }\n\n \/* === RESPONSIVE (Mobile Flat, No Card) === *\/\n @media (max-width: 600px) {\n #meetings {\n padding: 50px 16px;\n }\n\n .venue-row {\n flex-direction: column !important;\n gap: 24px;\n text-align: center !important;\n margin-bottom: 60px;\n border: none;\n box-shadow: none;\n background: transparent;\n }\n\n .venue-image-wrap {\n width: 100%;\n }\n\n .venue-image-wrap img {\n width: 100%;\n height: auto;\n aspect-ratio: 1.5 \/ 1;\n object-fit: cover;\n border: none;\n border-radius: 0;\n }\n\n .venue-text {\n width: 100%;\n padding: 0 12px;\n text-align: center !important;\n }\n\n .venue-text h3 {\n font-size: 18px;\n margin-top: 4px;\n text-transform: uppercase;\n }\n\n .venue-text p {\n font-size: 14px;\n line-height: 1.6;\n color: #555;\n margin-bottom: 10px;\n }\n\n .learn-more {\n font-size: 13px;\n font-weight: 800;\n letter-spacing: 0.06em;\n border: none;\n }\n\n .vline {\n display: none !important;\n }\n }\n\n \/* pastikan section lain tidak ikut filter gelap *\/\n #about,\n #meetings,\n #dining,\n #offers,\n #gallery,\n #location,\n #subscribe,\n .site-footer {\n filter: none !important;\n backdrop-filter: none !important;\n }\n\n .art-slider {\n overflow: visible;\n }\n\n \/* jangan potong konten *\/\n .art-viewport {\n overflow: visible;\n padding: 0 24px;\n }\n\n \/* ruang kiri\/kanan *\/\n .art-track {\n padding-right: 24px;\n }\n\n \/* ekstra ruang setelah item terakhir *\/\n\n @media (min-width:1024px) {\n\n .art-section::before,\n .art-section::after {\n width: 0;\n display: none;\n }\n\n \/* matikan feather tepi *\/\n }\n\n \/* NAV: ruang aman kiri\/kanan + tidak ketutup overlay panah *\/\n .nav-center {\n\n box-sizing: border-box;\n\n \/* geser isi menjauh dari overlay *\/\n padding-left: var(--left-guard);\n padding-right: var(--right-guard);\n\n \/* agar scroll-into-view\/keyboard menghormati guard *\/\n scroll-padding-left: var(--left-guard);\n scroll-padding-right: var(--right-guard);\n\n display: flex;\n justify-content: flex-start;\n align-items: center;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scroll-behavior: smooth;\n }\n\n .nav-center {\n --edge: 56px;\n \/* lebar area blur dari tepi; coba 40\u201364 *\/\n --blur: 8px;\n \/* kekuatan blur *\/\n position: relative;\n isolation: isolate;\n \/* penting untuk backdrop-filter *\/\n }\n\n \/* konten di bawah overlay (tetap bisa diklik) *\/\n .nav-center .menu {\n position: relative;\n z-index: 1;\n left: 50px;\n }\n\n \/* SATU overlay di ATAS konten; tengah transparan *\/\n .nav-center::after {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: 2;\n \/* di atas teks *\/\n pointer-events: none;\n\n \/* memicu kompositor, tetap 100% transparan *\/\n background: linear-gradient(transparent, transparent);\n\n backdrop-filter: blur(var(--blur)) saturate(120%);\n -webkit-backdrop-filter: blur(var(--blur)) saturate(120%);\n\n \/* mask: hanya pinggir kiri\/kanan yang terlihat, tengah bolong *\/\n -webkit-mask-image: linear-gradient(to right,\n black 0,\n black var(--edge),\n transparent var(--edge),\n transparent calc(100% - var(--edge)),\n black calc(100% - var(--edge)),\n black 100%);\n mask-image: linear-gradient(to right,\n black 0,\n black var(--edge),\n transparent var(--edge),\n transparent calc(100% - var(--edge)),\n black calc(100% - var(--edge)),\n black 100%);\n }\n\n \/* ====== BEGIN DATEPICKER CSS ====== *\/\n #dateModal {\n position: fixed;\n inset: 0;\n display: none;\n z-index: 2600;\n pointer-events: none;\n }\n\n #dateModal.open,\n #dateModal.closing {\n display: block;\n }\n\n #dateModal .card {\n position: fixed !important;\n \/* posisi di-set via JS *\/\n top: auto;\n left: auto;\n margin: 0;\n pointer-events: auto;\n border-radius: 16px;\n background: #fff;\n border: 1px solid #e8e8e8;\n box-shadow: 0 10px 24px rgba(0, 0, 0, .12);\n overflow: hidden;\n transform-origin: top left;\n opacity: 0;\n transform: translateY(-10px) scale(.985);\n filter: blur(1px);\n transition: opacity .24s ease,\n transform .28s cubic-bezier(0.22, 1, 0.36, 1),\n box-shadow .28s ease,\n filter .24s ease;\n }\n\n \/* Card muncul di atas trigger: animasi slide dari bawah *\/\n #dateModal .card.above {\n transform: translateY(10px) scale(.985);\n transform-origin: bottom left;\n }\n\n #dateModal.open .card.above {\n transform: translateY(0) scale(1);\n }\n\n #dateModal.closing .card.above {\n transform: translateY(10px) scale(.985);\n }\n\n #dateModal .backdrop {\n position: fixed;\n inset: 0;\n pointer-events: none;\n background: rgba(17, 17, 17, .12);\n opacity: 0;\n transition: opacity .22s ease;\n }\n\n #dateModal.open .backdrop {\n opacity: 1;\n }\n\n #dateModal.open .card {\n opacity: 1;\n transform: translateY(0) scale(1);\n filter: blur(0);\n box-shadow: 0 20px 46px rgba(0, 0, 0, .2);\n }\n\n #dateModal.closing .backdrop {\n opacity: 0;\n }\n\n #dateModal.closing .card {\n opacity: 0;\n transform: translateY(-8px) scale(.985);\n filter: blur(1px);\n }\n\n #dateModal .cal header {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 24px;\n position: relative;\n padding: 18px 0 10px;\n border-bottom: 1px solid #eee;\n }\n\n #dateModal #monthLabel {\n margin: 6px 0 4px;\n font-family: \"Spectral\", serif;\n font-weight: 700;\n font-size: 20px;\n letter-spacing: .04em;\n color: #111;\n text-transform: uppercase;\n }\n\n #dateModal .navbtn {\n width: 36px;\n height: 36px;\n border: none;\n border-radius: 50%;\n background: rgba(17, 17, 17, .06);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n transition: background .25s ease, transform .12s ease;\n }\n\n #dateModal #prev {\n left: 18px\n }\n\n #dateModal #next {\n right: 18px\n }\n\n #dateModal .navbtn::before {\n content: \"\";\n width: 10px;\n height: 10px;\n border-top: 2px solid #111;\n border-right: 2px solid #111;\n transform: rotate(225deg);\n display: block;\n }\n\n #dateModal #next::before {\n transform: rotate(45deg)\n }\n\n #dateModal .navbtn:hover {\n background: #111\n }\n\n #dateModal .navbtn:hover::before {\n border-color: #fff\n }\n\n #dateModal .navbtn:active {\n transform: translateY(-50%) scale(.94)\n }\n\n #dateModal .grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 8px;\n padding: 16px 18px 10px;\n }\n\n #dateModal .grid strong {\n text-align: center;\n font-size: 12px;\n color: #888\n }\n\n #dateModal .grid .day {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2.4rem;\n height: 2.4rem;\n border-radius: 8px;\n cursor: pointer;\n transition: .15s;\n }\n\n #dateModal .grid .day.disabled {\n color: #c9c9c9;\n cursor: default\n }\n\n #dateModal .grid .day:hover:not(.disabled),\n #dateModal .grid .day.hovering {\n background: #111;\n color: #fff\n }\n\n #dateModal .grid .day.in-range:not(.checkin):not(.checkout) {\n background: #f3f3f3;\n color: inherit\n }\n\n #dateModal .grid .day.checkin,\n #dateModal .grid .day.checkout {\n background: #111 !important;\n color: #fff !important\n }\n\n #dateModal .actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 18px;\n border-top: 1px solid #eee;\n }\n\n #dateModal .actions .ghost {\n background: transparent;\n color: #333;\n border: 1px solid #ddd;\n padding: 10px 16px;\n border-radius: 999px;\n font-weight: 600;\n }\n\n #dateModal .actions .ghost:hover {\n background: #f5f5f5\n }\n\n #dateModal .actions .done {\n background: #111;\n color: #fff;\n border: 1px solid #111;\n padding: 10px 18px;\n border-radius: 999px;\n font-weight: 700;\n letter-spacing: .06em;\n text-transform: uppercase;\n }\n\n \/* Tooltip \u201cNIGHTS\u201d *\/\n #hoverTip {\n position: fixed;\n z-index: 5000;\n display: none;\n pointer-events: none;\n background: #000;\n color: #fff;\n font-size: 12px;\n padding: 3px 8px;\n border-radius: 4px;\n transform: translateX(-50%);\n white-space: nowrap;\n }\n\n \/* Mobile sizing *\/\n @media (max-width:768px) {\n #dateModal .card {\n border-radius: 14px\n }\n\n #dateModal .grid {\n gap: 6px;\n padding: 14px 14px 10px\n }\n\n #dateModal .grid .day {\n width: 2.1rem;\n height: 2.1rem;\n border-radius: 7px\n }\n\n #dateModal #monthLabel {\n font-size: 18px\n }\n }\n\n \/* Extra small screens - improve layout *\/\n @media (max-width: 480px) {\n #dateModal.open .card {\n max-height: calc(100vh - 80px);\n }\n\n #dateModal .grid {\n gap: 4px;\n padding: 12px 10px 8px;\n }\n\n #dateModal .grid .day {\n width: 1.9rem;\n height: 1.9rem;\n border-radius: 6px;\n font-size: 13px;\n }\n\n #dateModal #monthLabel {\n font-size: 16px;\n }\n\n #dateModal .navbtn {\n width: 28px;\n height: 28px;\n }\n\n #dateModal .cal header {\n gap: 18px;\n padding: 8px 0 4px;\n }\n\n #dateModal .actions {\n padding: 8px 10px;\n }\n\n #dateModal .actions .ghost,\n #dateModal .actions .done {\n padding: 8px 12px;\n font-size: 12px;\n }\n }\n\n \/* ==== Date Modal: ukuran & tipografi mobile ==== *\/\n #dateModal .card {\n box-sizing: border-box;\n }\n\n \/* Mobile \/ tablet *\/\n @media (max-width: 1024px) {\n\n \/* KUNCI lebar card di mobile - biarkan JS set width via inline style *\/\n #dateModal .card {\n border-radius: 14px;\n }\n\n #dateModal.open .card {\n max-height: calc(100vh - 100px);\n }\n\n #dateModal .cal header {\n padding: 10px 0 6px;\n }\n\n #dateModal #monthLabel {\n font-size: 18px;\n }\n\n #dateModal .navbtn {\n width: 32px;\n height: 32px;\n }\n\n #dateModal .grid {\n gap: 6px;\n padding: 12px 12px 8px;\n }\n\n #dateModal .grid .day {\n width: 2rem;\n height: 2rem;\n border-radius: 7px;\n font-size: 14px;\n }\n\n #dateModal .actions {\n padding: 10px 12px;\n }\n }\n\n \/* Ensure the shell provides breathing room but keeps panel from overflowing viewport *\/\n .venue-modal .modal-shell {\n padding: 6vh 20px;\n \/* consistent vertical gap *\/\n display: flex;\n justify-content: center;\n align-items: flex-start;\n }\n\n \/* Constrain panel height and enable internal scrolling *\/\n .venue-modal .modal-panel {\n max-height: calc(100vh - 96px) !important;\n \/* leave space top\/bottom for shell padding *\/\n overflow: auto !important;\n box-sizing: border-box;\n }\n\n \/* Make sure close button is placed inside panel and stays visible *\/\n .venue-modal .close {\n position: absolute;\n top: 12px;\n right: 12px;\n z-index: 4;\n background: rgba(255, 255, 255, 0.9);\n border-radius: 6px;\n padding: 6px 10px;\n line-height: 1;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n }\n\n \/* Mobile tweaks: tighter padding and slightly smaller close control *\/\n @media (max-width: 520px) {\n .venue-modal .modal-panel {\n max-height: calc(100vh - 64px) !important;\n }\n\n .venue-modal .close {\n top: 8px;\n right: 8px;\n padding: 5px 8px;\n font-size: 20px;\n }\n }\n\n \/* ===== Premium Venue Modal: Grand Ballroom + Boardroom ===== *\/\n .premium-venue-modal .modal-shell {\n width: min(1180px, 100%);\n padding: clamp(20px, 4vw, 48px);\n }\n\n .premium-venue-modal .premium-modal-panel {\n width: min(1120px, 100%);\n max-height: min(88vh, 920px) !important;\n overflow: auto !important;\n padding: clamp(28px, 3vw, 40px);\n border-radius: 22px !important;\n background: rgba(255, 255, 255, 0.98);\n border: 1px solid rgba(17, 17, 17, 0.08);\n box-shadow: 0 26px 72px rgba(15, 15, 15, 0.14);\n animation: none !important;\n transform: none !important;\n }\n\n .premium-venue-modal .premium-modal-panel.req-overlay-open {\n overflow: hidden !important;\n }\n\n .premium-venue-modal .close {\n top: 18px;\n right: 18px;\n width: 44px;\n height: 44px;\n padding: 0;\n border: 1px solid rgba(17, 17, 17, 0.08);\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.92);\n color: #111;\n box-shadow: 0 8px 22px rgba(17, 17, 17, 0.08);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n }\n\n .premium-venue-modal .close:hover {\n background: #111;\n color: #fff;\n opacity: 1;\n }\n\n .premium-modal-layout {\n display: grid;\n grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);\n gap: clamp(22px, 3vw, 34px);\n align-items: start;\n }\n\n .premium-modal-content {\n min-width: 0;\n }\n\n .premium-modal-head {\n margin-bottom: 22px;\n }\n\n .premium-modal-head .venue-kicker,\n .premium-side-card .side-kicker,\n .request-form-modal .req-kicker {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.16em;\n text-transform: uppercase;\n color: #8a744f;\n }\n\n .premium-modal-head .venue-kicker::before,\n .premium-side-card .side-kicker::before,\n .request-form-modal .req-kicker::before {\n content: \"\";\n width: 26px;\n height: 1px;\n background: currentColor;\n opacity: 0.7;\n }\n\n .premium-modal-head h3 {\n margin: 0 0 14px;\n font-family: \"Spectral\", serif;\n font-size: clamp(30px, 4vw, 42px);\n line-height: 1.08;\n letter-spacing: -0.02em;\n color: #141414;\n }\n\n .premium-modal-head .sub {\n max-width: 60ch;\n margin: 0;\n font-size: 15px;\n line-height: 1.86;\n color: #5f5a53;\n }\n\n .premium-modal-head .divider {\n margin-top: 18px;\n background: linear-gradient(90deg, rgba(17, 17, 17, 0.18), rgba(17, 17, 17, 0.03));\n height: 1px;\n }\n\n .premium-venue-modal .venue-facts {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 10px 16px;\n margin: 0 0 24px;\n padding: 0;\n list-style: none;\n }\n\n .premium-venue-modal .venue-facts li {\n display: grid;\n gap: 4px;\n padding: 0 0 14px;\n border-bottom: 1px solid rgba(17, 17, 17, 0.08);\n }\n\n .premium-venue-modal .venue-facts strong {\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: #8a8175;\n }\n\n .premium-venue-modal .venue-facts span {\n font-size: 15px;\n line-height: 1.5;\n color: #1d1d1d;\n }\n\n .premium-venue-modal .venue-visual {\n margin: 0;\n display: grid;\n gap: 12px;\n }\n\n .premium-venue-modal .venue-visual img {\n width: 100%;\n border-radius: 18px !important;\n border: 1px solid rgba(17, 17, 17, 0.08);\n box-shadow: 0 18px 44px rgba(17, 17, 17, 0.08);\n }\n\n .premium-venue-modal .venue-visual figcaption {\n font-size: 13px;\n line-height: 1.6;\n color: #777066;\n }\n\n .premium-venue-modal .dimension-trigger {\n position: relative;\n display: block;\n width: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n text-align: left;\n cursor: zoom-in;\n }\n\n .premium-venue-modal .dimension-trigger img {\n transition: transform 0.35s ease, box-shadow 0.35s ease;\n }\n\n .premium-venue-modal .dimension-trigger:hover img {\n transform: scale(1.01);\n box-shadow: 0 22px 52px rgba(17, 17, 17, 0.12);\n }\n\n .premium-venue-modal .dimension-hint {\n position: absolute;\n right: 16px;\n bottom: 16px;\n padding: 9px 12px;\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.92);\n border: 1px solid rgba(17, 17, 17, 0.08);\n color: #111;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n box-shadow: 0 8px 20px rgba(17, 17, 17, 0.08);\n }\n\n .premium-side-card {\n position: sticky;\n top: 0;\n display: grid;\n gap: 16px;\n padding: clamp(22px, 2.6vw, 28px);\n border-radius: 18px;\n background: #f8f6f2;\n color: #1b1b1b;\n border: 1px solid rgba(17, 17, 17, 0.07);\n box-shadow: none;\n overflow: hidden;\n }\n\n .premium-side-card::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at top right, rgba(17, 17, 17, 0.03), transparent 38%);\n pointer-events: none;\n }\n\n .premium-side-card>* {\n position: relative;\n z-index: 1;\n }\n\n .premium-side-card h4 {\n margin: 0;\n font-family: \"Spectral\", serif;\n font-size: clamp(24px, 2.3vw, 28px);\n line-height: 1.24;\n color: #171717;\n }\n\n .premium-side-card p,\n .premium-side-card .cta-note {\n margin: 0;\n font-size: 14px;\n line-height: 1.75;\n color: #5f5a53;\n }\n\n .premium-side-card .side-points {\n margin: 0;\n padding: 0;\n list-style: none;\n display: grid;\n gap: 10px;\n }\n\n .premium-side-card .side-points li {\n position: relative;\n padding-left: 18px;\n font-size: 14px;\n line-height: 1.6;\n color: #2b2b2b;\n }\n\n .premium-side-card .side-points li::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0.68em;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: #111;\n }\n\n .premium-side-card .premium-cta-wrap {\n display: grid;\n gap: 12px;\n margin-top: 4px;\n padding-top: 18px;\n border-top: 1px solid rgba(17, 17, 17, 0.08);\n }\n\n .premium-side-card .open-req {\n height: 52px;\n border: 1px solid #111;\n border-radius: 999px !important;\n background: #111;\n color: #fff;\n font-size: 12px;\n font-weight: 800;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n box-shadow: none;\n }\n\n .premium-side-card .open-req:hover {\n background: #fff;\n color: #111;\n }\n\n .request-form-modal {\n position: fixed;\n inset: 0;\n z-index: 4500;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: clamp(16px, 4vw, 28px);\n background: rgba(10, 10, 12, 0.68);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n overscroll-behavior: contain;\n transition: opacity 0.32s ease, visibility 0.32s ease;\n }\n\n .request-form-modal[hidden] {\n display: none !important;\n }\n\n .request-form-modal.show {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n }\n\n .request-form-modal.closing {\n opacity: 0;\n visibility: visible;\n pointer-events: none;\n }\n\n .request-form-modal .req-card {\n position: relative;\n width: min(90vw, 1200px);\n max-height: min(92vh, 860px);\n margin-inline: auto;\n display: grid;\n grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.25fr);\n border-radius: 22px;\n overflow: hidden;\n background: #fff;\n box-shadow: 0 26px 70px rgba(0, 0, 0, 0.22);\n transform: translateY(28px) scale(0.985);\n transition: transform 0.38s cubic-bezier(.22, 1, .36, 1), opacity 0.32s ease;\n opacity: 0;\n }\n\n .request-form-modal.show .req-card {\n transform: translateY(0) scale(1);\n opacity: 1;\n }\n\n .request-form-modal.closing .req-card {\n transform: translateY(20px) scale(0.99);\n opacity: 0;\n }\n\n .request-form-modal .req-hero {\n padding: clamp(28px, 4vw, 38px);\n background: #f5f2ed;\n color: #111;\n display: grid;\n align-content: start;\n gap: 14px;\n border-right: 1px solid rgba(17, 17, 17, 0.07);\n overflow: auto;\n overscroll-behavior: contain;\n }\n\n .request-form-modal h3 {\n margin: 0;\n font-family: \"Spectral\", serif;\n font-size: clamp(30px, 3.6vw, 40px);\n line-height: 1.06;\n letter-spacing: -0.02em;\n text-transform: none;\n color: #151515;\n }\n\n .request-form-modal p.sub {\n margin: 0;\n font-size: 14px;\n line-height: 1.8;\n color: #625c54;\n }\n\n .request-form-modal .req-meta {\n display: grid;\n gap: 10px;\n margin-top: 8px;\n }\n\n .request-form-modal .req-meta div {\n display: grid;\n gap: 4px;\n padding: 12px 14px;\n border-radius: 14px;\n background: rgba(255, 255, 255, 0.7);\n border: 1px solid rgba(17, 17, 17, 0.06);\n }\n\n .request-form-modal .req-meta strong {\n font-size: 11px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: #8a744f;\n }\n\n .request-form-modal .req-meta span {\n font-size: 14px;\n line-height: 1.55;\n color: #2b2b2b;\n }\n\n .request-form-modal .req-body {\n padding: clamp(28px, 4vw, 38px);\n display: grid;\n align-content: start;\n gap: 22px;\n background: #fff;\n overflow: auto;\n min-height: 0;\n overscroll-behavior: contain;\n }\n\n .request-form-modal .premium-field-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 16px;\n }\n\n .request-form-modal .field-group {\n display: grid;\n gap: 8px;\n }\n\n .request-form-modal .field-group span {\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: #7c6850;\n }\n\n .request-form-modal .field-group.full {\n grid-column: 1 \/ -1;\n }\n\n .request-form-modal input,\n .request-form-modal select,\n .request-form-modal textarea {\n margin: 0;\n min-height: 54px;\n padding: 14px 16px;\n border-radius: 14px !important;\n border: 1px solid rgba(17, 17, 17, 0.1);\n background: #fff;\n color: #16120d;\n font-size: 15px;\n line-height: 1.5;\n box-shadow: none;\n }\n\n .request-form-modal select {\n padding-right: 44px;\n }\n\n .request-form-modal textarea {\n min-height: 136px;\n }\n\n .request-form-modal input::placeholder,\n .request-form-modal textarea::placeholder {\n color: #9b9388;\n }\n\n .request-form-modal input:focus,\n .request-form-modal select:focus,\n .request-form-modal textarea:focus {\n border-color: #111;\n box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.06);\n }\n\n .request-form-modal .select-wrap::after {\n right: 16px;\n color: #555;\n }\n\n .request-form-modal .consent {\n margin: 0;\n padding: 16px 18px;\n border-radius: 14px;\n background: #f7f7f5;\n border: 1px solid rgba(17, 17, 17, 0.08);\n color: #544b3f;\n font-size: 13px;\n line-height: 1.65;\n }\n\n .request-form-modal .consent input {\n flex: 0 0 auto;\n margin-top: 2px;\n width: 18px;\n height: 18px;\n min-height: 18px;\n padding: 0;\n border-radius: 6px !important;\n }\n\n .request-form-modal .req-actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n }\n\n .request-form-modal .assist-copy {\n margin: 0;\n max-width: 34ch;\n font-size: 13px;\n line-height: 1.7;\n color: #7a7369;\n }\n\n .request-form-modal .primary {\n width: auto;\n min-width: 220px;\n min-height: 54px;\n border: 1px solid #111;\n border-radius: 999px !important;\n background: #111;\n color: #fff;\n box-shadow: none;\n }\n\n .request-form-modal .primary:hover {\n background: #fff;\n color: #111;\n }\n\n .request-form-modal .close-popup {\n top: 18px;\n right: 18px;\n width: 44px;\n height: 44px;\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.92);\n border: 1px solid rgba(17, 17, 17, 0.08);\n color: #111;\n z-index: 2;\n }\n\n .request-form-modal .close-popup:hover {\n background: #111;\n color: #fff;\n }\n\n .dimension-viewer {\n position: fixed;\n inset: 0;\n z-index: 14000;\n display: grid;\n place-items: center;\n padding: 24px;\n }\n\n .dimension-viewer[hidden] {\n display: none !important;\n }\n\n .dimension-viewer-backdrop {\n position: absolute;\n inset: 0;\n background: rgba(10, 10, 12, 0.84);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n }\n\n .dimension-viewer-panel {\n position: relative;\n z-index: 1;\n width: min(1180px, 100%);\n padding: 18px;\n border-radius: 22px;\n background: rgba(255, 255, 255, 0.98);\n border: 1px solid rgba(17, 17, 17, 0.08);\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);\n }\n\n .dimension-viewer-panel img {\n display: block;\n width: 100%;\n max-height: calc(100vh - 100px);\n object-fit: contain;\n border-radius: 14px;\n }\n\n .dimension-viewer-close {\n position: absolute;\n top: 12px;\n right: 12px;\n z-index: 2;\n width: 42px;\n height: 42px;\n border: 1px solid rgba(17, 17, 17, 0.08);\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.92);\n color: #111;\n font-size: 24px;\n line-height: 1;\n cursor: pointer;\n }\n\n .dimension-viewer-close:hover {\n background: #111;\n color: #fff;\n }\n\n @media (max-width: 980px) {\n\n .premium-modal-layout,\n .request-form-modal .req-card {\n grid-template-columns: 1fr;\n }\n\n .request-form-modal .req-card {\n grid-template-rows: auto minmax(0, 1fr);\n }\n\n .premium-side-card {\n position: static;\n }\n\n .request-form-modal .req-hero {\n border-right: 0;\n border-bottom: 1px solid rgba(17, 17, 17, 0.07);\n }\n }\n\n @media (max-width: 760px) {\n .premium-venue-modal .premium-modal-panel {\n padding: 20px;\n border-radius: 18px !important;\n }\n\n .premium-venue-modal .venue-facts,\n .request-form-modal .premium-field-grid {\n grid-template-columns: 1fr;\n }\n\n .request-form-modal .req-body,\n .request-form-modal .req-hero {\n padding: 24px 20px;\n }\n\n .premium-venue-modal .dimension-hint {\n right: 12px;\n bottom: 12px;\n padding: 8px 10px;\n font-size: 10px;\n }\n\n .request-form-modal .req-actions {\n flex-direction: column;\n align-items: stretch;\n }\n\n .request-form-modal .primary {\n width: 100%;\n min-width: 0;\n }\n }\n\n @media (max-width: 520px) {\n\n .premium-venue-modal .modal-shell,\n .request-form-modal {\n padding: 12px;\n }\n\n .premium-venue-modal .premium-modal-panel,\n .request-form-modal .req-card {\n border-radius: 16px !important;\n }\n\n .premium-modal-head h3,\n .request-form-modal h3 {\n font-size: 28px;\n }\n\n .request-form-modal input,\n .request-form-modal select,\n .request-form-modal textarea {\n min-height: 50px;\n border-radius: 12px !important;\n }\n\n .dimension-viewer {\n padding: 12px;\n }\n\n .dimension-viewer-panel {\n padding: 12px;\n border-radius: 16px;\n }\n\n .dimension-viewer-panel img {\n max-height: calc(100vh - 72px);\n border-radius: 10px;\n }\n }\n\n \/* base for animated items *\/\n .anim-item {\n opacity: 0;\n transform: translateY(18px);\n transition: opacity .72s cubic-bezier(.22, 1, .36, 1), transform .72s cubic-bezier(.22, 1, .36, 1);\n will-change: opacity, transform;\n }\n\n .anim-in {\n opacity: 1 !important;\n transform: none !important;\n }\n\n \/* small stagger helper when needed *\/\n .anim-item.is-visible {\n opacity: 1;\n transform: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .anim-item {\n transition: none !important;\n transform: none !important;\n opacity: 1 !important;\n }\n }\n\n \/* Leisure slider \u2014 modern young elegant, no border-radius *\/\n #leisure {\n padding: 80px clamp(16px, 5vw, 56px);\n background: linear-gradient(180deg, #fff, #fbfbfb);\n }\n\n #leisure .section-title {\n margin-bottom: 10px;\n font-weight: 700;\n letter-spacing: 0.02em;\n }\n\n #leisure .section-subtitle {\n color: #666;\n margin-bottom: 100px;\n }\n\n .leisure-slider {\n position: relative;\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .leisure-viewport {\n overflow: hidden;\n flex: 1;\n }\n\n .leisure-track {\n display: flex;\n gap: 18px;\n transition: transform .7s cubic-bezier(.22, 1, .36, 1);\n }\n\n .leisure-slide {\n width: calc((100% - 54px)\/3);\n flex: 0 0 auto;\n background: #fff;\n color: #111;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n box-shadow: 0 8px 22px rgba(17, 17, 17, 0.06);\n position: relative;\n overflow: hidden;\n }\n\n .leisure-slide a {\n display: block;\n width: 100%;\n }\n\n .leisure-slide img {\n width: 100%;\n height: 220px;\n object-fit: cover;\n display: block;\n border-radius: 0;\n }\n\n .leisure-slide figcaption {\n padding: 12px 14px;\n color: #fff;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.66));\n width: 100%;\n font-weight: 600;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 2;\n }\n\n .leisure-desc {\n padding: 6px 14px 16px 14px;\n color: #666;\n font-size: 0.95rem;\n line-height: 1.45;\n margin: 0;\n width: 100%;\n background: transparent;\n font-weight: 400;\n }\n\n .leisure-prev,\n .leisure-next {\n background: transparent;\n color: #333;\n border: 0;\n width: 44px;\n height: 44px;\n display: inline-grid;\n place-items: center;\n font-size: 20px;\n cursor: pointer;\n }\n\n @media (max-width:900px) {\n .leisure-slide {\n width: calc((100% - 18px)\/2);\n }\n\n .leisure-slide img {\n height: 200px\n }\n }\n\n @media (max-width:640px) {\n .leisure-slide {\n width: 100%;\n }\n\n .leisure-slider {\n gap: 8px\n }\n\n .leisure-slide img {\n height: 180px\n }\n }\n\n \/* ====================================== *\/\n \/* LEISURE PREMIUM MODAL (ISOLATED SAFE) *\/\n \/* ====================================== *\/\n\n .leisure-slide {\n cursor: pointer;\n transition: transform .4s ease, box-shadow .4s ease;\n }\n\n .leisure-slide:hover {\n transform: translateY(-10px);\n box-shadow: 0 25px 50px rgba(0, 0, 0, .15);\n }\n\n .leisure-modal {\n position: fixed;\n inset: 0;\n display: none;\n z-index: 6000;\n }\n\n .leisure-modal.active {\n display: block;\n }\n\n .leisure-overlay {\n position: absolute;\n inset: 0;\n background: rgba(10, 20, 40, .75);\n backdrop-filter: blur(8px);\n opacity: 0;\n transition: opacity .4s ease;\n }\n\n .leisure-modal.active .leisure-overlay {\n opacity: 1;\n }\n\n .leisure-panel {\n position: relative;\n width: 90%;\n max-width: 1150px;\n max-height: 90vh;\n margin: 5vh auto;\n background: #fff;\n box-shadow: 0 40px 90px rgba(0, 0, 0, .25);\n transform: translateY(40px);\n opacity: 0;\n transition: all .45s cubic-bezier(.22, 1, .36, 1);\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n }\n\n .leisure-modal.active .leisure-panel {\n transform: translateY(0);\n opacity: 1;\n }\n\n .leisure-inner {\n display: flex;\n flex-wrap: wrap;\n }\n\n .leisure-image-wrap {\n width: 50%;\n overflow: hidden;\n }\n\n .leisure-image-wrap img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .leisure-content {\n width: 50%;\n padding: 60px;\n }\n\n .leisure-content h3 {\n font-family: \"Spectral\", serif;\n font-size: 34px;\n margin-bottom: 20px;\n }\n\n .leisure-content div {\n line-height: 1.8;\n color: #555;\n font-size: 15px;\n }\n\n .leisure-cta {\n margin-top: 30px;\n }\n\n .leisure-book-btn {\n display: inline-block;\n padding: 12px 28px;\n background: #111;\n color: #fff;\n text-transform: uppercase;\n letter-spacing: .1em;\n font-size: 13px;\n transition: .3s ease;\n }\n\n .leisure-book-btn:hover {\n background: var(--accent);\n }\n\n .leisure-close {\n position: absolute;\n top: 20px;\n right: 25px;\n font-size: 32px;\n background: none;\n border: none;\n cursor: pointer;\n transition: transform .3s ease;\n }\n\n .leisure-close:hover {\n transform: rotate(90deg);\n }\n\n \/* Responsive *\/\n\n @media(max-width: 992px) {\n .leisure-inner {\n flex-direction: column;\n }\n\n .leisure-image-wrap,\n .leisure-content {\n width: 100%;\n }\n\n .leisure-content {\n padding: 35px;\n overflow-y: auto;\n max-height: calc(90vh - 60px);\n }\n\n .leisure-panel {\n margin: 5vh auto;\n max-height: 90vh;\n }\n }\n\n @media(max-width: 600px) {\n .leisure-panel {\n width: 95%;\n margin: 3vh auto;\n max-height: 95vh;\n }\n\n .leisure-content {\n padding: 20px;\n max-height: calc(95vh - 60px);\n }\n\n .leisure-close {\n top: 15px;\n right: 15px;\n font-size: 26px;\n }\n\n .leisure-content h3 {\n font-size: 24px;\n }\n\n .leisure-content div {\n font-size: 14px;\n }\n }\n\n .leisure-book-btn {\n position: relative;\n overflow: hidden;\n }\n\n .leisure-book-btn::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--accent);\n transform: scaleX(0);\n transform-origin: left;\n transition: transform .4s ease;\n z-index: -1;\n }\n\n .leisure-book-btn:hover::after {\n transform: scaleX(1);\n }\n\n \/* ===== Consistency Layer: modern, minimal, elegant ===== *\/\n :root {\n --motion-lux: .28s;\n --ease-lux: cubic-bezier(.22, 1, .36, 1);\n --hover-ink: #0f1113;\n --hover-soft: #f3f1eb;\n --hover-accent: #a89263;\n --focus-lux: rgba(184, 164, 122, 0.95);\n }\n\n .section {\n padding-block: clamp(72px, 8vw, 104px);\n }\n\n .section-title,\n #offers .offers-head h2,\n #gallery .gal-head h2,\n #location .loc-head h2,\n #nearby h2,\n #signatures h2,\n #subscribe h2 {\n letter-spacing: .02em;\n }\n\n .section-title,\n #offers .offers-head h2,\n #gallery .gal-head h2,\n #location .loc-head h2,\n #nearby h2,\n #signatures h2,\n #subscribe h2 {\n margin-bottom: 10px;\n }\n\n .section-subtitle,\n .section p.lead,\n #offers .offers-head .lead,\n #gallery .lead,\n #location .loc-head .lead,\n #nearby .lead,\n #subscribe .lead,\n #signatures .lead {\n color: #63676d;\n line-height: 1.75;\n margin-top: 10px;\n }\n\n #suiteModal .suite-close,\n .leisure-close,\n .venue-modal .close,\n .promo-modal .close,\n .modal-panel .close {\n -webkit-font-smoothing: antialiased;\n text-rendering: geometricPrecision;\n font-weight: 400;\n }\n\n \/* Unified primary CTAs across key sections *\/\n #offers .btn,\n .leisure-book-btn,\n #subscribe .sub-btn,\n .venue-modal .open-req,\n .venue-modal .row-actions .primary,\n .req-form .primary,\n .request-form-modal .primary,\n #mobileBookBtn {\n min-height: 44px;\n padding: 0 20px;\n text-transform: uppercase;\n letter-spacing: .08em;\n font-size: 12px;\n font-weight: 600;\n border-radius: 0 !important;\n transition: transform var(--motion-lux) var(--ease-lux), filter var(--motion-lux) var(--ease-lux), background-color var(--motion-lux) var(--ease-lux), color var(--motion-lux) var(--ease-lux), border-color var(--motion-lux) var(--ease-lux);\n }\n\n #offers .btn:hover,\n .leisure-book-btn:hover,\n #subscribe .sub-btn:hover,\n .venue-modal .open-req:hover,\n .venue-modal .row-actions .primary:hover,\n .req-form .primary:hover,\n .request-form-modal .primary:hover,\n #mobileBookBtn:hover {\n transform: translateY(-1px);\n filter: brightness(1.04);\n }\n\n #offers .btn:focus-visible,\n .leisure-book-btn:focus-visible,\n #subscribe .sub-btn:focus-visible,\n .venue-modal .open-req:focus-visible,\n .venue-modal .row-actions .primary:focus-visible,\n .req-form .primary:focus-visible,\n .request-form-modal .primary:focus-visible,\n #mobileBookBtn:focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 2px;\n }\n\n \/* Unified editorial text-link CTA style *\/\n .learn-more,\n .dest-item .cta {\n letter-spacing: .08em;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n transition: color var(--motion-lux) var(--ease-lux), letter-spacing var(--motion-lux) var(--ease-lux);\n }\n\n \/* Consistent media\/card surface treatment *\/\n #offers .offer,\n #gallery .gal,\n #nearby .dest-item {\n box-shadow: 0 0 0 1px rgba(15, 18, 20, 0.08);\n transition: box-shadow var(--motion-lux) var(--ease-lux), transform var(--motion-lux) var(--ease-lux);\n }\n\n #offers .offer:hover,\n #gallery .gal:hover,\n #nearby .dest-item:hover {\n box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);\n transform: translateY(-2px);\n }\n\n .venue-row .venue-image-wrap img,\n .art-media img,\n #offers .offer .media,\n #gallery .gal img,\n #nearby .dest-item .media img {\n transition-timing-function: var(--ease-lux);\n }\n\n \/* Unified close button for Exclusive Venues, Art of Dining, and Experiences Around Us *\/\n #modal-ballroom .close,\n #modal-boardroom .close,\n #modal-lobby-lounge .close,\n #modal-restaurant .close,\n #modal-18th .close,\n #modal-destination .close {\n position: absolute !important;\n top: 16px !important;\n right: 18px !important;\n width: 40px;\n height: 40px;\n padding: 0;\n border: 0 !important;\n border-radius: 0 !important;\n background: transparent !important;\n color: #1f2328;\n font-size: 34px;\n line-height: 1;\n opacity: .88;\n cursor: pointer;\n transition: transform .2s ease, opacity .2s ease, color .2s ease;\n }\n\n #modal-ballroom .close:hover,\n #modal-boardroom .close:hover,\n #modal-lobby-lounge .close:hover,\n #modal-restaurant .close:hover,\n #modal-18th .close:hover,\n #modal-destination .close:hover {\n transform: rotate(90deg);\n opacity: 1;\n color: #000;\n }\n\n #modal-ballroom .close:focus-visible,\n #modal-boardroom .close:focus-visible,\n #modal-lobby-lounge .close:focus-visible,\n #modal-restaurant .close:focus-visible,\n #modal-18th .close:focus-visible,\n #modal-destination .close:focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 2px;\n }\n\n \/* Prevent header hairline from crossing close icon in dining\/nearby modals *\/\n #modal-ballroom .modal-panel::before,\n #modal-ballroom .modal-panel::after,\n #modal-boardroom .modal-panel::before,\n #modal-boardroom .modal-panel::after,\n #modal-lobby-lounge .modal-panel::before,\n #modal-lobby-lounge .modal-panel::after,\n #modal-restaurant .modal-panel::before,\n #modal-restaurant .modal-panel::after,\n #modal-18th .modal-panel::before,\n #modal-18th .modal-panel::after,\n #modal-destination .modal-panel::before,\n #modal-destination .modal-panel::after {\n display: none !important;\n }\n\n #modalDestinationImage {\n border-radius: 0 !important;\n }\n\n \/* Leisure primary CTA refined to match clean luxury concept *\/\n #leisureModal .leisure-book-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n overflow: visible;\n background: #111;\n color: #fff;\n border: 1px solid #111;\n min-height: 46px;\n padding: 0 24px;\n letter-spacing: .08em;\n font-size: 12px;\n font-weight: 600;\n line-height: 1.1;\n white-space: nowrap;\n text-align: center;\n text-transform: uppercase;\n text-decoration: none;\n border-radius: 0 !important;\n transform: translateY(0);\n transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;\n }\n\n #leisureModal .leisure-book-btn::after {\n content: none;\n }\n\n #leisureModal .leisure-book-btn:hover {\n background: #15181b;\n color: #fff;\n border-color: #15181b;\n transform: translateY(-0.5px);\n filter: none;\n }\n\n #leisureModal .leisure-book-btn:focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 2px;\n }\n\n \/* ===== Global Polish Layer: interactions, hover color, motion ===== *\/\n a,\n button,\n .btn,\n .learn-more,\n .dest-item .cta,\n .nav-cta,\n #gallery .filters button,\n #gallery .sub-menu button,\n #location .modes button,\n .art-nav,\n .nav-arrow,\n .fab .btn,\n .book,\n .booking-bar button.field,\n .popup-booking .booking-bar button.field {\n transition-duration: var(--motion-lux);\n transition-timing-function: var(--ease-lux);\n }\n\n a:focus-visible,\n button:focus-visible,\n .btn:focus-visible,\n .learn-more:focus-visible,\n .dest-item .cta:focus-visible,\n #gallery .filters button:focus-visible,\n #gallery .sub-menu button:focus-visible,\n #location .modes button:focus-visible,\n .art-nav:focus-visible,\n .nav-arrow:focus-visible {\n outline: 2px solid var(--focus-lux) !important;\n outline-offset: 2px;\n }\n\n .nav-center .menu a:hover,\n .learn-more:hover,\n .dest-item .cta:hover,\n #gallery .filters button:hover,\n #gallery .sub-menu button:hover,\n #location .modes button:hover,\n .f-list a:hover,\n .f-social a:hover {\n color: var(--hover-ink);\n }\n\n #offers .btn.ghost:hover,\n #gallery #galMore:hover,\n .booking-bar button.field:hover,\n .popup-booking .booking-bar button.field:hover,\n #location .modes button:hover,\n #gallery .filters button:hover,\n #gallery .sub-menu button:hover {\n background: var(--hover-soft);\n border-color: rgba(15, 18, 20, 0.28);\n color: var(--hover-ink);\n box-shadow: none;\n }\n\n #offers .btn.solid:hover,\n #subscribe .sub-btn:hover,\n .venue-modal .open-req:hover,\n .venue-modal .row-actions .primary:hover,\n .req-form .primary:hover,\n .request-form-modal .primary:hover,\n .book:hover,\n #mobileBookBtn:hover {\n background: var(--hover-ink);\n border-color: var(--hover-ink);\n color: #fff;\n filter: none;\n }\n\n #suiteModal .suite-close,\n .leisure-close,\n .venue-modal .close,\n .promo-modal .close,\n .modal-panel .close,\n .close-popup,\n .req-form .close-popup,\n .request-form-modal .close-popup,\n .dimension-viewer-close,\n .priv-modal .priv-close {\n border-radius: 0 !important;\n opacity: .88;\n transition: transform .2s ease, opacity .2s ease, color .2s ease, background-color .2s ease;\n }\n\n #suiteModal .suite-close:hover,\n .leisure-close:hover,\n .venue-modal .close:hover,\n .promo-modal .close:hover,\n .modal-panel .close:hover,\n .close-popup:hover,\n .req-form .close-popup:hover,\n .request-form-modal .close-popup:hover,\n .dimension-viewer-close:hover,\n .priv-modal .priv-close:hover {\n transform: rotate(90deg);\n opacity: 1;\n }\n\n \/* Request form CTA hover refinement (more premium, less basic) *\/\n .venue-modal .open-req,\n .venue-modal .row-actions .primary,\n .req-form .primary,\n .request-form-modal .primary {\n background: linear-gradient(180deg, #1a1d21 0%, #101215 100%);\n border-color: #101215;\n color: #fff;\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);\n }\n\n .venue-modal .open-req:hover,\n .venue-modal .row-actions .primary:hover,\n .req-form .primary:hover,\n .request-form-modal .primary:hover {\n background: #121519;\n border-color: var(--hover-accent);\n color: #f6f2e8;\n transform: translateY(-1px);\n box-shadow: 0 10px 22px rgba(12, 14, 17, 0.22), inset 0 0 0 1px rgba(168, 146, 99, 0.25);\n }\n\n \/* Exclusive Venues: bullets inside paragraph flow *\/\n #modal-ballroom .side-points,\n #modal-boardroom .side-points {\n display: block;\n list-style: disc outside;\n list-style-position: outside;\n padding-left: 18px;\n margin-left: 0;\n margin-bottom: 0;\n }\n\n #modal-ballroom .side-points li,\n #modal-boardroom .side-points li {\n display: list-item;\n padding-left: 0;\n margin: 0 0 8px;\n line-height: 1.72;\n }\n\n #modal-ballroom .details ul,\n #modal-boardroom .details ul {\n list-style: disc outside;\n list-style-position: outside;\n padding-left: 18px;\n margin: 8px 0 0;\n }\n\n #modal-ballroom .side-points li::before,\n #modal-boardroom .side-points li::before {\n content: none;\n display: none;\n }\n\n \/* Exclusive Venues: request form hover more eye-catching but elegant *\/\n #modal-ballroom .open-req,\n #modal-boardroom .open-req,\n #modal-ballroom .request-form-modal .primary,\n #modal-boardroom .request-form-modal .primary {\n background: linear-gradient(135deg, #121519 0%, #1f252d 100%);\n border-color: #121519;\n color: #fff;\n transition: transform .28s var(--ease-lux), box-shadow .28s var(--ease-lux), background .28s var(--ease-lux), border-color .28s var(--ease-lux), color .28s var(--ease-lux);\n }\n\n #modal-ballroom .open-req:hover,\n #modal-boardroom .open-req:hover,\n #modal-ballroom .request-form-modal .primary:hover,\n #modal-boardroom .request-form-modal .primary:hover {\n background: linear-gradient(135deg, #1a2027 0%, #2a323b 100%);\n border-color: var(--hover-accent);\n color: #f8f3e7;\n transform: translateY(-1px);\n box-shadow: 0 12px 24px rgba(8, 11, 15, 0.24), inset 0 0 0 1px rgba(168, 146, 99, 0.28);\n }\n\n \/* Bullet alignment: keep bullets inside text block like Rooms & Suites *\/\n .details,\n .details ul,\n .venue-facts,\n .venue-facts ul,\n .side-points,\n .side-points ul,\n #nearby .details,\n #dining .details,\n #meetings .details {\n padding-left: 0;\n margin-left: 0;\n list-style-position: inside;\n }\n\n .details li,\n .venue-facts li,\n .side-points li,\n #nearby .details li,\n #dining .details li,\n #meetings .details li {\n margin-bottom: 8px;\n line-height: 1.72;\n }\n\n \/* Leisure button text optical centering *\/\n #leisureModal .leisure-cta {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #leisureModal .leisure-book-btn {\n display: inline-grid;\n place-items: center;\n line-height: 1;\n padding-top: 0;\n padding-bottom: 0;\n height: 46px;\n min-width: 320px;\n text-align: center;\n }\n\n #leisureModal .leisure-book-btn {\n display: inline-grid !important;\n place-items: center !important;\n height: 46px !important;\n min-height: 46px !important;\n line-height: 0 !important;\n padding: 0 18px !important;\n min-width: 0 !important;\n width: fit-content !important;\n max-width: 100%;\n text-align: center !important;\n align-content: center;\n vertical-align: middle;\n transform: translateY(0) !important;\n transition: transform .24s var(--ease-lux), background-color .24s var(--ease-lux), border-color .24s var(--ease-lux), color .24s var(--ease-lux), box-shadow .24s var(--ease-lux) !important;\n }\n\n #leisureModal .leisure-book-btn .leisure-book-text {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n line-height: 1;\n transform: none;\n }\n\n #leisureModal .leisure-book-btn:hover {\n background: #15181b !important;\n border-color: #15181b !important;\n color: #fff !important;\n transform: translateY(-1px) !important;\n box-shadow: 0 8px 18px rgba(12, 14, 17, 0.24) !important;\n }\n\n \/* Footer hover: improve contrast and make it more refined *\/\n .f-list a:hover {\n color: #f1e5c8;\n text-decoration: underline;\n text-decoration-color: rgba(241, 229, 200, 0.75);\n text-underline-offset: 3px;\n }\n\n .f-stores .store:hover {\n color: #f3e9d2;\n opacity: 1;\n text-decoration-color: rgba(243, 233, 210, 0.72);\n }\n\n .f-social a:hover {\n background: linear-gradient(180deg, #20252b 0%, #13171b 100%);\n border-color: rgba(168, 146, 99, 0.72);\n color: #f7f2e6 !important;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);\n }\n\n \/* Mobile fix: Leisure modal must scroll to CTA reliably *\/\n #leisureModal {\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior: contain;\n }\n\n #leisureModal .leisure-panel {\n overflow-y: auto !important;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior: contain;\n }\n\n @media (max-width: 768px) {\n #leisureModal .leisure-panel {\n width: calc(100% - 20px) !important;\n margin: 10px auto !important;\n max-height: calc(100dvh - 20px) !important;\n }\n\n #leisureModal .leisure-inner {\n flex-direction: column !important;\n }\n\n #leisureModal .leisure-image-wrap,\n #leisureModal .leisure-content {\n width: 100% !important;\n }\n\n #leisureModal .leisure-content {\n max-height: none !important;\n overflow: visible !important;\n padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;\n }\n\n #leisureModal .leisure-cta {\n margin-top: 22px;\n }\n }\n\n \/* Final polish: refined, eye-catching hover without being flashy *\/\n .venue-modal .open-req,\n .venue-modal .row-actions .primary,\n .req-form .primary,\n .request-form-modal .primary,\n #leisureModal .leisure-book-btn {\n position: relative;\n overflow: hidden;\n isolation: isolate;\n }\n\n .venue-modal .open-req::after,\n .venue-modal .row-actions .primary::after,\n .req-form .primary::after,\n .request-form-modal .primary::after,\n #leisureModal .leisure-book-btn::after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, rgba(179, 157, 110, 0.95), transparent);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform .28s var(--ease-lux);\n z-index: 1;\n }\n\n .venue-modal .open-req:hover,\n .venue-modal .row-actions .primary:hover,\n .req-form .primary:hover,\n .request-form-modal .primary:hover,\n #leisureModal .leisure-book-btn:hover {\n transform: translateY(-1.5px) !important;\n border-color: rgba(179, 157, 110, 0.95) !important;\n box-shadow: 0 12px 24px rgba(9, 11, 15, 0.24), inset 0 0 0 1px rgba(179, 157, 110, 0.18) !important;\n filter: brightness(1.04);\n }\n\n .venue-modal .open-req:hover::after,\n .venue-modal .row-actions .primary:hover::after,\n .req-form .primary:hover::after,\n .request-form-modal .primary:hover::after,\n #leisureModal .leisure-book-btn:hover::after {\n transform: scaleX(1);\n }\n\n \/* Exclusive Venues bullets must sit inside paragraph block *\/\n #modal-ballroom .premium-side-card .side-points,\n #modal-boardroom .premium-side-card .side-points {\n display: grid !important;\n gap: 10px;\n list-style: none !important;\n padding-left: 0 !important;\n margin-left: 0 !important;\n }\n\n #modal-ballroom .premium-side-card .side-points li,\n #modal-boardroom .premium-side-card .side-points li {\n display: block !important;\n position: relative;\n padding-left: 16px !important;\n margin-left: 0 !important;\n margin-bottom: 0;\n text-indent: 0;\n line-height: 1.72;\n }\n\n #modal-ballroom .premium-side-card .side-points li::before,\n #modal-boardroom .premium-side-card .side-points li::before {\n content: \"\" !important;\n display: block !important;\n position: absolute !important;\n left: 0 !important;\n top: 0.62em !important;\n width: 6px !important;\n height: 6px !important;\n border-radius: 50% !important;\n background: #2b2b2b !important;\n }\n\n \/* Remove text\/card box lines in Experiences Around Us *\/\n #nearby .dest-item,\n #nearby .dest-item .copy {\n border: none !important;\n box-shadow: none !important;\n background: transparent;\n }\n\n #nearby .dest-grid::before,\n #nearby .dest-item .media::after,\n #nearby .dest-item .media {\n border-color: transparent !important;\n box-shadow: none !important;\n }\n\n \/* Square-radius policy for all surfaces (except buttons) *\/\n .modal .card,\n #dateModal .card,\n .suite-panel,\n .suite-gallery img,\n .leisure-panel,\n .leisure-image-wrap,\n .leisure-image-wrap img,\n .venue-modal .modal-panel,\n .venue-image-wrap,\n .venue-image-wrap img,\n #offers .offer,\n #offers .offer .media,\n #offers .offer .media img,\n #gallery .gal,\n #gallery .gal img,\n #nearby .dest-item,\n #nearby .dest-item .media,\n #nearby .dest-item .media img,\n .popup-booking,\n .cookiebar,\n .cookie-gate,\n .request-form-modal,\n input:not([type=\"radio\"]):not([type=\"checkbox\"]),\n select,\n textarea {\n border-radius: 0 !important;\n }\n\n \/* Uniform photo size inside Dining modals *\/\n #modal-lobby-lounge .modal-panel>img,\n #modal-restaurant .modal-panel>img,\n #modal-18th .modal-panel>img {\n width: 100% !important;\n height: clamp(240px, 28vw, 360px);\n object-fit: cover;\n display: block;\n margin-top: 20px;\n }\n <\/style>\n<\/head>\n\n<body id=\"top\">\n <header class=\"header\" id=\"header\">\n <!-- Brand utama: link ke website THJ -->\n <a class=\"logo\" href=\"https:\/\/transhoteljakarta.com\" aria-label=\"Trans Hotel Jakarta - Home\">\n <span class=\"brand-swap\">\n <img decoding=\"async\" class=\"brand white\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THJ-Logo-BW-e1759872856954.png\"\n alt=\"Trans Hotel Jakarta (white)\" \/>\n <img decoding=\"async\" class=\"brand color\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/Untitled-1-01-e1759587802825.png\"\n alt=\"Trans Hotel Jakarta (color)\" \/>\n <\/span>\n <\/a>\n\n <div class=\"nav-section\">\n <button class=\"nav-arrow left\" aria-label=\"Scroll Left\"><\/button>\n <div class=\"nav-wrapper\">\n <nav class=\"nav-center\" aria-label=\"Main Navigation\">\n <ul class=\"menu\">\n <li><a href=\"#about\">THE HOTEL<\/a><\/li>\n <li><a href=\"#art-of-stay\">THE ROOMS AND SUITES<\/a><\/li>\n <li><a href=\"#meetings\">MEETINGS AND EVENTS<\/a><\/li>\n <li><a href=\"#dining\">DINING<\/a><\/li>\n <li><a href=\"#leisure\">LEISURE<\/a><\/li>\n <li><a href=\"#gallery\">GALLERY<\/a><\/li>\n <li><a href=\"#offers\">SPECIAL OFFERS<\/a><\/li>\n <li><a href=\"#nearby\">NEARBY ATTRACTIONS<\/a><\/li>\n <li><a href=\"#location\">OUR HOTELS & VENUES<\/a><\/li>\n <\/ul>\n <\/nav>\n <\/div>\n <button class=\"nav-arrow right\" aria-label=\"Scroll Right\"><\/button>\n <\/div>\n\n <div class=\"nav-right\">\n <div class=\"lang-wrap\" id=\"langWrap\">\n <button type=\"button\" class=\"lang-btn\" id=\"langBtn\" aria-haspopup=\"menu\" aria-expanded=\"false\"\n aria-controls=\"langMenu\" aria-label=\"Change language. Current: English\" title=\"Change language\">\n <i class=\"fa-solid fa-globe\"><\/i>\n <span class=\"code\">EN<\/span>\n <\/button>\n <div class=\"lang-menu\" id=\"langMenu\" role=\"menu\">\n <a href=\"#\" role=\"menuitem\" data-lang=\"EN\">English<\/a>\n <a href=\"#\" role=\"menuitem\" data-lang=\"ID\">Bahasa Indonesia<\/a>\n <!-- <a href=\"#\" role=\"menuitem\" data-lang=\"AR\">\u0627\u0644\u0639\u0631\u0628\u064a\u0629<\/a> -->\n <\/div>\n <\/div>\n <button class=\"burger\" id=\"burger\" aria-label=\"Open menu\">\n <i class=\"fa-solid fa-bars\"><\/i>\n <\/button>\n <a class=\"nav-cta\" href=\"#booking\" aria-label=\"Book your stay \u2014 best available rate\">\n <span>Book Now<\/span>\n <\/a>\n <!-- Corporate: bungkus img dalam anchor dan beri href THG -->\n <a class=\"corp-link\" href=\"https:\/\/transhotelgroup.com\" aria-label=\"Trans Hotel Group\" rel=\"noopener noreferrer\">\n <span class=\"corp-logo-wrap\">\n <img decoding=\"async\" class=\"corp-logo white\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/thg_logo_white-e1759584557294.png\"\n alt=\"Trans Hotel Group (white)\" \/>\n <img decoding=\"async\" class=\"corp-logo color\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THG-backdrop-potrait-01-scaled-e1759587776720.png\"\n alt=\"Trans Hotel Group (color)\" \/>\n <\/span>\n <\/a>\n <\/div>\n <\/header>\n\n <aside class=\"mnav\" id=\"mnav\" aria-hidden=\"true\">\n <div class=\"mnav-backdrop\"><\/div>\n <nav class=\"mnav-panel\" aria-label=\"Mobile\">\n <button class=\"mnav-close\" id=\"mnavClose\" aria-label=\"Close\">\n <i class=\"fa-solid fa-xmark\"><\/i>\n <\/button>\n <ul>\n <li><a href=\"#about\">THE HOTEL <\/a><\/li>\n <li><a href=\"#art-of-stay\">THE ROOMS AND SUITES<\/a><\/li>\n <li><a href=\"#meetings\">MEETINGS AND EVENTS<\/a><\/li>\n <li><a href=\"#dining\">DINING<\/a><\/li>\n <li><a href=\"#leisure\">LEISURE<\/a><\/li>\n <li><a href=\"#gallery\">GALLERY<\/a><\/li>\n <li><a href=\"#offers\">SPECIAL OFFERS<\/a><\/li>\n <li><a href=\"#nearby\">NEARBY ATTRACTIONS<\/a><\/li>\n <li><a href=\"#location\">OUR HOTELS & VENUES<\/a><\/li>\n <\/ul>\n <\/nav>\n <\/aside>\n <div id=\"progress\"><\/div>\n\n\n <!-- FAB Booking -->\n <button id=\"fabBooking\" class=\"fab-booking\" aria-label=\"Book your stay\">\n <span class=\"fab-icon\"><i class=\"fa-solid fa-bed\"><\/i><\/span>\n <span class=\"fab-label\">Book Now<\/span>\n <\/button>\n\n <!-- Popup Booking -->\n <div id=\"fabPopup\" class=\"fab-popup\">\n <div class=\"popup-booking\">\n <div class=\"popup-booking-header\">\n <div class=\"popup-booking-title\">\n <i class=\"fa-solid fa-bed\"><\/i>\n <span>Book Your Stay<\/span>\n <\/div>\n <button class=\"close-popup\" id=\"closePopup\" aria-label=\"Close\">×<\/button>\n <\/div>\n\n <form class=\"booking-bar\" id=\"mobileSearchForm\" autocomplete=\"off\">\n <!-- Dates -->\n <button type=\"button\" class=\"field\" id=\"mobileDateRangeBtn\">\n <div class=\"top\">\n <div class=\"ico\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/check-mark-e1759584460184.png\"\n alt=\"dates\" \/>\n <\/div>\n <span class=\"nights\" id=\"mobileNightsLabel\">1 NIGHT<\/span>\n <\/div>\n <span class=\"value\" id=\"mobileDateRangeLabel\">Thu, 02 Oct - Fri, 03 Oct<\/span>\n <\/button>\n\n <!-- Rooms -->\n <div class=\"field\" aria-label=\"Rooms\">\n <div class=\"top\">\n <div class=\"ico\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/house-door-e1759584399831.png\"\n alt=\"rooms\" \/>\n <\/div>\n <span class=\"label\">Rooms<\/span>\n <\/div>\n <div class=\"value counter\">\n <button type=\"button\" data-counter=\"dec\" class=\"minus\" data-target=\"mobileRoomsCount\">-<\/button>\n <output id=\"mobileRoomsCount\">1<\/output>\n <button type=\"button\" data-counter=\"inc\" class=\"plus\" data-target=\"mobileRoomsCount\">+<\/button>\n <\/div>\n <\/div>\n\n <!-- Guests -->\n <div class=\"field\" aria-label=\"Guests\">\n <div class=\"top\">\n <div class=\"ico\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/cake-e1759584377224.png\"\n alt=\"guests\" \/>\n <\/div>\n <span class=\"label\">Guests<\/span>\n <\/div>\n <div class=\"value counter\">\n <button type=\"button\" data-counter=\"dec\" class=\"minus\" data-target=\"mobileGuestsCount\">-<\/button>\n <output id=\"mobileGuestsCount\">1<\/output>\n <button type=\"button\" data-counter=\"inc\" class=\"plus\" data-target=\"mobileGuestsCount\">+<\/button>\n <\/div>\n <\/div>\n\n <button class=\"book\" type=\"button\" id=\"mobileBookBtn\">Book Now<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <section class=\"hero\" id=\"hero\" aria-label=\"Hero\">\n <img fetchpriority=\"high\" class=\"poster\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-08-at-17.19.15.jpeg\"\n srcset=\"\n https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-08-at-17.19.15.jpeg 640w,\n https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-08-at-17.19.15.jpeg 1280w\n \" sizes=\"100vw\" width=\"1280\" height=\"720\" alt=\"Lobby ambience \u2014 Trans Hotel Jakarta\" decoding=\"async\"\n fetchpriority=\"high\" loading=\"eager\" \/>\n\n <video id=\"heroVideo\" muted playsinline autoplay loop preload=\"metadata\"\n poster=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-08-at-17.19.15.jpeg\"\n aria-label=\"Cinematic hero\">\n <source src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Video-2026-04-08-at-17.17.01.mp4\"\n type=\"video\/mp4\" \/>\n <\/video>\n\n <div class=\"overlay\"><\/div>\n\n <div class=\"hero-inner\">\n <div class=\"kicker\">\n <span>Elevated Touches, <\/span>\n <span>Elegant Feels.<\/span>\n <\/div>\n <h1 class=\"headline\">The ultimate Premier 5-Star Destination for MICE, Family Getaways, and Seamless\n Lifestyle.\n <\/h1>\n <\/div>\n\n <!-- Booking Bar -->\n <div class=\"booking-wrap\" id=\"booking\">\n <form class=\"booking-bar\" id=\"searchForm\" autocomplete=\"off\">\n <!-- Dates -->\n <button type=\"button\" class=\"field\" id=\"dateRangeBtn\">\n <div class=\"top\">\n <div class=\"ico\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/check-mark-e1759584460184.png\"\n alt=\"dates\" \/>\n <\/div>\n <span class=\"nights\" id=\"nightsLabel\">1 NIGHT<\/span>\n <\/div>\n <span class=\"value\" id=\"dateRangeLabel\">Thu, 02 Oct - Fri, 03 Oct<\/span>\n <\/button>\n\n <!-- Rooms -->\n <div class=\"field\" aria-label=\"Rooms\">\n <div class=\"top\">\n <div class=\"ico\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/house-door-e1759584399831.png\"\n alt=\"rooms\" \/>\n <\/div>\n <span class=\"label\">Rooms<\/span>\n <\/div>\n <div class=\"value counter\">\n <button type=\"button\" data-counter=\"dec\" class=\"minus\" data-target=\"roomsCount\">-<\/button>\n <output id=\"roomsCount\">1<\/output>\n <button type=\"button\" data-counter=\"inc\" class=\"plus\" data-target=\"roomsCount\">+<\/button>\n <\/div>\n <\/div>\n\n <!-- Guests -->\n <div class=\"field\" aria-label=\"Guests\">\n <div class=\"top\">\n <div class=\"ico\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/cake-e1759584377224.png\"\n alt=\"guests\" \/>\n <\/div>\n <span class=\"label\">Guests<\/span>\n <\/div>\n <div class=\"value counter\">\n <button type=\"button\" data-counter=\"dec\" class=\"minus\" data-target=\"guestsCount\">-<\/button>\n <output id=\"guestsCount\">1<\/output>\n <button type=\"button\" data-counter=\"inc\" class=\"plus\" data-target=\"guestsCount\">+<\/button>\n <\/div>\n <\/div>\n\n <!-- Hidden inputs -->\n <input type=\"hidden\" id=\"checkin\" name=\"checkin\" \/>\n <input type=\"hidden\" id=\"checkout\" name=\"checkout\" \/>\n <input type=\"hidden\" id=\"promoCode\" name=\"promoCode\" \/>\n <input type=\"hidden\" id=\"roomsInput\" name=\"rooms\" value=\"1\" \/>\n <input type=\"hidden\" id=\"guestsInput\" name=\"guests\" value=\"1\" \/>\n <\/form>\n\n <!-- Book Now button -->\n <button class=\"book\" type=\"button\" form=\"searchForm\" id=\"bookBtn\">\n Book Now\n <\/button>\n <\/div>\n <\/section>\n\n <!-- Date Modal -->\n <div class=\"modal\" id=\"dateModal\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Pick dates\">\n <div class=\"backdrop\"><\/div>\n <div class=\"card\">\n <div class=\"calwrap\">\n <div class=\"cal\">\n <header>\n <button class=\"navbtn\" id=\"prev\"><\/button>\n <h4 id=\"monthLabel\"><\/h4>\n <button class=\"navbtn\" id=\"next\"><\/button>\n <\/header>\n <div class=\"grid\" id=\"calendarGrid\"><\/div>\n <\/div>\n <\/div>\n <div class=\"actions\">\n <button class=\"ghost\" id=\"reset\" type=\"button\">Reset<\/button>\n <button class=\"done\" id=\"done\" type=\"button\">Done<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"hoverTip\" class=\"hover-tip\"><\/div>\n\n <!-- ABOUT -->\n <section class=\"about-editorial\" id=\"about\">\n <div class=\"about-wrap\">\n <div class=\"about-copy reveal\">\n <span class=\"kicker\">Trans Hotel Jakarta<\/span>\n <h2 class=\"display\">Crafted Elegance in South Jakarta<\/h2>\n\n <div class=\"divider\"><\/div>\n\n <p class=\"lead\">\n As one of the best hotels in Jakarta, South Jakarta's newest 5-star upscale hotel delivers unique\n hospitality and crafted perfection within its 4.2-hectare integrated lifestyle complex consisting of\n Trans\n Studio Mall, Trans Studio Theme Park, and Transpark Apartment.\n <strong>South Jakarta's newest 5-star upscale hotel<\/strong>,\n delivers unique hospitality and crafted perfection within its 4.2-hectare integrated lifestyle\n complex\n consisting of\n <strong>Trans Studio Mall<\/strong>,\n <strong>Trans Studio Theme Park<\/strong>, and\n <strong>Transpark Apartment<\/strong>.\n <\/p>\n <p>\n As a preferred family hotel Jakarta and a convenient choice for travelers seeking a premium\n staycation\n Cibubur, the property offers seamless access for guests looking to enjoy comfort, entertainment, and\n leisure\n near the hotel Cibubur area.\n <\/p>\n <p>\n Experience effortless business, leisure, and lifestyle moments enhanced by global timeless\n sophistication.\n <\/p>\n <\/div>\n\n <figure class=\"about-media reveal\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/Lobby-Lounge.png\"\n alt=\"Trans Hotel Jakarta Exterior\" \/>\n <\/figure>\n <\/div>\n <\/section>\n\n <!-- SIGNATURES -->\n <section class=\"section\" id=\"signatures\">\n <h2>Five-Star Signatures<\/h2>\n <p class=\"lead\">\n Polished, personalized service delivered with genuine Indonesian warmth.\n <\/p>\n <div class=\"sig-grid\">\n <div class=\"sig-row-3\">\n <div class=\"sig\">\n <div class=\"integrated\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/location-pin-e1760934221929.png\"\n class=\"ico\" alt=\"Integrated Destination\" \/>\n <\/div>\n <div>\n <h3>Integrated Destination<\/h3>\n <p>Seamless business, leisure, and lifestyle within the massive Transpark Complex (Mall, Theme\n Park, and\n Apartment).<\/p>\n <\/div>\n <\/div>\n <div class=\"sig\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/tray.png\" class=\"ico\"\n alt=\"Culinary Icon\" \/>\n <div>\n <h3>Culinary Icon<\/h3>\n <p>A premier dining destination, home to a rare cellar and the iconic Skywalk Bridge at The 22nd Sky Lounge.\n <\/p>\n <\/div>\n <\/div>\n <div class=\"sig\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/pool-e1760934400554.png\" class=\"ico\"\n alt=\"Resort Pool\" \/>\n <div>\n <h3>Resort Pool<\/h3>\n <p>A luxurious white sandy beach pool with skyline views, offering a resort vibe and exciting\n kids'\n activities.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"sig-row-2\">\n <div class=\"sig\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/meeting.png\" class=\"ico\"\n alt=\"MICE & Business Hub\" \/>\n <div>\n <h3>MICE & Business Hub<\/h3>\n <p>Leading, state-of-the-art facilities ready to host major national and regional conferences\n and\n exhibitions.<\/p>\n <\/div>\n <\/div>\n <div class=\"sig\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/rings.png\" class=\"ico\"\n alt=\"Dream Weddings Venue\" \/>\n <div>\n <h3>Dream Weddings Venue<\/h3>\n <p>The ultimate destination for grand, unforgettable social celebrations and Dream Weddings.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- THE ART OF STAY -->\n <section id=\"art-of-stay\" class=\"art-section\">\n <header class=\"art-header\">\n <h2 class=\"art-title\">The Art of Stay<\/h2>\n <p class=\"art-subtitle\">\n Timeless sophistication with modern comfort and refined functional design.\n <\/p>\n <\/header>\n\n <div class=\"art-slider\">\n <button class=\"art-nav art-prev\" aria-label=\"Previous\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M15.5 4.5L8 12l7.5 7.5\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.6\" \/>\n <\/svg>\n <\/button>\n\n <div class=\"art-viewport\">\n <div class=\"art-track\">\n <!-- 1: Premier -->\n <article class=\"art-item\" data-suite=\"premier\">\n <div class=\"art-media\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/4.jpg\"\n alt=\"Premier Room\" \/>\n <\/div>\n <div class=\"art-info\">\n <h3>Premier Room<\/h3>\n <p>Effortless comfort in a refined contemporary setting.<\/p>\n <\/div>\n <\/article>\n\n <!-- 2: Premier Skyline -->\n <article class=\"art-item\" data-suite=\"premiersky\">\n <div class=\"art-media\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/1.jpg\"\n alt=\"Premier Skyline Room\" \/>\n <\/div>\n <div class=\"art-info\">\n <h3>Premier Skyline Room<\/h3>\n <p>Where elevated comfort meets exclusive privileges.<\/p>\n <\/div>\n <\/article>\n\n <!-- 3: Junior -->\n <article class=\"art-item\" data-suite=\"junior\">\n <div class=\"art-media\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/3.jpg\"\n alt=\"Junior Suite\" \/>\n <\/div>\n <div class=\"art-info\">\n <h3>Junior Suite<\/h3>\n <p>Designed with space to live, work, and unwind.<\/p>\n <\/div>\n <\/article>\n\n <!-- 4: Celebrity -->\n <article class=\"art-item\" data-suite=\"celebrity\">\n <div class=\"art-media\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/CS-copy.png\"\n alt=\"Celebrity Suite\" \/>\n <\/div>\n <div class=\"art-info\">\n <h3>Celebrity Suite<\/h3>\n <p>A statement of luxury with space, privacy, and prestige.<\/p>\n <\/div>\n <\/article>\n\n <!-- 5: Presidential -->\n <article class=\"art-item\" data-suite=\"presidential\">\n <div class=\"art-media\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0007-scaled-e1759745594778.jpg\"\n alt=\"Presidential Suite\" \/>\n <\/div>\n <div class=\"art-info\">\n <h3>Presidential Suite<\/h3>\n <p>An unrivaled expression of elegance at its finest.<\/p>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n\n <button class=\"art-nav art-next\" aria-label=\"Next\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M8.5 4.5L16 12l-7.5 7.5\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.6\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <\/section>\n\n <!-- Modal -->\n <div id=\"suiteModal\" class=\"suite-modal\">\n <div class=\"suite-bg\"><\/div>\n\n <div class=\"suite-panel\" role=\"dialog\" aria-modal=\"true\">\n <button class=\"suite-close\" type=\"button\" aria-label=\"Close\">\n ×\n <\/button>\n\n <div class=\"suite-content\">\n <h3 id=\"suiteTitle\"><\/h3>\n <p id=\"suiteDesc\"><\/p>\n\n <!-- Detail Room -->\n <ul id=\"suiteDetails\" class=\"premier-details\"><\/ul>\n\n <!-- Gallery -->\n <div id=\"suiteGallery\" class=\"suite-gallery\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n\n\n <!-- Meetings & Events -->\n <section class=\"section\" id=\"meetings\">\n <h2 class=\"section-title\">Exclusive Venues<\/h2>\n <p class=\"section-subtitle\">\n From grand celebrations to intimate gatherings, crafted with elegance.\n <\/p>\n\n <!-- Grand Ballroom -->\n <div class=\"venue-row left reveal\">\n <div class=\"venue-image-wrap\">\n <span class=\"vline right\"><\/span>\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/01-2-scaled.jpg\" alt=\"Grand Ballroom\" \/>\n <\/div>\n <div class=\"venue-text\">\n <h3>GRAND BALLROOM<\/h3>\n <p>\n Grand Ballroom Trans Hotel Jakarta offers an elegant and spacious venue ideal for grand\n celebrations, premium\n corporate events, and sophisticated gatherings\u2014positioning it as a top MICE hotel Jakarta and\n refined\n wedding venue Jakarta.\n <\/p>\n <button class=\"learn-more\" data-target=\"modal-ballroom\">\n <br><br>SEE MORE\n <\/button>\n <\/div>\n <\/div>\n\n <!-- Boardroom -->\n <div class=\"venue-row right reveal\">\n <div class=\"venue-text\">\n <h3>BOARDROOM<\/h3>\n <p>\n Our 10 multipurpose boardrooms provide 635 sqm of flexible function space across the 2nd and 5th\n floors,\n each accommodating up to 150 guests\u2014making them ideal for executive meetings, focused discussions,\n and\n intimate corporate events.\n <\/p>\n <button class=\"learn-more\" data-target=\"modal-boardroom\">\n <br><br>SEE MORE\n <\/button>\n <\/div>\n <div class=\"venue-image-wrap\">\n <span class=\"vline right\"><\/span>\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/10-scaled.jpg\" alt=\"Boardroom\" \/>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- === MEETINGS & EVENTS MODALS (CLEAN) === -->\n\n <!-- Ballroom -->\n <div class=\"venue-modal premium-venue-modal\" id=\"modal-ballroom\" aria-hidden=\"true\" role=\"dialog\">\n <div class=\"modal-bg\"\n style=\"background-image:url('https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/01-2-scaled.jpg')\">\n <\/div>\n\n <div class=\"modal-shell\">\n <div class=\"modal-panel premium-modal-panel\">\n <button class=\"close\" aria-label=\"Close\">×<\/button>\n\n <div class=\"premium-modal-layout\">\n <div class=\"premium-modal-content\">\n <div class=\"modal-head premium-modal-head\">\n <span class=\"venue-kicker\">Meetings & Celebrations<\/span>\n <h3>GRAND BALLROOM<\/h3>\n <p class=\"sub\">\n Grand Ballroom Trans Hotel Jakarta offers an elegant and spacious venue ideal for grand\n celebrations, premium corporate events, and sophisticated gatherings. With an elevated\n arrival experience, flexible zoning, and refined spatial flow, it is designed to feel as\n seamless as it is impressive.\n <\/p>\n <div class=\"divider\"><\/div>\n <\/div>\n\n <ul class=\"details venue-facts\" aria-label=\"Grand Ballroom highlights\">\n <li><strong>Total Area<\/strong><span>928 sqm<\/span><\/li>\n <li><strong>Sections<\/strong><span>Grand Ballroom 1, 2 & 3<\/span><\/li>\n <li><strong>Pre-Function<\/strong><span>288 sqm<\/span><\/li>\n <li><strong>Ceiling Height<\/strong><span>8 meters<\/span><\/li>\n <\/ul>\n\n <figure class=\"venue-visual clickable-dimension\">\n <button type=\"button\" class=\"dimension-trigger\"\n data-dimension-src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/02\/dimension_ballroom.jpeg\"\n data-dimension-alt=\"Grand Ballroom Dimensions\" aria-label=\"View Grand Ballroom dimensions in full size\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/02\/dimension_ballroom.jpeg\"\n alt=\"Ballroom Dimensions\" loading=\"lazy\" \/>\n <span class=\"dimension-hint\">Click to view full dimension<\/span>\n <\/button>\n <figcaption>Room dimensions and layout overview for planning the ideal guest flow.<\/figcaption>\n <\/figure>\n <\/div>\n\n <aside class=\"premium-side-card\" aria-label=\"Grand Ballroom event assistance\">\n <span class=\"side-kicker\">Event Concierge<\/span>\n <h4>Designed for weddings, gala dinners, and statement corporate events.<\/h4>\n <p>\n Share your event brief and our team will prepare a tailored proposal covering setup,\n layout, and supporting arrangements.\n <\/p>\n <ul class=\"side-points\">\n <li>Elegant arrival sequence with generous pre-function area<\/li>\n <li>Flexible zoning for ceremonies, plenary sessions, or dinner reception<\/li>\n <li>Ideal for premium events that require scale without losing polish<\/li>\n <\/ul>\n <div class=\"modal-cta-wrap premium-cta-wrap\">\n <button class=\"open-req\" type=\"button\" data-target=\"#reqFormBallroom\">\n Request Proposal\n <\/button>\n <p class=\"cta-note\">Our event team will get back to you with a curated response.<\/p>\n <\/div>\n <\/aside>\n <\/div>\n\n\n <form class=\"req-form request-form-modal\" id=\"reqFormBallroom\" hidden novalidate>\n <div class=\"req-card\">\n <button type=\"button\" class=\"close-popup\" aria-label=\"Close\">×<\/button>\n\n <div class=\"req-hero\">\n <span class=\"req-kicker\">Grand Ballroom Enquiry<\/span>\n <h3>Request an Event Proposal<\/h3>\n <p class=\"sub\">Tell us the essentials and our team will craft a proposal that matches your event style.\n <\/p>\n\n <div class=\"req-meta\" aria-label=\"Grand Ballroom request summary\">\n <div><strong>Venue<\/strong><span>Grand Ballroom<\/span><\/div>\n <div><strong>Best For<\/strong><span>Wedding, gala, premium corporate events<\/span><\/div>\n <div><strong>Response<\/strong><span>Personal follow-up from our event specialist<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"req-body\">\n <div class=\"field-grid premium-field-grid\">\n <label class=\"field-group\">\n <span>Full Name<\/span>\n <input type=\"text\" name=\"fullName\" placeholder=\"Enter your full name\" required \/>\n <\/label>\n\n <label class=\"field-group\">\n <span>Email Address<\/span>\n <input type=\"email\" name=\"email\" placeholder=\"name@example.com\" required \/>\n <\/label>\n\n <label class=\"field-group\">\n <span>Phone Number<\/span>\n <input type=\"tel\" name=\"phone\" placeholder=\"Your active contact number\" required \/>\n <\/label>\n\n <label class=\"field-group select-wrap\">\n <span>Event Type<\/span>\n <select name=\"eventType\" required>\n <option value=\"\" disabled selected>Select your event type<\/option>\n <option>Meeting<\/option>\n <option>Wedding<\/option>\n <option>Social Event<\/option>\n <option>Group Stay<\/option>\n <\/select>\n <\/label>\n\n <label class=\"field-group\">\n <span>Estimated Guests<\/span>\n <input type=\"number\" name=\"guests\" placeholder=\"Approximate number of guests\" min=\"1\" \/>\n <\/label>\n\n <label class=\"field-group\">\n <span>Preferred Date<\/span>\n <input type=\"date\" name=\"date\" \/>\n <\/label>\n\n <label class=\"field-group full\">\n <span>Notes \/ Requirements<\/span>\n <textarea name=\"notes\"\n placeholder=\"Share setup preferences, timing, or any special requests\"><\/textarea>\n <\/label>\n <\/div>\n\n <div class=\"consent\">\n <input type=\"checkbox\" id=\"consentBallroom\" required \/>\n <label for=\"consentBallroom\">\n I agree to the use of my information for processing this request.\n <\/label>\n <\/div>\n\n <div class=\"req-actions\">\n <p class=\"assist-copy\">Prefer a faster response? Include your event date and expected guest count.<\/p>\n <button type=\"submit\" class=\"primary\">Send Request<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/form>\n\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Boardroom -->\n <div class=\"venue-modal premium-venue-modal\" id=\"modal-boardroom\" aria-hidden=\"true\" role=\"dialog\">\n <div class=\"modal-bg\"\n style=\"background-image:url('https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/10-scaled.jpg')\">\n <\/div>\n\n <div class=\"modal-shell\">\n <div class=\"modal-panel premium-modal-panel\">\n <button class=\"close\" aria-label=\"Close\">×<\/button>\n\n <div class=\"premium-modal-layout\">\n <div class=\"premium-modal-content\">\n <div class=\"modal-head premium-modal-head\">\n <span class=\"venue-kicker\">Executive Meetings<\/span>\n <h3>BOARDROOM<\/h3>\n <p class=\"sub\">\n Our 10 multipurpose boardrooms provide 635 sqm of flexible function space across the 2nd and 5th\n floors, ideal for executive meetings, focused discussions, and intimate corporate events.\n Each room is equipped for productive sessions with polished service and a discreet, professional\n setting.\n <\/p>\n <div class=\"divider\"><\/div>\n <\/div>\n\n <ul class=\"details venue-facts\" aria-label=\"Boardroom highlights\">\n <li><strong>Total Rooms<\/strong><span>10 boardrooms<\/span><\/li>\n <li><strong>Total Area<\/strong><span>635 sqm<\/span><\/li>\n <li><strong>Floors<\/strong><span>2nd & 5th<\/span><\/li>\n <li><strong>Facilities<\/strong><span>Projector, sound system, microphone, Wi-Fi<\/span><\/li>\n <\/ul>\n\n <figure class=\"venue-visual clickable-dimension\">\n <button type=\"button\" class=\"dimension-trigger\"\n data-dimension-src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/02\/boardroom_dimension_THJ.jpeg\"\n data-dimension-alt=\"Boardroom Dimensions\" aria-label=\"View Boardroom dimensions in full size\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/02\/boardroom_dimension_THJ.jpeg\"\n alt=\"Boardroom Dimensions\" loading=\"lazy\" \/>\n <span class=\"dimension-hint\">Click to view full dimension<\/span>\n <\/button>\n <figcaption>Dimension reference to help compare room setups and seating requirements.<\/figcaption>\n <\/figure>\n <\/div>\n\n <aside class=\"premium-side-card\" aria-label=\"Boardroom event assistance\">\n <span class=\"side-kicker\">Meeting Concierge<\/span>\n <h4>Ideal for executive sessions, strategy meetings, and focused corporate gatherings.<\/h4>\n <p>\n Send us your brief and we will recommend the most suitable room configuration, timing, and\n meeting support for your agenda.\n <\/p>\n <ul class=\"side-points\">\n <li>Well-suited for confidential meetings and smaller-scale events<\/li>\n <li>Flexible room allocation across multiple floors<\/li>\n <li>Built-in presentation support for smooth business sessions<\/li>\n <\/ul>\n <div class=\"modal-cta-wrap premium-cta-wrap\">\n <button class=\"open-req\" type=\"button\" data-target=\"#reqFormBoard\">\n Request Proposal\n <\/button>\n <p class=\"cta-note\">Share your meeting brief and preferred schedule for a faster recommendation.<\/p>\n <\/div>\n <\/aside>\n <\/div>\n\n\n <form class=\"req-form request-form-modal\" id=\"reqFormBoard\" hidden novalidate>\n <div class=\"req-card\">\n <button type=\"button\" class=\"close-popup\" aria-label=\"Close\">×<\/button>\n\n <div class=\"req-hero\">\n <span class=\"req-kicker\">Boardroom Enquiry<\/span>\n <h3>Request an Event Proposal<\/h3>\n <p class=\"sub\">Share your meeting details and let our team recommend the most suitable boardroom setup.\n <\/p>\n\n <div class=\"req-meta\" aria-label=\"Boardroom request summary\">\n <div><strong>Venue<\/strong><span>Boardroom Collection<\/span><\/div>\n <div><strong>Best For<\/strong><span>Executive meetings and private business sessions<\/span><\/div>\n <div><strong>Support<\/strong><span>Room suggestion with technical setup assistance<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"req-body\">\n <div class=\"field-grid premium-field-grid\">\n <label class=\"field-group\">\n <span>Full Name<\/span>\n <input type=\"text\" name=\"fullName\" placeholder=\"Enter your full name\" required \/>\n <\/label>\n\n <label class=\"field-group\">\n <span>Email Address<\/span>\n <input type=\"email\" name=\"email\" placeholder=\"name@example.com\" required \/>\n <\/label>\n\n <label class=\"field-group\">\n <span>Phone Number<\/span>\n <input type=\"tel\" name=\"phone\" placeholder=\"Your active contact number\" required \/>\n <\/label>\n\n <label class=\"field-group select-wrap\">\n <span>Event Type<\/span>\n <select name=\"eventType\" required>\n <option value=\"\" disabled selected>Select your event type<\/option>\n <option>Meeting<\/option>\n <option>Wedding<\/option>\n <option>Social Event<\/option>\n <option>Group Stay<\/option>\n <\/select>\n <\/label>\n\n <label class=\"field-group\">\n <span>Estimated Guests<\/span>\n <input type=\"number\" name=\"guests\" placeholder=\"Approximate number of guests\" min=\"1\" \/>\n <\/label>\n\n <label class=\"field-group\">\n <span>Preferred Date<\/span>\n <input type=\"date\" name=\"date\" \/>\n <\/label>\n\n <label class=\"field-group full\">\n <span>Notes \/ Requirements<\/span>\n <textarea name=\"notes\"\n placeholder=\"Tell us about seating style, presentation needs, or timing\"><\/textarea>\n <\/label>\n <\/div>\n\n <div class=\"consent\">\n <input type=\"checkbox\" id=\"consentBoard\" required \/>\n <label for=\"consentBoard\">\n I agree to the use of my information for processing this request.\n <\/label>\n <\/div>\n\n <div class=\"req-actions\">\n <p class=\"assist-copy\">Add your preferred room style or equipment needs to help us tailor the proposal.\n <\/p>\n <button type=\"submit\" class=\"primary\">Send Request<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"dimension-viewer\" id=\"dimensionViewer\" hidden aria-hidden=\"true\" role=\"dialog\"\n aria-label=\"Venue dimensions viewer\">\n <div class=\"dimension-viewer-backdrop\" data-dimension-close=\"true\"><\/div>\n <div class=\"dimension-viewer-panel\">\n <button type=\"button\" class=\"dimension-viewer-close\" id=\"dimensionViewerClose\"\n aria-label=\"Close dimension viewer\">×<\/button>\n <img decoding=\"async\" id=\"dimensionViewerImg\" src=\"\" alt=\"\" \/>\n <\/div>\n <\/div>\n\n <!-- === DINING & LOUNGES === -->\n <section class=\"section\" id=\"dining\">\n <h2 class=\"section-title\">The Art of Dining<\/h2>\n <p class=\"section-subtitle\">Seasonal inspirations, chef's table storytelling, and a cellar built for\n celebration.\n <\/p>\n\n <!-- THE LOBBY LOUNGE -->\n <div class=\"venue-row right reveal\">\n <div class=\"venue-text\">\n <h3>THE LOBBY LOUNGE<\/h3>\n <p>Experience a refined yet relaxing atmosphere at The Lobby Lounge at Trans Hotel Jakarta, the perfect\n setting for casual meetings, light dining, or unwinding throughout the day.<\/p>\n <button class=\"learn-more\" data-target=\"modal-lobby-lounge\">SEE MORE<\/button>\n <\/div>\n <div class=\"venue-image-wrap\">\n <span class=\"vline\"><\/span>\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/Lobby-Lounge.png\"\n alt=\"The Lobby Lounge\" \/>\n <\/div>\n <\/div>\n\n <!-- GRAND RESTAURANT -->\n <div class=\"venue-row left reveal\">\n <div class=\"venue-image-wrap\">\n <span class=\"vline\"><\/span>\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/GR-1920x1080-1.jpg\" alt=\"Grand Restaurant\" \/>\n <\/div>\n <div class=\"venue-text\">\n <h3>GRAND RESTAURANT<\/h3>\n <p>An elegant all-day dining destination featuring a refined selection of international and local cuisine.\n Perfect for business lunches, family gatherings, and curated dining experiences in a warm yet sophisticated\n setting.\n <\/p>\n <button class=\"learn-more\" data-target=\"modal-restaurant\">SEE MORE<\/button>\n <\/div>\n <\/div>\n\n <!-- THE 22ND SKY LOUNGE -->\n <div class=\"venue-row right reveal\">\n <div class=\"venue-text\">\n <h3>THE 22ND SKY LOUNGE<\/h3>\n <p>Elevated above the city with a stunning sky bridge connection, The 22nd Sky Lounge offers a chic atmosphere\n focused on artisanal pastries, premium coffee, and light bites. A perfect spot to unwind, meet, and enjoy\n skyline views in style.<\/p>\n <button class=\"learn-more\" data-target=\"modal-18th\">SEE MORE<\/button>\n <\/div>\n <div class=\"venue-image-wrap\">\n <span class=\"vline\"><\/span>\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/11\/Dining-2-Touch-Up-scaled.jpg\"\n alt=\"The 22nd Sky Lounge\" \/>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Modal: THE LOBBY LOUNGE -->\n <div class=\"venue-modal\" id=\"modal-lobby-lounge\" aria-hidden=\"true\" role=\"dialog\">\n <div class=\"modal-bg\"\n style=\"background-image:url('https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/Lobby-Lounge.png')\">\n <\/div>\n <div class=\"modal-shell\">\n <div class=\"modal-panel\">\n <button class=\"close\" aria-label=\"Close\">×<\/button>\n <div class=\"modal-head\">\n <h3>THE LOBBY LOUNGE<\/h3>\n <p class=\"sub\">Experience a refined yet relaxing atmosphere at The Lobby Lounge at Trans Hotel Jakarta,\n the perfect setting for casual meetings, light dining, or unwinding throughout the day.<\/p>\n <div class=\"divider\"><\/div>\n <\/div>\n <ul class=\"details\">\n <li>Designed with a harmonious blend of classic elegance and modern comfort, the space features plush\n seating, warm tones, and expansive windows that invite natural daylight, creating a welcoming and\n sophisticated ambience.<\/li>\n <li>Guests can enjoy a curated selection of premium beverages, light bites, and delightful refreshments,\n ideal for a morning coffee, afternoon tea, or a relaxed evening.<\/li>\n <li><strong>Opening Hours:<\/strong> 08.00 - 22.00<\/li>\n <li><strong>Highlights:<\/strong>\n <ul>\n <li>Elegant and comfortable seating<\/li>\n <li>Natural daylight with spacious ambience<\/li>\n <li>Selection of coffee, tea, and light refreshments<\/li>\n <li>Perfect for casual meetings and relaxation<\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/Lobby-Lounge.png\"\n alt=\"The Lobby Lounge\" loading=\"lazy\" \/>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Modal: GRAND RESTAURANT -->\n <div class=\"venue-modal\" id=\"modal-restaurant\" aria-hidden=\"true\" role=\"dialog\">\n <div class=\"modal-bg\"\n style=\"background-image:url('https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/GR-1920x1080-1.jpg')\">\n <\/div>\n <div class=\"modal-shell\">\n <div class=\"modal-panel\">\n <button class=\"close\" aria-label=\"Close\">×<\/button>\n <div class=\"modal-head\">\n <h3>GRAND RESTAURANT<\/h3>\n <p class=\"sub\">An elegant all-day dining destination featuring a refined selection of international and local\n cuisine. Perfect for business lunches, family gatherings, and curated dining experiences in a warm yet\n sophisticated setting.\n <\/p>\n <div class=\"divider\"><\/div>\n <\/div>\n <ul class=\"details\">\n <li><strong>Opening Hours:<\/strong>\n <ul>\n <li>Breakfast : 06.30 - 10.00<\/li>\n <li>Lunch - Dinner : 11.00 - 22.00<\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/GR-1920x1080-1.jpg\" alt=\"Interior\" loading=\"lazy\" \/>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Modal: THE 22ND SKY LOUNGE -->\n <div class=\"venue-modal\" id=\"modal-18th\" aria-hidden=\"true\" role=\"dialog\">\n <div class=\"modal-bg\"\n style=\"background-image:url('https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/11\/Dining-2-Touch-Up-scaled.jpg')\">\n <\/div>\n <div class=\"modal-shell\">\n <div class=\"modal-panel\">\n <button class=\"close\" aria-label=\"Close\">×<\/button>\n <div class=\"modal-head\">\n <h3>THE 22ND SKY LOUNGE<\/h3>\n <p class=\"sub\">Elevated above the city with a stunning sky bridge connection, The 22nd Sky Lounge offers a\n chic atmosphere focused on artisanal pastries, premium coffee, and light bites. A perfect spot to unwind,\n meet, and enjoy skyline views in style.<\/p>\n <div class=\"divider\"><\/div>\n <\/div>\n <ul class=\"details\">\n <li><strong>Opening Hours:<\/strong> 10.00 - 22.00<\/li>\n <!-- <li><strong>Dress Code:<\/strong> Smart casual<\/li> -->\n <\/ul>\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/11\/Dining-2-Touch-Up-scaled.jpg\"\n alt=\"The 22nd Sky Lounge\" loading=\"lazy\" \/>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- === LEISURE (new) === -->\n <section class=\"section\" id=\"leisure\">\n <div class=\"leisure-head\">\n <h2 class=\"section-title\">Leisure & Wellness<\/h2>\n <p class=\"section-subtitle\">Enjoy our beach theme outdoor experience with white sand imported from Australia\n and\n plenty of exciting kid\u2019s activities to make your stay the most enjoyable one!\n <\/p>\n <\/div>\n\n <div class=\"leisure-slider\" aria-roledescription=\"carousel\">\n <button class=\"leisure-prev\" aria-label=\"Previous\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M15.5 4.5L8 12l7.5 7.5\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.6\" \/>\n <\/svg>\n <\/button>\n <div class=\"leisure-viewport\">\n <div class=\"leisure-track\">\n <figure class=\"leisure-slide\" data-title=\"The Pool\" data-desc=\"\u2022 White sandy beach pool, lap pool, and kids pool with a slide.<br>\n\u2022 Certified lifeguard on duty<br>\n\u2022 Towel, shower, amenities, and slippers provided<br>\n\u2022 Luxurious poolside loungers for ultimate relaxation<br><br>\nOur swimming pool is a non-heated pool, thoughtfully designed for comfort in Cibubur\u2019s tropical climate. With temperatures ranging between 24\u201332\u00b0C, the water remains naturally pleasant for a refreshing and enjoyable experience throughout the day.<br><br>\n<strong>Opening Hours:<\/strong><br>\nEveryday | 6 a.m. - 6 p.m.<br><br>\nLevel 3\">\n <a href=\"#\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/POOL.jpg\" alt=\"The Pool\"\n loading=\"lazy\">\n <\/a>\n <figcaption>The Pool<\/figcaption>\n <\/figure>\n\n <figure class=\"leisure-slide\" data-title=\"The Wellness\" data-desc=\"Rejuvenate your body and mind at The Wellness at Trans Hotel Jakarta, where relaxation meets holistic well-being.<br><br>\nDesigned as a tranquil retreat within the city, The Wellness offers a range of facilities and treatments to help you recharge and restore balance. Whether you seek a refreshing workout or a calming escape, every detail is crafted to enhance your overall experience.<br><br>\nEnjoy a serene environment complemented by modern facilities and personalized services, ensuring a revitalizing journey for every guest.<br><br>\n<strong>Highlights:<\/strong><br>\n\u2022 Fully equipped fitness center<br>\n\u2022 Relaxing spa and wellness treatments<br>\n\u2022 Calm and rejuvenating atmosphere<br>\n\u2022 Personalized guest experience<br><br>\nLevel 21\">\n <a href=\"#\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/SALON.jpg\"\n alt=\"The Wellness\" loading=\"lazy\">\n <\/a>\n <figcaption>The Wellness<\/figcaption>\n <\/figure>\n\n <figure class=\"leisure-slide\" data-title=\"The Kids Club\" data-desc=\"Discovery and fun activities are all waiting at The Kids Club, to give your little ones a unique, adventure-packed holiday.<br><br>\nOur competent and caring staff will ensure that your children are having loads of fun. From the toddler playing area, to puppet show zone, up to the digital entertainment area, time just flies!<br><br>\n<strong>Opening Hours:<\/strong><br>\nEveryday from 8 a.m. - 6 p.m.<br>\nClosed for sanitation process from 11 a.m. - 12 noon & 3 - 4 p.m.<br><br>\nLevel 21\">\n <a href=\"#\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/KIDS-CLUB.jpg\"\n alt=\"The Kids Club\" loading=\"lazy\">\n <\/a>\n <figcaption>The Kids Club<\/figcaption>\n <\/figure>\n\n <figure class=\"leisure-slide\" data-title=\"The Fitness Centre\" data-desc=\"To keep you in shape and your stamina up, you will have the opportunity to exercise using state of the art fitness equipment from Techno Gym.<br><br>\nEquipped with multimedia features so you can watch your favourite TV show or browse the internet while running on the treadmill.<br><br>\nAfter you workout, refresh yourself in a tropical-themed escape.Revel in the soothing warmth of the hot pool, sauna and steam facilities in your changing room.<br><br>\n<strong>Opening Hours:<\/strong><br>\nOpen for hotel guests: 24 hours<br>\nFor walk-in guests: 5.30 a.m. - 9 p.m.<br><br>\nLevel 21\">\n <a href=\"#\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/GYM.jpg\"\n alt=\"Fitness Centre\" loading=\"lazy\">\n <\/a>\n <figcaption>The Fitness Centre<\/figcaption>\n <\/figure>\n <\/div>\n <\/div>\n <button class=\"leisure-next\" aria-label=\"Next\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M8.5 4.5L16 12l-7.5 7.5\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.6\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <\/section>\n\n <!-- ============================= -->\n <!-- LEISURE LUXURY MODAL -->\n <!-- ============================= -->\n <div class=\"leisure-modal\" id=\"leisureModal\">\n <div class=\"leisure-overlay\"><\/div>\n\n <div class=\"leisure-panel\">\n <button class=\"leisure-close\">×<\/button>\n\n <div class=\"leisure-inner\">\n <div class=\"leisure-image-wrap\">\n <img decoding=\"async\" id=\"leisureModalImg\" src=\"\" alt=\"\">\n <\/div>\n\n <div class=\"leisure-content\">\n <h3 id=\"leisureModalTitle\"><\/h3>\n <div id=\"leisureModalDesc\"><\/div>\n\n <div class=\"leisure-cta\">\n <a href=\"https:\/\/reservations.transhoteljakarta.com\/book\/accommodations\" class=\"leisure-book-btn\"\n target=\"_blank\" rel=\"noopener noreferrer\">\n <span class=\"leisure-book-text\">Book Experience<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- === GALLERY === -->\n <section class=\"section alt\" id=\"gallery\">\n <div class=\"gal-head\">\n <h2>Gallery<\/h2>\n <p class=\"lead\">Choose a category or explore all visuals.<\/p>\n <\/div>\n\n\n <div class=\"filters\" id=\"galFilters\">\n <div class=\"filter-group\">\n <button data-cat=\"all\" class=\"active\">All<\/button>\n <\/div>\n\n <div class=\"filter-group\">\n <button data-cat=\"rooms\">Rooms<\/button>\n <div class=\"sub-menu\">\n <button data-sub=\"premier-room\">Premier Room<\/button>\n <button data-sub=\"premier-skyline-room\">Premier Skyline Room<\/button>\n <button data-sub=\"junior-suite\">Junior Suite<\/button>\n <button data-sub=\"celebrity-suite\">Celebrity Suite<\/button>\n <button data-sub=\"presidential-suite\">Presidential Suite<\/button>\n <\/div>\n <\/div>\n\n <div class=\"filter-group\">\n <button data-cat=\"dining\">Dining<\/button>\n <div class=\"sub-menu\">\n <button data-sub=\"lobby-lounge\">The Lobby Lounge<\/button>\n <button data-sub=\"grand-restaurant\">Grand Restaurant<\/button>\n <button data-sub=\"sky-lounge\">The 22nd Sky Lounge<\/button>\n <\/div>\n <\/div>\n\n <div class=\"filter-group\">\n <button data-cat=\"leisure\">Leisure<\/button>\n <div class=\"sub-menu\">\n <button data-sub=\"the-pool\">The Pool<\/button>\n <button data-sub=\"the-wellness\">The Wellness<\/button>\n <button data-sub=\"the-kids-club\">The Kids Club<\/button>\n <button data-sub=\"the-fitness-centre\">The Fitness Centre<\/button>\n <\/div>\n <\/div>\n\n <div class=\"filter-group\">\n <button data-cat=\"events\">Events<\/button>\n <div class=\"sub-menu\">\n <button data-sub=\"ballroom\">Grand Ballroom<\/button>\n <button data-sub=\"boardroom\">Boardroom<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n\n\n <div class=\"gal-grid collapsed\" id=\"galGrid\">\n <!-- gunakan class wide \/ tall untuk variasi yang tetap rapi -->\n <figure class=\"gal wide\" data-cat=\"rooms\" data-sub=\"premier-room\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/4.jpg\"\n alt=\"Premier Room\">\n <figcaption>Premier Room<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"rooms\" data-sub=\"premier-skyline-room\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/1.jpg\"\n alt=\"Premier Skyline Room\">\n <figcaption>Premier Skyline Room<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"rooms\" data-sub=\"premier-room\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/IMG_2498-scaled.jpg\"\n alt=\"Premier Room\">\n <figcaption>Premier Room<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"rooms\" data-sub=\"premier-skyline-room\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/dreamina-2026-04-03-3362-Enhance-the-clarity-improve-the-lightin-e1775643970332.jpeg\"\n alt=\"Premier Skyline Room\">\n <figcaption>Premier Skyline Room<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"rooms\" data-sub=\"premier-room\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/6.jpg\"\n alt=\"Premier Room\">\n <figcaption>Premier Room<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"rooms\" data-sub=\"premier-skyline-room\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/6.jpg\"\n alt=\"Premier Skyline Room\">\n <figcaption>Premier Skyline Room<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"rooms\" data-sub=\"premier-room\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/IMG_2450-scaled-e1775645104676.jpg\"\n alt=\"Premier Room\">\n <figcaption>Premier Room<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"rooms\" data-sub=\"premier-skyline-room\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/IMG_2450-scaled-e1775645104676.jpg\"\n alt=\"Premier Skyline Room\">\n <figcaption>Premier Skyline Room<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"rooms\" data-sub=\"junior-suite\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/3.jpg\"\n alt=\"Junior Suite\">\n <figcaption>Junior Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"rooms\" data-sub=\"junior-suite\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/IMG_2463-scaled.jpg\"\n alt=\"Junior Suite\">\n <figcaption>Junior Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"rooms\" data-sub=\"junior-suite\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/IMG_2419-scaled.jpg\"\n alt=\"Junior Suite\">\n <figcaption>Junior Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"rooms\" data-sub=\"junior-suite\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/IMG_2450-scaled-e1775645104676.jpg\"\n alt=\"Junior Suite\">\n <figcaption>Junior Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal tall\" data-cat=\"leisure\" data-sub=\"the-wellness\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/20250918-THC-SPA_250919_151426_page-0001-scaled-e1759910576148.jpg\"\n alt=\"The Wellness\">\n <figcaption>The Wellness<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"dining\" data-sub=\"lobby-lounge\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/Lobby-Lounge.png\"\n alt=\"The Lobby Lounge\">\n <figcaption>The Lobby Lounge<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"dining\" data-sub=\"grand-restaurant\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/2025-10-06-THC-ADD_page-0002-scaled-e1760931998775.jpg\"\n alt=\"Grand Restaurant\">\n <figcaption>Grand Restaurant<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"dining\" data-sub=\"grand-restaurant\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/2025-10-06-THC-ADD_page-0003-scaled-e1760932022560.jpg\"\n alt=\"Grand Restaurant\">\n <figcaption>Grand Restaurant<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"dining\" data-sub=\"grand-restaurant\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/2025-10-06-THC-ADD_page-0004-scaled-e1760932061472.jpg\"\n alt=\"Grand Restaurant\">\n <figcaption>Grand Restaurant<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"dining\" data-sub=\"grand-restaurant\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/2025-10-06-THC-ADD_page-0005-scaled-e1760932082450.jpg\"\n alt=\"Grand Restaurant\">\n <figcaption>Grand Restaurant<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"dining\" data-sub=\"grand-restaurant\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/2025-10-06-THC-ADD_page-0006-scaled-e1760932104772.jpg\"\n alt=\"Grand Restaurant\">\n <figcaption>Grand Restaurant<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"dining\" data-sub=\"grand-restaurant\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/GR-1920x1080-1.jpg\" alt=\"Grand Restaurant\">\n <figcaption>Grand Restaurant<\/figcaption>\n <\/figure>\n\n <figure class=\"gal tall\" data-cat=\"leisure\" data-sub=\"the-wellness\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/20250918-THC-SPA_250919_151426_page-0002-scaled-e1759910592172.jpg\"\n alt=\"The Wellness\">\n <figcaption>The Wellness<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"dining\" data-sub=\"grand-restaurant\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/1.png\" alt=\"Grand Restaurant\">\n <figcaption>Grand Restaurant<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"events\" data-sub=\"ballroom\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/02-1-1-scaled.jpg\" alt=\"Grand Ballroom\">\n <figcaption>Grand Ballroom<\/figcaption>\n <\/figure>\n\n\n <figure class=\"gal\" data-cat=\"events\" data-sub=\"boardroom\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/10-scaled.jpg\" alt=\"Boardroom\">\n <figcaption>Boardroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"dining\" data-sub=\"grand-restaurant\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/2.png\" alt=\"Grand Restaurant\">\n <figcaption>Grand Restaurant<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"events\" data-sub=\"boardroom\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/02-2-scaled.jpg\" alt=\"Boardroom\">\n <figcaption>Boardroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"rooms\" data-sub=\"celebrity-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/CS-copy.png\"\n alt=\"Celebrity Suite\">\n <figcaption>Celebrity Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"rooms\" data-sub=\"celebrity-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/CS.png\"\n alt=\"Celebrity Suite\">\n <figcaption>Celebrity Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"events\" data-sub=\"boardroom\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/03-1-scaled.jpg\" alt=\"Boardroom\">\n <figcaption>Boardroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"dining\" data-sub=\"grand-restaurant\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/3.png\" alt=\"Grand Restaurant\">\n <figcaption>Grand Restaurant<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"events\" data-sub=\"boardroom\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/03-scaled.jpg\" alt=\"Boardroom\">\n <figcaption>Boardroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"events\" data-sub=\"boardroom\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/04-scaled.jpg\" alt=\"Boardroom\">\n <figcaption>Boardroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"events\" data-sub=\"boardroom\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/05-scaled.jpg\" alt=\"Boardroom\">\n <figcaption>Boardroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"events\" data-sub=\"boardroom\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/06-scaled.jpg\" alt=\"Boardroom\">\n <figcaption>Boardroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"events\" data-sub=\"boardroom\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/TPC-MEETING-ROOM_page-0002-scaled-e1759997759461.jpg\"\n alt=\"Boardroom\">\n <figcaption>Boardroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"dining\" data-sub=\"grand-restaurant\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/4.png\" alt=\"Grand Restaurant\">\n <figcaption>Grand Restaurant<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"rooms\" data-sub=\"celebrity-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/CS-r.png\"\n alt=\"Celebrity Suite\">\n <figcaption>Celebrity Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"dining\" data-sub=\"grand-restaurant\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/6.png\" alt=\"Grand Restaurant\">\n <figcaption>Grand Restaurant<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"events\" data-sub=\"boardroom\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/TPC-MEETING-ROOM_page-0003-scaled-e1759997811707.jpg\"\n alt=\"Boardroom\">\n <figcaption>Boardroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"dining\" data-sub=\"sky-lounge\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/11\/Dining-1-scaled.jpg\"\n alt=\"The 22nd Sky Lounge\">\n <figcaption>The 22nd Sky Lounge<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"rooms\" data-sub=\"celebrity-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/CS-LP.png\"\n alt=\"Celebrity Suite\">\n <figcaption>Celebrity Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"dining\" data-sub=\"sky-lounge\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/11\/Dining-2-Touch-Up-scaled.jpg\"\n alt=\"The 22nd Sky Lounge\">\n <figcaption>The 22nd Sky Lounge<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-kids-club\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/KIDS-CLUB.jpg\"\n alt=\"The Kids Club\">\n <figcaption>The Kids Club<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"events\" data-sub=\"boardroom\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/TPC-MEETING-ROOM_page-0004-scaled-e1759997833233.jpg\"\n alt=\"Boardroom\">\n <figcaption>Boardroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-kids-club\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/11\/TPC-KIDS-CLUB_page-0002-scaled.jpg\"\n alt=\"The Kids Club\">\n <figcaption>The Kids Club<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"rooms\" data-sub=\"celebrity-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/LP-CS-2.png\"\n alt=\"Celebrity Suite\">\n <figcaption>Celebrity Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-kids-club\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/11\/TPC-KIDS-CLUB_page-0003-scaled.jpg\"\n alt=\"The Kids Club\">\n <figcaption>The Kids Club<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"events\" data-sub=\"boardroom\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/TPC-MEETING-ROOM_page-0005-scaled-e1759997872822.jpg\"\n alt=\"Boardroom\">\n <figcaption>Boardroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-kids-club\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/11\/TPC-KIDS-CLUB_page-0004-scaled.jpg\"\n alt=\"The Kids Club\">\n <figcaption>The Kids Club<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"rooms\" data-sub=\"celebrity-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/BR-CS.png\"\n alt=\"Celebrity Suite\">\n <figcaption>Celebrity Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"rooms\" data-sub=\"celebrity-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/BT-CS.png\"\n alt=\"Celebrity Suite\">\n <figcaption>Celebrity Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"rooms\" data-sub=\"celebrity-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/Amenities-CS.png\"\n alt=\"Celebrity Suite\">\n <figcaption>Celebrity Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-fitness-centre\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/GYM.jpg\"\n alt=\"The Fitness Centre\">\n <figcaption>The Fitness Centre<\/figcaption>\n <\/figure>\n\n <figure class=\"gal tall\" data-cat=\"rooms\" data-sub=\"presidential-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0007-scaled-e1759745594778.jpg\"\n alt=\"Presidential Suite\">\n <figcaption>Presidential Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-fitness-centre\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/11\/TPC-GYM_page-0003-scaled-e1764013323397.jpg\"\n alt=\"The Fitness Centre\">\n <figcaption>The Fitness Centre<\/figcaption>\n <\/figure>\n\n <figure class=\"gal tall\" data-cat=\"leisure\" data-sub=\"the-wellness\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/SALON.jpg\"\n alt=\"The Wellness\">\n <figcaption>The Wellness<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-fitness-centre\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/11\/TPC-GYM_page-0004-scaled-e1764013336349.jpg\"\n alt=\"The Fitness Centre\">\n <figcaption>The Fitness Centre<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-pool\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/POOL.jpg\" alt=\"The Pool\">\n <figcaption>Pool Dining<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-fitness-centre\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/11\/TPC-GYM_page-0005-scaled-e1764013348596.jpg\"\n alt=\"The Fitness Centre\">\n <figcaption>The Fitness Centre<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-wellness\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/20250918-THC-SPA_250919_151426_page-0005-scaled-e1759909390785.jpg\"\n alt=\"The Wellness\">\n <figcaption>The Wellness<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-fitness-centre\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/11\/TPC-GYM_page-0006-scaled-e1764013362268.jpg\"\n alt=\"The Fitness Centre\">\n <figcaption>The Fitness Centre<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"events\" data-sub=\"ballroom\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/01-scaled.jpg\" alt=\"Grand Ballroom\">\n <figcaption>Grand Ballroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-fitness-centre\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/11\/TPC-GYM_page-0002-scaled-e1764013375685.jpg\"\n alt=\"The Fitness Centre\">\n <figcaption>The Fitness Centre<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-pool\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/2-Copy.png\" alt=\"Grand Restaurant\">\n <figcaption>The Pool<\/figcaption>\n <\/figure>\n\n <figure class=\"gal wide\" data-cat=\"events\" data-sub=\"ballroom\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/TPC-BALLROOM_page-0001-scaled.jpg\"\n alt=\"Grand Ballroom\">\n <figcaption>Grand Ballroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-pool\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/POOL.jpg\" alt=\"The Pool\">\n <figcaption>The Pool<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-wellness\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/20250918-THC-SPA_250919_151426_page-0004-scaled-e1759909361122.jpg\"\n alt=\"The Wellness\">\n <figcaption>The Wellness<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"events\" data-sub=\"ballroom\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/TPC-BALLROOM_page-0002-scaled.jpg\"\n alt=\"Grand Ballroom\">\n <figcaption>Grand Ballroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"leisure\" data-sub=\"the-wellness\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/20250918-THC-SPA_250919_151426_page-0003-scaled-e1759910654736.jpg\"\n alt=\"The Wellness\">\n <figcaption>The Wellness<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"events\" data-sub=\"ballroom\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/TPC-BALLROOM_page-0003-2-scaled.jpg\"\n alt=\"Grand Ballroom\">\n <figcaption>Grand Ballroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal tall\" data-cat=\"rooms\" data-sub=\"presidential-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0006-scaled-e1759745579424.jpg\"\n alt=\"Presidential Suite\">\n <figcaption>Presidential Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal\" data-cat=\"events\" data-sub=\"ballroom\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/TPC-BALLROOM_page-0004-3-scaled-e1759997443742.jpg\"\n alt=\"Grand Ballroom\">\n <figcaption>Grand Ballroom<\/figcaption>\n <\/figure>\n\n <figure class=\"gal tall\" data-cat=\"rooms\" data-sub=\"presidential-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0005-scaled-e1759745565445.jpg\"\n alt=\"Presidential Suite\">\n <figcaption>Presidential Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal tall\" data-cat=\"rooms\" data-sub=\"presidential-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0004-scaled-e1759745549350.jpg\"\n alt=\"Presidential Suite\">\n <figcaption>Presidential Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal tall\" data-cat=\"rooms\" data-sub=\"presidential-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0003-scaled-e1759745533560.jpg\"\n alt=\"Presidential Suite\">\n <figcaption>Presidential Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal tall\" data-cat=\"rooms\" data-sub=\"presidential-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0002-scaled-e1759745518842.jpg\"\n alt=\"Presidential Suite\">\n <figcaption>Presidential Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal tall\" data-cat=\"rooms\" data-sub=\"presidential-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0008-scaled-e1759745607120.jpg\"\n alt=\"Presidential Suite\">\n <figcaption>Presidential Suite<\/figcaption>\n <\/figure>\n\n <figure class=\"gal tall\" data-cat=\"rooms\" data-sub=\"presidential-suite\">\n <img decoding=\"async\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0009-scaled-e1759745624414.jpg\"\n alt=\"Presidential Suite\">\n <figcaption>Presidential Suite<\/figcaption>\n <\/figure>\n <\/div>\n\n <div style=\"display:flex;justify-content:center;margin-top:8px\">\n <button id=\"galMore\" aria-label=\"Toggle gallery\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" \/>\n <\/svg>\n <\/button>\n\n <\/div>\n <\/section>\n <!-- <div class=\"image-viewer\" id=\"imageViewer\">\n <span class=\"viewer-close\" id=\"viewerClose\">×<\/span>\n <div class=\"viewer-nav viewer-prev\" id=\"viewerPrev\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" \/>\n <\/svg>\n <\/div>\n <img decoding=\"async\" id=\"viewerImg\" src=\"\" alt=\"Gallery Image\">\n <div class=\"viewer-nav viewer-next\" id=\"viewerNext\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \/>\n <\/svg>\n <\/div>\n <\/div> -->\n\n\n <!-- === OFFERS === -->\n <section id=\"offers\" aria-labelledby=\"offers-title\">\n <header class=\"offers-head\">\n <h2 id=\"offers-title\"><em>Exclusive<\/em> Offers<\/h2>\n <p class=\"lead\">Click an offer to book with the promo code applied automatically.<\/p>\n <\/header>\n\n <div class=\"offers-grid\">\n <!-- UNBEATABLE ESCAPES -->\n <article class=\"offer js-offer\" data-book-url=\"https:\/\/reservations.travelclick.com\/9883183?RatePlanId=10960402\"\n data-preview=\"50% off for Bank Mega cardholders \u2014 book from IDR 900.000 nett\/night.\">\n <div class=\"media\"\n style=\"--img:url('https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/03\/POP-UP-Promotion_BANK-MEGA.jpg');\">\n <\/div>\n <div class=\"veil\"><\/div>\n <div class=\"copy\">\n <span class=\"label\">Opening Offer<\/span>\n <h3>\n <span class=\"up\">Bank Mega<\/span>\n <span class=\"script\">Exclusive Opening Offer<\/span>\n <\/h3>\n <p class=\"desc\">Stay from IDR 900.000 nett\/night. 50% off for Bank Mega credit card holders.<\/p>\n <div class=\"cta\">\n <button class=\"btn ghost\" data-action=\"preview\">View More<\/button>\n <button class=\"btn solid\" data-action=\"book\">Book Now<\/button>\n <\/div>\n <\/div>\n <\/article>\n\n <!-- SERENE BLISS -->\n <article class=\"offer js-offer\" data-name=\"Serene Bliss\" data-promo=\"SERENE20\"\n data-book-url=\"https:\/\/transhotelgroup.com\/jump?utm_source=website&utm_medium=special_offer&utm_campaign=special_opening_rate&utm_content=homepage_special_offer&hotel=thj&placement=homepage\"\n data-preview=\"Book via THG App and unlock exclusive rates from IDR 1.170.000 nett\/night.\">\n <div class=\"media\"\n style=\"--img:url('https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/03\/POP-UP-Promotion_-promotion-THG-1.jpg');\">\n <\/div>\n <div class=\"veil\"><\/div>\n <div class=\"copy\">\n <span class=\"label\">Opening Offer<\/span>\n <h3>\n <span class=\"up\">THG App<\/span>\n <span class=\"script\">Exclusive Opening Offer<\/span>\n <\/h3>\n <p class=\"desc\">Book via THG App and enjoy rates from IDR 1.170.000 nett\/night. Exclusive offer.<\/p>\n\n <div class=\"cta\">\n <button class=\"btn ghost\" data-action=\"preview\">View More<\/button>\n <button class=\"btn solid\" data-action=\"book\">Book Now<\/button>\n <\/div>\n <\/div>\n <\/article>\n\n <!-- STAY N PLAY ESCAPE -->\n <article class=\"offer js-offer\" data-book-url=\"https:\/\/reservations.travelclick.com\/9883183?RatePlanId=10986024\"\n data-preview=\"Enjoy a complete stay with room, breakfast, and 2 Trans Studio Cibubur tickets-perfect for a fun and effortless getaway.\">\n <div class=\"media\"\n style=\"--img:url('https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/03\/STAY-AND-PLAY-POP-Up.jpg');\">\n <\/div>\n <div class=\"veil\"><\/div>\n <div class=\"copy\">\n <span class=\"label\">Opening Offer<\/span>\n <h3>\n <span class=\"up\">Stay & Play Escape<\/span>\n <span class=\"script\">Stay & Play Promo<\/span>\n <\/h3>\n <p class=\"desc\">Enjoy a complete getaway with room, breakfast, and 2 tickets to Trans Studio Cibubur from IDR\n 1.388.000 nett\/night.<\/p>\n <div class=\"cta\">\n <button class=\"btn ghost\" data-action=\"preview\">View More<\/button>\n <button class=\"btn solid\" data-action=\"book\">Book Now<\/button>\n <\/div>\n <\/div>\n <\/article>\n <\/div>\n <\/section>\n\n <!-- === DESTINATION (no card) === -->\n <section class=\"section\" id=\"nearby\">\n <h2>Experiences Around Us<\/h2>\n <p class=\"lead\">Cibubur & East Jakarta highlights within convenient reach.<\/p>\n\n <div class=\"dest-grid\">\n <article class=\"dest-item\" data-title=\"Trans Studio Cibubur\"\n data-desc=\"Step into a day of family fun at Trans Studio Cibubur\u2014an indoor theme park filled with thrilling rides, live shows, and attractions for all ages. Make the most of your visit by staying at Trans Hotel Jakarta, just moments away for effortless access and a relaxing retreat after an action-packed day.\"\n data-images=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/46487bfd-de79-457b-a003-876f7b8e11f6.jpg\"\n data-details=\"Family-friendly|Open daily|Parking available\">\n <figure class=\"media\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/46487bfd-de79-457b-a003-876f7b8e11f6.jpg\"\n alt=\"Trans Studio Cibubur\">\n <\/figure>\n <div class=\"copy\">\n <h3>Trans Studio Cibubur<\/h3>\n <p>Discover the ultimate destination for fun and adventure.<\/p>\n <a class=\"cta\" href=\"#\">SEE MORE<\/a>\n <\/div>\n <\/article>\n\n <article class=\"dest-item\" data-title=\"Trans Studio Mall Cibubur\"\n data-desc=\"Discover shopping, dining, and entertainment all in one place at Trans Studio Mall Cibubur \u2014 from trendy boutiques to must-try eateries and family attractions. Enjoy seamless access and unwind in comfort by choosing Trans Hotel Jakarta as your home base during your visit.\"\n data-images=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/trans-cibubur-ceiling-gypsum-8.jpg\"\n data-details=\"Shopping & Dining|Entertainment hub|Accessible parking\">\n <figure class=\"media\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/trans-cibubur-ceiling-gypsum-8.jpg\"\n alt=\"Trans Studio Mall Cibubur\">\n <\/figure>\n <div class=\"copy\">\n <h3>Trans Studio Mall Cibubur<\/h3>\n <p>Your all-in-one lifestyle experience in Cibubur.<\/p>\n <a class=\"cta\" href=\"#\">SEE MORE<\/a>\n <\/div>\n <\/article>\n <\/div>\n <\/section>\n\n <!-- Destination modal (styled like Meetings & Events) -->\n <div class=\"venue-modal\" id=\"modal-destination\" aria-hidden=\"true\" role=\"dialog\">\n <div class=\"modal-bg\" id=\"modalDestinationBg\"><\/div>\n\n <div class=\"modal-shell\">\n <div class=\"modal-panel\">\n <button class=\"close\" aria-label=\"Close\">×<\/button>\n\n <div class=\"modal-head\">\n <h3 id=\"modalDestinationTitle\">Nearby Destination<\/h3>\n <p class=\"sub\" id=\"modalDestinationSub\">Explore nearby points of interest.<\/p>\n <div class=\"divider\"><\/div>\n <\/div>\n\n <ul class=\"details\" id=\"modalDestinationDetails\" hidden><\/ul>\n\n <img decoding=\"async\" id=\"modalDestinationImage\" src=\"\" alt=\"\" loading=\"lazy\" style=\"max-width:100%;border-radius:6px;\" \/>\n\n <div class=\"modal-cta-wrap\" id=\"modalDestinationCtas\" style=\"margin-top:14px;\">\n <!-- optional CTAs injected dynamically -->\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- ===== LOCATION ===== -->\n <section class=\"section\" id=\"location\">\n <div class=\"loc-head\">\n <h2>Location<\/h2>\n <p class=\"lead\">Trans Hotel Jakarta \u2014 Steps from Trans Studio Mall Cibubur.<\/p>\n <\/div>\n\n <div class=\"loc-grid\">\n <div class=\"loc-info\">\n <div class=\"info-pane\">\n <div class=\"info-scroll\">\n <span class=\"kicker\">Address<\/span>\n <h3>Trans Hotel Jakarta<\/h3>\n <p class=\"addr\">\n Jl. Alternatif Cibubur No.230 A, West Java - Indonesia<br>\n Integrated with Trans Studio Mall Cibubur\n <\/p>\n\n <div class=\"hair\"><\/div>\n\n <span class=\"kicker\">Get Around<\/span>\n <div class=\"modes\" id=\"locModes\">\n <button type=\"button\" data-mode=\"drive\" aria-pressed=\"true\">Drive<\/button>\n <button type=\"button\" data-mode=\"transit\" aria-pressed=\"false\">Transit<\/button>\n <button type=\"button\" data-mode=\"walk\" aria-pressed=\"false\">Walk<\/button>\n <\/div>\n\n <div class=\"times\" id=\"locTimes\">\n <div class=\"time-item\"><span>Trans Studio Mall<\/span><strong>1-3 min<\/strong><\/div>\n <div class=\"time-item\"><span>Jkt Outer Ring Road<\/span><strong>8-12 min<\/strong><\/div>\n <div class=\"time-item\"><span>Taman Mini Indonesia Indah<\/span><strong>18-25 min<\/strong>\n <\/div>\n <div class=\"time-item\"><span>Soekarno-Hatta (via toll)<\/span><strong>55-75 min<\/strong>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"route-bar\">\n <a id=\"routeOpen\" href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Open in Google Maps<\/a>\n <a id=\"routeCopy\" href=\"#\">Copy Address<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n\n <!-- Map -->\n <div class=\"loc-map\">\n <div class=\"mapwrap\" id=\"mapWrap\">\n <div class=\"map-badge\">Live Map<\/div>\n <iframe id=\"mapFrame\"\n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d5106.642517110833!2d106.89816480498034!3d-6.374765035476947!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69ed0033ad81b1%3A0xe629bf505cb03a95!2sTrans%20Hotel%20Jakarta!5e0!3m2!1sen!2sid!4v1773487664540!5m2!1sen!2sid\"\n loading=\"lazy\" title=\"Map Trans Hotel Jakarta\"><\/iframe>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ===== SUBSCRIBE ===== -->\n <section class=\"section\" id=\"subscribe\">\n <div class=\"sub-wrap\">\n <div class=\"sub-head\">\n <h2 class=\"display\">Don't Miss<br>Our Exclusive<br>Updates<\/h2>\n <\/div>\n\n <!-- BAR: kiri lead, kanan form; sejajar satu garis -->\n <div class=\"sub-bar\">\n <p class=\"lead\">Exclusive offers & latest stories from our hotel.<\/p>\n\n <form class=\"sub-form\" id=\"subForm\" novalidate>\n <label class=\"field\" for=\"subEmail\">\n <input id=\"subEmail\" name=\"email\" type=\"email\" inputmode=\"email\" placeholder=\"Your E-mail Address\" required\n aria-required=\"true\" \/>\n <\/label>\n <button class=\"sub-btn\" type=\"submit\" aria-label=\"Subscribe\">Subscribe!<\/button>\n <\/form>\n <\/div>\n\n <p class=\"msg\" id=\"subMsg\" role=\"status\" aria-live=\"polite\"><\/p>\n <\/div>\n <\/section>\n\n\n\n <footer class=\"site-footer\">\n <!-- Left: Logos + App promo -->\n <div class=\"f-col f-about\">\n <div class=\"f-logos\">\n <!-- Trans Hotel Group -->\n <a class=\"logo-link\" href=\"https:\/\/www.transhotelgroup.com\" aria-label=\"Trans Hotel Group\">\n <span class=\"logo-swap\">\n <img decoding=\"async\" class=\"mono\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/thg_logo_white-e1759584557294.png\"\n alt=\"Trans Hotel Group\" \/>\n <img decoding=\"async\" class=\"color\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THG-backdrop-potrait-01-scaled-e1759587776720.png\"\n alt=\"Trans Hotel Group (color)\" \/>\n <\/span>\n <\/a>\n\n <!-- Trans Hotel Jakarta -->\n <a class=\"logo-link\" href=\"https:\/\/transhoteljakarta.com\" aria-label=\"Trans Hotel Jakarta\">\n <span class=\"logo-swap\">\n <img decoding=\"async\" class=\"mono\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THJ-Logo-BW-e1759872856954.png\"\n alt=\"Trans Hotel Jakarta\" \/>\n <img decoding=\"async\" class=\"color\"\n src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/Untitled-1-01-e1759587802825.png\"\n alt=\"Trans Hotel Jakarta (color)\" \/>\n <\/span>\n <\/a>\n\n <!-- Apps -->\n <a class=\"app-link\" href=\"https:\/\/www.transhotelgroup.com\/apps\" aria-label=\"THG Apps\">\n <span class=\"img-wrap\">\n <img decoding=\"async\" class=\"mono\" src=\"https:\/\/www.transresortbali.com\/images\/apps.webp\" alt=\"THG Apps\" \/>\n <img decoding=\"async\" class=\"color\" src=\"https:\/\/www.transresortbali.com\/images\/apps.webp\" alt=\"THG Apps (color)\" \/>\n <\/span>\n <\/a>\n <\/div>\n\n\n\n <p class=\"f-kicker\">\n Enjoy guaranteed best rate plus more privileges through our Trans Hotel Group Apps. Download and\n register now!\n <\/p>\n\n <div class=\"f-stores\">\n <a class=\"store\" href=\"https:\/\/play.google.com\/store\/search?q=trans+hotel+group&c=apps&hl=id\"\n aria-label=\"Download on Google Play\">\n <span>Download in<\/span><i class=\"fa-brands fa-google-play\"><\/i>\n <\/a>\n <a class=\"store\" href=\"https:\/\/apps.apple.com\/id\/app\/trans-hotel-group\/id1618144668\"\n aria-label=\"Download on App Store\">\n <span>Download in<\/span><i class=\"fa-brands fa-apple\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Middle: Property list -->\n <div class=\"f-col\">\n <h4>Trans Hotel Group<\/h4>\n <ul class=\"f-list\">\n <li><a href=\"https:\/\/www.thetranshotel.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Trans Luxury Hotel\n\n Bandung<\/a><\/li>\n <li><a href=\"https:\/\/thetranshotelsurabaya.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Trans Luxury\n\n Hotel Surabaya<\/a><\/li>\n <li><a href=\"https:\/\/www.transresortbali.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Trans\n Resort\n Bali<\/a><\/li>\n <li><a href=\"https:\/\/www.transluxuryyacht.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Trans Luxury\n\n Yacht<\/a><\/li>\n <li><a href=\"https:\/\/transhoteljakarta.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Trans Hotel\n Jakarta<\/a>\n <\/li>\n <li><a href=\"#\">Trans Fashion Hotel Legian<\/a><\/li>\n <li><a href=\"https:\/\/all.accor.com\/hotel\/8060\/index.id.shtml\" target=\"_blank\" rel=\"noopener noreferrer\">Ibis\n Bandung Trans Studio Hotel<\/a><\/li>\n <li><a\n href=\"https:\/\/www.astonhotelsinternational.com\/id\/hotel\/view\/39\/aston-tanjung-pinang-hotel---conference-center\"\n target=\"_blank\" rel=\"noopener noreferrer\">Aston Tanjung Pinang Hotel<\/a><\/li>\n <li><a href=\"https:\/\/fourstarbytranshotel.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Four Star By\n Trans\n Hotel<\/a><\/li>\n <\/ul>\n\n <!--\n <div class=\"journal-promo\" aria-label=\"Journal access\">\n <p class=\"hint\">Editorial & Stories<\/p>\n <a class=\"journal-link\" href=\"pages\/journal.html\" aria-label=\"Explore Our Journal\">\n Explore Our Journal <i class=\"fa-solid fa-arrow-right\"><\/i>\n <\/a>\n <\/div>\n -->\n <\/div>\n\n <!-- Right: Address + Contact -->\n <div class=\"f-col\">\n <h4>Address<\/h4>\n <p class=\"f-small\">\n Jl. Alternatif Cibubur No.230 A,\n West Java - Indonesia 16454\n <\/p>\n\n <h4><br>Get In Touch<\/h4>\n <ul class=\"f-list\">\n <li><i class=\"fa-regular fa-envelope\"><\/i>\n <a href=\"mailto:info@transhoteljakarta.com\">info@transhoteljakarta.com<\/a>\n <\/li>\n <li><i class=\"fa-solid fa-phone\"><\/i>\n <a href=\"tel:021 39738888\">021 39738888<\/a>\n <\/li>\n <li><i class=\"fa-brands fa-whatsapp\"><\/i>\n <a href=\"https:\/\/wa.me\/6281110808888\" target=\"_blank\" rel=\"noopener noreferrer\">+6281 11080 8888<\/a>\n <\/li>\n <\/ul>\n <\/div>\n\n <!-- Social -->\n <div class=\"f-col\">\n <h4>Follow Us<\/h4>\n <div class=\"f-social\">\n <a href=\"https:\/\/www.instagram.com\/transhoteljakarta\" target=\"_blank\" rel=\"noopener noreferrer\"\n aria-label=\"Instagram\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\n <a href=\"https:\/\/www.tiktok.com\/@transhoteljakarta\" target=\"_blank\" rel=\"noopener noreferrer\"\n aria-label=\"TikTok\"><i class=\"fa-brands fa-tiktok\"><\/i><\/a>\n <a href=\"https:\/\/www.facebook.com\/share\/1AtrTdBLa9\/?mibextid=wwXIfr\" target=\"_blank\" rel=\"noopener noreferrer\"\n aria-label=\"Facebook\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\n <\/div>\n <\/div>\n\n <!-- Bottom line -->\n <div class=\"f-bottom\">\u00a9 2026 Trans Hotel Jakarta - PT Trans Cibubur Property. All rights reserved.<\/div>\n <\/footer>\n\n\n <!-- WhatsApp FAB -->\n <div class=\"fab\" aria-label=\"Quick actions\">\n <a class=\"btn\" href=\"https:\/\/wa.me\/6281110808888\" target=\"_blank\" rel=\"noopener noreferrer\"\n aria-label=\"Chat via WhatsApp\" title=\"WhatsApp\">\n <i class=\"fa-brands fa-whatsapp\"><\/i><span class=\"tip\">WhatsApp<\/span>\n <\/a>\n <\/div>\n\n <!-- Promo Modal -->\n <div class=\"promo-modal\" id=\"promoModal\">\n <div class=\"backdrop\"><\/div>\n <div class=\"panel\">\n <div class=\"img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/website-POP-Up-THG.jpg\" alt=\"Promo\" \/>\n <button class=\"close\" id=\"promoClose\" aria-label=\"Close\">\n <i class=\"fa-solid fa-xmark\"><\/i>\n <\/button>\n <\/div>\n <div class=\"promo-actions\">\n <button class=\"book-now\">BOOK NOW<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Cookie Banner -->\n <div class=\"cookiebar\" id=\"cookiebar\" role=\"region\" aria-label=\"Cookie consent\">\n <div class=\"fulltxt\">\n <strong>We use cookies<\/strong> for promotions, booking preferences, and\n spam protection. See our\n <a href=\"#\" id=\"privacyInline\">Privacy Policy<\/a>.\n <\/div>\n <div class=\"shorttxt\">\n We use cookies \u2022 <a href=\"#\" id=\"privacyInline2\">Privacy Policy<\/a>\n <\/div>\n <div class=\"actions\">\n <button type=\"button\" class=\"decline\" id=\"cookieDecline\">Decline<\/button>\n <button type=\"button\" class=\"accept\" id=\"cookieAccept\">Accept<\/button>\n <\/div>\n <\/div>\n\n <!-- Policy Modal -->\n <div class=\"priv-modal\" id=\"privModal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"policyTitle\">\n <div class=\"backdrop\" data-close=\"1\"><\/div>\n <div class=\"panel\" tabindex=\"-1\">\n <button type=\"button\" class=\"priv-close\" id=\"privClose\" aria-label=\"Close\">\u00d7<\/button>\n <h3 id=\"policyTitle\">Privacy Policy<\/h3>\n <div id=\"policyContent\" style=\"color:#3b3f45\">\n <!-- Konten akan diisi via JS -->\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Cookie Decline Gate -->\n <div class=\"cookie-gate\" id=\"cookieGate\" aria-modal=\"true\" role=\"dialog\" aria-labelledby=\"cookieGateTitle\">\n <div class=\"cookie-gate-card\">\n <h3 id=\"cookieGateTitle\">Cookie Required to Access Website<\/h3>\n <p>\n You have declined cookies. This website requires cookie consent for core booking and session functionality.\n Please review our privacy policy, then accept cookies to continue.\n <\/p>\n <div class=\"cookie-gate-actions\">\n <button type=\"button\" id=\"cookieGatePrivacy\" class=\"ghost\">View Privacy Policy<\/button>\n <button type=\"button\" id=\"cookieGateAccept\" class=\"primary\">Accept & Continue<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n\n <!-- Scripts -->\n <script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n \/* ========== SAFETY CLOSE (hindari overlay nyangkut) ========== *\/\n document.querySelectorAll(\n \"#suiteModal,#dateModal,#promoModal,#privModal,#mnav,.venue-modal\"\n )\n .forEach((el) => el?.classList?.remove(\"open\", \"closing\"));\n\n \/* =====================\n GLOBAL TOAST SYSTEM\n ===================== *\/\n (function () {\n if (window.__toastReady) return;\n window.__toastReady = true;\n\n const toast = document.createElement('div');\n toast.id = 'appToast';\n toast.style.cssText = `\n position: fixed;\n bottom: 32px;\n left: 50%;\n transform: translateX(-50%) translateY(20px);\n background: rgba(15,15,15,0.85);\n color: #fff;\n padding: 14px 26px;\n border-radius: 12px;\n font-size: 15px;\n font-weight: 500;\n letter-spacing: 0.02em;\n box-shadow: 0 4px 20px rgba(0,0,0,0.3);\n opacity: 0;\n pointer-events: none;\n transition: all 0.45s cubic-bezier(.22,1,.36,1);\n z-index: 13000;\n backdrop-filter: blur(6px);\n `;\n document.body.appendChild(toast);\n\n window.showToast = function (msg, type = 'info') {\n let color = 'rgba(15,15,15,0.85)';\n if (type === 'ok') color = 'rgba(20,20,20,0.85)';\n if (type === 'error') color = 'rgba(150,30,30,0.85)';\n toast.style.background = color;\n\n toast.innerHTML = msg; \/\/ \u2705 fix: parse HTML entities\n toast.style.opacity = '1';\n toast.style.transform = 'translateX(-50%) translateY(0)';\n\n clearTimeout(toast._hideTimer);\n toast._hideTimer = setTimeout(() => {\n toast.style.opacity = '0';\n toast.style.transform = 'translateX(-50%) translateY(20px)';\n }, 3000);\n };\n\n })();\n\n\n \/* =====================\nPROMO MODAL (auto-open)\n=====================*\/\n (function () {\n const modal = document.getElementById('promoModal');\n if (!modal || modal.dataset.inited) return; \/\/ guard anti-dobel\n modal.dataset.inited = '1';\n\n const backdrop = modal.querySelector('.backdrop');\n const closeBtn = document.getElementById('promoClose');\n\n const open = () => { modal.classList.add('open'); document.body.style.overflow = 'hidden'; };\n const close = () => { modal.classList.remove('open'); document.body.style.overflow = ''; };\n\n \/\/ Auto open sekali (atur delay sesuai selera)\n setTimeout(open, 600);\n\n backdrop?.addEventListener('click', close);\n closeBtn?.addEventListener('click', close);\n\n \/\/ Debug helper\n window.__promo = { open, close };\n })();\n\n\n \/* =====================\n HERO VIDEO + POSTER\n ======================*\/\n const heroSection = document.getElementById(\"hero\");\n const heroVid = document.getElementById(\"heroVideo\");\n\n function markReady() {\n heroVid && heroVid.classList.add(\"show\");\n heroSection && heroSection.classList.add(\"ready\");\n }\n function tryPlayVideo() {\n if (!heroVid) return;\n heroVid\n .play()\n .then(markReady)\n .catch(() => { });\n }\n if (heroVid) {\n heroVid.addEventListener(\"loadeddata\", markReady, { once: true });\n heroVid.addEventListener(\"canplay\", markReady, { once: true });\n heroVid.addEventListener(\"playing\", markReady, { once: true });\n tryPlayVideo();\n const resume = () => {\n tryPlayVideo();\n window.removeEventListener(\"scroll\", resume);\n window.removeEventListener(\"click\", resume);\n window.removeEventListener(\"touchstart\", resume);\n };\n window.addEventListener(\"scroll\", resume, {\n passive: true,\n once: true,\n });\n window.addEventListener(\"click\", resume, { once: true });\n window.addEventListener(\"touchstart\", resume, { once: true });\n }\n\n (function () {\n \/* ------- DOM Refs ------- *\/\n const dateModal = document.getElementById('dateModal');\n const card = dateModal?.querySelector('.card');\n const grid = document.getElementById('calendarGrid');\n const monthLabel = document.getElementById('monthLabel');\n const hoverTip = document.getElementById('hoverTip');\n\n const btnDeskDate = document.getElementById('dateRangeBtn');\n const btnMobDate = document.getElementById('mobileDateRangeBtn');\n const btnPrev = document.getElementById('prev');\n const btnNext = document.getElementById('next');\n const btnDone = document.getElementById('done');\n const btnReset = document.getElementById('reset');\n\n const checkin = document.getElementById('checkin');\n const checkout = document.getElementById('checkout');\n const dateLabel = document.getElementById('dateRangeLabel');\n const nightsLabel = document.getElementById('nightsLabel');\n const mobDateLabel = document.getElementById('mobileDateRangeLabel');\n const mobNights = document.getElementById('mobileNightsLabel');\n\n if (!dateModal || !card || !grid || !monthLabel) return;\n\n \/* ------- Utils ------- *\/\n const pad = n => (n < 10 ? '0' : '') + n;\n const strip = d => { const x = new Date(d); x.setHours(0, 0, 0, 0); return x; };\n const iso = d => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;\n const pretty = d => d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });\n const nightsText = n => n === 1 ? '1 NIGHT' : `${n} NIGHTS`;\n const daysDiff = (a, b) => Math.max(1, Math.floor((strip(b) - strip(a)) \/ 86400000));\n\n \/* ------- State ------- *\/\n let start = null, end = null;\n let Y = (new Date()).getFullYear();\n let M = (new Date()).getMonth();\n let activeDateTrigger = null;\n let dateModalCloseTimer = null;\n const DATE_MODAL_ANIM_MS = 280;\n\n \/\/ default: today + 1\n (function initDates() {\n const t = strip(new Date());\n const n = new Date(t); n.setDate(t.getDate() + 1);\n start = t; end = n; applyDates();\n })();\n\n function applyDates() {\n if (!start || !end) return;\n const diff = daysDiff(start, end);\n checkin && (checkin.value = iso(start));\n checkout && (checkout.value = iso(end));\n const labelText = `${pretty(start)} - ${pretty(end)}`;\n dateLabel && (dateLabel.textContent = labelText);\n nightsLabel && (nightsLabel.textContent = nightsText(diff));\n mobDateLabel && (mobDateLabel.textContent = labelText);\n mobNights && (mobNights.textContent = nightsText(diff));\n }\n\n \/* ------- Calendar ------- *\/\n function renderCalendar() {\n const months = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n monthLabel.textContent = `${months[M]} ${Y}`;\n grid.innerHTML = '';\n\n [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"].forEach(d => {\n const s = document.createElement('strong'); s.textContent = d; grid.appendChild(s);\n });\n\n const first = new Date(Y, M, 1).getDay();\n const days = new Date(Y, M + 1, 0).getDate();\n const today = strip(new Date());\n\n for (let i = 0; i < first; i++) {\n const ph = document.createElement('span'); ph.className = 'empty'; grid.appendChild(ph);\n }\n\n for (let d = 1; d <= days; d++) {\n const thisDate = strip(new Date(Y, M, d));\n const cell = document.createElement('span');\n cell.className = 'day';\n cell.textContent = d;\n cell.dataset.date = iso(thisDate);\n\n if (thisDate < today) cell.classList.add('disabled');\n else {\n if (start && end && thisDate >= start && thisDate <= end) cell.classList.add('in-range');\n if (start && +thisDate === +start) cell.classList.add('checkin');\n if (end && +thisDate === +end) cell.classList.add('checkout');\n }\n\n grid.appendChild(cell);\n }\n }\n\n \/* ------- Event Delegation ------- *\/\n grid.addEventListener('click', e => {\n const cell = e.target.closest('.day:not(.disabled)');\n if (!cell) return;\n const thisDate = strip(new Date(cell.dataset.date));\n if (!start || (start && end)) { start = thisDate; end = null; }\n else if (thisDate <= start) { start = thisDate; }\n else { end = thisDate; applyDates(); }\n renderCalendar();\n });\n\n grid.addEventListener('mouseover', e => {\n const cell = e.target.closest('.day:not(.disabled)');\n if (!cell || !(start && !end)) return;\n const thisDate = strip(new Date(cell.dataset.date));\n if (thisDate <= start) return;\n const diff = Math.ceil((thisDate - start) \/ 86400000);\n hoverTip.textContent = diff + ' NIGHT' + (diff > 1 ? 'S' : '');\n hoverTip.style.display = 'block';\n const r = cell.getBoundingClientRect();\n hoverTip.style.top = (r.top - 32) + 'px';\n hoverTip.style.left = (r.left + r.width \/ 2) + 'px';\n });\n\n grid.addEventListener('mouseout', e => {\n if (e.target.closest('.day')) hoverTip.style.display = 'none';\n });\n\n \/* ------- Navigation ------- *\/\n btnPrev?.addEventListener('click', () => { M--; if (M < 0) { M = 11; Y--; } renderCalendar(); });\n btnNext?.addEventListener('click', () => { M++; if (M > 11) { M = 0; Y++; } renderCalendar(); });\n\n btnReset?.addEventListener('click', () => {\n start = null; end = null;\n dateLabel && (dateLabel.textContent = 'Select Dates');\n nightsLabel && (nightsLabel.textContent = '');\n mobDateLabel && (mobDateLabel.textContent = 'Select Dates');\n mobNights && (mobNights.textContent = '');\n renderCalendar();\n });\n\n \/* ------- Open \/ Close ------- *\/\n function positionDatepicker(triggerBtn) {\n if (!triggerBtn) return;\n\n const rect = triggerBtn.getBoundingClientRect();\n const viewportHeight = window.innerHeight;\n const viewportWidth = window.innerWidth;\n const gap = 10;\n const margin = 8;\n const isMobile = viewportWidth <= 1024;\n\n \/\/ Keep mobile usable, while desktop stays wide.\n const cardWidth = viewportWidth <= 1024\n ? Math.min(viewportWidth - (margin * 2), 360)\n : Math.min(520, viewportWidth - (margin * 2));\n\n card.style.width = cardWidth + 'px';\n card.style.maxHeight = '';\n card.style.overflowY = '';\n\n const cardHeight = card.offsetHeight || 400;\n\n let topPos, leftPos;\n\n if (isMobile) {\n \/\/ Mobile: always show calendar ABOVE the date bar so it never gets cut off.\n topPos = rect.top - cardHeight - gap;\n \/\/ If not enough space above, clamp to top margin.\n if (topPos < margin) {\n topPos = margin;\n }\n \/\/ Center horizontally within viewport.\n leftPos = Math.round((viewportWidth - cardWidth) \/ 2);\n card.classList.add('above');\n } else {\n \/\/ Desktop: prefer below, flip above if needed.\n topPos = rect.bottom + gap;\n leftPos = rect.left;\n card.classList.remove('above');\n if (topPos + cardHeight > viewportHeight - margin) {\n topPos = Math.max(margin, rect.top - cardHeight - gap);\n card.classList.add('above');\n }\n }\n\n if (leftPos + cardWidth > viewportWidth - margin) {\n leftPos = viewportWidth - cardWidth - margin;\n }\n leftPos = Math.max(margin, leftPos);\n\n card.style.top = topPos + 'px';\n card.style.left = leftPos + 'px';\n }\n\n function openDatepicker(triggerBtn) {\n if (dateModalCloseTimer) {\n clearTimeout(dateModalCloseTimer);\n dateModalCloseTimer = null;\n }\n activeDateTrigger = triggerBtn || activeDateTrigger || btnDeskDate || btnMobDate;\n renderCalendar();\n\n dateModal.classList.remove('closing');\n if (!dateModal.classList.contains('open')) {\n dateModal.classList.add('open');\n document.body.style.overflow = 'hidden';\n }\n\n positionDatepicker(activeDateTrigger);\n }\n\n function hideDatepicker() {\n if (!dateModal.classList.contains('open') || dateModal.classList.contains('closing')) return;\n dateModal.classList.add('closing');\n hoverTip.style.display = 'none';\n\n dateModalCloseTimer = setTimeout(() => {\n dateModal.classList.remove('open', 'closing');\n card.classList.remove('above');\n activeDateTrigger = null;\n card.style.width = '';\n card.style.maxHeight = '';\n card.style.overflowY = '';\n card.style.top = '';\n card.style.left = '';\n document.body.style.overflow = '';\n dateModalCloseTimer = null;\n }, DATE_MODAL_ANIM_MS);\n }\n\n \/\/ OPEN\n [btnDeskDate, btnMobDate].forEach(btn => {\n btn?.addEventListener('click', e => {\n e.preventDefault();\n e.stopPropagation();\n openDatepicker(btn);\n });\n });\n\n window.addEventListener('resize', () => {\n if (dateModal.classList.contains('open')) {\n positionDatepicker(activeDateTrigger);\n }\n });\n\n window.addEventListener('scroll', () => {\n if (dateModal.classList.contains('open')) {\n positionDatepicker(activeDateTrigger);\n }\n }, { passive: true });\n\n \/\/ DONE \u2192 hanya update label + tutup datepicker (tanpa reopen FAB)\n btnDone?.addEventListener('click', e => {\n e.preventDefault();\n if (start && !end) {\n end = new Date(start);\n end.setDate(start.getDate() + 1);\n }\n applyDates();\n hideDatepicker();\n });\n\n \/\/ ESC \u2192 tutup saja\n document.addEventListener('keydown', e => {\n if (e.key === 'Escape' && dateModal.classList.contains('open')) {\n hideDatepicker();\n }\n });\n\n \/\/ OUTSIDE klik \u2192 tutup (backdrop atau area luar)\n \/\/ Click di backdrop atau diluar card\n document.addEventListener('click', e => {\n if (!dateModal.classList.contains('open')) return;\n\n \/\/ Check if click is on backdrop or outside card\n const isBackdrop = e.target === dateModal.querySelector('.backdrop');\n const isCardClick = card?.contains(e.target);\n\n if (isBackdrop || !isCardClick) {\n hideDatepicker();\n }\n }, true); \/\/ use capture phase untuk catch semua clicks\n\n renderCalendar();\n })();\n\n\n \/* =====================\n NAV SCROLL FIX\n=====================*\/\n const header = document.getElementById(\"header\");\n const hero = document.getElementById(\"hero\");\n const root = document.documentElement;\n const NAV_MIN = 0.18,\n NAV_MAX = 1;\n const corpWrap = document.querySelector(\".corp-logo-wrap\");\n let navSpan = 1;\n\n function recalcNavSpan() {\n const navH = header?.offsetHeight || 76;\n const heroH = hero?.offsetHeight || window.innerHeight;\n navSpan = Math.max(1, heroH - navH);\n }\n\n function clamp(v, a, b) {\n return Math.max(a, Math.min(b, v));\n }\n\n function smoothstep(v) {\n const t = clamp(v, 0, 1);\n return t * t * (3 - 2 * t);\n }\n\n function updateNavOpacity() {\n if (!header || !hero) return;\n\n const navH = header.offsetHeight || 76;\n const heroRect = hero.getBoundingClientRect();\n const heroHeight = hero.offsetHeight || window.innerHeight;\n\n \/\/ Progress berbasis posisi hero agar stabil saat browser mobile mengubah viewport (address bar show\/hide).\n const yFromHeroStart = Math.max(0, -heroRect.top);\n const span = Math.max(1, heroHeight - navH);\n const progress = clamp(yFromHeroStart \/ span, 0, 1);\n const eased = smoothstep(progress);\n const y = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || 0;\n const passedHeroByRect = heroRect.bottom <= navH;\n const passedHeroByScroll = y >= (heroHeight - navH - 2);\n const passedHero = passedHeroByRect || passedHeroByScroll;\n\n const alpha = NAV_MIN + (NAV_MAX - NAV_MIN) * eased;\n const finalAlpha = passedHero ? 1 : alpha;\n root.style.setProperty(\"--nav-alpha\", finalAlpha.toFixed(3));\n\n \/\/ Sinkronkan warna teks secara bertahap: putih -> hitam seiring header makin solid.\n const textStart = 255;\n const textEnd = 27;\n const tone = Math.round(textStart + (textEnd - textStart) * (passedHero ? 1 : eased));\n header.style.color = `rgb(${tone}, ${tone}, ${tone})`;\n\n \/\/ Inline background\/border menjaga state tidak tersenggol aturan CSS duplikat di file panjang.\n header.style.background = `rgba(255, 255, 255, ${finalAlpha.toFixed(3)})`;\n header.style.borderBottom = `1px solid rgba(232, 232, 232, ${finalAlpha.toFixed(3)})`;\n\n if (passedHero || progress >= 1) {\n header && header.classList.add(\"scrolled\");\n corpWrap && corpWrap.classList.add(\"scrolled\");\n } else {\n header && header.classList.remove(\"scrolled\");\n corpWrap && corpWrap.classList.remove(\"scrolled\");\n }\n }\n let navTicking = false;\n function scheduleNavOpacityUpdate() {\n if (navTicking) return;\n navTicking = true;\n requestAnimationFrame(() => {\n try {\n updateNavOpacity();\n } finally {\n navTicking = false;\n }\n });\n }\n\n window.addEventListener(\"scroll\", scheduleNavOpacityUpdate, { passive: true });\n document.addEventListener(\"scroll\", scheduleNavOpacityUpdate, { passive: true, capture: true });\n window.addEventListener(\"wheel\", scheduleNavOpacityUpdate, { passive: true });\n window.addEventListener(\"touchmove\", scheduleNavOpacityUpdate, { passive: true });\n window.addEventListener(\"resize\", () => {\n recalcNavSpan();\n updateNavOpacity();\n });\n\n if (window.visualViewport) {\n window.visualViewport.addEventListener(\"resize\", () => {\n recalcNavSpan();\n scheduleNavOpacityUpdate();\n }, { passive: true });\n window.visualViewport.addEventListener(\"scroll\", scheduleNavOpacityUpdate, { passive: true });\n }\n\n \/\/ Browser mobile sering mengubah viewport saat bar muncul\/hilang; refresh state agar warna tidak macet.\n window.addEventListener(\"orientationchange\", () => {\n recalcNavSpan();\n scheduleNavOpacityUpdate();\n });\n window.addEventListener(\"pageshow\", scheduleNavOpacityUpdate);\n window.addEventListener(\"load\", scheduleNavOpacityUpdate);\n document.addEventListener(\"visibilitychange\", () => {\n if (!document.hidden) scheduleNavOpacityUpdate();\n });\n\n \/\/ Safety sync agar state warna tidak pernah macet di browser\/device tertentu.\n setInterval(() => {\n if (!document.hidden) scheduleNavOpacityUpdate();\n }, 320);\n\n recalcNavSpan();\n updateNavOpacity();\n\n (function () {\n \/\/ Disabled: this observer conflicted with updateNavOpacity() on Android and caused navbar flicker.\n })();\n\n\n \/* =====================\n MOBILE NAV (BURGER)\n ======================*\/\n const mnav = document.getElementById(\"mnav\");\n const burger = document.getElementById(\"burger\");\n const mnavClose = document.getElementById(\"mnavClose\");\n const mnavBackdrop = mnav?.querySelector(\".mnav-backdrop\");\n const mnavLinks = mnav?.querySelectorAll(\".mnav-panel ul li a\");\n\n function closeSidebar() {\n if (mnav) {\n mnav.classList.remove(\"open\");\n mnav.setAttribute(\"aria-hidden\", \"true\");\n document.body.classList.remove(\"mnav-open\");\n document.body.style.overflow = \"auto\";\n }\n }\n\n \/* Buka sidebar *\/\n burger?.addEventListener(\"click\", () => {\n mnav?.classList.add(\"open\");\n mnav?.setAttribute(\"aria-hidden\", \"false\");\n document.body.classList.add(\"mnav-open\");\n document.body.style.overflow = \"hidden\";\n });\n\n \/* Tutup via tombol close atau backdrop *\/\n [mnavClose, mnavBackdrop].forEach(el => {\n el?.addEventListener(\"click\", closeSidebar);\n });\n\n function scrollToSectionWithOffset(targetId) {\n if (!targetId || !targetId.startsWith(\"#\")) return;\n\n const targetEl = document.querySelector(targetId);\n if (!targetEl) {\n if (history.replaceState) history.replaceState(null, \"\", targetId);\n else window.location.hash = targetId;\n return;\n }\n\n const top = targetEl.getBoundingClientRect().top + (window.pageYOffset || window.scrollY || 0);\n const offset = (document.getElementById(\"header\")?.offsetHeight || 76) + 10;\n const y = Math.max(0, top - offset);\n const supportsSmooth = \"scrollBehavior\" in document.documentElement.style;\n\n try {\n if (supportsSmooth) window.scrollTo({ top: y, behavior: \"smooth\" });\n else window.scrollTo(0, y);\n } catch (_) {\n window.scrollTo(0, y);\n }\n\n if (history.replaceState) history.replaceState(null, \"\", targetId);\n else window.location.hash = targetId;\n }\n\n \/\/ Mobile menu: navigasi murni hash native + koreksi offset via hashchange.\n function handleMobileMenuAnchorEvent(e) {\n const eventTarget = (e.target && e.target.nodeType === 1) ? e.target : e.target?.parentElement;\n const anchor = eventTarget?.closest(\".mnav-panel a[href^='#']\");\n if (!anchor) return;\n\n e.preventDefault();\n e.stopPropagation();\n\n const targetId = anchor.getAttribute(\"href\");\n if (!targetId || !targetId.startsWith(\"#\")) return;\n\n closeSidebar();\n\n \/\/ Langsung set hash native. Event hashchange akan handle scroll offset.\n window.location.hash = targetId;\n }\n\n \/\/ Listener di tiap link\n mnavLinks?.forEach(link => {\n link.addEventListener(\"click\", handleMobileMenuAnchorEvent);\n link.addEventListener(\"touchend\", handleMobileMenuAnchorEvent, { passive: false });\n });\n\n \/\/ Delegated fallback untuk Android yang mungkin tap tidak kebaca di per-link\n mnav?.addEventListener(\"click\", handleMobileMenuAnchorEvent, true);\n\n \/\/ Handler hashchange: koreksi offset header fixed setelah browser auto-scroll ke anchor.\n window.addEventListener(\"hashchange\", () => {\n const targetId = window.location.hash;\n if (!targetId || !targetId.startsWith(\"#\")) return;\n\n const targetEl = document.querySelector(targetId);\n if (!targetEl) return;\n\n const top = targetEl.getBoundingClientRect().top + (window.pageYOffset || window.scrollY || 0);\n const offset = (document.getElementById(\"header\")?.offsetHeight || 76) + 10;\n const y = Math.max(0, top - offset);\n\n window.scrollTo({ top: y, behavior: \"smooth\" });\n });\n\n const nav = document.querySelector(\"nav\");\n const dateFieldMobile = document.querySelector(\"#checkin-mobile\");\n const bookingFormMobile = document.querySelector(\".booking-form-mobile\");\n const fieldGroupsMobile = document.querySelectorAll(\".booking-form-mobile .field-group\");\n\n \/\/ Navbar scroll color\n \/\/ if (nav) {\n \/\/ window.addEventListener(\"scroll\", () => {\n \/\/ if (window.scrollY > 80) nav.classList.add(\"scrolled\");\n \/\/ else nav.classList.remove(\"scrolled\");\n \/\/ });\n \/\/ }\n\n \/\/ Booking form interaction (mobile only)\n if (window.innerWidth <= 1024 && dateFieldMobile && bookingFormMobile) {\n dateFieldMobile.addEventListener(\"change\", () => {\n fieldGroupsMobile.forEach(el => el.style.display = \"block\");\n });\n }\n\n \/* =====================\n MOBILE LANG (BURGER)\n ======================*\/\n\n const mnavPanel = document.querySelector(\".mnav-panel\");\n const langWrap = document.getElementById(\"langWrap\");\n\n \/\/ Simpan referensi posisi asli langWrap\n const originalParent = langWrap?.parentElement;\n const originalNext = langWrap?.nextElementSibling;\n\n function moveLangToMobile() {\n if (!mnavPanel || !langWrap) return;\n\n \/\/ Jika di mobile\/tablet, pindahkan ke dalam mnav\n if (window.innerWidth <= 1024) {\n if (!mnavPanel.contains(langWrap)) {\n mnavPanel.insertBefore(langWrap, mnavPanel.querySelector(\"ul\"));\n }\n }\n \/\/ Jika di desktop, kembalikan ke tempat semula\n else {\n if (originalParent && !originalParent.contains(langWrap)) {\n if (originalNext) originalParent.insertBefore(langWrap, originalNext);\n else originalParent.appendChild(langWrap);\n }\n }\n }\n\n \/\/ Jalankan saat pertama load\n moveLangToMobile();\n\n \/\/ Jalankan ulang saat ukuran layar berubah\n window.addEventListener(\"resize\", moveLangToMobile);\n\n\n \/* =====================\n MOBILE FAB BOOKING \u2014 SAFE VERSION\n=====================*\/\n (function () {\n const fabBooking = document.getElementById(\"fabBooking\");\n const popupFab = document.getElementById(\"fabPopup\");\n const closeBtn = document.getElementById(\"closePopup\");\n const mobileMq = window.matchMedia(\"(max-width: 768px)\");\n\n function isMobileFabEnabled() {\n return mobileMq.matches;\n }\n\n \/\/ \u2500\u2500 Tampilkan FAB saat booking-bar asli tidak terlihat \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n const bookingSection = document.getElementById(\"booking\");\n function showFab() {\n if (!isMobileFabEnabled()) return;\n if (fabBooking) fabBooking.classList.add(\"fab-visible\");\n }\n function hideFab() {\n if (fabBooking) fabBooking.classList.remove(\"fab-visible\");\n }\n\n function syncFabViewport() {\n if (!isMobileFabEnabled()) {\n hideFab();\n popupFab?.classList.remove(\"active\");\n document.body.style.overflow = \"\";\n }\n }\n\n mobileMq.addEventListener(\"change\", syncFabViewport);\n syncFabViewport();\n\n if (bookingSection && \"IntersectionObserver\" in window) {\n const fabObserver = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (!isMobileFabEnabled()) {\n hideFab();\n return;\n }\n if (entry.isIntersecting) {\n hideFab();\n } else {\n showFab();\n }\n });\n },\n { threshold: 0 }\n );\n fabObserver.observe(bookingSection);\n } else {\n \/\/ Fallback: tampilkan langsung jika IntersectionObserver tidak ada\n showFab();\n }\n\n \/\/ kalau elemen tidak ada, jangan paksa binding (hindari ReferenceError)\n if (fabBooking && popupFab) {\n fabBooking.addEventListener(\"click\", () => {\n if (!isMobileFabEnabled()) return;\n popupFab.classList.add(\"active\");\n document.body.style.overflow = \"hidden\";\n });\n }\n\n if (closeBtn && popupFab) {\n closeBtn.addEventListener(\"click\", () => {\n popupFab.classList.remove(\"active\");\n document.body.style.overflow = \"\";\n });\n }\n\n \/\/ tutup via klik backdrop (hanya kalau datepicker TIDAK sedang terbuka)\n if (popupFab) {\n popupFab.addEventListener(\"click\", (e) => {\n \/\/ JANGAN tutup kalau datepicker sedang open\n const dpOpen = document.getElementById('dateModal')?.classList.contains('open');\n if (e.target === popupFab && !dpOpen) {\n popupFab.classList.remove(\"active\");\n document.body.style.overflow = \"\";\n }\n });\n }\n\n \/\/ IMPORTANT: tombol tanggal di FAB **tidak** menutup popup\n const btnMobDate = document.getElementById('mobileDateRangeBtn');\n const btnDeskDate = document.getElementById('dateRangeBtn');\n if (btnMobDate && btnDeskDate && popupFab) {\n btnMobDate.addEventListener('click', (e) => {\n \/\/ Pastikan FAB tetap aktif, lalu biarkan handler datepicker utama\n \/\/ memakai anchor tombol mobile (jangan redirect ke tombol desktop).\n popupFab.classList.add('active');\n }, true); \/\/ capture supaya menang dari handler lama\n }\n })();\n\n \/* =====================\n GENERIC REVEAL\n ======================*\/\n const revealEls = document.querySelectorAll(\".reveal\");\n const rows = document.querySelectorAll(\".venue-row\");\n\n if (\"IntersectionObserver\" in window) {\n const ioReveal = new IntersectionObserver(\n (entries) => {\n entries.forEach((e) => {\n if (e.isIntersecting) e.target.classList.add(\"visible\");\n });\n },\n { rootMargin: \"0px 0px -10% 0px\", threshold: 0.01 }\n );\n revealEls.forEach((el) => ioReveal.observe(el));\n\n const ioRows = new IntersectionObserver(\n (entries) => {\n entries.forEach((e) => {\n if (e.isIntersecting) {\n setTimeout(() => e.target.classList.add(\"visible\"), 150);\n ioRows.unobserve(e.target);\n }\n });\n },\n { rootMargin: \"0px 0px -15% 0px\", threshold: 0.05 }\n );\n rows.forEach((row) => ioRows.observe(row));\n } else {\n revealEls.forEach((el) => el.classList.add(\"visible\"));\n rows.forEach((row) => row.classList.add(\"visible\"));\n }\n\n\n\n \/* =====================\n SOFT PARALLAX\n ======================*\/\n const poster = document.querySelector(\".hero .poster\");\n const headline = document.querySelector(\".headline\");\n const kicker = document.querySelector(\".kicker\");\n const vImages = document.querySelectorAll(\".venue-image img\");\n\n function rafParallax() {\n const y = window.scrollY || 0;\n const fac = Math.min(1, y \/ 600);\n if (poster)\n poster.style.transform = `scale(${1 + fac * 0.04}) translateY(${y * 0.02\n }px)`;\n if (headline) headline.style.transform = `translateY(${y * 0.06}px)`;\n if (kicker) kicker.style.transform = `translateY(${y * 0.04}px)`;\n vImages.forEach((img) => {\n const rect = img.getBoundingClientRect();\n const offset = rect.top \/ window.innerHeight;\n if (img.closest(\".venue-row.visible\"))\n img.style.transform = `translateY(${offset * 20}px)`;\n });\n requestAnimationFrame(rafParallax);\n }\n const isTouchDevice = window.matchMedia(\"(pointer: coarse)\").matches ||\n \/Android|iPhone|iPad|iPod\/i.test(navigator.userAgent || \"\");\n const reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n if (!isTouchDevice && !reduceMotion) {\n requestAnimationFrame(rafParallax);\n }\n\n \/* =====================\n ABOUT reveal\n ======================*\/\n if (\"IntersectionObserver\" in window) {\n const ioVisible = new IntersectionObserver(\n (entries) => {\n entries.forEach((e) => {\n if (e.isIntersecting) {\n e.target.classList.add(\"visible\");\n ioVisible.unobserve(e.target);\n }\n });\n },\n { threshold: 0.16 }\n );\n document\n .querySelectorAll(\".reveal\")\n .forEach((el) => ioVisible.observe(el));\n\n const ioInOut = new IntersectionObserver(\n (entries) => {\n entries.forEach((e) => {\n const el = e.target;\n if (e.isIntersecting) {\n el.classList.add(\"in\");\n el.classList.remove(\"out\");\n } else {\n el.classList.add(\"out\");\n el.classList.remove(\"in\");\n }\n });\n },\n { root: null, threshold: 0.18, rootMargin: \"0px 0px -8% 0px\" }\n );\n document\n .querySelectorAll(\"#about .reveal\")\n .forEach((el) => ioInOut.observe(el));\n\n const aboutSection = document.querySelector(\"#about\");\n if (aboutSection) {\n let leavingTimer;\n const sectionObserver = new IntersectionObserver(\n (entries) => {\n entries.forEach((e) => {\n if (e.isIntersecting) {\n aboutSection.classList.add(\"section-active\");\n aboutSection.classList.remove(\"section-leaving\");\n if (leavingTimer) clearTimeout(leavingTimer);\n } else {\n aboutSection.classList.remove(\"section-active\");\n aboutSection.classList.add(\"section-leaving\");\n if (leavingTimer) clearTimeout(leavingTimer);\n leavingTimer = setTimeout(() => {\n aboutSection.classList.remove(\"section-leaving\");\n }, 700);\n }\n });\n },\n { threshold: 0.12 }\n );\n sectionObserver.observe(aboutSection);\n }\n }\n \/* ============================\n SIGNATURES\n ============================ *\/\n (function () {\n const section = document.getElementById('signatures');\n if (!section) return;\n\n \/\/ Target elemen yang perlu di-reveal\n const targets = section.querySelectorAll('h2, .lead, .sig');\n\n \/\/ Stagger animasi (opsional, biar elegan)\n targets.forEach((el, i) => {\n el.style.setProperty('--delay', (i * 120) + 'ms');\n });\n\n \/\/ Fallback kalau IntersectionObserver tidak tersedia\n if (!('IntersectionObserver' in window)) {\n document.documentElement.classList.add('no-io');\n targets.forEach(el => el.classList.add('in'));\n section.classList.add('section-active');\n return;\n }\n\n const io = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('in');\n entry.target.classList.remove('out');\n section.classList.add('section-active');\n } else {\n entry.target.classList.add('out');\n }\n });\n\n \/\/ Tambah\/turunkan state section jika semua keluar\/masuk\n const anyIn = Array.from(targets).some(t => t.classList.contains('in'));\n section.classList.toggle('section-active', anyIn);\n section.classList.toggle('section-leaving', !anyIn);\n }, {\n root: null,\n rootMargin: '0px 0px -10% 0px', \/\/ reveal sedikit sebelum benar2 center\n threshold: 0.15\n });\n\n targets.forEach(el => io.observe(el));\n })();\n\n \/* ============================\n THE ART OF STAY (Infinite Slider + Modal Gallery Arrows)\n ============================ *\/\n (function () {\n const section = document.querySelector(\"#art-of-stay\");\n const track = document.querySelector(\".art-track\");\n const viewport = document.querySelector(\".art-viewport\");\n const slider = document.querySelector(\".art-slider\");\n const nextBtn = document.querySelector(\".art-next\");\n const prevBtn = document.querySelector(\".art-prev\");\n if (!section || !track || !slider || !viewport) return;\n\n const ORIG_NODES = Array.from(track.children);\n const ORIG = ORIG_NODES.length;\n if (!ORIG) return;\n\n const GAP = 24;\n const DUR = 850;\n const EASE = \"cubic-bezier(.22,1,.36,1)\";\n const AUTO_INTERVAL = 4000;\n const RESUME_DELAY = 800;\n\n function getPerView() {\n if (window.matchMedia(\"(max-width: 640px)\").matches) return 1;\n if (window.matchMedia(\"(max-width: 900px)\").matches) return 2;\n return 3;\n }\n\n let perView = getPerView();\n const slideWidth = () =>\n (track.firstElementChild?.getBoundingClientRect().width || 0) + GAP;\n\n let domIndex = perView;\n let animating = false;\n let autoplayId = null;\n let wheelAccumulator = 0;\n let isPointerDown = false;\n let pointerStartX = 0;\n let pointerStartY = 0;\n let pointerDeltaX = 0;\n let lastDragAt = 0;\n\n \/\/ ==== Build infinite track ====\n function rebuild() {\n track.innerHTML = \"\";\n const tails = ORIG_NODES.slice(-perView).map((n) => n.cloneNode(true));\n tails.forEach((n) => n.classList.add(\"clone\"));\n const heads = ORIG_NODES.slice(0, perView).map((n) => n.cloneNode(true));\n heads.forEach((n) => n.classList.add(\"clone\"));\n [...tails, ...ORIG_NODES, ...heads].forEach((n) => track.appendChild(n));\n domIndex = perView;\n track.style.transition = \"none\";\n track.style.transform = `translate3d(${-slideWidth() * domIndex}px,0,0)`;\n }\n\n \/\/ ==== Slide to specific index ====\n function goTo(newIndex, instant = false) {\n track.style.transition = instant ? \"none\" : `transform ${DUR}ms ${EASE}`;\n track.style.transform = `translate3d(${-slideWidth() * newIndex}px,0,0)`;\n domIndex = newIndex;\n }\n\n \/\/ ==== Next & Prev Infinite ====\n function nextSlide() {\n if (animating) return;\n animating = true;\n domIndex++;\n goTo(domIndex);\n track.addEventListener(\n \"transitionend\",\n () => {\n if (domIndex >= ORIG + perView) {\n goTo(perView, true);\n domIndex = perView;\n }\n animating = false;\n },\n { once: true }\n );\n }\n\n function prevSlide() {\n if (animating) return;\n animating = true;\n domIndex--;\n goTo(domIndex);\n track.addEventListener(\n \"transitionend\",\n () => {\n if (domIndex < perView) {\n goTo(ORIG + perView - 1, true);\n domIndex = ORIG + perView - 1;\n }\n animating = false;\n },\n { once: true }\n );\n }\n\n \/\/ ==== Autoplay ====\n function startAutoplay() {\n stopAutoplay();\n autoplayId = setInterval(nextSlide, AUTO_INTERVAL);\n }\n\n function stopAutoplay() {\n if (autoplayId) {\n clearInterval(autoplayId);\n autoplayId = null;\n }\n }\n\n slider.addEventListener(\"mouseenter\", stopAutoplay);\n slider.addEventListener(\"mouseleave\", () =>\n setTimeout(startAutoplay, 300)\n );\n\n viewport.addEventListener(\n \"wheel\",\n (e) => {\n if (animating) return;\n const absX = Math.abs(e.deltaX);\n const absY = Math.abs(e.deltaY);\n const isHorizontalIntent = absX > absY || e.shiftKey;\n if (!isHorizontalIntent) return;\n\n e.preventDefault();\n stopAutoplay();\n wheelAccumulator += e.deltaX || e.deltaY;\n\n if (Math.abs(wheelAccumulator) < 26) return;\n\n if (wheelAccumulator > 0) nextSlide();\n else prevSlide();\n wheelAccumulator = 0;\n setTimeout(startAutoplay, RESUME_DELAY);\n },\n { passive: false }\n );\n\n viewport.addEventListener(\"pointerdown\", (e) => {\n if (e.pointerType === \"mouse\" && e.button !== 0) return;\n viewport.setPointerCapture(e.pointerId);\n isPointerDown = true;\n pointerStartX = e.clientX;\n pointerStartY = e.clientY;\n pointerDeltaX = 0;\n viewport.classList.add(\"dragging\");\n stopAutoplay();\n });\n\n viewport.addEventListener(\"pointermove\", (e) => {\n if (!isPointerDown) return;\n const dx = e.clientX - pointerStartX;\n const dy = e.clientY - pointerStartY;\n if (Math.abs(dx) <= Math.abs(dy)) return;\n e.preventDefault();\n pointerDeltaX = dx;\n }, { passive: false });\n\n function finishPointerGesture() {\n if (!isPointerDown) return;\n isPointerDown = false;\n viewport.classList.remove(\"dragging\");\n\n if (Math.abs(pointerDeltaX) > 20 && !animating) {\n if (pointerDeltaX < 0) nextSlide();\n else prevSlide();\n lastDragAt = Date.now();\n }\n pointerDeltaX = 0;\n setTimeout(startAutoplay, RESUME_DELAY);\n }\n\n viewport.addEventListener(\"pointerup\", finishPointerGesture);\n viewport.addEventListener(\"pointercancel\", finishPointerGesture);\n viewport.addEventListener(\"pointerleave\", () => {\n if (isPointerDown) finishPointerGesture();\n });\n\n nextBtn?.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n e.preventDefault();\n stopAutoplay();\n nextSlide();\n setTimeout(startAutoplay, RESUME_DELAY);\n });\n\n prevBtn?.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n e.preventDefault();\n stopAutoplay();\n prevSlide();\n setTimeout(startAutoplay, RESUME_DELAY);\n });\n\n\n section.setAttribute(\"tabindex\", \"0\");\n section.addEventListener(\"keydown\", (e) => {\n if (e.key === \"ArrowRight\") nextBtn?.click();\n if (e.key === \"ArrowLeft\") prevBtn?.click();\n });\n\n \/\/ Always run autoplay so Art of Stay keeps looping even when user scrolls away.\n \/\/ Hover\/pause and manual arrows still work as implemented above.\n startAutoplay();\n\n let lastPV = perView;\n window.addEventListener(\"resize\", () => {\n const pv = getPerView();\n if (pv !== lastPV) {\n perView = lastPV = pv;\n rebuild();\n } else {\n goTo(domIndex, true);\n }\n });\n\n \/* === MODAL LOGIC DENGAN PANAH === *\/\n const modal = document.getElementById(\"suiteModal\");\n const modalBg = modal?.querySelector(\".suite-bg\");\n const modalPanel = modal?.querySelector(\".suite-panel\");\n const closeBtn = modal?.querySelector(\".suite-close\");\n const gTitle = document.getElementById(\"suiteTitle\");\n const gDesc = document.getElementById(\"suiteDesc\");\n const gWrap = document.getElementById(\"suiteGallery\");\n const gDetails = document.getElementById(\"suiteDetails\");\n\n const suites = {\n\n premier: {\n title: \"Premier Room\",\n desc: \"Effortless comfort in a refined contemporary setting.\",\n rooms: \"164 rooms (35 sqm)\",\n facilities: [\n \"55 inch Smart TV\",\n \"High-speed Wi-Fi\",\n \"Climate Control\",\n \"Mood Lighting\",\n \"Exclusive amenities\",\n \"Coffee & tea\",\n \"Complimentary minibar\",\n \"Hair dryer & iron set\",\n \"Safe Deposit Box\"\n ],\n privileges: [],\n bg: \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/4.jpg\",\n images: [\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/4.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/IMG_2498-scaled.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/6.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/IMG_2450-scaled-e1775645104676.jpg\"\n ]\n },\n\n premiersky: {\n title: \"Premier Skyline Room\",\n desc: \"Where elevated comfort meets exclusive privileges.\",\n rooms: \"41 rooms (35 sqm).\",\n facilities: [\n \"55 inch Smart TV\",\n \"High-speed Wi-Fi\",\n \"Climate Control\",\n \"Mood Lighting\",\n \"Exclusive amenities\",\n \"Coffee & tea\",\n \"Complimentary minibar\",\n \"Hair dryer & iron set\",\n \"Safe Deposit Box\"\n ],\n privileges: [\n \"Personalized check-in & check-out at the Private Reception\",\n \"Afternoon Tea (14.00 - 16.00): Coffee, tea, and snack selection\",\n \"Evening Light Dinner (17.00 - 19.00): Dinner and beverages provided\",\n \"Access to all F&B outlets\"\n ],\n bg: \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/1.jpg\",\n images: [\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/1.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/dreamina-2026-04-03-3362-Enhance-the-clarity-improve-the-lightin-e1775643970332.jpeg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/6.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/IMG_2450-scaled-e1775645104676.jpg\"\n ]\n },\n\n junior: {\n title: \"Junior Suite\",\n desc: \"Designed with space to live, work, and unwind.\",\n rooms: \"13 suites (45 sqm).\",\n facilities: [\n \"55 inch Smart TV\",\n \"High-speed Wi-Fi\",\n \"Climate Control\",\n \"Mood Lighting\",\n \"Exclusive amenities\",\n \"Coffee & tea\",\n \"Complimentary minibar\",\n \"Hair dryer & iron set\",\n \"Safe Deposit Box\"\n ],\n privileges: [\n \"Personalized check-in & check-out at the Private Reception\",\n \"Afternoon Tea (14.00 - 16.00): Coffee, tea, and snack selection\",\n \"Evening Light Dinner (17.00 - 19.00): Dinner and beverages provided\",\n \"Access to all F&B outlets\",\n \"Separate living room\"\n ],\n bg: \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/3.jpg\",\n images: [\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/3.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/IMG_2463-scaled.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/IMG_2419-scaled.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/04\/IMG_2450-scaled-e1775645104676.jpg\"\n ]\n },\n\n celebrity: {\n title: \"Celebrity Suite\",\n desc: \"A statement of luxury with space, privacy, and prestige.\",\n rooms: \"6 suites (60 sqm).\",\n facilities: [\n \"55 inch Smart TV\",\n \"High-speed Wi-Fi\",\n \"Climate Control\",\n \"Mood Lighting\",\n \"Exclusive amenities\",\n \"Coffee & tea\",\n \"Complimentary minibar\",\n \"Hair dryer & iron set\",\n \"Safe Deposit Box\"\n ],\n privileges: [\n \"Personalized check-in & check-out at the Private Reception\",\n \"Afternoon Tea (14.00 - 16.00): Coffee, tea, and snack selection\",\n \"Evening Light Dinner (17.00 - 19.00): Dinner and beverages provided\",\n \"Access to all F&B outlets\",\n \"Separate living room & dining room\",\n \"Spacious bathroom with a thoughtfully designed bathub\",\n \"24-hour butler service\"\n ],\n bg: \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/CS-copy.png\",\n images: [\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/CS-copy.png\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/CS.png\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/CS-r.png\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/CS-LP.png\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/LP-CS-2.png\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/BR-CS.png\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/BT-CS.png\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2026\/05\/Amenities-CS.png\"\n ]\n },\n\n presidential: {\n title: \"Presidential Suite\",\n desc: \"An unrivaled expression of elegance at its finest.\",\n rooms: \"1 suite (155 sqm).\",\n facilities: [\n \"55 inch Smart TV\",\n \"High-speed Wi-Fi\",\n \"Climate Control\",\n \"Mood Lighting\",\n \"Exclusive amenities\",\n \"Coffee & tea\",\n \"Complimentary minibar\",\n \"Hair dryer & iron set\",\n \"Safe Deposit Box\"\n ],\n privileges: [\n \"Personalized check-in & check-out at the Private Reception\",\n \"Afternoon Tea (14.00 - 16.00): Coffee, tea, and snack selection\",\n \"Evening Light Dinner (17.00 - 19.00): Dinner and beverages provided\",\n \"Access to all F&B outlets\",\n \"Spacious living room & dining room\",\n \"Well equipped pantry\",\n \"Private jacuzzi designed for enhanced relaxation and comfort\",\n \"24-hour butler service\"\n ],\n bg: \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0007-scaled-e1759745594778.jpg\",\n images: [\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0007-scaled-e1759745594778.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0006-scaled-e1759745579424.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0005-scaled-e1759745565445.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0004-scaled-e1759745549350.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0003-scaled-e1759745533560.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0002-scaled-e1759745518842.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0008-scaled-e1759745607120.jpg\",\n \"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/THC-PS-2025-05-09-1_page-0009-scaled-e1759745624414.jpg\"\n ]\n }\n\n };\n\n function getSuiteCardFromEvent(e) {\n const fromTarget = e.target?.closest?.(\".art-item\");\n if (fromTarget) return fromTarget;\n\n if (typeof e.composedPath === \"function\") {\n const fromPath = e\n .composedPath()\n .find((node) => node?.classList?.contains?.(\"art-item\"));\n if (fromPath) return fromPath;\n }\n\n if (typeof e.clientX === \"number\" && typeof e.clientY === \"number\") {\n const hit = document.elementFromPoint(e.clientX, e.clientY);\n return hit?.closest?.(\".art-item\") || null;\n }\n\n return null;\n }\n\n function openSuiteModalFromCard(card) {\n if (!card || !modal) return;\n const data = suites[card.dataset.suite];\n if (!data) return;\n\n if (gTitle) gTitle.textContent = data.title;\n if (gDesc) gDesc.textContent = data.desc;\n \/\/ === Inject Detail List ===\n if (gDetails) {\n gDetails.innerHTML = \"\";\n\n const roomsLi = document.createElement(\"li\");\n roomsLi.innerHTML = `<strong>Rooms:<\/strong> ${data.rooms}`;\n gDetails.appendChild(roomsLi);\n\n const facilitiesLi = document.createElement(\"li\");\n facilitiesLi.innerHTML = `<strong>Facilities:<\/strong>`;\n const facilitiesUl = document.createElement(\"ul\");\n facilitiesUl.className = \"rooms-details\";\n\n data.facilities.forEach(item => {\n const li = document.createElement(\"li\");\n li.textContent = item;\n facilitiesUl.appendChild(li);\n });\n\n facilitiesLi.appendChild(facilitiesUl);\n gDetails.appendChild(facilitiesLi);\n\n if (data.privileges.length > 0) {\n const privLi = document.createElement(\"li\");\n privLi.innerHTML = `<strong>Exclusive Privileges:<\/strong>`;\n const privUl = document.createElement(\"ul\");\n privUl.className = \"rooms-details\";\n\n data.privileges.forEach(item => {\n const li = document.createElement(\"li\");\n li.textContent = item;\n privUl.appendChild(li);\n });\n\n privLi.appendChild(privUl);\n gDetails.appendChild(privLi);\n }\n }\n\n if (modalBg) modalBg.style.backgroundImage = `url('${data.bg}')`;\n\n \/\/ === Generate gallery ===\n gWrap.innerHTML = \"\";\n data.images.forEach((src, i) => {\n const img = document.createElement(\"img\");\n img.src = src;\n img.alt = `${data.title} photo ${i + 1}`;\n gWrap.appendChild(img);\n setTimeout(() => img.classList.add(\"visible\"), 100 + i * 100);\n });\n\n \/\/ === Add progress bar ===\n const progressWrap = document.createElement(\"div\");\n progressWrap.className = \"suite-progress\";\n const progressFill = document.createElement(\"div\");\n progressFill.className = \"suite-progress-fill\";\n progressWrap.appendChild(progressFill);\n gWrap.after(progressWrap);\n\n \/\/ === Update progress dynamically ===\n const updateProgress = () => {\n const maxScroll = gWrap.scrollWidth - gWrap.clientWidth;\n const current = gWrap.scrollLeft;\n const percent = maxScroll > 0 ? (current \/ maxScroll) * 100 : 0;\n progressFill.style.width = `${percent}%`;\n };\n\n gWrap.addEventListener(\"scroll\", updateProgress);\n updateProgress();\n\n modal.classList.add(\"open\");\n modal.setAttribute(\"aria-hidden\", \"false\");\n document.body.style.overflow = \"hidden\";\n modalPanel && (modalPanel.scrollTop = 0);\n closeBtn && closeBtn.focus();\n }\n\n function handleSuiteCardClick(e) {\n if (Date.now() - lastDragAt < 260) return;\n const card = getSuiteCardFromEvent(e);\n openSuiteModalFromCard(card);\n }\n\n \/\/ Listener utama + fallback capture untuk kasus klik yang di-retarget ke viewport.\n track.addEventListener(\"click\", handleSuiteCardClick);\n viewport.addEventListener(\"click\", handleSuiteCardClick, true);\n\n \/\/ ==== Close modal ====\n function closeSuiteModal() {\n if (!modal) return;\n modal.classList.remove(\"open\");\n modal.setAttribute(\"aria-hidden\", \"true\");\n if (gWrap) gWrap.innerHTML = \"\";\n document.querySelector(\".suite-progress\")?.remove();\n document.body.style.overflow = \"\";\n }\n\n closeBtn?.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n closeSuiteModal();\n });\n\n modal?.addEventListener(\"click\", (e) => {\n if (modalPanel && !modalPanel.contains(e.target)) closeSuiteModal();\n });\n\n modalPanel?.addEventListener(\"click\", (e) => e.stopPropagation());\n\n\n rebuild();\n })();\n\n\n\n \/* ============================\n MEETINGS & EVENTS\n ============================ *\/\n (function () {\n \/\/ Open modal (delegasi klik)\n document.addEventListener('click', function (e) {\n const opener = e.target.closest('.learn-more[data-target], [data-open-modal]');\n if (opener) {\n const raw = opener.getAttribute('data-open-modal') || opener.getAttribute('data-target') || '';\n const id = raw.replace(\/^#\/, '');\n const modal = document.getElementById(id);\n if (!modal) { console.warn('Modal not found:', id); return; }\n modal.classList.add('open');\n modal.setAttribute('aria-hidden', 'false');\n document.documentElement.classList.add('vm-open');\n\n return;\n }\n\n \/\/ Close by X\n const closer = e.target.closest('.venue-modal .close');\n if (closer) {\n const m = closer.closest('.venue-modal');\n if (m) {\n m.classList.remove('open');\n m.setAttribute('aria-hidden', 'true');\n document.documentElement.classList.remove('vm-open');\n syncOverlayLock();\n }\n return;\n }\n\n \/\/ Close by backdrop\n if (e.target.classList && e.target.classList.contains('venue-modal')) {\n e.target.classList.remove('open');\n document.documentElement.classList.remove('vm-open');\n syncOverlayLock();\n return;\n }\n\n \/\/ Toggle proposal form\n const toggler = e.target.closest('.proposal-toggle');\n if (toggler) {\n const sel = toggler.getAttribute('data-target'); \/\/ ex: \"#reqFormBallroom\"\n const form = sel ? document.querySelector(sel) : null;\n if (!form) return;\n const willOpen = form.hasAttribute('hidden');\n if (willOpen) form.removeAttribute('hidden'); else form.setAttribute('hidden', '');\n toggler.classList.toggle('is-open', willOpen);\n toggler.setAttribute('aria-expanded', String(willOpen));\n const label = toggler.querySelector('span');\n if (label) label.textContent = willOpen ? 'Hide Proposal Form' : 'Show Proposal Form';\n return;\n }\n });\n\n \/\/ ESC to close\n document.addEventListener('keydown', (e) => {\n if (e.key !== 'Escape') return;\n if (document.querySelector('.req-form.show')) return;\n if (document.querySelector('.dimension-viewer:not([hidden])')) return;\n const open = document.querySelector('.venue-modal.open');\n if (open) {\n open.classList.remove('open');\n open.setAttribute('aria-hidden', 'true');\n document.documentElement.classList.remove('vm-open');\n syncOverlayLock();\n }\n });\n\n \/\/ \/\/ Submit proposal (feedback singkat)\n \/\/ ['reqFormBallroom', 'reqFormBoard'].forEach(id => {\n \/\/ const f = document.getElementById(id);\n \/\/ if (!f) return;\n \/\/ f.addEventListener('submit', (ev) => {\n \/\/ ev.preventDefault();\n \/\/ if (!f.checkValidity()) { f.reportValidity(); return; }\n \/\/ const btn = f.querySelector('.primary');\n \/\/ if (btn) { btn.disabled = true; btn.textContent = 'Sent \u2713'; }\n \/\/ setTimeout(() => { f.reset(); if (btn) { btn.disabled = false; btn.textContent = 'Send Request'; } }, 1500);\n \/\/ });\n \/\/ });\n })();\n \/* Init: set label + rotasi ikon sesuai state awal *\/\n document.querySelectorAll('.proposal-toggle').forEach(btn => {\n const sel = btn.getAttribute('data-target');\n const form = sel ? document.querySelector(sel) : null;\n if (!form) return;\n const opened = !form.hasAttribute('hidden');\n btn.classList.toggle('is-open', opened);\n btn.setAttribute('aria-expanded', String(opened));\n const label = btn.querySelector('span');\n if (label) label.textContent = opened ? 'Hide Proposal Form' : 'Show Proposal Form';\n });\n\n \/* Toggle on click (delegasi yang kamu punya tetap boleh, tapi ini lebih langsung) *\/\n document.addEventListener('click', (e) => {\n const t = e.target.closest('.proposal-toggle');\n if (!t) return;\n const sel = t.getAttribute('data-target');\n const form = sel ? document.querySelector(sel) : null;\n if (!form) return;\n\n const willOpen = form.hasAttribute('hidden');\n if (willOpen) form.removeAttribute('hidden');\n else form.setAttribute('hidden', '');\n\n t.classList.toggle('is-open', willOpen);\n t.setAttribute('aria-expanded', String(willOpen));\n const label = t.querySelector('span');\n if (label) label.textContent = willOpen ? 'Hide Proposal Form' : 'Show Proposal Form';\n });\n\n \/* Init label sesuai state awal (kalau suatu saat kamu mau default terbuka\/tutup) *\/\n document.querySelectorAll('.open-req').forEach(btn => {\n const sel = btn.getAttribute('data-target');\n const form = sel ? document.querySelector(sel) : null;\n if (!form) return;\n \/\/ Tidak ubah label\u2014tetap \"Request Form\"\n });\n\n function syncOverlayLock() {\n const hasOpenOverlay = !!document.querySelector(\n '.venue-modal.open, .req-form.show, .dimension-viewer:not([hidden]), #suiteModal.open, #dateModal.open, .promo-modal.open, .priv-modal.open, .mnav.open'\n );\n document.body.style.overflow = hasOpenOverlay ? 'hidden' : '';\n }\n\n function closeRequestForm(form) {\n if (!form) return;\n const hostPanel = form.closest('.premium-modal-panel');\n form.classList.remove('show');\n form.classList.add('closing');\n if (hostPanel) hostPanel.classList.remove('req-overlay-open');\n\n window.setTimeout(() => {\n form.classList.remove('closing');\n form.setAttribute('hidden', '');\n syncOverlayLock();\n }, 280);\n }\n\n \/* Delegasi klik: buka\/tutup form target *\/\n document.addEventListener('click', (e) => {\n const t = e.target.closest('.open-req');\n if (!t) return;\n\n const sel = t.getAttribute('data-target');\n const form = sel ? document.querySelector(sel) : null;\n if (!form) return;\n const hostPanel = form.closest('.premium-modal-panel');\n\n form.classList.remove('closing');\n form.removeAttribute('hidden');\n if (hostPanel) hostPanel.classList.add('req-overlay-open');\n requestAnimationFrame(() => form.classList.add('show'));\n syncOverlayLock();\n });\n\n document.addEventListener('click', (e) => {\n \/\/ Tutup dengan tombol close khusus request form\n if (e.target.classList.contains('close-popup')) {\n const popup = e.target.closest('.req-form');\n if (!popup) return;\n closeRequestForm(popup);\n return;\n }\n\n \/\/ Tutup jika klik backdrop request form\n if (e.target.classList.contains('req-form')) {\n closeRequestForm(e.target);\n }\n });\n\n \/\/ ESC key untuk tutup popup request form tanpa ikut menutup venue modal\n document.addEventListener('keydown', (e) => {\n if (e.key !== 'Escape') return;\n const openForms = Array.from(document.querySelectorAll('.req-form.show'));\n if (!openForms.length) return;\n e.stopImmediatePropagation();\n openForms.forEach(closeRequestForm);\n });\n\n (function () {\n const viewer = document.getElementById('dimensionViewer');\n const viewerImg = document.getElementById('dimensionViewerImg');\n const closeBtn = document.getElementById('dimensionViewerClose');\n const backdrop = viewer ? viewer.querySelector('[data-dimension-close=\"true\"]') : null;\n if (!viewer || !viewerImg || !closeBtn) return;\n\n function openViewer(src, alt) {\n viewerImg.src = src;\n viewerImg.alt = alt || 'Venue dimension';\n viewer.hidden = false;\n viewer.setAttribute('aria-hidden', 'false');\n syncOverlayLock();\n }\n\n function closeViewer() {\n viewer.hidden = true;\n viewer.setAttribute('aria-hidden', 'true');\n viewerImg.src = '';\n viewerImg.alt = '';\n syncOverlayLock();\n }\n\n \/\/ Direct listeners: stopPropagation here prevents the event from ever\n \/\/ reaching document-level handlers (venue modal delegate etc.)\n closeBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n closeViewer();\n });\n\n if (backdrop) {\n backdrop.addEventListener('click', (e) => {\n e.stopPropagation();\n closeViewer();\n });\n }\n\n \/\/ Document-level listener only for opening the viewer\n document.addEventListener('click', (e) => {\n const trigger = e.target.closest('.dimension-trigger');\n if (!trigger) return;\n openViewer(trigger.getAttribute('data-dimension-src'), trigger.getAttribute('data-dimension-alt'));\n });\n\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && !viewer.hidden) {\n e.stopImmediatePropagation();\n closeViewer();\n }\n });\n })();\n\n \/* ==========================================\n SEND REQUEST TO GOOGLE SHEETS + NOTIFICATION\n ========================================== *\/\n (function () {\n const scriptURL =\n 'https:\/\/script.google.com\/macros\/s\/AKfycbxOy5TzUCTh27ehx66OKKTJH5DjLWAe2-QnqBIKvDU6qdTjzcfdHp4rrriKEDjhW5GC\/exec';\n\n const forms = [\n { id: 'reqFormBallroom', type: 'ballroom' },\n { id: 'reqFormBoard', type: 'boardroom' },\n ];\n\n \/\/ === Create global toast element (once) ===\n const toast = document.createElement('div');\n toast.id = 'formToast';\n toast.style.cssText = `\n position: fixed;\n bottom: 32px;\n left: 50%;\n transform: translateX(-50%) translateY(20px);\n background: rgba(17, 17, 17, 0.9);\n color: #fff;\n padding: 12px 24px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.03em;\n box-shadow: 0 4px 12px rgba(0,0,0,0.3);\n opacity: 0;\n pointer-events: none;\n transition: all 0.4s ease;\n z-index: 13000;\n `;\n document.body.appendChild(toast);\n\n function showToast(msg, type = 'ok') {\n toast.textContent = msg;\n toast.style.background =\n type === 'ok'\n ? 'rgba(17,17,17,0.9)'\n : 'rgba(170,40,40,0.9)';\n toast.style.opacity = '1';\n toast.style.transform = 'translateX(-50%) translateY(0)';\n setTimeout(() => {\n toast.style.opacity = '0';\n toast.style.transform = 'translateX(-50%) translateY(20px)';\n }, 3000);\n }\n\n \/\/ === Attach form submit events ===\n forms.forEach(({ id, type }) => {\n const form = document.getElementById(id);\n if (!form) return;\n\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n if (!form.checkValidity()) {\n form.reportValidity();\n return;\n }\n\n const fullName = form.elements.fullName?.value?.trim() || '';\n const email = form.elements.email?.value?.trim() || '';\n const phone = form.elements.phone?.value?.trim() || '';\n const eventType = form.elements.eventType?.value?.trim() || '';\n const guests = form.elements.guests?.value?.trim() || '';\n const date = form.elements.date?.value?.trim() || '';\n const notes = form.elements.notes?.value?.trim() || '';\n\n const consent = form.querySelector('input[type=\"checkbox\"]');\n if (!consent?.checked) {\n showToast('Please agree to the consent before submitting.', 'error');\n return;\n }\n\n const btn = form.querySelector('.primary');\n btn.disabled = true;\n btn.textContent = 'Sending...';\n\n const payload = {\n type,\n fullName,\n email,\n phone,\n eventType,\n guests,\n date,\n notes,\n };\n\n try {\n const response = await fetch(scriptURL, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/x-www-form-urlencoded',\n },\n body: new URLSearchParams(payload).toString(),\n });\n\n const result = await response.json();\n console.log(result);\n\n if (result.status === 'success') {\n btn.textContent = 'Sent \\u2713';\n showToast('Your request has been sent successfully!');\n\n setTimeout(() => {\n form.reset();\n btn.disabled = false;\n btn.textContent = 'Send Request';\n closeRequestForm(form);\n }, 1500);\n\n } else {\n throw new Error(result.message || 'Submission failed');\n }\n\n } catch (err) {\n console.error('Submission error:', err);\n btn.disabled = false;\n btn.textContent = 'Send Request';\n showToast('Something went wrong. Please try again.', 'error');\n }\n\n });\n });\n })();\n\n \/* =====================\n DESTINATION\n ======================*\/\n \/* Reveal in-view (sinkron dengan M&E) *\/\n (function () {\n const io = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }\n });\n }, { threshold: .18 });\n document.querySelectorAll('#nearby .dest-item').forEach(el => io.observe(el));\n })();\n\n \/* Destination modal wiring (open\/close\/populate) *\/\n (function () {\n const modal = document.getElementById('modal-destination');\n if (!modal) return;\n const modalBg = document.getElementById('modalDestinationBg');\n const titleEl = document.getElementById('modalDestinationTitle');\n const subEl = document.getElementById('modalDestinationSub');\n const detailsEl = document.getElementById('modalDestinationDetails');\n const imgEl = document.getElementById('modalDestinationImage');\n\n \/\/ Populate modal content without opening it; opening is delegated to Meetings & Events handler\n function populateModal(data) {\n modalBg.style.backgroundImage = data.bg ? `url('${data.bg}')` : '';\n titleEl.textContent = data.title || '';\n subEl.textContent = data.desc || '';\n\n \/\/ details: accept CSV in data.details or array\n if (data.details && data.details.length) {\n detailsEl.innerHTML = '';\n detailsEl.hidden = false;\n for (const d of data.details) {\n const li = document.createElement('li');\n li.innerHTML = d;\n detailsEl.appendChild(li);\n }\n } else {\n detailsEl.hidden = true;\n }\n\n if (data.images && data.images.length) {\n imgEl.src = data.images[0];\n imgEl.alt = data.title || 'Destination image';\n imgEl.style.display = '';\n } else {\n imgEl.src = '';\n imgEl.style.display = 'none';\n }\n }\n\n function closeModal() {\n modal.classList.remove('open');\n document.documentElement.classList.remove('vm-open');\n }\n\n document.addEventListener('click', (e) => {\n const card = e.target.closest('#nearby .dest-item');\n if (!card) return;\n\n \/\/ read data from dataset or fallback to DOM\n const title = card.dataset.title || card.querySelector('.dest-title')?.textContent?.trim() || '';\n const desc = card.dataset.desc || card.querySelector('.dest-desc')?.textContent?.trim() || '';\n const imgs = [];\n if (card.dataset.images) card.dataset.images.split(',').forEach(s => s && imgs.push(s.trim()));\n else card.querySelectorAll('img').forEach(i => i.src && imgs.push(i.src));\n\n const details = card.dataset.details ? card.dataset.details.split('|').map(s => s.trim()) : [];\n\n \/\/ populate modal first, then let Meetings & Events delegate open it via data-open-modal\n populateModal({ title, desc, images: imgs, details, bg: imgs[0] });\n\n const cta = card.querySelector('.cta') || card.querySelector('a[href]');\n if (cta) {\n \/\/ set attribute so the existing delegate opens the modal\n cta.setAttribute('data-open-modal', '#modal-destination');\n \/\/ also attach dataset values so other logic can inspect if needed\n cta.dataset.title = title;\n cta.dataset.desc = desc;\n if (imgs.length) cta.dataset.images = imgs.join(',');\n if (details.length) cta.dataset.details = details.join('|');\n\n \/\/ Open the modal directly to avoid synthetic click re-entry\n \/\/ (dispatching a click can bubble back to the document handler\n \/\/ and cause synchronous recursion\/stack overflow).\n modal.classList.add('open');\n document.documentElement.classList.add('vm-open');\n const modalClose = modal.querySelector('.close');\n modalClose && modalClose.focus();\n } else {\n \/\/ fallback: directly open (in case delegate not present)\n modal.classList.add('open');\n document.documentElement.classList.add('vm-open');\n }\n });\n\n \/\/ close handled by existing Meetings & Events delegate (it listens to .venue-modal .close and backdrop clicks)\n \/\/ Also add Escape handling in case delegate not present\n document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modal.classList.contains('open')) closeModal(); });\n })();\n\n \/* =========================\n LEISURE SLIDER + MODAL\n FIXED & STABLE VERSION\n========================= *\/\n\n (function () {\n\n const root = document.getElementById('leisure');\n if (!root) return;\n\n const track = root.querySelector('.leisure-track');\n const prev = root.querySelector('.leisure-prev');\n const next = root.querySelector('.leisure-next');\n\n const originalSlides = Array.from(root.querySelectorAll('.leisure-slide'));\n if (!originalSlides.length) return;\n\n const GAP = 18;\n const AUTO = 3800;\n\n let perView = window.matchMedia('(max-width:640px)').matches\n ? 1\n : (window.matchMedia('(max-width:900px)').matches ? 2 : 3);\n\n let idx = perView;\n let anim = false;\n let aid = null;\n\n \/* =========================\n BUILD SLIDER (CLONE SAFE)\n ========================= *\/\n\n function build() {\n track.innerHTML = '';\n\n const head = originalSlides.slice(0, perView).map(n => n.cloneNode(true));\n const tail = originalSlides.slice(-perView).map(n => n.cloneNode(true));\n\n [...tail, ...originalSlides, ...head].forEach(n => {\n track.appendChild(n);\n });\n\n idx = perView;\n go(true);\n\n attachModalEvents(); \/\/ important\n }\n\n function slideWidth() {\n const el = track.querySelector('.leisure-slide');\n return (el.getBoundingClientRect().width || 0) + GAP;\n }\n\n function go(jump) {\n track.style.transition = jump\n ? 'none'\n : 'transform .7s cubic-bezier(.22,1,.36,1)';\n track.style.transform = `translate3d(${-slideWidth() * idx}px,0,0)`;\n }\n\n function nextSlide() {\n if (anim) return;\n anim = true;\n idx++;\n go();\n\n track.addEventListener('transitionend', () => {\n if (idx >= originalSlides.length + perView) {\n idx = perView;\n go(true);\n }\n anim = false;\n }, { once: true });\n }\n\n function prevSlide() {\n if (anim) return;\n anim = true;\n idx--;\n go();\n\n track.addEventListener('transitionend', () => {\n if (idx < perView) {\n idx = originalSlides.length + perView - 1;\n go(true);\n }\n anim = false;\n }, { once: true });\n }\n\n function start() {\n stop();\n aid = setInterval(nextSlide, AUTO);\n }\n\n function stop() {\n if (aid) {\n clearInterval(aid);\n aid = null;\n }\n }\n\n next.addEventListener('click', (e) => {\n e.preventDefault();\n stop();\n nextSlide();\n setTimeout(start, 800);\n });\n\n prev.addEventListener('click', (e) => {\n e.preventDefault();\n stop();\n prevSlide();\n setTimeout(start, 800);\n });\n\n root.addEventListener('mouseenter', stop);\n root.addEventListener('mouseleave', () => setTimeout(start, 300));\n\n window.addEventListener('resize', () => {\n const pv = window.matchMedia('(max-width:640px)').matches\n ? 1\n : (window.matchMedia('(max-width:900px)').matches ? 2 : 3);\n\n if (pv !== perView) {\n perView = pv;\n build();\n } else {\n go(true);\n }\n });\n\n \/* =========================\n MODAL LOGIC\n ========================= *\/\n\n const modal = document.getElementById(\"leisureModal\");\n const overlay = document.querySelector(\".leisure-overlay\");\n const closeBtn = document.querySelector(\".leisure-close\");\n\n const modalImg = document.getElementById(\"leisureModalImg\");\n const modalTitle = document.getElementById(\"leisureModalTitle\");\n const modalDesc = document.getElementById(\"leisureModalDesc\");\n\n function attachModalEvents() {\n const allSlides = root.querySelectorAll(\".leisure-slide\");\n\n allSlides.forEach(slide => {\n slide.addEventListener(\"click\", function (e) {\n\n \/\/ prevent arrow click triggering modal\n if (e.target.closest('.leisure-prev') || e.target.closest('.leisure-next')) return;\n\n e.preventDefault();\n\n modalImg.src = this.querySelector(\"img\").src;\n modalTitle.innerHTML = this.dataset.title;\n modalDesc.innerHTML = this.dataset.desc;\n\n modal.classList.add(\"active\");\n document.body.style.overflow = \"hidden\";\n });\n });\n }\n\n function closeModal() {\n modal.classList.remove(\"active\");\n document.body.style.overflow = \"\";\n }\n\n closeBtn.addEventListener(\"click\", closeModal);\n overlay.addEventListener(\"click\", closeModal);\n\n document.addEventListener(\"keydown\", function (e) {\n if (e.key === \"Escape\") closeModal();\n });\n\n \/* =========================\n INIT\n ========================= *\/\n\n build();\n start();\n\n })();\n\n \/* =========================\n GALLERY FILTER SYSTEM (FINAL)\n ========================= *\/\n const filters = document.getElementById(\"galFilters\");\n const grid = document.getElementById(\"galGrid\");\n const moreBtn = document.getElementById(\"galMore\");\n if (!filters || !grid) return;\n\n let fade = document.querySelector('#gallery .fade-bottom');\n let isExpanded = false;\n\n const getVisibleLimit = (filter) => {\n \/\/ Aturan khusus: subkategori menggunakan batas 3 item.\n if (filter?.type === 'sub') return 3;\n return window.innerWidth <= 720 ? 3 : 6;\n };\n\n const getActiveFilter = () => {\n const activeSub = filters.querySelector('button[data-sub].active');\n if (activeSub) return { type: 'sub', value: activeSub.dataset.sub };\n\n const activeCat = filters.querySelector('button[data-cat].active');\n if (activeCat) return { type: 'cat', value: activeCat.dataset.cat || 'all' };\n\n return { type: 'cat', value: 'all' };\n };\n\n const matchesFilter = (el, filter) => {\n if (filter.type === 'sub') return el.dataset.sub === filter.value;\n if (filter.value === 'all') return true;\n return el.dataset.cat === filter.value;\n };\n\n function renderGalleryByFilter(opts = {}) {\n const animateReveal = !!opts.animateReveal;\n const filter = getActiveFilter();\n const limit = getVisibleLimit(filter);\n const items = Array.from(grid.querySelectorAll('.gal'));\n const matched = items.filter(el => matchesFilter(el, filter));\n\n items.forEach(el => {\n el.classList.remove('is-hidden-by-limit');\n el.style.opacity = '';\n el.style.transform = '';\n el.style.transition = '';\n el.style.display = 'none';\n });\n\n const showCount = isExpanded ? matched.length : Math.min(limit, matched.length);\n const visibleItems = matched.slice(0, showCount);\n const hiddenByLimit = matched.slice(showCount);\n\n visibleItems.forEach(el => {\n el.style.display = 'block';\n });\n\n hiddenByLimit.forEach(el => {\n el.style.display = 'block';\n el.classList.add('is-hidden-by-limit');\n });\n\n if (animateReveal && isExpanded && matched.length > limit) {\n visibleItems.slice(limit).forEach((el, i) => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(14px) scale(0.995)';\n el.style.willChange = 'opacity, transform';\n el.style.transition = 'opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1), transform 0.52s cubic-bezier(0.22, 1, 0.36, 1)';\n\n requestAnimationFrame(() => {\n setTimeout(() => {\n el.style.opacity = '1';\n el.style.transform = 'translateY(0) scale(1)';\n setTimeout(() => {\n el.style.willChange = '';\n }, 560);\n }, 70 * i);\n });\n });\n }\n\n grid.classList.toggle('collapsed', !isExpanded && matched.length > limit);\n grid.classList.toggle('expanded', isExpanded || matched.length <= limit);\n\n if (isExpanded || matched.length <= limit) {\n grid.style.maxHeight = 'none';\n grid.style.overflow = 'visible';\n } else {\n grid.style.maxHeight = '';\n grid.style.overflow = '';\n }\n\n if (moreBtn) {\n const hasMore = matched.length > limit;\n moreBtn.style.display = hasMore ? '' : 'none';\n moreBtn.classList.toggle('active', hasMore && isExpanded);\n moreBtn.classList.toggle('rot', hasMore && isExpanded);\n }\n\n if (fade) {\n fade.style.display = (!isExpanded && matched.length > limit) ? 'block' : 'none';\n }\n }\n\n \/\/ === Delegasi klik untuk kategori & subkategori ===\n filters.addEventListener(\"click\", e => {\n const catBtn = e.target.closest(\"button[data-cat]\");\n const subBtn = e.target.closest(\"button[data-sub]\");\n\n \/\/ --- SUBMENU BUTTON ---\n if (subBtn) {\n isExpanded = false;\n filters.querySelectorAll(\"button\").forEach(b => b.classList.remove(\"active\"));\n subBtn.classList.add(\"active\");\n renderGalleryByFilter();\n\n \/\/ Check if mobile to close parent group\n const isMobile = window.innerWidth <= 720;\n if (isMobile) {\n const parentGroup = subBtn.closest(\".filter-group\");\n parentGroup?.classList.remove(\"open\");\n }\n filters.querySelectorAll(\".filter-group\").forEach(g => g.classList.remove(\"open\"));\n return;\n }\n\n \/\/ --- KATEGORI BUTTON ---\n if (catBtn) {\n const cat = catBtn.dataset.cat;\n isExpanded = false;\n\n \/\/ Close all filter groups first\n document.querySelectorAll(\"#galFilters .filter-group\").forEach(g => g.classList.remove(\"open\"));\n\n const group = catBtn.closest(\".filter-group\");\n const submenu = group?.querySelector(\".sub-menu\");\n\n \/\/ Kategori utama selalu menampilkan semua item dalam kategori tsb.\n \/\/ Submenu dibuka (bukan toggle) agar perilaku konsisten antar kategori.\n if (submenu) {\n group.classList.add(\"open\");\n }\n\n \/\/ Set active state\n filters.querySelectorAll(\"button\").forEach(b => b.classList.remove(\"active\"));\n catBtn.classList.add(\"active\");\n if (cat === \"all\") {\n filters.querySelectorAll('button[data-sub]').forEach(b => b.classList.remove('active'));\n }\n renderGalleryByFilter();\n }\n });\n\n \/\/ === UNIVERSAL EXPAND\/COLLAPSE (Desktop + Mobile) ===\n (function () {\n const grid = document.getElementById('galGrid');\n const moreBtn = document.getElementById('galMore');\n\n if (!grid || !moreBtn) return;\n\n \/\/ Fade global\n if (!fade) {\n fade = document.createElement('div');\n fade.className = 'fade-bottom';\n grid.parentElement.appendChild(fade);\n }\n\n renderGalleryByFilter();\n window.addEventListener('resize', () => {\n renderGalleryByFilter();\n });\n\n \/\/ === Toggle expand\/collapse ===\n moreBtn.addEventListener('click', () => {\n isExpanded = !isExpanded;\n renderGalleryByFilter({ animateReveal: isExpanded });\n });\n })();\n\n \/\/ === IMAGE VIEWER \/ LIGHTBOX sinkron dengan filter aktif (data-cat & data-sub) ===\n (function () {\n const grid = document.getElementById('galGrid');\n const viewer = document.getElementById('imageViewer');\n const viewerImg = document.getElementById('viewerImg');\n const closeBtn = document.getElementById('viewerClose');\n const prevBtn = document.getElementById('viewerPrev');\n const nextBtn = document.getElementById('viewerNext');\n\n if (!grid || !viewer) return;\n\n let images = []; \/\/ hanya gambar yang visible\n let currentIndex = 0;\n let isAnimating = false;\n\n \/\/ ambil ulang gambar yang sedang tampil\n const refreshImages = () => {\n images = Array.from(grid.querySelectorAll('.gal img'))\n .filter(img => img.closest('.gal').style.display !== 'none');\n };\n\n \/\/ buka viewer\n const openViewer = (index) => {\n refreshImages();\n if (!images.length) return;\n currentIndex = index;\n viewerImg.src = images[index].src;\n viewer.classList.add('active');\n viewerImg.classList.add('slide-reset');\n document.body.style.overflow = 'hidden';\n };\n\n \/\/ tutup viewer\n const closeViewer = () => {\n viewer.classList.remove('active');\n document.body.style.overflow = '';\n };\n\n \/\/ animasi transisi\n const transitionImage = (newIndex, direction) => {\n if (isAnimating || !images.length) return;\n isAnimating = true;\n\n viewerImg.classList.remove('slide-reset');\n viewerImg.classList.add(direction === 'next' ? 'slide-in-right' : 'slide-in-left');\n\n setTimeout(() => {\n viewerImg.src = images[newIndex].src;\n viewerImg.classList.remove('slide-in-right', 'slide-in-left');\n void viewerImg.offsetWidth;\n viewerImg.classList.add('slide-reset');\n isAnimating = false;\n }, 250);\n };\n\n \/\/ navigasi\n const showNext = () => {\n refreshImages();\n if (!images.length) return;\n currentIndex = (currentIndex + 1) % images.length;\n transitionImage(currentIndex, 'next');\n };\n\n const showPrev = () => {\n refreshImages();\n if (!images.length) return;\n currentIndex = (currentIndex - 1 + images.length) % images.length;\n transitionImage(currentIndex, 'prev');\n };\n\n \/\/ buka viewer dari klik gambar\n const delegateClick = (e) => {\n const img = e.target.closest('.gal img');\n if (!img) return;\n refreshImages();\n const index = images.indexOf(img);\n if (index !== -1) openViewer(index);\n };\n\n grid.addEventListener('click', delegateClick);\n closeBtn.addEventListener('click', closeViewer);\n nextBtn.addEventListener('click', showNext);\n prevBtn.addEventListener('click', showPrev);\n\n viewer.addEventListener('click', (e) => {\n if (e.target === viewer) closeViewer();\n });\n\n document.addEventListener('keydown', (e) => {\n if (!viewer.classList.contains('active')) return;\n if (e.key === 'ArrowRight') showNext();\n if (e.key === 'ArrowLeft') showPrev();\n if (e.key === 'Escape') closeViewer();\n });\n\n \/\/ refresh otomatis tiap filter berubah\n const observer = new MutationObserver(() => {\n if (viewer.classList.contains('active')) refreshImages();\n });\n observer.observe(grid, { attributes: true, childList: true, subtree: true });\n })();\n\n \/* =====================\n LOCATION: mode switch & helpers (no card, flat)\n ======================*\/\n (function () {\n const modes = document.getElementById('locModes');\n const times = document.getElementById('locTimes');\n const frame = document.getElementById('mapFrame');\n const routeOpen = document.getElementById('routeOpen');\n const routeCopy = document.getElementById('routeCopy');\n\n const hotelQ = encodeURIComponent('Trans Hotel Jakarta Cibubur');\n const mallQ = encodeURIComponent('Trans Studio Mall Cibubur');\n\n \/\/ pakai embed sederhana (tanpa API key)\n const SIMPLE = 'https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d5106.642517110833!2d106.89816480498034!3d-6.374765035476947!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69ed0033ad81b1%3A0xe629bf505cb03a95!2sTrans%20Hotel%20Jakarta!5e0!3m2!1sen!2sid!4v1773487664540!5m2!1sen!2sid';\n const OPEN = {\n drive: `https:\/\/www.google.com\/maps\/dir\/?api=1&origin=${hotelQ}&destination=${mallQ}&travelmode=driving`,\n transit: `https:\/\/www.google.com\/maps\/dir\/?api=1&origin=${hotelQ}&destination=${mallQ}&travelmode=transit`,\n walk: `https:\/\/www.google.com\/maps\/dir\/?api=1&origin=${hotelQ}&destination=${mallQ}&travelmode=walking`\n };\n const EST = {\n drive: [\n ['Trans Studio Mall', '1\u20133 min'],\n ['Jkt Outer Ring Road', '8\u201312 min'],\n ['Taman Mini Indonesia Indah', '18\u201325 min'],\n ['Soekarno\u2013Hatta (via toll)', '55\u201375 min'],\n ],\n transit: [\n ['Trans Studio Mall', '4\u20138 min'],\n ['Cawang (via LRT+angkot)', '35\u201350 min'],\n ['TMII (via bus\/angkot)', '35\u201355 min'],\n ['Gambir (mixed)', '70\u201395 min'],\n ],\n walk: [\n ['Trans Studio Mall', '3\u20136 min'],\n ['Nearest minimart', '5\u20138 min'],\n ['Neighborhood park', '10\u201315 min'],\n ['Cibubur Junction', '35\u201345 min'],\n ],\n };\n\n function renderTimes(mode) {\n times.innerHTML = EST[mode].map(([l, v]) => (`<div class=\"time-item\"><span>${l}<\\\/span><strong>${v}<\\\/strong><\\\/div>`)).join('');\n }\n\n function setMode(mode) {\n \/\/ aktifkan tombol sesuai mode\n modes.querySelectorAll('button[data-mode]').forEach(b => {\n const active = b.dataset.mode === mode;\n b.classList.toggle('active', active);\n b.setAttribute('aria-pressed', String(active));\n });\n\n \/\/ tampilkan map & estimasi waktu\n frame.src = SIMPLE;\n routeOpen.href = OPEN[mode];\n renderTimes(mode);\n }\n\n modes?.addEventListener('click', (e) => {\n const btn = e.target.closest('button[data-mode]');\n if (!btn) return;\n setMode(btn.dataset.mode);\n });\n\n routeCopy?.addEventListener('click', (e) => {\n e.preventDefault();\n const text = 'Trans Hotel Jakarta, Jl. Alternatif Cibubur, Cimanggis \u2014 Depok, Jawa Barat';\n \/\/ try to write to clipboard and show a toast on success\/failure\n try {\n const p = navigator.clipboard && navigator.clipboard.writeText ? navigator.clipboard.writeText(text) : Promise.reject(new Error('Clipboard API not available'));\n routeCopy.style.opacity = 0.6;\n p.then(() => {\n window.showToast && window.showToast('Address copied', 'ok');\n }).catch(() => {\n window.showToast && window.showToast('Copy failed', 'error');\n }).finally(() => {\n setTimeout(() => routeCopy.style.opacity = 1, 250);\n });\n } catch (err) {\n \/\/ fallback: still show message\n window.showToast && window.showToast('Address copied', 'ok');\n routeCopy.style.opacity = 0.6;\n setTimeout(() => routeCopy.style.opacity = 1, 250);\n }\n });\n\n \/\/ inisialisasi default\n setMode('drive');\n })();\n\n \/\/ Click handler for Offers\n document.addEventListener('click', (e) => {\n const btn = e.target.closest('#offers .btn');\n if (!btn) return;\n\n const offer = btn.closest('.js-offer');\n const code = offer?.dataset.promo || '';\n const name = offer?.dataset.name || 'Offer';\n const previewText = offer?.dataset.preview || `${name} \u2014 Promo code: ${code}`;\n const offerBookUrl = offer?.dataset.bookUrl || '';\n\n if (btn.dataset.action === 'preview') {\n \/\/ You can swap this for your own modal; using alert as a minimal fallback\n showToast(previewText, \"info\");\n return;\n }\n\n if (btn.dataset.action === 'book') {\n if (offerBookUrl) {\n window.open(offerBookUrl, '_blank', 'noopener');\n return;\n }\n \/\/ set promo hidden input then use centralized booking helper\n const promoInput = document.getElementById('promoCode');\n if (promoInput) promoInput.value = code;\n openDirectBooking();\n }\n });\n\n \/* ========= MODE ========= *\/\n const DEV = false;\n const CONSENT_GAS_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbz0PTgauTyKfejGd8h_plYa9geM0HnIjm_dLx7CQAypam9I9ZhrOBymN0_TB98cq9Fm\/exec';\n\n \/* ==== Cookie helpers (Elementor-safe) ==== *\/\n (function () {\n if (window.__cookieHelpersInited) return;\n window.__cookieHelpersInited = true;\n\n function setCookie(name, value, maxAgeSeconds) {\n var cookie = encodeURIComponent(name) + \"=\" + encodeURIComponent(value);\n if (typeof maxAgeSeconds === \"number\" && isFinite(maxAgeSeconds)) {\n cookie += \"; Max-Age=\" + Math.floor(maxAgeSeconds);\n }\n cookie += \"; Path=\/; SameSite=Lax\";\n if (location.protocol === \"https:\") cookie += \"; Secure\";\n document.cookie = cookie;\n }\n\n function getCookie(name) {\n var target = encodeURIComponent(name) + \"=\";\n var parts = document.cookie ? document.cookie.split(\"; \") : [];\n for (var i = 0; i < parts.length; i++) {\n if (parts[i].indexOf(target) === 0) {\n return decodeURIComponent(parts[i].substring(target.length));\n }\n }\n return null;\n }\n\n function deleteCookie(name) {\n document.cookie =\n encodeURIComponent(name) +\n \"=; Max-Age=0; Path=\/; SameSite=Lax\" +\n (location.protocol === \"https:\" ? \"; Secure\" : \"\");\n }\n\n \/\/ expose ke script lain yang sudah ada\n window.setCookie = window.setCookie || setCookie;\n window.getCookie = window.getCookie || getCookie;\n window.deleteCookie = window.deleteCookie || deleteCookie;\n })();\n\n \/* ==== Init kecil untuk cookiebar (anti double-bind) ==== *\/\n (function () {\n var bar = document.getElementById(\"cookiebar\");\n if (!bar || bar.dataset.inited) return;\n bar.dataset.inited = \"1\";\n\n \/\/ fallback show\/hide kalau fungsi di script utama belum ter-muat\n function show() { if (bar) bar.style.display = \"flex\"; }\n function hide() { if (bar) bar.style.display = \"none\"; }\n\n \/\/ kalau di script utama ada flag DEV, hormati; kalau tidak ada, anggap false\n var DEV = (typeof window.DEV === \"boolean\") ? window.DEV : false;\n\n if (DEV) {\n show();\n return;\n }\n\n \/\/ PROD: sembunyikan bar; blok utama yang mengatur gate\/bar sesuai kondisi.\n hide();\n })();\n\n \/* ========= POLICY MODAL ========= *\/\n const privModal = document.getElementById(\"privModal\");\n const policyTitle = document.getElementById(\"policyTitle\");\n const policyContent = document.getElementById(\"policyContent\");\n\n const privacyHTML = `\n <p>Trans Hotel Jakarta values you as our guest and recognizes that privacy is important to you.\n This Privacy Policy describes how we collect, use, and disclose information across our services.<\\\/p>\n <div class=\"sep\"><\\\/div>\n <h4>Collection of Personal Information<\\\/h4>\n <p>We may collect Personal Information such as name, contact details, IDs, guest stay information, and preferences.<\\\/p>\n <ul style=\"padding-left:18px;margin:8px 0\">\n <li><b>Online Services:<\\\/b> reservations, purchases, chat, newsletter sign-up, surveys\/promotions.<\\\/li>\n <li><b>Offline:<\\\/b> on-property interactions and phone reservations.<\\\/li>\n <li><b>Other Sources:<\\\/b> public databases, partners, travel agents, social media.<\\\/li>\n <\\\/ul>\n <div class=\"sep\"><\\\/div>\n <h4>Use of Personal Information<\\\/h4>\n <ul style=\"padding-left:18px;margin:8px 0\">\n <li>Provide requested services and complete your stay.<\\\/li>\n <li>Send administrative info, offers, and surveys.<\\\/li>\n <li>Personalize your experience and improve our services.<\\\/li>\n <\\\/ul>\n <div class=\"sep\"><\\\/div>\n <h4>Security<\\\/h4>\n <p>We employ reasonable measures to protect data. No system is 100% secure.<\\\/p>\n `;\n\n function openPolicy(title, html) {\n if (!privModal) return;\n if (title) policyTitle.textContent = title;\n if (html) policyContent.innerHTML = html;\n privModal.classList.add(\"open\");\n document.body.style.overflow = 'hidden';\n privModal.querySelector('.panel')?.focus();\n }\n function closePolicy() {\n privModal?.classList.remove(\"open\");\n var gateIsOpen = document.getElementById(\"cookieGate\")?.classList.contains(\"open\");\n document.body.style.overflow = gateIsOpen ? \"hidden\" : '';\n }\n function bindOpen(id, title, html) {\n const el = document.getElementById(id);\n el?.addEventListener(\"click\", (e) => {\n e.preventDefault();\n openPolicy(title, html);\n });\n }\n bindOpen(\"privacyInline\", \"Privacy Policy\", privacyHTML);\n bindOpen(\"privacyInline2\", \"Privacy Policy\", privacyHTML);\n\n privModal?.addEventListener(\"click\", (e) => {\n if (e.target.classList.contains('backdrop')) closePolicy();\n });\n document.getElementById(\"privClose\")?.addEventListener(\"click\", closePolicy);\n document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closePolicy(); });\n\n \/* ========= COOKIE BAR ========= *\/\n const cookiebar = document.getElementById(\"cookiebar\");\n const cookieAccept = document.getElementById(\"cookieAccept\");\n const cookieDecline = document.getElementById(\"cookieDecline\");\n\n function showCookiebar() { if (cookiebar) cookiebar.style.display = \"flex\"; }\n function hideCookiebar() { if (cookiebar) cookiebar.style.display = \"none\"; }\n\n function collectConsentData() {\n var timezone = '';\n try {\n timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || '';\n } catch (_) { }\n\n return {\n id: 'cd_' + Date.now() + '_' + Math.random().toString(36).slice(2, 8),\n timestamp: new Date().toISOString(),\n userAgent: navigator.userAgent || '',\n language: navigator.language || '',\n timezone: timezone,\n screen: (window.screen ? (screen.width + 'x' + screen.height) : ''),\n colorDepth: (window.screen ? screen.colorDepth : ''),\n platform: navigator.platform || '',\n referrer: document.referrer || '(direct)',\n pageUrl: location.href,\n cookiesEnabled: !!navigator.cookieEnabled,\n doNotTrack: navigator.doNotTrack || 'unspecified'\n };\n }\n\n function saveConsentLocally(payload) {\n try {\n var key = 'thj_cookie_consents';\n var existing = JSON.parse(localStorage.getItem(key) || '[]');\n existing.push(payload);\n localStorage.setItem(key, JSON.stringify(existing));\n } catch (_) { }\n }\n\n function sendConsentToServer(payload) {\n if (!CONSENT_GAS_URL) return;\n try {\n var body = new URLSearchParams({\n type: 'cookie_consent',\n payload: JSON.stringify(payload)\n });\n\n fetch(CONSENT_GAS_URL, {\n method: 'POST',\n mode: 'no-cors',\n body: body\n }).catch(function () { });\n } catch (_) { }\n }\n\n const cookieGate = document.getElementById(\"cookieGate\");\n const cookieGateAccept = document.getElementById(\"cookieGateAccept\");\n const cookieGatePrivacy = document.getElementById(\"cookieGatePrivacy\");\n const DECLINE_SESSION_KEY = \"thj_cookie_declined_session\";\n\n function openCookieGate() {\n cookieGate?.classList.add(\"open\");\n document.body.style.overflow = \"hidden\";\n }\n\n function closeCookieGate() {\n cookieGate?.classList.remove(\"open\");\n if (!privModal?.classList.contains(\"open\")) {\n document.body.style.overflow = \"\";\n }\n }\n\n function handleConsentAccept() {\n var payload = collectConsentData();\n setCookie(\"consent\", \"1\", 3600 * 24 * 180); \/\/ 180 hari\n sessionStorage.removeItem(DECLINE_SESSION_KEY);\n saveConsentLocally(payload);\n sendConsentToServer(payload);\n closeCookieGate();\n hideCookiebar();\n }\n\n if (DEV) {\n showCookiebar();\n cookieAccept?.addEventListener(\"click\", function () {\n console.log(\"[DEV] Accept clicked (no-op).\");\n });\n cookieDecline?.addEventListener(\"click\", function () {\n console.log(\"[DEV] Decline clicked (no-op).\");\n });\n } else {\n let consent = getCookie(\"consent\");\n\n \/\/ Bersihkan legacy decline cookie agar decline sekarang hanya sementara (session).\n if (consent === \"0\") {\n deleteCookie(\"consent\");\n consent = null;\n }\n\n \/\/ Logika konditional berdasarkan state:\n \/\/ 1. Sudah accept (consent=1) \u2192 akses normal\n \/\/ 2. Sudah decline di session ini \u2192 tampilkan gate\n \/\/ 3. Belum pilih sama sekali \u2192 tampilkan cookie bar\n const isDeclinedInSession = sessionStorage.getItem(DECLINE_SESSION_KEY) === \"1\";\n if (consent === \"1\") {\n hideCookiebar();\n closeCookieGate();\n } else if (isDeclinedInSession) {\n hideCookiebar();\n openCookieGate();\n } else {\n showCookiebar();\n closeCookieGate();\n }\n\n cookieAccept?.addEventListener(\"click\", handleConsentAccept);\n cookieGateAccept?.addEventListener(\"click\", handleConsentAccept);\n\n cookieDecline?.addEventListener(\"click\", function () {\n \/\/ decline hanya berlaku saat session\/tab ini aktif\n sessionStorage.setItem(DECLINE_SESSION_KEY, \"1\");\n hideCookiebar();\n openCookieGate();\n });\n\n cookieGatePrivacy?.addEventListener(\"click\", function (e) {\n e.preventDefault();\n e.stopPropagation();\n openPolicy(\"Privacy Policy\", privacyHTML);\n });\n\n \/\/ Setelah user keluar website, status decline direset.\n window.addEventListener(\"pagehide\", function () {\n sessionStorage.removeItem(DECLINE_SESSION_KEY);\n });\n }\n\n \/* ========= DEV HELPERS (opsional) ========= *\/\n window.__consent = {\n get: () => getCookie('consent'),\n set: (v, days = 30) => setCookie('consent', String(v), 3600 * 24 * days),\n reset: () => deleteCookie('consent'),\n show: showCookiebar,\n hide: hideCookiebar\n };\n\n\n\n \/* =====================\n LANGUAGE SWITCHER\n ======================*\/\n \/\/ loop semua instance (desktop\/mobile)\n document.querySelectorAll(\".lang-wrap\").forEach((wrap) => {\n const btn = wrap.querySelector(\".lang-btn\");\n const menu = wrap.querySelector(\".lang-menu\");\n const code = btn?.querySelector(\".code\");\n if (!btn || !menu || !code) return;\n\n let justOpenedTick = false;\n const open = () => {\n wrap.classList.add(\"open\");\n btn.setAttribute(\"aria-expanded\", \"true\");\n justOpenedTick = true;\n \/\/ biar handler global click nggak langsung nutup di tick yg sama\n setTimeout(() => (justOpenedTick = false), 0);\n };\n const close = () => {\n wrap.classList.remove(\"open\");\n btn.setAttribute(\"aria-expanded\", \"false\");\n };\n const toggle = () => (wrap.classList.contains(\"open\") ? close() : open());\n\n btn.addEventListener(\"click\", (e) => {\n e.preventDefault();\n e.stopPropagation(); \/\/ cegah handler luar menutup\n toggle();\n });\n\n menu.addEventListener(\"click\", (e) => {\n const item = e.target.closest(\"[data-lang]\");\n if (!item) return;\n e.preventDefault();\n\n const lang = item.getAttribute(\"data-lang\");\n\n if (lang === \"ID\") {\n alert(\"We're preparing the Indonesian version of this site. Please check back soon.\");\n close(); \/\/ tetap tutup menu setelah klik\n return;\n }\n\n code.textContent = item.getAttribute(\"data-lang\") || code.textContent;\n close();\n });\n\n \/\/ tutup saat klik di luar\n document.addEventListener(\"click\", (e) => {\n if (!wrap.classList.contains(\"open\")) return;\n if (justOpenedTick) return; \/\/ hindari langsung nutup di klik yg sama\n if (!wrap.contains(e.target)) close();\n });\n\n \/\/ Esc untuk tutup\n document.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Escape\" && wrap.classList.contains(\"open\")) close();\n });\n });\n\n \/* =====================\n CTA + FORMS\n ======================*\/\n document.getElementById(\"newsForm\")?.addEventListener(\"submit\", (e) => {\n e.preventDefault();\n const email = document.getElementById(\"newsEmail\")?.value;\n if (email) {\n showToast(`Thanks for subscribing, ${email}!`, \"ok\");\n e.target.reset();\n }\n });\n document.getElementById(\"reqForm\")?.addEventListener(\"submit\", (e) => {\n e.preventDefault();\n showToast(\"Your request has been sent successfully. We\u2019ll contact you within 24 hours.\", \"ok\");\n\n e.target.reset();\n });\n\n \/\/ counter\n document.querySelectorAll(\".counter button\").forEach(btn => {\n btn.addEventListener(\"click\", (e) => {\n e.preventDefault();\n const targetId = btn.dataset.target;\n const out = document.getElementById(targetId);\n let val = parseInt(out.textContent) || 1;\n if (btn.classList.contains(\"plus\")) val++;\n if (btn.classList.contains(\"minus\") && val > 1) val--;\n out.textContent = val;\n syncCounts(targetId);\n });\n });\n\n function syncCounts(changedId) {\n \/\/ Sync counter output values to hidden inputs (desktop form)\n const roomsInput = document.getElementById('roomsInput');\n const guestsInput = document.getElementById('guestsInput');\n if (changedId === 'roomsCount' || changedId === 'mobileRoomsCount') {\n const val = document.getElementById(changedId)?.textContent || '1';\n \/\/ mirror ke pasangan lainnya\n const mirror = changedId === 'roomsCount' ? 'mobileRoomsCount' : 'roomsCount';\n const mirrorEl = document.getElementById(mirror);\n if (mirrorEl) mirrorEl.textContent = val;\n if (roomsInput) roomsInput.value = val;\n }\n if (changedId === 'guestsCount' || changedId === 'mobileGuestsCount') {\n const val = document.getElementById(changedId)?.textContent || '1';\n const mirror = changedId === 'guestsCount' ? 'mobileGuestsCount' : 'guestsCount';\n const mirrorEl = document.getElementById(mirror);\n if (mirrorEl) mirrorEl.textContent = val;\n if (guestsInput) guestsInput.value = val;\n }\n }\n\n \/* ---------- BOOK NOW ACTION (direct booking helper) ---------- *\/\n function formatMDYYYY(iso) {\n if (!iso) return '';\n \/\/ iso expected yyyy-mm-dd, output M\/D\/YYYY for IBE compatibility\n const parts = iso.split('-');\n if (parts.length !== 3) return '';\n const y = Number(parts[0]);\n const m = Number(parts[1]);\n const d = Number(parts[2]);\n if (!y || !m || !d) return '';\n return `${m}\/${d}\/${y}`;\n }\n\n function openDirectBooking(source) {\n const base = 'https:\/\/reservations.transhoteljakarta.com\/book\/accommodations';\n const checkin = document.getElementById('checkin')?.value || '';\n const checkout = document.getElementById('checkout')?.value || '';\n const isMobile = source === 'mobile';\n const rooms = isMobile\n ? (document.getElementById('mobileRoomsCount')?.textContent || '1')\n : (document.getElementById('roomsInput')?.value || document.getElementById('roomsCount')?.textContent || '1');\n const guests = isMobile\n ? (document.getElementById('mobileGuestsCount')?.textContent || '1')\n : (document.getElementById('guestsInput')?.value || document.getElementById('guestsCount')?.textContent || '1');\n const promo = document.getElementById('promoCode')?.value || '';\n\n \/\/ Derived forms for IBE query format\n const dateIn = checkin ? formatMDYYYY(checkin) : '';\n const dateOut = checkout ? formatMDYYYY(checkout) : '';\n\n try {\n const url = new URL(base);\n \/\/ Core params expected by IBE\n url.searchParams.set('Adults', String(guests || '1'));\n url.searchParams.set('Rooms', String(rooms || '1'));\n if (dateIn) url.searchParams.set('DateIn', dateIn);\n if (dateOut) url.searchParams.set('DateOut', dateOut);\n url.searchParams.set('domain', 'www.transhoteljakarta.com');\n url.searchParams.set('themeid', '17368');\n\n \/\/ Optional promo passthrough if provided from page\n if (promo) {\n url.searchParams.set('PromoCode', promo);\n }\n\n \/\/ show url in console and notification, then open in new tab\n console.log('Direct booking URL:', url.toString());\n showToast('Opening booking in new tab', 'info');\n window.open(url.toString(), '_blank', 'noopener');\n } catch (err) {\n \/\/ fallback: open base in new tab\n window.open(base, '_blank', 'noopener');\n }\n }\n\n \/\/ bind desktop & mobile Book Now\n document.getElementById(\"bookBtn\")?.addEventListener(\"click\", (e) => {\n e.preventDefault();\n openDirectBooking('desktop');\n });\n\n document.getElementById(\"mobileBookBtn\")?.addEventListener(\"click\", (e) => {\n e.preventDefault();\n openDirectBooking('mobile');\n });\n\n \/\/ bind promo modal book -> open specific TravelClick rateplan\n document.querySelectorAll('.promo-modal .book-now').forEach(btn => {\n btn.addEventListener('click', (e) => {\n e.preventDefault();\n const url = 'https:\/\/transhotelgroup.com\/jump?utm_source=website&utm_medium=popup&utm_campaign=special_opening_rate&utm_content=homepage_booknow&hotel=thj&placement=homepage';\n window.open(url, '_blank', 'noopener');\n });\n });\n\n\n \/* =====================\n TOP PROGRESS BAR\n ======================*\/\n const progress = document.getElementById(\"progress\");\n function updateProgress() {\n if (!progress) return;\n const scrollTop =\n window.scrollY || document.documentElement.scrollTop;\n const docH =\n document.documentElement.scrollHeight - window.innerHeight;\n const percent = docH > 0 ? (scrollTop \/ docH) * 100 : 0;\n progress.style.width = percent + \"%\";\n }\n window.addEventListener(\"scroll\", updateProgress, { passive: true });\n window.addEventListener(\"resize\", updateProgress);\n updateProgress();\n\n \/* ===== SUBSCRIBE behavior (modern, elegant) ===== *\/\n (function () {\n const form = document.getElementById('subForm');\n const email = document.getElementById('subEmail');\n\n \/\/ === Create floating toast notification ===\n const toast = document.createElement('div');\n toast.id = 'subToast';\n toast.style.cssText = `\n position: fixed;\n bottom: 32px;\n left: 50%;\n transform: translateX(-50%) translateY(20px);\n background: rgba(17, 17, 17, 0.9);\n color: #fff;\n padding: 12px 24px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.03em;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n opacity: 0;\n pointer-events: none;\n transition: all 0.4s ease;\n z-index: 13000;\n `;\n document.body.appendChild(toast);\n\n function showToast(msg, type = 'ok') {\n toast.textContent = msg;\n toast.style.background =\n type === 'ok' ? 'rgba(17,17,17,0.9)' : 'rgba(170,40,40,0.9)';\n toast.style.opacity = '1';\n toast.style.transform = 'translateX(-50%) translateY(0)';\n setTimeout(() => {\n toast.style.opacity = '0';\n toast.style.transform = 'translateX(-50%) translateY(20px)';\n }, 3000);\n }\n\n form?.addEventListener('submit', async (e) => {\n e.preventDefault();\n\n const val = (email.value || '').trim();\n const ok = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(val);\n\n if (!ok) {\n showToast('\u26a0\ufe0f Please enter a valid e-mail address.', 'error');\n email.focus();\n return;\n }\n\n const btn = form.querySelector('button');\n btn.disabled = true;\n btn.textContent = 'Subscribing...';\n\n try {\n const response = await fetch(\n 'https:\/\/script.google.com\/macros\/s\/AKfycbxOy5TzUCTh27ehx66OKKTJH5DjLWAe2-QnqBIKvDU6qdTjzcfdHp4rrriKEDjhW5GC\/exec',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/x-www-form-urlencoded',\n },\n body: new URLSearchParams({\n email: val,\n type: 'subscriber',\n }).toString(),\n }\n );\n\n const result = await response.json();\n\n if (result.status === 'success') {\n showToast('Thanks! You are subscribed.');\n form.reset();\n } else if (result.status === 'exists') {\n showToast('This email is already subscribed.');\n } else {\n throw new Error(result.message);\n }\n\n } catch (err) {\n console.error(err);\n showToast('Something went wrong. Please try again.', 'error');\n }\n\n btn.disabled = false;\n btn.textContent = 'Subscribe';\n });\n\n })();\n\n \/* =====================\n FOOTER YEAR\n ======================*\/\n const yearEl = document.getElementById('year');\n if (yearEl) yearEl.textContent = String(new Date().getFullYear());\n\n const dateField = document.querySelector(\".booking-form .date-field\");\n const fieldGroups = document.querySelectorAll(\".booking-form .field-group\");\n const bookingForm = document.querySelector(\".booking-form\");\n\n if (window.innerWidth <= 768 && dateField) {\n \/\/ Saat tanggal diklik, tampilkan input lainnya\n dateField.addEventListener(\"change\", () => {\n fieldGroups.forEach(el => el.style.display = \"block\");\n });\n }\n \/\/ === FIX NAV SLIDE BEHAVIOR ===\n const navContainer = document.querySelector('.nav-center');\n const leftArrow = document.querySelector('.nav-arrow.left');\n const rightArrow = document.querySelector('.nav-arrow.right');\n\n if (navContainer && leftArrow && rightArrow) {\n navContainer.scrollLeft = 0;\n const scrollAmount = 250;\n\n leftArrow.addEventListener('click', () => {\n navContainer.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\n });\n\n rightArrow.addEventListener('click', () => {\n navContainer.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n });\n\n const updateArrows = () => {\n leftArrow.style.opacity = navContainer.scrollLeft <= 0 ? 0.3 : 1;\n rightArrow.style.opacity =\n navContainer.scrollLeft + navContainer.clientWidth >= navContainer.scrollWidth\n ? 0.3\n : 1;\n };\n\n navContainer.addEventListener('scroll', updateArrows);\n updateArrows();\n }\n\n \/* Global: tutup modal bila pengguna klik di luar panel modal *\/\n (function () {\n \/\/ Jangan tutup kalau kliknya adalah opener\/modal-toggle atau elemen interaktif lain\n function isOpener(target) {\n if (!(target instanceof Element)) return false;\n if (target.closest('#art-of-stay')) return true;\n return !!target.closest('[data-open-modal], [data-target], [data-modal], .learn-more, .proposal-toggle, .open-req, .art-item, .lang-btn, #galFilters, .filter-group, .lang-wrap, #privacyInline, #privacyInline2');\n }\n\n document.addEventListener('click', function (e) {\n \/\/ Jalankan setelah handler lain supaya tidak menutup modal yang baru dibuka\n setTimeout(() => {\n try {\n if (isOpener(e.target)) return;\n\n \/\/ Cari semua elemen yang tampak seperti overlay\/modal dan sedang terbuka\n const openModals = Array.from(document.querySelectorAll('.venue-modal.open, .modal.open, #suiteModal.open, .priv-modal.open, .dialog.open'));\n\n openModals.forEach(modal => {\n \/\/ Cari panel\/panel utama di dalam modal\n const panel = modal.querySelector('.panel, .suite-panel, .modal-panel, .venue-panel, .panel-inner');\n\n \/\/ Jika ada panel dan klik terjadi di luar panel -> tutup\n if (panel && !panel.contains(e.target)) {\n modal.classList.remove('open');\n modal.setAttribute('aria-hidden', 'true');\n document.body.style.overflow = '';\n }\n\n \/\/ Jika tidak ada panel tetapi klik langsung pada overlay\/modal sendiri -> tutup\n else if (!panel && modal === e.target) {\n modal.classList.remove('open');\n modal.setAttribute('aria-hidden', 'true');\n document.body.style.overflow = '';\n }\n });\n } catch (err) {\n console.warn('Modal close handler error:', err);\n }\n }, 0);\n }, false);\n })();\n\n (function () {\n if (typeof document === 'undefined') return;\n if (window.__sectionAnimInited) return; window.__sectionAnimInited = true;\n\n const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n \/\/ per-section config: selectors, revealDelay (ms), hideDelay (ms)\n const configs = {\n '#offers': { selectors: ['.offers-grid .offer', '#offers .offer', '#offers .offers-grid .offer'], reveal: 160, hide: 80 },\n '#nearby': { selectors: ['.dest-grid .dest-item', '#nearby .dest-item'], reveal: 160, hide: 80 },\n '#art-of-stay': { selectors: ['#art-of-stay .art-item', '#art-of-stay .art-track .art-item', '#art-of-stay .art-slider .art-item'], reveal: 140, hide: 70 },\n '#leisure': { selectors: ['#leisure .leisure-head', '#leisure .leisure-slider', '#leisure .leisure-track'], reveal: 140, hide: 70 },\n '#meetings': { selectors: ['#meetings .venue-row', '#meetings .venue-item', '#meetings .details', '#meetings .lead', '#meetings h2'], reveal: 120, hide: 60 },\n '#dining': { selectors: ['#dining .dining-item', '#dining .card', '#dining h2', '#dining .lead'], reveal: 120, hide: 60 },\n '#location': { selectors: ['#location .loc-info *', '#location .loc-grid *', '#location .loc-head > *'], reveal: 80, hide: 40 },\n '#subscribe': { selectors: ['#subscribe .sub-wrap *', '#subscribe .sub-bar *', '#subscribe .sub-head *'], reveal: 80, hide: 40 }\n };\n\n \/\/ Build groups for sections that exist\n const groups = [];\n for (const id of Object.keys(configs)) {\n const cfg = configs[id];\n const sec = document.querySelector(id);\n if (!sec) continue;\n let items = [];\n for (const sel of cfg.selectors) {\n const found = Array.from(sec.querySelectorAll(sel));\n if (found.length) { items = found; break; }\n }\n if (!items.length) items = Array.from(sec.querySelectorAll(':scope > *'));\n \/\/ Special-case Art of Stay: animate the slider container and heading\n if (id === '#art-of-stay') {\n const container = sec.querySelector('.art-slider') || sec.querySelector('.art-track') || sec;\n const head = sec.querySelector('.art-head') || sec.querySelector('h2');\n const artItems = [];\n if (head) artItems.push(head);\n if (container) artItems.push(container);\n if (artItems.length) items = artItems;\n }\n items.forEach(it => it.classList.add('anim-item'));\n groups.push({ section: sec, items, cfg });\n }\n\n if (!groups.length) return;\n\n if (reduced) {\n groups.forEach(g => g.items.forEach(it => it.classList.add('anim-in')));\n return;\n }\n\n const io = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n const g = groups.find(x => x.section === entry.target);\n if (!g) return;\n const { items, cfg } = g;\n if (entry.isIntersecting) {\n items.forEach((it, i) => {\n setTimeout(() => it.classList.add('anim-in'), i * cfg.reveal);\n });\n } else {\n items.forEach((it, i) => {\n setTimeout(() => it.classList.remove('anim-in'), i * cfg.hide);\n });\n }\n });\n }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });\n\n groups.forEach(g => io.observe(g.section));\n })();\n\n });\n\n <\/script>\n<\/body>\n\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Trans Hotel Jakarta \u2014 Elegant Feels. Effortless Stay. THE HOTEL THE ROOMS AND SUITES MEETINGS AND EVENTS DINING LEISURE GALLERY SPECIAL OFFERS NEARBY ATTRACTIONS OUR HOTELS & VENUES EN English Bahasa Indonesia Book Now THE HOTEL THE ROOMS AND SUITES MEETINGS AND EVENTS DINING LEISURE GALLERY SPECIAL OFFERS NEARBY ATTRACTIONS OUR HOTELS & VENUES Book […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-352","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Special Offer Hotel Cibubur | Trans Hotel Jakarta Official Website<\/title>\n<meta name=\"description\" content=\"Discover limited-time special promos and exclusive offers only on the official website of Trans Hotel Jakarta. Experience 5-star comfort in Cibubur with direct access to Trans Studio Mall and rooftop dining. Book direct for the best deal today!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/transhoteljakarta.com\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Special Offer Hotel Cibubur | Trans Hotel Jakarta Official Website\" \/>\n<meta property=\"og:description\" content=\"Discover limited-time special promos and exclusive offers only on the official website of Trans Hotel Jakarta. Experience 5-star comfort in Cibubur with direct access to Trans Studio Mall and rooftop dining. Book direct for the best deal today!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/transhoteljakarta.com\/\" \/>\n<meta property=\"og:site_name\" content=\"Trans Hotel Jakarta\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-18T06:37:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/check-mark-e1759584460184.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"34 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/transhoteljakarta.com\/\",\"url\":\"https:\/\/transhoteljakarta.com\/\",\"name\":\"Special Offer Hotel Cibubur | Trans Hotel Jakarta Official Website\",\"isPartOf\":{\"@id\":\"https:\/\/transhoteljakarta.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/transhoteljakarta.com\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/transhoteljakarta.com\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/check-mark-e1759584460184.png\",\"datePublished\":\"2025-10-14T07:55:31+00:00\",\"dateModified\":\"2026-05-18T06:37:35+00:00\",\"description\":\"Discover limited-time special promos and exclusive offers only on the official website of Trans Hotel Jakarta. Experience 5-star comfort in Cibubur with direct access to Trans Studio Mall and rooftop dining. Book direct for the best deal today!\",\"breadcrumb\":{\"@id\":\"https:\/\/transhoteljakarta.com\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/transhoteljakarta.com\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/transhoteljakarta.com\/#primaryimage\",\"url\":\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/check-mark-e1759584460184.png\",\"contentUrl\":\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/check-mark-e1759584460184.png\",\"width\":458,\"height\":454},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/transhoteljakarta.com\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/transhoteljakarta.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/transhoteljakarta.com\/#website\",\"url\":\"https:\/\/transhoteljakarta.com\/\",\"name\":\"Trans Hotel Jakarta\",\"description\":\"5-Star Hotel in Cibubur for MICE, Family Getaways, and Lifestyle Stays.\",\"publisher\":{\"@id\":\"https:\/\/transhoteljakarta.com\/#organization\"},\"alternateName\":\"THJ\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/transhoteljakarta.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/transhoteljakarta.com\/#organization\",\"name\":\"Trans Hotel Jakarta\",\"url\":\"https:\/\/transhoteljakarta.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/transhoteljakarta.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/cropped-THJ-Logo-e1763372693310.png\",\"contentUrl\":\"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/cropped-THJ-Logo-e1763372693310.png\",\"width\":490,\"height\":367,\"caption\":\"Trans Hotel Jakarta\"},\"image\":{\"@id\":\"https:\/\/transhoteljakarta.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Special Offer Hotel Cibubur | Trans Hotel Jakarta Official Website","description":"Discover limited-time special promos and exclusive offers only on the official website of Trans Hotel Jakarta. Experience 5-star comfort in Cibubur with direct access to Trans Studio Mall and rooftop dining. Book direct for the best deal today!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/transhoteljakarta.com\/","og_locale":"en_US","og_type":"article","og_title":"Special Offer Hotel Cibubur | Trans Hotel Jakarta Official Website","og_description":"Discover limited-time special promos and exclusive offers only on the official website of Trans Hotel Jakarta. Experience 5-star comfort in Cibubur with direct access to Trans Studio Mall and rooftop dining. Book direct for the best deal today!","og_url":"https:\/\/transhoteljakarta.com\/","og_site_name":"Trans Hotel Jakarta","article_modified_time":"2026-05-18T06:37:35+00:00","og_image":[{"url":"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/check-mark-e1759584460184.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"34 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/transhoteljakarta.com\/","url":"https:\/\/transhoteljakarta.com\/","name":"Special Offer Hotel Cibubur | Trans Hotel Jakarta Official Website","isPartOf":{"@id":"https:\/\/transhoteljakarta.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/transhoteljakarta.com\/#primaryimage"},"image":{"@id":"https:\/\/transhoteljakarta.com\/#primaryimage"},"thumbnailUrl":"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/check-mark-e1759584460184.png","datePublished":"2025-10-14T07:55:31+00:00","dateModified":"2026-05-18T06:37:35+00:00","description":"Discover limited-time special promos and exclusive offers only on the official website of Trans Hotel Jakarta. Experience 5-star comfort in Cibubur with direct access to Trans Studio Mall and rooftop dining. Book direct for the best deal today!","breadcrumb":{"@id":"https:\/\/transhoteljakarta.com\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/transhoteljakarta.com\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/transhoteljakarta.com\/#primaryimage","url":"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/check-mark-e1759584460184.png","contentUrl":"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/check-mark-e1759584460184.png","width":458,"height":454},{"@type":"BreadcrumbList","@id":"https:\/\/transhoteljakarta.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/transhoteljakarta.com\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/transhoteljakarta.com\/#website","url":"https:\/\/transhoteljakarta.com\/","name":"Trans Hotel Jakarta","description":"5-Star Hotel in Cibubur for MICE, Family Getaways, and Lifestyle Stays.","publisher":{"@id":"https:\/\/transhoteljakarta.com\/#organization"},"alternateName":"THJ","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/transhoteljakarta.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/transhoteljakarta.com\/#organization","name":"Trans Hotel Jakarta","url":"https:\/\/transhoteljakarta.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/transhoteljakarta.com\/#\/schema\/logo\/image\/","url":"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/cropped-THJ-Logo-e1763372693310.png","contentUrl":"https:\/\/transhoteljakarta.com\/wp-content\/uploads\/2025\/10\/cropped-THJ-Logo-e1763372693310.png","width":490,"height":367,"caption":"Trans Hotel Jakarta"},"image":{"@id":"https:\/\/transhoteljakarta.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/transhoteljakarta.com\/index.php?rest_route=\/wp\/v2\/pages\/352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/transhoteljakarta.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/transhoteljakarta.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/transhoteljakarta.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/transhoteljakarta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=352"}],"version-history":[{"count":30,"href":"https:\/\/transhoteljakarta.com\/index.php?rest_route=\/wp\/v2\/pages\/352\/revisions"}],"predecessor-version":[{"id":2717,"href":"https:\/\/transhoteljakarta.com\/index.php?rest_route=\/wp\/v2\/pages\/352\/revisions\/2717"}],"wp:attachment":[{"href":"https:\/\/transhoteljakarta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}