/* ==========================================================
   1. VARIABEL WARNA (INSTITUTIONAL PALETTE)
   ========================================================== */
:root {
    /* PRIMARY COLORS */
    --teal-primary: rgb(21, 165, 155);
    --teal-light: #47D4CC;
    --teal-dark: #0D7A70;
    --bs-primary: #15A59B;
    --teal-optional: #CDDC29;
    
    /* NEUTRALS (SLATE & GRAY) */
    --gray-900: #111827;
    --gray-800: #1F2937;
    --gray-750: #252d3a;
    --gray-700: #374151;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* FUNCTIONAL MAPPING */
    --color-brand: var(--teal-primary);
    --color-brand-hover: var(--teal-dark);
    --color-ui-bg: var(--gray-900);      /* Background Menu/List */
    --color-ui-item: var(--gray-700);    /* Item List Inactive */
    --color-text-main: #ffffff;          /* Teks pada UI gelap */
    --color-text-muted: var(--gray-400);
}

/* ==========================================================
   2. GLOBAL RESET
   ========================================================== */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -ms-content-zooming: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    /* Font Poppins untuk kesan modern */
    font-family: 'Poppins', "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 16px;
    background-color: var(--teal-primary) !important; /* Latar belakang utama */
    color: var(--color-text-main);
}

a, a:hover, a:active, a:visited {
    text-decoration: none;
    color: inherit;
}

#pano {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ==========================================================
   3. TITLE BAR (HEADER) - Dominan Teal
   ========================================================== */
#titleBar {
    position: absolute;
    top: 0;
    left: 0;
    right: 40px;
    height: 40px;
    text-align: center;
    z-index: 20 !important;
    pointer-events: none;
}

.mobile #titleBar {
    height: 50px;
    right: 50px;
}

/* Penyesuaian posisi jika ada tombol lain */
body.fullscreen-enabled #titleBar { right: 80px; }
body.fullscreen-enabled.mobile #titleBar { right: 100px; }
body.multiple-scenes #titleBar { left: 40px; }
body.multiple-scenes.mobile #titleBar { left: 50px; }

#titleBar .sceneName {
    width: 100%;
    height: 100%;
    line-height: 30px;
    padding: 5px;
    
    /* BRANDING UTAMA: Background TEAL */
    background-color: var(--teal-primary) !important;
    color: #ffffff !important;
    pointer-events: auto;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600; /* Sedikit lebih tebal agar terbaca */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sedikit bayangan */

    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.mobile #titleBar .sceneName {
    line-height: 40px;
}

/* ==========================================================
   4. CONTROL BUTTONS (Navigasi Atas & Bawah)
   ========================================================== */
/* Style Dasar Tombol */
#fullscreenToggle, 
#autorotateToggle, 
#sceneListToggle, 
.viewControlButton {
    background-color: var(--teal-dark) !important; /* Default gelap */
    opacity: 0.8;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* Hover Effect: Berubah jadi Teal */
.no-touch #fullscreenToggle:hover, 
.no-touch #autorotateToggle:hover, 
.no-touch #sceneListToggle:hover,
.viewControlButton:hover {
    background-color: var(--teal-optional) !important;
    opacity: 1;
}

/* -- Posisi & Ukuran Tombol -- */
#fullscreenToggle, #autorotateToggle, #sceneListToggle {
    display: block;
    width: 40px;
    height: 40px;
    padding: 5px;
    position: absolute;
    top: 0;
    z-index: 50 !important; 
    cursor: pointer;
    transition: background-color 0.2s;
}

.mobile #fullscreenToggle, .mobile #autorotateToggle, .mobile #sceneListToggle {
    width: 50px;
    height: 50px;
}

/* Fullscreen Button */
#fullscreenToggle { display: none; right: 0; }
body.fullscreen-enabled #fullscreenToggle { display: block; }

