:root{--g:#00e676;--gd:#00c853;--gdim:rgba(0,230,118,0.12);--s:rgba(10,18,12,0.88);--b:rgba(255,255,255,0.08);--t:#f0fff4;--m:rgba(240,255,244,0.45)}
        *{box-sizing:border-box;margin:0;padding:0}
        body{font-family:'DM Sans',sans-serif;background:#050d07;color:var(--t);overflow:hidden;height:100vh;width:100vw}
        h1,h2,.syne{font-family:'Syne',sans-serif}

        body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.025;
            background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size:128px}

        /* ── SPLASH ── */
        #splash{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#050d07;overflow:hidden}
        #splash .bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,230,118,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,230,118,.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 70% 70% at center,black,transparent)}
        .glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(0,230,118,.08) 0%,transparent 70%);animation:pg 4s ease-in-out infinite;pointer-events:none;z-index:0}
        @keyframes pg{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.1);opacity:1}}
        .logo-ring{width:90px;height:90px;border-radius:50%;border:1.5px solid rgba(0,230,118,.3);display:flex;align-items:center;justify-content:center;position:relative;animation:rr 12s linear infinite;margin-bottom:28px;z-index:1}
        .logo-ring::before{content:'';position:absolute;width:110px;height:110px;border-radius:50%;border:1px dashed rgba(0,230,118,.12)}
        @keyframes rr{from{transform:rotate(0)}to{transform:rotate(360deg)}}
        .logo-inner{width:60px;height:60px;border-radius:50%;background:var(--gdim);display:flex;align-items:center;justify-content:center;animation:rr 12s linear infinite reverse}
        #splash h1{font-size:clamp(2.5rem,7vw,4.5rem);font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:6px;background:linear-gradient(135deg,#fff 40%,var(--g) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;position:relative;z-index:1}
        .sub{font-size:.7rem;letter-spacing:.35em;text-transform:uppercase;color:var(--g);margin-bottom:16px;opacity:.8;position:relative;z-index:1}
        .desc{font-size:.9rem;color:var(--m);text-align:center;max-width:340px;line-height:1.7;margin-bottom:44px;position:relative;z-index:1}
        .enter-btn{padding:14px 44px;background:var(--g);color:#050d07;font-family:'Syne',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;border:none;border-radius:100px;cursor:pointer;box-shadow:0 0 40px rgba(0,230,118,.25);transition:transform .2s,box-shadow .2s;position:relative;z-index:2}
        .enter-btn:hover{transform:scale(1.04);box-shadow:0 0 60px rgba(0,230,118,.4)}
        .enter-btn:active{transform:scale(.97)}
        #splash.out{animation:fadeOut .6s ease forwards}
        @keyframes fadeOut{to{opacity:0;pointer-events:none}}

        /* ── HOMEPAGE ── */
        #homepage{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:flex-start;background:#050d07;overflow-y:auto;padding:40px 16px 32px}
        #homepage .hbg{position:fixed;inset:0;background-image:linear-gradient(rgba(0,230,118,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,230,118,.03) 1px,transparent 1px);background-size:50px 50px;pointer-events:none}
        .hp-head{text-align:center;margin-bottom:32px;position:relative;z-index:1}
        .tag{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;background:var(--gdim);border:1px solid rgba(0,230,118,.2);border-radius:100px;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin-bottom:16px}
        .hp-head h1{font-size:clamp(1.8rem,6vw,3.8rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:10px}
        .hp-head h1 span{color:var(--g)}
        .hp-head p{font-size:.82rem}
        /* Grid 4 kolom desktop → 2 kolom tablet → 2 kolom HP */
        .floor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1120px;width:100%;position:relative;z-index:1}
        @media(max-width:860px){.floor-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
        /* Card tinggi: lebih pendek di mobile */
        .floor-card{position:relative;height:190px;border-radius:16px;overflow:hidden;cursor:pointer;border:1px solid var(--b);transition:border-color .3s,transform .3s;background:rgba(255,255,255,.02)}
        @media(max-width:860px){.floor-card{height:150px;border-radius:14px}}
        @media(max-width:480px){.floor-card{height:130px}}
        .floor-card:hover{border-color:rgba(0,230,118,.35);transform:translateY(-3px)}
        .floor-card:active{transform:scale(.98)}
        .floor-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;transition:opacity .4s,transform .5s}
        .floor-card:hover img{opacity:.45;transform:scale(1.05)}
        .floor-card .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,13,7,.95) 0%,transparent 55%)}
        .floor-card .cc{position:absolute;bottom:0;left:0;right:0;padding:14px 16px}
        .fnum{font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--g);margin-bottom:3px;font-weight:600}
        .fname{font-family:'Syne',sans-serif;font-size:clamp(1rem,3vw,1.3rem);font-weight:800;letter-spacing:-.02em;line-height:1}
        .fsub{font-size:.64rem;color:var(--m);margin-top:3px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
        @media(max-width:480px){.fsub{display:none}}
        .farr{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:var(--gdim);border:1px solid rgba(0,230,118,.2);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateX(-5px);transition:opacity .3s,transform .3s}
        .floor-card:hover .farr{opacity:1;transform:translateX(0)}
        /* Skeleton */
        .floor-card.skeleton img{display:none}
        .floor-card.skeleton .cc .fname{background:rgba(255,255,255,.08);color:transparent;border-radius:6px;animation:sk 1.4s ease infinite}
        @keyframes sk{0%,100%{opacity:.5}50%{opacity:1}}

        /* ── VIEWER ── */
        #viewer-container{position:fixed;inset:0;z-index:10;display:none;background:#000}

        /* ── LOADING ── */
        #loading-overlay{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(5,13,7,.95);backdrop-filter:blur(8px)}
        #loading-overlay.show{display:flex}
        .loader-ring{width:48px;height:48px;border-radius:50%;border:2px solid rgba(0,230,118,.15);border-top-color:var(--g);animation:spin 1s linear infinite;margin-bottom:16px}
        @keyframes spin{to{transform:rotate(360deg)}}
        #loading-overlay span{font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--g);opacity:.7}

        /* ── UI OVERLAY ── */
        #ui-overlay{position:fixed;inset:0;z-index:30;pointer-events:none;display:none}
        #ui-overlay.show{display:block}

        .top-bar{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;pointer-events:all}
        @media(max-width:480px){.top-bar{top:8px;left:8px;right:8px}}
        @media(max-width:480px){.glass-pill button{width:30px;height:30px;font-size:.65rem}}
        .glass-pill{background:var(--s);border:1px solid var(--b);border-radius:100px;display:flex;align-items:center;gap:4px;padding:5px;backdrop-filter:blur(16px)}
        .glass-pill button{background:none;border:none;cursor:pointer;color:var(--t);width:36px;height:36px;border-radius:100px;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:700;font-size:.72rem;transition:background .2s,color .2s}
        .glass-pill button.active{background:var(--g);color:#050d07}
        .glass-pill button:not(.active):hover{background:rgba(255,255,255,.06)}
        .glass-pill .div{width:1px;height:20px;background:var(--b);margin:0 2px}
        .home-btn{background:var(--s)!important;border:1px solid var(--b)!important;border-radius:100px!important;color:var(--t)!important}
        .home-btn:hover{border-color:rgba(255,60,60,.4)!important;background:rgba(255,60,60,.1)!important}

        #room-badge-container{position:absolute;top:72px;right:0;pointer-events:none}
        @media(min-width:768px){#room-badge-container{top:16px}}
        .room-badge{background:var(--s);border:1px solid var(--b);border-left:2px solid var(--g);border-radius:0 12px 12px 0;padding:10px 16px 10px 14px;backdrop-filter:blur(16px)}
        .bf{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--g);font-weight:600}
        .bn{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}

        /* ── BOTTOM NAV / SLIDER (Carousel) ── */
        .bottom-nav{position:absolute;bottom:16px;left:0;right:0;pointer-events:none;display:flex;justify-content:center;padding:0 8px}
        .slider-box{display:inline-flex;align-items:center;gap:8px;pointer-events:all;max-width:calc(min(100vw - 16px, 6 * 90px + 5 * 8px + 2 * 44px + 16px))}
        /* Panah solid */
        .slider-arrow{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:rgba(0,230,118,.45);border:2px solid rgba(0,230,118,.85);color:var(--g);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s,transform .15s;z-index:2}
        .slider-arrow:hover{background:rgba(0,230,118,.65);transform:scale(1.1)}
        .slider-arrow:active{transform:scale(.93)}
        .slider-arrow:disabled{opacity:.25;cursor:default;pointer-events:none}
        .slider-arrow svg{pointer-events:none;stroke:var(--g)}
        /* Carousel viewport — clip overflow, lebar pas 6 thumb */
        .slider-viewport{overflow:hidden;flex:1;min-width:0}
        #room-slider{display:flex;gap:8px;padding:4px 0 8px;transition:transform .32s cubic-bezier(.4,0,.2,1);will-change:transform}
        /* Thumb */
        .room-thumb{flex:none;width:90px;height:60px;border-radius:10px;overflow:hidden;cursor:pointer;position:relative;border:1.5px solid rgba(255,255,255,.14);transition:border-color .22s,transform .22s}
        .room-thumb.active{border-color:var(--g);transform:translateY(-4px);box-shadow:0 6px 20px rgba(0,230,118,.25)}
        .room-thumb:not(.active):hover{border-color:rgba(0,230,118,.38);transform:translateY(-2px)}
        .room-thumb img{width:100%;height:100%;object-fit:cover;opacity:.6;transition:opacity .22s}
        .room-thumb.active img{opacity:.85}
        .thumb-label{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:4px;background:linear-gradient(to top,rgba(5,13,7,.78) 0%,transparent 55%)}
        .thumb-label span{font-family:'Syne',sans-serif;font-size:.52rem;font-weight:700;text-transform:uppercase;text-align:center;letter-spacing:.02em;line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.9);color:#fff}
        /* Mobile: page-based, 4 thumb, ukuran lebih kecil */
        @media(max-width:540px){
            .slider-box{max-width:calc(min(100vw - 16px, 4 * 76px + 3 * 8px + 2 * 44px + 16px))}
            #room-slider{gap:6px}
            .room-thumb{width:76px;height:52px;border-radius:8px}
            .thumb-label span{font-size:.48rem}
        }

        /* ── MODAL ── */
        #modal-overlay{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.88);backdrop-filter:blur(14px);padding:12px}
        #modal-overlay.show{display:flex}
        .modal-box{width:100%;max-width:700px;background:#0a150c;border:1px solid rgba(0,230,118,.15);border-radius:18px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.7);animation:mIn .28s cubic-bezier(.34,1.4,.64,1) forwards;max-height:calc(100vh - 24px);display:flex;flex-direction:column}
        @keyframes mIn{from{opacity:0;transform:scale(.93) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}
        /* Video */
        .video-wrap{position:relative;padding-bottom:56.25%;background:#000;flex-shrink:0}
        .video-wrap iframe{position:absolute;inset:0;width:100%;height:100%}
        /* Info */
        .info-body{padding:22px 24px;overflow-y:auto;flex:1}
        .info-body h3{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:800;margin-bottom:10px;color:var(--t)}
        .info-body p{font-size:.84rem;color:var(--m);line-height:1.75;white-space:pre-wrap}
        /* Image modal — foto tampil utuh, tidak terpotong */
        .img-modal-wrap{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;background:#000;min-height:160px}
        .img-modal-wrap img{width:100%;height:auto;object-fit:contain;display:block;max-height:calc(100vh - 140px)}
        /* Link button */
        .link-btn{padding:7px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:var(--t);font-family:'Syne',sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;border-radius:100px;cursor:pointer;transition:background .2s,border-color .2s;text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
        .link-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
        /* File/download modal */
        .file-modal-body{padding:28px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
        .file-icon{width:64px;height:64px;border-radius:16px;background:rgba(0,230,118,.1);border:1px solid rgba(0,230,118,.2);display:flex;align-items:center;justify-content:center}
        .file-name{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:var(--t);word-break:break-all}
        .file-desc{font-size:.78rem;color:var(--m);line-height:1.6;max-width:380px}
        .file-size{font-size:.68rem;color:rgba(0,230,118,.6);font-family:monospace}
        /* Footer */
        .modal-footer{padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(0,230,118,.03);border-top:1px solid rgba(0,230,118,.08);flex-shrink:0;flex-wrap:wrap}
        .modal-title{font-family:'Syne',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .modal-actions{display:flex;gap:8px;flex-shrink:0}
        .close-btn{padding:7px 16px;background:rgba(255,60,60,.12);border:1px solid rgba(255,60,60,.25);color:#ff6060;font-family:'Syne',sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;border-radius:100px;cursor:pointer;transition:background .2s;white-space:nowrap}
        .close-btn:hover{background:rgba(255,60,60,.22)}
        .dl-btn{padding:7px 16px;background:rgba(0,230,118,.15);border:1px solid rgba(0,230,118,.3);color:var(--g);font-family:'Syne',sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;border-radius:100px;cursor:pointer;transition:background .2s;text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
        .dl-btn:hover{background:rgba(0,230,118,.25)}
        @media(max-width:480px){.modal-footer{padding:10px 14px}.info-body{padding:16px 18px}.file-modal-body{padding:20px 16px}}
        .slide-up{animation:su .5s cubic-bezier(.22,1,.36,1) both}
        @keyframes su{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
        .s1{animation-delay:.05s}.s2{animation-delay:.12s}.s3{animation-delay:.19s}
        .s1{animation-delay:.05s}.s2{animation-delay:.12s}.s3{animation-delay:.19s}

        /* ── VISITOR COUNTER ── */
        .visitor-section{margin-top:28px;max-width:420px;width:100%;position:relative;z-index:1}
        .visitor-label{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:var(--gdim);border:1px solid rgba(0,230,118,.18);border-radius:100px;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin-bottom:12px}
        .visitor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
        .visitor-card{background:var(--s);border:1px solid var(--b);border-radius:14px;padding:14px 10px;text-align:center;backdrop-filter:blur(12px);transition:border-color .3s,transform .3s}
        .visitor-card:hover{border-color:rgba(0,230,118,.3);transform:translateY(-2px)}
        .vc-icon{display:flex;align-items:center;justify-content:center;margin:0 auto 8px;width:32px;height:32px;border-radius:50%;background:var(--gdim);border:1px solid rgba(0,230,118,.15)}
        .vc-num{font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800;color:var(--g);letter-spacing:-.02em;line-height:1}
        .vc-label{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--m);margin-top:4px;font-weight:500}
        @media(max-width:480px){.visitor-section{max-width:320px}.vc-num{font-size:1.1rem}.visitor-card{padding:10px 8px;border-radius:10px}}
        .version-footer{margin-top:18px;font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(0,230,118,.3);position:relative;z-index:1;text-align:center;padding-bottom:12px}