*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
}

#landing{
    position:relative;
    width:100%;
    height:100vh;

    background:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url('../panoramas/depan.jpg');
    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;
}

.hero{
    text-align:center;
    color:white;
    padding:24px;
}

.hero h1{
    font-size:clamp(2.5rem, 7vw, 4rem);
}

.hero button{
    margin-top:20px;
    padding:12px 25px;

    border:none;
    border-radius:30px;

    cursor:pointer;
}

#viewerSection{
    position:relative;
    display:none;
    width:100%;
    height:100vh;
}

#panorama{
    width:100%;
    height:100%;
}

#backBtn{
    position:absolute;
    z-index:1000;

    top:18px;
    right:18px;

    min-height:44px;
    padding:0 16px;
    border:none;
    border-radius:8px;
    background:rgba(0,0,0,.68);
    color:white;
    cursor:pointer;
    font-weight:600;
    box-shadow:0 5px 16px rgba(0,0,0,.22);
    backdrop-filter:blur(4px);
}

#debugPanel{
    position:absolute;
    z-index:1000;
    top:20px;
    left:20px;
    width:min(340px, calc(100vw - 40px));
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:8px;
    background:rgba(0,0,0,.72);
    color:white;
    font-size:13px;
    line-height:1.55;
    box-shadow:0 10px 24px rgba(0,0,0,.28);
    backdrop-filter:blur(4px);
}

#debugPanel code{
    display:inline-block;
    padding:2px 5px;
    border-radius:4px;
    background:rgba(255,255,255,.12);
    color:#d6f6ff;
    font-family:Consolas, monospace;
    font-size:12px;
}

#debugCopied{
    margin-top:6px;
    color:#bfefff;
    font-size:12px;
}

#tourControls{
    position:absolute;
    z-index:1000;
    right:18px;
    top:50%;
    display:flex;
    flex-direction:column;
    gap:12px;
    transform:translateY(-50%);
}

.tour-control-button{
    display:flex;
    justify-content:center;
    align-items:center;
    width:48px;
    height:48px;
    border:2px solid rgba(0,0,0,.12);
    border-radius:50%;
    background:rgba(245,245,245,.94);
    color:#252525;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
    backdrop-filter:blur(4px);
}

.tour-control-button:hover,
.tour-control-button.is-active{
    background:white;
    color:#1799f6;
}

.tour-control-button:focus-visible{
    outline:3px solid rgba(23,153,246,.75);
    outline-offset:3px;
}

.tour-control-button svg{
    width:29px;
    height:29px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

#thumbnailContainer{
    position:absolute;
    z-index:1000;
    top:50%;
    right:78px;
    display:none;
    width:180px;
    max-height:min(72vh, 480px);
    padding:8px;
    border-radius:8px;
    background:rgba(0,0,0,.72);
    box-shadow:0 10px 24px rgba(0,0,0,.28);
    overflow:auto;
    transform:translateY(-50%);
    backdrop-filter:blur(4px);
}

#thumbnailContainer.is-open{
    display:block;
}

.map-scene-button{
    display:block;
    width:100%;
    margin-bottom:6px;
    padding:9px 10px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:6px;
    background:rgba(255,255,255,.08);
    color:white;
    cursor:pointer;
    font-size:13px;
    text-align:left;
}

.map-scene-button:last-child{
    margin-bottom:0;
}

.map-scene-button:hover,
.map-scene-button.is-active{
    background:#1799f6;
    border-color:#1799f6;
}

.tour-hotspot-wrapper{
    width:64px;
    height:64px;
    margin-left:-32px;
    margin-top:-32px;
    background:transparent;
}

.info-hotspot-wrapper{
    width:24px;
    height:24px;
    margin-left:-12px;
    margin-top:-12px;
    background:transparent;
}

.tour-hotspot{
    position:absolute;
    left:0;
    top:0;
    display:flex;
    justify-content:center;
    align-items:center;
    width:64px;
    height:64px;
    border-radius:50%;
    background:white;
    color:#111;
    box-shadow:0 6px 18px rgba(0,0,0,.35);
    cursor:pointer;
    touch-action:manipulation;
    user-select:none;
    -webkit-user-drag:none;
}

.tour-hotspot:focus-visible{
    outline:3px solid rgba(255,255,255,.9);
    outline-offset:3px;
}

