/* v448: hub tombol tengah menu HP ala Pokemon Go: orb tengah memunculkan 3 tombol bulat berbentuk kipas (LIVE kiri, CONNECT atas, Woy! kanan) + tombol tutup di titik orb. */
.hub{position:fixed;inset:0;z-index:30;display:none}
.hub.on{display:block}
.hub-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 100%,rgba(11,34,85,.55),rgba(0,0,0,.72) 70%);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
/* titik pusat kipas = tengah orb di menu bawah */
.hub-box{position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));width:0;height:0}
.hub-b{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:6px;width:92px;margin:-34px 0 0 -46px;transform:translate(var(--x),var(--y));background:none;border:0;padding:0;color:#fff;font:700 12.5px/1.15 system-ui,sans-serif;text-decoration:none;text-shadow:0 1px 4px rgba(0,0,0,.8);cursor:pointer;-webkit-tap-highlight-color:transparent;animation:hubin .34s cubic-bezier(.3,1.5,.5,1) both}
.hub-b span{position:relative;display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,#e9eefb 70%);color:#0b2255;border:3px solid var(--a2);box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 -4px 8px rgba(11,34,85,.12);transition:transform .15s}
.hub-b.hub-c span{width:80px;height:80px;margin-top:-6px;background:radial-gradient(circle at 32% 26%,#2a4a94,#0b2255 75%);color:#fff;border-color:#fff}
[data-theme=dark] .hub-b span{background:radial-gradient(circle at 32% 26%,#1d2a47,#0a1224 75%);color:#fff}
[data-theme=dark] .hub-b.hub-c span{background:radial-gradient(circle at 32% 26%,#fff,#d8dfee 75%);color:#0b2255;border-color:var(--a2)}
.hub-b.hub-l:not(.hub-s) span::after,.hub-b.hub-l.hub-s span::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid #e11d2e;opacity:0;animation:hubpulse 2s ease-out infinite}
/* v450: LIVE = navy gelap + merah; Woy! = oranye (sama di tema terang dan gelap) */
.hub-b.hub-l span,[data-theme=dark] .hub-b.hub-l span{background:radial-gradient(circle at 32% 24%,#2a3d7a,#0b1636 72%);color:#ff3b4a;border-color:#e11d2e;box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 16px rgba(225,29,46,.45),inset 0 -4px 8px rgba(0,0,0,.35)}
.hub-b.hub-l span svg{filter:drop-shadow(0 0 4px rgba(255,59,74,.7))}
.hub-b.hub-w span,[data-theme=dark] .hub-b.hub-w span{background:radial-gradient(circle at 32% 24%,#ffc46b,#f97316 72%);color:#fff;border-color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.45),0 0 16px rgba(249,115,22,.5),inset 0 -4px 8px rgba(154,52,18,.3)}
.hub-b.hub-s span{filter:saturate(.9)}
.hub-b i{position:absolute;top:-6px;right:6px;font-style:normal;background:#e11d2e;color:#fff;font:800 9px/1 system-ui,sans-serif;letter-spacing:.5px;text-transform:uppercase;padding:3px 6px;border-radius:7px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.hub-b:active span{transform:scale(.92)}
.hub-x{position:absolute;left:-27px;top:-27px;width:54px;height:54px;box-sizing:border-box;border-radius:50%;border:4px solid var(--c);background:var(--a);color:#fff;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.28);-webkit-tap-highlight-color:transparent}
/* v479: warna bola sama dengan bola asli di menu bawah (terang = warna aksen, gelap = putih, Reels = putih + tepi cyan/merah); bola tidak berputar/membesar, hanya ikon di dalamnya yang bergerak */
[data-theme=dark] .hub-x{background:#fff;color:#000}
body.rls .hub-x{background:#fff;color:#000;box-shadow:-3px 0 0 #25f4ee,3px 0 0 #fe2c55}
@keyframes hubin{from{opacity:0;transform:translate(0,0) scale(.3)}to{opacity:1;transform:translate(var(--x),var(--y)) scale(1)}}
/* v480: ikon orb di tengah: saat menu dibuka bola berputar searah jarum jam (cincin + pita + inti berdenyut), saat ditutup berputar BERLAWANAN arah, lalu kipas menutup */
.hub-x .orbx{display:block;overflow:visible;transform-origin:50% 50%}
.hub-x .orbx-b,.hub-x .orbx-d,.hub-x .orbx-r{transform-origin:12px 12px}
.hub.on:not(.cl) .hub-x .orbx{animation:orbopen .6s cubic-bezier(.3,1.2,.4,1) both}
.hub.on:not(.cl) .hub-x .orbx-d{animation:orbpulse .6s ease-in-out both}
.hub.cl .hub-x .orbx{animation:orbclose .42s cubic-bezier(.5,0,.3,1) both}
.hub.cl .hub-x .orbx-d{animation:orbpulse .42s ease-in-out both}
@keyframes orbopen{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes orbclose{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes orbpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.hub.cl .hub-b{animation:hubout .34s cubic-bezier(.5,0,.7,.2) both}
.hub.cl .hub-bg{opacity:0;transition:opacity .34s}
@keyframes hubout{from{opacity:1;transform:translate(var(--x),var(--y)) scale(1)}to{opacity:0;transform:translate(0,0) scale(.3)}}
@keyframes hubpulse{0%{opacity:.7;transform:scale(.92)}100%{opacity:0;transform:scale(1.28)}}
@media (prefers-reduced-motion:reduce){.hub-b,.hub.on .hub-x .orbx,.hub.on .hub-x .orbx-d,.hub.cl .hub-x .orbx,.hub.cl .hub-x .orbx-d{animation:none!important}.hub-b.hub-l span::after{animation:none}}
@media(min-width:900px){.hub{display:none!important}}