/* Autorotate Button */
#autorotateToggle { display: block; right: 0; }
body.fullscreen-enabled #autorotateToggle { right: 40px; }
body.fullscreen-enabled.mobile #autorotateToggle { right: 50px; }

/* Scene List Toggle */
#sceneListToggle { left: 0; }
#sceneListToggle .text {
    position: absolute;
    top: 5px; left: 15px; width: 100%; line-height: 30px;
}

/* Icons inside buttons */
.icon {
    position: absolute;
    top: 5px; right: 5px; width: 30px; height: 30px;
}
.mobile .icon { top: 10px; right: 10px; }

/* Icon States (On/Off) */
.icon.on { display: none; }
.icon.off { display: block; }
.enabled .icon.on { display: block; }
.enabled .icon.off { display: none; }

/* ==========================================================
   5. SCENE LIST MENU (Sidebar)
   ========================================================== */
#sceneList {
    position: absolute;
    top: 0;
    left: -220px;
    padding-top: 40px;
    width: 220px;
    /* max-height: 100%; */
    height: 100vh !important;
    overflow-x: hidden;
    overflow-y: auto;
    margin-left: 0;
    transition: margin-left 0.5s ease-in-out;
    z-index: 10;
    background-color: var(--teal-light) !important;
}

.mobile #sceneList { padding-top: 50px; width: 100%; height: 100%; left: -100%; }
.mobile #sceneList.enabled { margin-left: 100%; }
#sceneList.enabled { margin-left: 220px; }

/* Container Menu */
#sceneList .scenes {
    width: 100%;
    /* height: 100%; */
    min-height: 100vh !important; 
    height: auto !important;
    /* Background Menu Gelap (Gray 900) */
    background-color: var(--teal-light) !important;
    opacity: 0.98;
}

/* Item Scene Individual */
#sceneList .scene {
    display: block;
    width: 100%;
    height: 30px;
    transition: background-color 0.2s;
    border-bottom: 1px solid var(--gray-800); /* Separator halus */
}

/* Hapus border bawah pada item terakhir agar terlihat menyatu dengan background bawah */
#sceneList .scene:last-child {
    border-bottom: none;
}

.mobile #sceneList .scene { height: 40px; }

#sceneList .scene .text {
    width: 100%;
    height: 100%;
    padding: 0 15px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--slate-200); /* Teks sedikit abu agar tidak menyilaukan */
}
.mobile #sceneList .scene .text { line-height: 40px; }

/* Hover Item */
.no-touch #sceneList .scene:hover {
    background-color: var(--teal-optional) !important;
    color: #fff;
}

/* Item yang sedang AKTIF (Current) */
#sceneList .scene.current {
    /* Gunakan TEAL Utama untuk penanda lokasi aktif */
    background-color: var(--teal-primary) !important;
    color: #ffffff !important;
}
#sceneList .scene.current .text { color: #ffffff; }

body.single-scene #sceneList, body.single-scene #sceneListToggle { display: none; }

/* ==========================================================
   6. LINK HOTSPOT (Panah Navigasi)
   ========================================================== */
.link-hotspot {
    width: 60px; height: 60px;
    margin-left: -30px; margin-top: -30px;
    opacity: 0.9;
    transition: opacity 0.2s;
}
.no-touch .link-hotspot:hover { opacity: 1; }
.mobile .link-hotspot { width: 70px; height: 70px; top: 19px; }

.link-hotspot-icon {
    width: 100%; height: 100%; cursor: pointer;
    /* Optional: Jika icon panah ingin diberi tint warna teal bisa pakai filter svg, 
       tapi biasanya gambar png putih sudah cukup */
}

/* Tooltip Navigasi */
.link-hotspot-tooltip {
    position: absolute;
    left: 100%; top: 14px; margin-left: 3px;
    font-size: 14px; /* Ukuran font standar */
    max-width: 300px;
    padding: 8px 12px;
    border-radius: 4px;
    
    /* Background Tooltip: Gray Dark */
    background-color: var(--gray-800) !important;
    color: #fff;
    border: 1px solid var(--teal-primary); /* Aksen border teal tipis */
    
    white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
    cursor: pointer; opacity: 0;
    transform: translateX(-8px);
    transition: transform 0.3s, opacity 0.3s;
    pointer-events: none;
}