.info-hotspot{
    position:absolute;
    left:0;
    top:0;
    display:flex;
    justify-content:center;
    align-items:center;
    width:24px;
    height:24px;
    border:2px solid white;
    border-radius:50%;
    background:#3b82f6;
    color:white;
    box-shadow:0 3px 9px rgba(0,0,0,.35);
    cursor:pointer;
    padding:0;
    touch-action:manipulation;
    user-select:none;
    -webkit-user-drag:none;
}

.info-hotspot:focus-visible{
    outline:3px solid rgba(255,255,255,.9);
    outline-offset:3px;
}

.info-hotspot-icon{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    font-weight:700;
    font-size:17px;
    line-height:1;
}

.tour-hotspot-arrow{
    display:block;
    width:0;
    height:0;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
    border-left:25px solid #111;
    animation:hotspotMove 1s ease-in-out infinite;
    transform:rotate(var(--arrow-rotation, 0deg));
}

.tour-hotspot-label{
    position:absolute;
    left:50%;
    bottom:76px;
    transform:translateX(-50%);
    opacity:0;
    white-space:nowrap;
    padding:8px 12px;
    border-radius:6px;
    background:rgba(0,0,0,.76);
    color:white;
    font-size:16px;
    pointer-events:none;
    transition:opacity .18s ease;
}

.tour-hotspot:hover .tour-hotspot-label,
.tour-hotspot:focus-visible .tour-hotspot-label{
    opacity:1;
}

.tour-hotspot-label::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-8px;
    transform:translateX(-50%);
    border-width:8px 8px 0 8px;
    border-style:solid;
    border-color:rgba(0,0,0,.76) transparent transparent transparent;
}

.tour-hotspot-forward,
.tour-hotspot-north{
    --move-x:0;
    --move-y:-8px;
    --arrow-rotation:-90deg;
}

.tour-hotspot-back,
.tour-hotspot-south{
    --move-x:0;
    --move-y:8px;
    --arrow-rotation:90deg;
}

.tour-hotspot-left,
.tour-hotspot-west{
    --move-x:-8px;
    --move-y:0;
    --arrow-rotation:180deg;
}

.tour-hotspot-right,
.tour-hotspot-east{
    --move-x:8px;
    --move-y:0;
    --arrow-rotation:0deg;
}

@keyframes hotspotMove{
    0%,
    100%{
        translate:0 0;
    }

    50%{
        translate:var(--move-x, 6px) var(--move-y, 0);
    }
}

#infoPanel{
    display:none;

    position:absolute;

    top:54px;
    left:28px;

    width:clamp(205px, 25vw, 320px);

    background:rgba(255,255,255,.78);

    padding:7px 9px 12px;

    border:3px solid #1799f6;
    border-radius:7px;

    z-index:1000;

    box-shadow:0 10px 22px rgba(0,0,0,.28);
    backdrop-filter:blur(2px);
}

#infoPanel h2{
    margin:5px 0 6px;
    text-align:center;
    font-size:12px;
    font-weight:700;
}

#infoImage{
    display:none;
    width:100%;
    aspect-ratio:16 / 9;
    object-fit:cover;
    border-radius:5px;
    cursor:zoom-in;
}

.image-lightbox{
    position:fixed;
    inset:0;
    z-index:2000;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(0,0,0,.82);
    cursor:zoom-out;
}

.image-lightbox[hidden]{
    display:none;
}

#lightboxImage{
    max-width:min(100%, 1100px);
    max-height:calc(100vh - 48px);
    object-fit:contain;
    border-radius:6px;
    cursor:default;
}

#closeImageLightbox{
    position:absolute;
    top:16px;
    right:20px;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:#111;
    cursor:pointer;
    font-size:32px;
    line-height:1;
}

#infoDescription{
    font-size:12px;
    line-height:1.35;
    text-align:justify;
    color:#111;
}

#closeInfo{
    display:block;
    margin:10px auto 0;
    padding:7px 12px;
    border:none;
    border-radius:6px;
    background:#1799f6;
    color:white;
    cursor:pointer;
    font-weight:600;
    font-size:12px;
}

@media (max-width:640px){
    #debugPanel{
        top:72px;
        left:14px;
        width:calc(100vw - 28px);
        font-size:12px;
    }

    #tourControls{
        right:12px;
        gap:9px;
    }

    .tour-control-button{
        width:44px;
        height:44px;
    }

    .tour-control-button svg{
        width:26px;
        height:26px;
    }

    #thumbnailContainer{
        right:64px;
        width:154px;
    }

    #infoPanel{
        left:18px;
        right:18px;
        width:auto;
        max-width:260px;
    }
}