/* Penampilan IIQ Jakarta untuk tur 360 (menimpa style.css bawaan) */
:root { --t-bg: rgba(3, 33, 27, .82); --t-bg2: rgba(10, 90, 71, .92); --t-line: rgba(217, 166, 58, .55); --t-gold: #d9a63a; --t-gold2: #f0c870; }
html, body { font-family: "Manrope", "Helvetica Neue", Arial, sans-serif; background: #03211b; }

/* judul lokasi */
#titleBar { height: 46px; left: 56px; right: 112px; }
body.fullscreen-enabled #titleBar { right: 112px; }
body.multiple-scenes #titleBar { left: 56px; }
#titleBar .sceneName { height: 46px; line-height: 36px; padding: 5px 18px; font: 700 1.02rem/36px "Fraunces", Georgia, serif; letter-spacing: .02em; text-align: center; color: #fff; background: linear-gradient(90deg, rgba(3, 33, 27, .78), rgba(10, 90, 71, .78)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 2px solid var(--t-gold); border-radius: 0 0 16px 16px; }

/* tombol kendali */
#sceneListToggle, #autorotateToggle, #fullscreenToggle { width: 46px; height: 46px; top: 8px; border-radius: 14px; background: var(--t-bg) !important; border: 1px solid var(--t-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .2s, transform .2s; }
#sceneListToggle { left: 8px; }
#autorotateToggle { right: 62px; }
#fullscreenToggle { right: 8px; }
body.fullscreen-enabled #autorotateToggle { right: 62px; }
.no-touch #sceneListToggle:hover, .no-touch #autorotateToggle:hover, .no-touch #fullscreenToggle:hover, #autorotateToggle.enabled, #sceneListToggle.enabled { background: var(--t-bg2) !important; border-color: var(--t-gold); }
#sceneListToggle .icon, #autorotateToggle .icon, #fullscreenToggle .icon { top: 7px; right: 7px; }

/* daftar lokasi */
#sceneList { left: -260px; width: 260px; padding-top: 62px; scrollbar-width: thin; scrollbar-color: var(--t-gold) transparent; }
#sceneList.enabled { margin-left: 260px; }
#sceneList .scenes { margin: 0 0 10px 8px; padding: 8px; width: calc(100% - 16px); border-radius: 16px; background: var(--t-bg); border: 1px solid var(--t-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#sceneList .scene { height: 38px; border-radius: 10px; margin-bottom: 2px; }
#sceneList .scene .text { line-height: 38px; font-size: .92rem; font-weight: 600; }
.no-touch #sceneList .scene:hover { background: rgba(255, 255, 255, .12); }
#sceneList .scene.current { background: linear-gradient(90deg, rgba(217, 166, 58, .32), rgba(217, 166, 58, .08)); box-shadow: inset 3px 0 0 var(--t-gold); color: var(--t-gold2); }
.mobile #sceneList { width: 100%; left: -100%; }
.mobile #sceneList.enabled { margin-left: 100%; }
.mobile #sceneList .scenes { height: auto; max-height: 100%; }
.mobile #sceneList .scene { height: 44px; }
.mobile #sceneList .scene .text { line-height: 44px; }

/* tombol arah dan zoom */
.viewControlButton { height: 42px; width: 42px; bottom: 14px; border-radius: 12px; background: var(--t-bg) !important; border: 1px solid var(--t-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.no-touch .viewControlButton:hover { background: var(--t-bg2) !important; border-color: var(--t-gold); }
.viewControlButton .icon { top: 6px; right: 6px; }

/* titik pindah lokasi */
.link-hotspot-tooltip { background: var(--t-bg) !important; border: 1px solid var(--t-line); border-radius: 10px; font-weight: 700; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.link-hotspot { opacity: .95; }
.link-hotspot-icon { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)) sepia(1) saturate(3.4) hue-rotate(-12deg) brightness(1.05); }

/* label merek */
#iiqBrand { position: absolute; right: 8px; bottom: 14px; z-index: 5; display: flex; align-items: center; gap: .6rem; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--t-bg); border: 1px solid var(--t-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; text-decoration: none; }
#iiqBrand img { width: 34px; height: 34px; border-radius: 50%; background: #fff; padding: 2px; object-fit: contain; }
#iiqBrand span { display: flex; flex-direction: column; line-height: 1.2; }
#iiqBrand strong { font: 700 .86rem/1.2 "Fraunces", Georgia, serif; }
#iiqBrand small { font-size: .68rem; color: var(--t-gold2); font-weight: 700; letter-spacing: .04em; }
body.framed #iiqBrand { display: none; }
@media (max-width: 760px) { #iiqBrand { display: none; } #titleBar { right: 116px; } #titleBar .sceneName { font-size: .9rem; } }