.no-touch .link-hotspot:hover .link-hotspot-tooltip {
    opacity: 1; transform: translateX(0); pointer-events: all;
}

/* ==========================================================
   7. INFO HOTSPOT (Tombol 'i')
   ========================================================== */
.info-hotspot {
    line-height: 1.2em; opacity: 0.9; transition: opacity 0.2s 0.2s;
}
.no-touch .info-hotspot:hover { opacity: 1; transition: opacity 0.2s; }
.info-hotspot.visible { opacity: 1; }

/* Header / Icon 'i' */
.info-hotspot .info-hotspot-header {
    width: 40px; height: 40px;
    border-radius: 20px;
    
    /* Warna ICON 'i': TEAL PRIMARY */
    background-color: var(--teal-primary) !important;
    
    cursor: pointer;
    transition: width 0.3s ease-in-out 0.5s, border-radius 0.3s ease-in-out 0.5s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.mobile .info-hotspot .info-hotspot-header { width: 50px; height: 50px; border-radius: 25px; }

/* Saat Hover / Expand (Desktop) */
.desktop.no-touch .info-hotspot .info-hotspot-header:hover {
    width: 260px; border-radius: 5px;
    transition: width 0.3s ease-in-out, border-radius 0.3s ease-in-out;
}
.desktop .info-hotspot.visible .info-hotspot-header,
.desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover {
    width: 260px; border-radius: 5px;
    border-bottom-right-radius: 0; border-bottom-left-radius: 0;
}

/* Icon & Title Wrapper */
.info-hotspot .info-hotspot-icon-wrapper { width: 40px; height: 40px; }
.mobile .info-hotspot .info-hotspot-icon-wrapper { width: 50px; height: 50px; }
.info-hotspot .info-hotspot-icon { width: 90%; height: 90%; margin: 5%; }

.info-hotspot .info-hotspot-title-wrapper {
    position: absolute; left: 40px; top: 0; width: 0; height: 40px;
    padding: 0; overflow: hidden;
    transition: width 0s 0.4s, padding 0s 0.4s;
}
.desktop .info-hotspot.visible .info-hotspot-title-wrapper,
.desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper {
    width: 220px; padding: 0 5px;
    transition: width 0s 0.4s, padding 0s 0.4s;
}
.info-hotspot .info-hotspot-title-wrapper:before {
    content: ''; display: inline-block; vertical-align: middle; height: 100%;
}
.info-hotspot .info-hotspot-title {
    display: inline-block; vertical-align: middle;
    color: #fff; font-weight: 500;
}

/* Tombol Close (X) pada Info Hotspot */
.info-hotspot .info-hotspot-close-wrapper {
    position: absolute; left: 260px; top: 0; height: 40px; width: 40px;
    border-top-right-radius: 5px;
    
    /* Warna Tombol Close: TEAL DARK (Agar kontras sedikit dengan headernya) */
    background-color: var(--teal-dark) !important;
    
    visibility: hidden;
    transform: perspective(200px) rotateY(90deg); transform-origin: 0 50% 0;
    transition: transform 0.3s 0.3s, visibility 0s 0.6s;
}
.desktop .info-hotspot.visible .info-hotspot-close-wrapper {
    visibility: visible; transform: perspective(200px) rotateY(0deg);
    transition: transform 0.3s, visibility 0s 0s;
}
.info-hotspot .info-hotspot-close-icon { width: 70%; height: 70%; margin: 15%; }

/* ISI TEKS POPUP INFO */
.info-hotspot .info-hotspot-text {
    position: absolute; width: 300px; height: auto; max-height: 200px;
    top: 40px; left: 0; padding: 15px;
    
    /* Background Isi Teks: GRAY 900 (Gelap) */
    background-color: var(--gray-900) !important;
    color: var(--slate-100) !important;
    border-bottom: 2px solid var(--teal-primary); /* Aksen bawah */
    
    border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;
    overflow-y: auto; visibility: hidden;
    transform: perspective(200px) rotateX(-89.999deg); transform-origin: 50% 0 0;
    transition: transform 0.3s, visibility 0s 0.3s;
}
.desktop .info-hotspot.visible .info-hotspot-text {
    visibility: visible; transform: perspective(200px) rotateX(0deg);
    transition: transform 0.3s 0.3s, visibility 0s 0s;
}

/* ==========================================================
   8. INFO MODAL (MOBILE VIEW)
   ========================================================== */
.desktop .info-hotspot-modal { display: none; }

.info-hotspot-modal {
    top: 0; left: 0; position: absolute; width: 100%; height: 100%;
    overflow: hidden; z-index: 11000 !important;
    background-color: rgba(0,0,0,0.6); /* Backdrop dimming */
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease-in-out 0.5s, visibility 0s 0.7s;
}
.info-hotspot-modal.visible {
    opacity: 1; visibility: visible;
    transition: opacity 0.2s ease-in-out, visibility 0s 0s;
}

.info-hotspot-modal .info-hotspot-header {
    position: absolute; top: 60px; left: 10px; right: 10px; width: auto; height: 50px;
    
    /* Header Modal Mobile: TEAL PRIMARY */
    background-color: var(--teal-primary) !important;
    
    opacity: 0; transition: opacity 0.3s ease-in-out 0.2s;
    border-top-left-radius: 5px; border-top-right-radius: 5px;
}
.info-hotspot-modal.visible .info-hotspot-header { opacity: 1; }

.info-hotspot-modal .info-hotspot-title-wrapper {
    position: absolute; top: 0; left: 50px; right: 50px; width: auto; height: 50px; padding: 0 10px;
}
.info-hotspot-modal .info-hotspot-title-wrapper:before {
    content: ''; display: inline-block; vertical-align: middle; height: 100%;
}
.info-hotspot-modal .info-hotspot-title {
    display: inline-block; vertical-align: middle; color: #fff; font-weight: 600;
}

.info-hotspot-modal .info-hotspot-close-wrapper {
    position: absolute; top: 0; right: 0; width: 50px; height: 50px;
    background-color: var(--teal-dark) !important;
    cursor: pointer; border-top-right-radius: 5px;
}
.info-hotspot-modal .info-hotspot-close-icon { width: 70%; height: 70%; margin: 15%; }

.info-hotspot-modal .info-hotspot-text {
    position: absolute; top: 110px; bottom: 10px; left: 10px; right: 10px;
    padding: 20px;
    
    /* Isi Teks Mobile: Gray 900 */
    background-color: var(--gray-900) !important;
    color: var(--slate-100) !important;
    
    overflow-y: auto; opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
}
.info-hotspot-modal.visible .info-hotspot-text {
    opacity: 1; transition: opacity 0.3s ease-in-out 0.4s;
}

/* ==========================================================
   9. VIEW CONTROL BUTTONS (BOTTOM CENTER)
   ========================================================== */
.viewControlButton {
    display: none; position: absolute; bottom: 0; left: 50%;
    width: 40px; height: 40px; padding: 5px;
}
body.view-control-buttons .viewControlButton { display: block; }

/* Sembunyikan jika layar terlalu kecil */
@media (max-width: 600px) {
    body.view-control-buttons .viewControlButton { display: none; }
}

.viewControlButton .icon { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; }

/* Grid Positioning for Controls */
.viewControlButton-1 { margin-left: -145px; }
.viewControlButton-2 { margin-left: -95px; }
.viewControlButton-3 { margin-left: -45px; }
.viewControlButton-4 { margin-left: 5px; }
.viewControlButton-5 { margin-left: 55px; }
.viewControlButton-6 { margin-left: 105px; }